From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pl/web/api/attr/index.html | 164 +++++ files/pl/web/api/audiobuffer/index.html | 174 +++++ .../createdynamicscompressor/index.html | 142 ++++ files/pl/web/api/audiocontext/index.html | 293 ++++++++ files/pl/web/api/audioparam/index.html | 224 ++++++ .../web/api/audioparam/setvalueattime/index.html | 182 +++++ files/pl/web/api/cache/index.html | 121 ++++ .../api/canvas_api/tutorial/basic_usage/index.html | 169 +++++ files/pl/web/api/canvas_api/tutorial/index.html | 60 ++ .../tutorial/optymalizacja_canvas/index.html | 119 +++ .../tutorial/rysowanie_ksztaltow/index.html | 571 +++++++++++++++ files/pl/web/api/childnode/index.html | 190 +++++ files/pl/web/api/childnode/remove/index.html | 91 +++ files/pl/web/api/console/index.html | 232 ++++++ files/pl/web/api/console/log/index.html | 69 ++ files/pl/web/api/cssnumericvalue/div/index.html | 59 ++ files/pl/web/api/cssnumericvalue/index.html | 113 +++ files/pl/web/api/cssrule/index.html | 97 +++ files/pl/web/api/document/activeelement/index.html | 26 + files/pl/web/api/document/alinkcolor/index.html | 24 + files/pl/web/api/document/anchors/index.html | 38 + files/pl/web/api/document/applets/index.html | 26 + files/pl/web/api/document/bgcolor/index.html | 33 + files/pl/web/api/document/body/index.html | 31 + files/pl/web/api/document/characterset/index.html | 26 + files/pl/web/api/document/clear/index.html | 19 + files/pl/web/api/document/close/index.html | 26 + files/pl/web/api/document/compatmode/index.html | 32 + files/pl/web/api/document/cookie/index.html | 49 ++ .../pl/web/api/document/createattribute/index.html | 29 + .../api/document/createdocumentfragment/index.html | 43 ++ files/pl/web/api/document/createelement/index.html | 74 ++ files/pl/web/api/document/createevent/index.html | 134 ++++ files/pl/web/api/document/createrange/index.html | 29 + .../pl/web/api/document/createtextnode/index.html | 62 ++ files/pl/web/api/document/defaultview/index.html | 24 + files/pl/web/api/document/designmode/index.html | 53 ++ files/pl/web/api/document/doctype/index.html | 21 + .../pl/web/api/document/documentelement/index.html | 60 ++ files/pl/web/api/document/domain/index.html | 30 + files/pl/web/api/document/drag_event/index.html | 333 +++++++++ files/pl/web/api/document/embeds/index.html | 22 + files/pl/web/api/document/execcommand/index.html | 280 ++++++++ files/pl/web/api/document/fgcolor/index.html | 28 + files/pl/web/api/document/firstchild/index.html | 36 + files/pl/web/api/document/forms/index.html | 45 ++ .../pl/web/api/document/getelementbyid/index.html | 67 ++ .../api/document/getelementsbyclassname/index.html | 82 +++ .../web/api/document/getelementsbyname/index.html | 35 + .../api/document/getelementsbytagname/index.html | 108 +++ files/pl/web/api/document/hasfocus/index.html | 25 + files/pl/web/api/document/head/index.html | 110 +++ files/pl/web/api/document/height/index.html | 34 + files/pl/web/api/document/images/index.html | 31 + .../pl/web/api/document/implementation/index.html | 21 + files/pl/web/api/document/importnode/index.html | 57 ++ files/pl/web/api/document/index.html | 332 +++++++++ files/pl/web/api/document/lastmodified/index.html | 25 + files/pl/web/api/document/linkcolor/index.html | 33 + files/pl/web/api/document/links/index.html | 30 + files/pl/web/api/document/location/index.html | 37 + files/pl/web/api/document/namespaceuri/index.html | 25 + files/pl/web/api/document/open/index.html | 40 ++ files/pl/web/api/document/plugins/index.html | 40 ++ files/pl/web/api/document/queryselector/index.html | 159 ++++ files/pl/web/api/document/referrer/index.html | 22 + .../pl/web/api/document/releasecapture/index.html | 31 + files/pl/web/api/document/stylesheets/index.html | 19 + files/pl/web/api/document/title/index.html | 45 ++ files/pl/web/api/document/url/index.html | 25 + files/pl/web/api/document/vlinkcolor/index.html | 29 + files/pl/web/api/document/width/index.html | 28 + files/pl/web/api/document/write/index.html | 38 + files/pl/web/api/document/writeln/index.html | 41 ++ .../api/domapplicationsmanager/getall/index.html | 47 ++ files/pl/web/api/domapplicationsmanager/index.html | 86 +++ .../pl/web/api/element/addeventlistener/index.html | 109 +++ files/pl/web/api/element/appendchild/index.html | 52 ++ files/pl/web/api/element/attributes/index.html | 82 +++ files/pl/web/api/element/blur/index.html | 21 + files/pl/web/api/element/childnodes/index.html | 49 ++ files/pl/web/api/element/classlist/index.html | 264 +++++++ files/pl/web/api/element/classname/index.html | 37 + files/pl/web/api/element/click/index.html | 23 + files/pl/web/api/element/clientheight/index.html | 47 ++ files/pl/web/api/element/clientnode/index.html | 32 + files/pl/web/api/element/clientwidth/index.html | 47 ++ files/pl/web/api/element/dir/index.html | 34 + files/pl/web/api/element/dispatchevent/index.html | 43 ++ files/pl/web/api/element/firstchild/index.html | 101 +++ files/pl/web/api/element/focus/index.html | 23 + files/pl/web/api/element/getattribute/index.html | 43 ++ .../pl/web/api/element/getattributenode/index.html | 36 + .../web/api/element/getattributenodens/index.html | 39 + files/pl/web/api/element/getattributens/index.html | 47 ++ .../api/element/getboundingclientrect/index.html | 146 ++++ .../api/element/getelementsbytagnamens/index.html | 49 ++ files/pl/web/api/element/hasattribute/index.html | 34 + files/pl/web/api/element/hasattributens/index.html | 39 + files/pl/web/api/element/hasattributes/index.html | 28 + files/pl/web/api/element/haschildnodes/index.html | 28 + files/pl/web/api/element/id/index.html | 38 + files/pl/web/api/element/index.html | 677 ++++++++++++++++++ files/pl/web/api/element/innerhtml/index.html | 67 ++ .../web/api/element/insertadjacenthtml/index.html | 91 +++ files/pl/web/api/element/insertbefore/index.html | 86 +++ files/pl/web/api/element/lang/index.html | 40 ++ files/pl/web/api/element/lastchild/index.html | 28 + files/pl/web/api/element/length/index.html | 37 + files/pl/web/api/element/localname/index.html | 64 ++ files/pl/web/api/element/name/index.html | 60 ++ files/pl/web/api/element/namespaceuri/index.html | 39 + files/pl/web/api/element/nextsibling/index.html | 63 ++ files/pl/web/api/element/nodename/index.html | 98 +++ files/pl/web/api/element/nodetype/index.html | 44 ++ files/pl/web/api/element/nodevalue/index.html | 85 +++ files/pl/web/api/element/normalize/index.html | 22 + files/pl/web/api/element/offsetheight/index.html | 61 ++ files/pl/web/api/element/offsetleft/index.html | 73 ++ files/pl/web/api/element/offsetparent/index.html | 28 + files/pl/web/api/element/offsetwidth/index.html | 70 ++ files/pl/web/api/element/onclick/index.html | 66 ++ files/pl/web/api/element/onkeypress/index.html | 21 + files/pl/web/api/element/onkeyup/index.html | 24 + files/pl/web/api/element/onmousedown/index.html | 23 + files/pl/web/api/element/onmousemove/index.html | 29 + files/pl/web/api/element/ownerdocument/index.html | 30 + files/pl/web/api/element/parentnode/index.html | 34 + files/pl/web/api/element/prefix/index.html | 28 + .../pl/web/api/element/previoussibling/index.html | 28 + files/pl/web/api/element/queryselector/index.html | 180 +++++ .../pl/web/api/element/removeattribute/index.html | 36 + .../web/api/element/removeattributenode/index.html | 37 + .../web/api/element/removeattributens/index.html | 35 + files/pl/web/api/element/removechild/index.html | 36 + files/pl/web/api/element/replacechild/index.html | 53 ++ files/pl/web/api/element/scrollleft/index.html | 58 ++ files/pl/web/api/element/scrolltop/index.html | 70 ++ files/pl/web/api/element/scrollwidth/index.html | 32 + files/pl/web/api/element/setattribute/index.html | 34 + .../pl/web/api/element/setattributenode/index.html | 40 ++ .../web/api/element/setattributenodens/index.html | 41 ++ files/pl/web/api/element/setattributens/index.html | 33 + files/pl/web/api/element/style/index.html | 52 ++ files/pl/web/api/element/tabindex/index.html | 31 + files/pl/web/api/element/tagname/index.html | 37 + files/pl/web/api/element/textcontent/index.html | 41 ++ files/pl/web/api/event/altkey/index.html | 31 + files/pl/web/api/event/bubbles/index.html | 31 + files/pl/web/api/event/button/index.html | 66 ++ files/pl/web/api/event/cancelable/index.html | 34 + files/pl/web/api/event/cancelbubble/index.html | 15 + files/pl/web/api/event/charcode/index.html | 27 + files/pl/web/api/event/clientx/index.html | 25 + files/pl/web/api/event/clienty/index.html | 16 + files/pl/web/api/event/ctrlkey/index.html | 26 + files/pl/web/api/event/currenttarget/index.html | 25 + files/pl/web/api/event/eventphase/index.html | 40 ++ files/pl/web/api/event/index.html | 179 +++++ files/pl/web/api/event/initevent/index.html | 45 ++ files/pl/web/api/event/initmouseevent/index.html | 86 +++ files/pl/web/api/event/inituievent/index.html | 49 ++ files/pl/web/api/event/ischar/index.html | 24 + files/pl/web/api/event/keycode/index.html | 23 + files/pl/web/api/event/layerx/index.html | 15 + files/pl/web/api/event/layery/index.html | 17 + files/pl/web/api/event/metakey/index.html | 30 + files/pl/web/api/event/pagex/index.html | 17 + files/pl/web/api/event/pagey/index.html | 15 + files/pl/web/api/event/relatedtarget/index.html | 56 ++ files/pl/web/api/event/screenx/index.html | 33 + files/pl/web/api/event/screeny/index.html | 23 + files/pl/web/api/event/shiftkey/index.html | 26 + files/pl/web/api/event/stoppropagation/index.html | 26 + files/pl/web/api/event/target/index.html | 27 + files/pl/web/api/event/timestamp/index.html | 47 ++ files/pl/web/api/event/type/index.html | 19 + files/pl/web/api/event/view/index.html | 23 + files/pl/web/api/file/file/index.html | 68 ++ files/pl/web/api/file/index.html | 112 +++ files/pl/web/api/geolocation_api/index.html | 92 +++ files/pl/web/api/globaleventhandlers/index.html | 714 ++++++++++++++++++ .../web/api/globaleventhandlers/onblur/index.html | 85 +++ .../web/api/globaleventhandlers/onfocus/index.html | 87 +++ .../api/htmlcanvaselement/capturestream/index.html | 73 ++ .../api/htmlcanvaselement/getcontext/index.html | 129 ++++ .../pl/web/api/htmlcanvaselement/height/index.html | 79 ++ files/pl/web/api/htmlcanvaselement/index.html | 97 +++ .../pl/web/api/htmlcanvaselement/width/index.html | 79 ++ files/pl/web/api/htmlelement/dataset/index.html | 134 ++++ files/pl/web/api/htmlelement/index.html | 409 +++++++++++ .../api/htmlformelement/acceptcharset/index.html | 33 + files/pl/web/api/htmlformelement/action/index.html | 36 + .../pl/web/api/htmlformelement/elements/index.html | 36 + .../pl/web/api/htmlformelement/encoding/index.html | 15 + .../pl/web/api/htmlformelement/enctype/index.html | 39 + files/pl/web/api/htmlformelement/index.html | 143 ++++ files/pl/web/api/htmlformelement/length/index.html | 33 + files/pl/web/api/htmlformelement/method/index.html | 35 + files/pl/web/api/htmlformelement/name/index.html | 44 ++ files/pl/web/api/htmlformelement/reset/index.html | 37 + files/pl/web/api/htmlformelement/submit/index.html | 37 + files/pl/web/api/htmlformelement/target/index.html | 35 + files/pl/web/api/htmliframeelement/index.html | 288 ++++++++ files/pl/web/api/htmlselectelement/index.html | 166 +++++ .../pl/web/api/htmltableelement/caption/index.html | 39 + files/pl/web/api/htmltableelement/index.html | 72 ++ files/pl/web/api/htmltableelement/tfoot/index.html | 39 + files/pl/web/api/htmltableelement/thead/index.html | 45 ++ files/pl/web/api/index.html | 11 + files/pl/web/api/location/index.html | 114 +++ files/pl/web/api/location/reload/index.html | 67 ++ .../web/api/mediaelementaudiosourcenode/index.html | 84 +++ files/pl/web/api/midiaccess/index.html | 70 ++ files/pl/web/api/mousescrollevent/index.html | 126 ++++ files/pl/web/api/navigator/appcodename/index.html | 30 + files/pl/web/api/navigator/appname/index.html | 29 + files/pl/web/api/navigator/appversion/index.html | 32 + files/pl/web/api/navigator/buildid/index.html | 41 ++ .../pl/web/api/navigator/cookieenabled/index.html | 45 ++ files/pl/web/api/navigator/index.html | 119 +++ files/pl/web/api/navigator/javaenabled/index.html | 39 + files/pl/web/api/navigator/language/index.html | 45 ++ files/pl/web/api/navigator/mimetypes/index.html | 40 ++ .../api/navigator/mozpermissionsettings/index.html | 33 + files/pl/web/api/navigator/online/index.html | 47 ++ files/pl/web/api/navigator/oscpu/index.html | 41 ++ files/pl/web/api/navigator/platform/index.html | 28 + files/pl/web/api/navigator/plugins/index.html | 58 ++ files/pl/web/api/navigator/product/index.html | 38 + files/pl/web/api/navigator/productsub/index.html | 52 ++ .../navigator/registercontenthandler/index.html | 49 ++ .../navigator/registerprotocolhandler/index.html | 66 ++ .../web-based_protocol_handlers/index.html | 107 +++ files/pl/web/api/navigatorlanguage/index.html | 148 ++++ files/pl/web/api/navigatoronline/index.html | 127 ++++ .../zdarzenia_online_i_offline/index.html | 84 +++ files/pl/web/api/navigatorplugins/index.html | 111 +++ .../api/parentnode/childelementcount/index.html | 93 +++ files/pl/web/api/parentnode/children/index.html | 96 +++ files/pl/web/api/parentnode/index.html | 90 +++ files/pl/web/api/powiadomienie/index.html | 348 +++++++++ files/pl/web/api/push_api/index.html | 167 +++++ files/pl/web/api/range/index.html | 105 +++ files/pl/web/api/response/index.html | 132 ++++ files/pl/web/api/screen/colordepth/index.html | 43 ++ files/pl/web/api/screen/index.html | 74 ++ files/pl/web/api/screen/width/index.html | 108 +++ files/pl/web/api/selection/addrange/index.html | 40 ++ files/pl/web/api/selection/anchornode/index.html | 22 + files/pl/web/api/selection/anchoroffset/index.html | 23 + files/pl/web/api/selection/collapse/index.html | 45 ++ .../pl/web/api/selection/collapsetoend/index.html | 22 + .../web/api/selection/collapsetostart/index.html | 22 + files/pl/web/api/selection/containsnode/index.html | 47 ++ .../api/selection/deletefromdocument/index.html | 24 + files/pl/web/api/selection/extend/index.html | 40 ++ files/pl/web/api/selection/focusnode/index.html | 21 + files/pl/web/api/selection/focusoffset/index.html | 22 + files/pl/web/api/selection/getrangeat/index.html | 44 ++ files/pl/web/api/selection/index.html | 100 +++ files/pl/web/api/selection/iscollapsed/index.html | 21 + files/pl/web/api/selection/rangecount/index.html | 19 + .../web/api/selection/removeallranges/index.html | 22 + files/pl/web/api/selection/removerange/index.html | 40 ++ .../web/api/selection/selectallchildren/index.html | 40 ++ files/pl/web/api/selection/tostring/index.html | 35 + files/pl/web/api/speechrecognition/index.html | 153 ++++ files/pl/web/api/storage/index.html | 154 ++++ files/pl/web/api/stylesheet/cssrules/index.html | 46 ++ files/pl/web/api/stylesheet/deleterule/index.html | 26 + files/pl/web/api/stylesheet/disabled/index.html | 25 + files/pl/web/api/stylesheet/href/index.html | 42 ++ files/pl/web/api/stylesheet/index.html | 57 ++ files/pl/web/api/stylesheet/insertrule/index.html | 42 ++ files/pl/web/api/stylesheet/media/index.html | 29 + files/pl/web/api/stylesheet/ownerrule/index.html | 24 + .../web/api/stylesheet/parentstylesheet/index.html | 29 + files/pl/web/api/stylesheet/title/index.html | 18 + files/pl/web/api/stylesheet/type/index.html | 22 + files/pl/web/api/web_audio_api/index.html | 503 +++++++++++++ files/pl/web/api/webgl_api/index.html | 252 +++++++ files/pl/web/api/webgl_api/tutorial/index.html | 40 ++ files/pl/web/api/window/alert/index.html | 58 ++ .../pl/web/api/window/applicationcache/index.html | 33 + files/pl/web/api/window/clearinterval/index.html | 28 + files/pl/web/api/window/cleartimeout/index.html | 40 ++ files/pl/web/api/window/closed/index.html | 59 ++ files/pl/web/api/window/content/index.html | 43 ++ files/pl/web/api/window/controllers/index.html | 24 + files/pl/web/api/window/crypto/index.html | 19 + files/pl/web/api/window/defaultstatus/index.html | 35 + files/pl/web/api/window/directories/index.html | 33 + files/pl/web/api/window/document/index.html | 40 ++ files/pl/web/api/window/dump/index.html | 30 + files/pl/web/api/window/focus/index.html | 24 + files/pl/web/api/window/frameelement/index.html | 34 + files/pl/web/api/window/frames/index.html | 31 + files/pl/web/api/window/getselection/index.html | 39 + files/pl/web/api/window/index.html | 494 +++++++++++++ files/pl/web/api/window/localstorage/index.html | 125 ++++ files/pl/web/api/window/name/index.html | 27 + files/pl/web/api/window/navigator/index.html | 84 +++ files/pl/web/api/window/onload/index.html | 62 ++ files/pl/web/api/window/open/index.html | 796 +++++++++++++++++++++ files/pl/web/api/window/opendialog/index.html | 75 ++ files/pl/web/api/window/opener/index.html | 49 ++ files/pl/web/api/window/prompt/index.html | 33 + .../api/window/requestanimationframe/index.html | 170 +++++ files/pl/web/api/window/resizeby/index.html | 32 + files/pl/web/api/window/resizeto/index.html | 36 + files/pl/web/api/window/scroll/index.html | 33 + files/pl/web/api/window/scrollbylines/index.html | 35 + files/pl/web/api/window/scrollbypages/index.html | 35 + files/pl/web/api/window/scrollto/index.html | 32 + files/pl/web/api/window/setinterval/index.html | 87 +++ files/pl/web/api/window/settimeout/index.html | 46 ++ files/pl/web/api/window/sidebar/index.html | 56 ++ files/pl/web/api/windowbase64/atob/index.html | 104 +++ files/pl/web/api/windowbase64/btoa/index.html | 126 ++++ files/pl/web/api/windowbase64/index.html | 113 +++ files/pl/web/api/zdarzenia_dotykowe/index.html | 336 +++++++++ 322 files changed, 24008 insertions(+) create mode 100644 files/pl/web/api/attr/index.html create mode 100644 files/pl/web/api/audiobuffer/index.html create mode 100644 files/pl/web/api/audiocontext/createdynamicscompressor/index.html create mode 100644 files/pl/web/api/audiocontext/index.html create mode 100644 files/pl/web/api/audioparam/index.html create mode 100644 files/pl/web/api/audioparam/setvalueattime/index.html create mode 100644 files/pl/web/api/cache/index.html create mode 100644 files/pl/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/pl/web/api/canvas_api/tutorial/index.html create mode 100644 files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html create mode 100644 files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html create mode 100644 files/pl/web/api/childnode/index.html create mode 100644 files/pl/web/api/childnode/remove/index.html create mode 100644 files/pl/web/api/console/index.html create mode 100644 files/pl/web/api/console/log/index.html create mode 100644 files/pl/web/api/cssnumericvalue/div/index.html create mode 100644 files/pl/web/api/cssnumericvalue/index.html create mode 100644 files/pl/web/api/cssrule/index.html create mode 100644 files/pl/web/api/document/activeelement/index.html create mode 100644 files/pl/web/api/document/alinkcolor/index.html create mode 100644 files/pl/web/api/document/anchors/index.html create mode 100644 files/pl/web/api/document/applets/index.html create mode 100644 files/pl/web/api/document/bgcolor/index.html create mode 100644 files/pl/web/api/document/body/index.html create mode 100644 files/pl/web/api/document/characterset/index.html create mode 100644 files/pl/web/api/document/clear/index.html create mode 100644 files/pl/web/api/document/close/index.html create mode 100644 files/pl/web/api/document/compatmode/index.html create mode 100644 files/pl/web/api/document/cookie/index.html create mode 100644 files/pl/web/api/document/createattribute/index.html create mode 100644 files/pl/web/api/document/createdocumentfragment/index.html create mode 100644 files/pl/web/api/document/createelement/index.html create mode 100644 files/pl/web/api/document/createevent/index.html create mode 100644 files/pl/web/api/document/createrange/index.html create mode 100644 files/pl/web/api/document/createtextnode/index.html create mode 100644 files/pl/web/api/document/defaultview/index.html create mode 100644 files/pl/web/api/document/designmode/index.html create mode 100644 files/pl/web/api/document/doctype/index.html create mode 100644 files/pl/web/api/document/documentelement/index.html create mode 100644 files/pl/web/api/document/domain/index.html create mode 100644 files/pl/web/api/document/drag_event/index.html create mode 100644 files/pl/web/api/document/embeds/index.html create mode 100644 files/pl/web/api/document/execcommand/index.html create mode 100644 files/pl/web/api/document/fgcolor/index.html create mode 100644 files/pl/web/api/document/firstchild/index.html create mode 100644 files/pl/web/api/document/forms/index.html create mode 100644 files/pl/web/api/document/getelementbyid/index.html create mode 100644 files/pl/web/api/document/getelementsbyclassname/index.html create mode 100644 files/pl/web/api/document/getelementsbyname/index.html create mode 100644 files/pl/web/api/document/getelementsbytagname/index.html create mode 100644 files/pl/web/api/document/hasfocus/index.html create mode 100644 files/pl/web/api/document/head/index.html create mode 100644 files/pl/web/api/document/height/index.html create mode 100644 files/pl/web/api/document/images/index.html create mode 100644 files/pl/web/api/document/implementation/index.html create mode 100644 files/pl/web/api/document/importnode/index.html create mode 100644 files/pl/web/api/document/index.html create mode 100644 files/pl/web/api/document/lastmodified/index.html create mode 100644 files/pl/web/api/document/linkcolor/index.html create mode 100644 files/pl/web/api/document/links/index.html create mode 100644 files/pl/web/api/document/location/index.html create mode 100644 files/pl/web/api/document/namespaceuri/index.html create mode 100644 files/pl/web/api/document/open/index.html create mode 100644 files/pl/web/api/document/plugins/index.html create mode 100644 files/pl/web/api/document/queryselector/index.html create mode 100644 files/pl/web/api/document/referrer/index.html create mode 100644 files/pl/web/api/document/releasecapture/index.html create mode 100644 files/pl/web/api/document/stylesheets/index.html create mode 100644 files/pl/web/api/document/title/index.html create mode 100644 files/pl/web/api/document/url/index.html create mode 100644 files/pl/web/api/document/vlinkcolor/index.html create mode 100644 files/pl/web/api/document/width/index.html create mode 100644 files/pl/web/api/document/write/index.html create mode 100644 files/pl/web/api/document/writeln/index.html create mode 100644 files/pl/web/api/domapplicationsmanager/getall/index.html create mode 100644 files/pl/web/api/domapplicationsmanager/index.html create mode 100644 files/pl/web/api/element/addeventlistener/index.html create mode 100644 files/pl/web/api/element/appendchild/index.html create mode 100644 files/pl/web/api/element/attributes/index.html create mode 100644 files/pl/web/api/element/blur/index.html create mode 100644 files/pl/web/api/element/childnodes/index.html create mode 100644 files/pl/web/api/element/classlist/index.html create mode 100644 files/pl/web/api/element/classname/index.html create mode 100644 files/pl/web/api/element/click/index.html create mode 100644 files/pl/web/api/element/clientheight/index.html create mode 100644 files/pl/web/api/element/clientnode/index.html create mode 100644 files/pl/web/api/element/clientwidth/index.html create mode 100644 files/pl/web/api/element/dir/index.html create mode 100644 files/pl/web/api/element/dispatchevent/index.html create mode 100644 files/pl/web/api/element/firstchild/index.html create mode 100644 files/pl/web/api/element/focus/index.html create mode 100644 files/pl/web/api/element/getattribute/index.html create mode 100644 files/pl/web/api/element/getattributenode/index.html create mode 100644 files/pl/web/api/element/getattributenodens/index.html create mode 100644 files/pl/web/api/element/getattributens/index.html create mode 100644 files/pl/web/api/element/getboundingclientrect/index.html create mode 100644 files/pl/web/api/element/getelementsbytagnamens/index.html create mode 100644 files/pl/web/api/element/hasattribute/index.html create mode 100644 files/pl/web/api/element/hasattributens/index.html create mode 100644 files/pl/web/api/element/hasattributes/index.html create mode 100644 files/pl/web/api/element/haschildnodes/index.html create mode 100644 files/pl/web/api/element/id/index.html create mode 100644 files/pl/web/api/element/index.html create mode 100644 files/pl/web/api/element/innerhtml/index.html create mode 100644 files/pl/web/api/element/insertadjacenthtml/index.html create mode 100644 files/pl/web/api/element/insertbefore/index.html create mode 100644 files/pl/web/api/element/lang/index.html create mode 100644 files/pl/web/api/element/lastchild/index.html create mode 100644 files/pl/web/api/element/length/index.html create mode 100644 files/pl/web/api/element/localname/index.html create mode 100644 files/pl/web/api/element/name/index.html create mode 100644 files/pl/web/api/element/namespaceuri/index.html create mode 100644 files/pl/web/api/element/nextsibling/index.html create mode 100644 files/pl/web/api/element/nodename/index.html create mode 100644 files/pl/web/api/element/nodetype/index.html create mode 100644 files/pl/web/api/element/nodevalue/index.html create mode 100644 files/pl/web/api/element/normalize/index.html create mode 100644 files/pl/web/api/element/offsetheight/index.html create mode 100644 files/pl/web/api/element/offsetleft/index.html create mode 100644 files/pl/web/api/element/offsetparent/index.html create mode 100644 files/pl/web/api/element/offsetwidth/index.html create mode 100644 files/pl/web/api/element/onclick/index.html create mode 100644 files/pl/web/api/element/onkeypress/index.html create mode 100644 files/pl/web/api/element/onkeyup/index.html create mode 100644 files/pl/web/api/element/onmousedown/index.html create mode 100644 files/pl/web/api/element/onmousemove/index.html create mode 100644 files/pl/web/api/element/ownerdocument/index.html create mode 100644 files/pl/web/api/element/parentnode/index.html create mode 100644 files/pl/web/api/element/prefix/index.html create mode 100644 files/pl/web/api/element/previoussibling/index.html create mode 100644 files/pl/web/api/element/queryselector/index.html create mode 100644 files/pl/web/api/element/removeattribute/index.html create mode 100644 files/pl/web/api/element/removeattributenode/index.html create mode 100644 files/pl/web/api/element/removeattributens/index.html create mode 100644 files/pl/web/api/element/removechild/index.html create mode 100644 files/pl/web/api/element/replacechild/index.html create mode 100644 files/pl/web/api/element/scrollleft/index.html create mode 100644 files/pl/web/api/element/scrolltop/index.html create mode 100644 files/pl/web/api/element/scrollwidth/index.html create mode 100644 files/pl/web/api/element/setattribute/index.html create mode 100644 files/pl/web/api/element/setattributenode/index.html create mode 100644 files/pl/web/api/element/setattributenodens/index.html create mode 100644 files/pl/web/api/element/setattributens/index.html create mode 100644 files/pl/web/api/element/style/index.html create mode 100644 files/pl/web/api/element/tabindex/index.html create mode 100644 files/pl/web/api/element/tagname/index.html create mode 100644 files/pl/web/api/element/textcontent/index.html create mode 100644 files/pl/web/api/event/altkey/index.html create mode 100644 files/pl/web/api/event/bubbles/index.html create mode 100644 files/pl/web/api/event/button/index.html create mode 100644 files/pl/web/api/event/cancelable/index.html create mode 100644 files/pl/web/api/event/cancelbubble/index.html create mode 100644 files/pl/web/api/event/charcode/index.html create mode 100644 files/pl/web/api/event/clientx/index.html create mode 100644 files/pl/web/api/event/clienty/index.html create mode 100644 files/pl/web/api/event/ctrlkey/index.html create mode 100644 files/pl/web/api/event/currenttarget/index.html create mode 100644 files/pl/web/api/event/eventphase/index.html create mode 100644 files/pl/web/api/event/index.html create mode 100644 files/pl/web/api/event/initevent/index.html create mode 100644 files/pl/web/api/event/initmouseevent/index.html create mode 100644 files/pl/web/api/event/inituievent/index.html create mode 100644 files/pl/web/api/event/ischar/index.html create mode 100644 files/pl/web/api/event/keycode/index.html create mode 100644 files/pl/web/api/event/layerx/index.html create mode 100644 files/pl/web/api/event/layery/index.html create mode 100644 files/pl/web/api/event/metakey/index.html create mode 100644 files/pl/web/api/event/pagex/index.html create mode 100644 files/pl/web/api/event/pagey/index.html create mode 100644 files/pl/web/api/event/relatedtarget/index.html create mode 100644 files/pl/web/api/event/screenx/index.html create mode 100644 files/pl/web/api/event/screeny/index.html create mode 100644 files/pl/web/api/event/shiftkey/index.html create mode 100644 files/pl/web/api/event/stoppropagation/index.html create mode 100644 files/pl/web/api/event/target/index.html create mode 100644 files/pl/web/api/event/timestamp/index.html create mode 100644 files/pl/web/api/event/type/index.html create mode 100644 files/pl/web/api/event/view/index.html create mode 100644 files/pl/web/api/file/file/index.html create mode 100644 files/pl/web/api/file/index.html create mode 100644 files/pl/web/api/geolocation_api/index.html create mode 100644 files/pl/web/api/globaleventhandlers/index.html create mode 100644 files/pl/web/api/globaleventhandlers/onblur/index.html create mode 100644 files/pl/web/api/globaleventhandlers/onfocus/index.html create mode 100644 files/pl/web/api/htmlcanvaselement/capturestream/index.html create mode 100644 files/pl/web/api/htmlcanvaselement/getcontext/index.html create mode 100644 files/pl/web/api/htmlcanvaselement/height/index.html create mode 100644 files/pl/web/api/htmlcanvaselement/index.html create mode 100644 files/pl/web/api/htmlcanvaselement/width/index.html create mode 100644 files/pl/web/api/htmlelement/dataset/index.html create mode 100644 files/pl/web/api/htmlelement/index.html create mode 100644 files/pl/web/api/htmlformelement/acceptcharset/index.html create mode 100644 files/pl/web/api/htmlformelement/action/index.html create mode 100644 files/pl/web/api/htmlformelement/elements/index.html create mode 100644 files/pl/web/api/htmlformelement/encoding/index.html create mode 100644 files/pl/web/api/htmlformelement/enctype/index.html create mode 100644 files/pl/web/api/htmlformelement/index.html create mode 100644 files/pl/web/api/htmlformelement/length/index.html create mode 100644 files/pl/web/api/htmlformelement/method/index.html create mode 100644 files/pl/web/api/htmlformelement/name/index.html create mode 100644 files/pl/web/api/htmlformelement/reset/index.html create mode 100644 files/pl/web/api/htmlformelement/submit/index.html create mode 100644 files/pl/web/api/htmlformelement/target/index.html create mode 100644 files/pl/web/api/htmliframeelement/index.html create mode 100644 files/pl/web/api/htmlselectelement/index.html create mode 100644 files/pl/web/api/htmltableelement/caption/index.html create mode 100644 files/pl/web/api/htmltableelement/index.html create mode 100644 files/pl/web/api/htmltableelement/tfoot/index.html create mode 100644 files/pl/web/api/htmltableelement/thead/index.html create mode 100644 files/pl/web/api/index.html create mode 100644 files/pl/web/api/location/index.html create mode 100644 files/pl/web/api/location/reload/index.html create mode 100644 files/pl/web/api/mediaelementaudiosourcenode/index.html create mode 100644 files/pl/web/api/midiaccess/index.html create mode 100644 files/pl/web/api/mousescrollevent/index.html create mode 100644 files/pl/web/api/navigator/appcodename/index.html create mode 100644 files/pl/web/api/navigator/appname/index.html create mode 100644 files/pl/web/api/navigator/appversion/index.html create mode 100644 files/pl/web/api/navigator/buildid/index.html create mode 100644 files/pl/web/api/navigator/cookieenabled/index.html create mode 100644 files/pl/web/api/navigator/index.html create mode 100644 files/pl/web/api/navigator/javaenabled/index.html create mode 100644 files/pl/web/api/navigator/language/index.html create mode 100644 files/pl/web/api/navigator/mimetypes/index.html create mode 100644 files/pl/web/api/navigator/mozpermissionsettings/index.html create mode 100644 files/pl/web/api/navigator/online/index.html create mode 100644 files/pl/web/api/navigator/oscpu/index.html create mode 100644 files/pl/web/api/navigator/platform/index.html create mode 100644 files/pl/web/api/navigator/plugins/index.html create mode 100644 files/pl/web/api/navigator/product/index.html create mode 100644 files/pl/web/api/navigator/productsub/index.html create mode 100644 files/pl/web/api/navigator/registercontenthandler/index.html create mode 100644 files/pl/web/api/navigator/registerprotocolhandler/index.html create mode 100644 files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html create mode 100644 files/pl/web/api/navigatorlanguage/index.html create mode 100644 files/pl/web/api/navigatoronline/index.html create mode 100644 files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html create mode 100644 files/pl/web/api/navigatorplugins/index.html create mode 100644 files/pl/web/api/parentnode/childelementcount/index.html create mode 100644 files/pl/web/api/parentnode/children/index.html create mode 100644 files/pl/web/api/parentnode/index.html create mode 100644 files/pl/web/api/powiadomienie/index.html create mode 100644 files/pl/web/api/push_api/index.html create mode 100644 files/pl/web/api/range/index.html create mode 100644 files/pl/web/api/response/index.html create mode 100644 files/pl/web/api/screen/colordepth/index.html create mode 100644 files/pl/web/api/screen/index.html create mode 100644 files/pl/web/api/screen/width/index.html create mode 100644 files/pl/web/api/selection/addrange/index.html create mode 100644 files/pl/web/api/selection/anchornode/index.html create mode 100644 files/pl/web/api/selection/anchoroffset/index.html create mode 100644 files/pl/web/api/selection/collapse/index.html create mode 100644 files/pl/web/api/selection/collapsetoend/index.html create mode 100644 files/pl/web/api/selection/collapsetostart/index.html create mode 100644 files/pl/web/api/selection/containsnode/index.html create mode 100644 files/pl/web/api/selection/deletefromdocument/index.html create mode 100644 files/pl/web/api/selection/extend/index.html create mode 100644 files/pl/web/api/selection/focusnode/index.html create mode 100644 files/pl/web/api/selection/focusoffset/index.html create mode 100644 files/pl/web/api/selection/getrangeat/index.html create mode 100644 files/pl/web/api/selection/index.html create mode 100644 files/pl/web/api/selection/iscollapsed/index.html create mode 100644 files/pl/web/api/selection/rangecount/index.html create mode 100644 files/pl/web/api/selection/removeallranges/index.html create mode 100644 files/pl/web/api/selection/removerange/index.html create mode 100644 files/pl/web/api/selection/selectallchildren/index.html create mode 100644 files/pl/web/api/selection/tostring/index.html create mode 100644 files/pl/web/api/speechrecognition/index.html create mode 100644 files/pl/web/api/storage/index.html create mode 100644 files/pl/web/api/stylesheet/cssrules/index.html create mode 100644 files/pl/web/api/stylesheet/deleterule/index.html create mode 100644 files/pl/web/api/stylesheet/disabled/index.html create mode 100644 files/pl/web/api/stylesheet/href/index.html create mode 100644 files/pl/web/api/stylesheet/index.html create mode 100644 files/pl/web/api/stylesheet/insertrule/index.html create mode 100644 files/pl/web/api/stylesheet/media/index.html create mode 100644 files/pl/web/api/stylesheet/ownerrule/index.html create mode 100644 files/pl/web/api/stylesheet/parentstylesheet/index.html create mode 100644 files/pl/web/api/stylesheet/title/index.html create mode 100644 files/pl/web/api/stylesheet/type/index.html create mode 100644 files/pl/web/api/web_audio_api/index.html create mode 100644 files/pl/web/api/webgl_api/index.html create mode 100644 files/pl/web/api/webgl_api/tutorial/index.html create mode 100644 files/pl/web/api/window/alert/index.html create mode 100644 files/pl/web/api/window/applicationcache/index.html create mode 100644 files/pl/web/api/window/clearinterval/index.html create mode 100644 files/pl/web/api/window/cleartimeout/index.html create mode 100644 files/pl/web/api/window/closed/index.html create mode 100644 files/pl/web/api/window/content/index.html create mode 100644 files/pl/web/api/window/controllers/index.html create mode 100644 files/pl/web/api/window/crypto/index.html create mode 100644 files/pl/web/api/window/defaultstatus/index.html create mode 100644 files/pl/web/api/window/directories/index.html create mode 100644 files/pl/web/api/window/document/index.html create mode 100644 files/pl/web/api/window/dump/index.html create mode 100644 files/pl/web/api/window/focus/index.html create mode 100644 files/pl/web/api/window/frameelement/index.html create mode 100644 files/pl/web/api/window/frames/index.html create mode 100644 files/pl/web/api/window/getselection/index.html create mode 100644 files/pl/web/api/window/index.html create mode 100644 files/pl/web/api/window/localstorage/index.html create mode 100644 files/pl/web/api/window/name/index.html create mode 100644 files/pl/web/api/window/navigator/index.html create mode 100644 files/pl/web/api/window/onload/index.html create mode 100644 files/pl/web/api/window/open/index.html create mode 100644 files/pl/web/api/window/opendialog/index.html create mode 100644 files/pl/web/api/window/opener/index.html create mode 100644 files/pl/web/api/window/prompt/index.html create mode 100644 files/pl/web/api/window/requestanimationframe/index.html create mode 100644 files/pl/web/api/window/resizeby/index.html create mode 100644 files/pl/web/api/window/resizeto/index.html create mode 100644 files/pl/web/api/window/scroll/index.html create mode 100644 files/pl/web/api/window/scrollbylines/index.html create mode 100644 files/pl/web/api/window/scrollbypages/index.html create mode 100644 files/pl/web/api/window/scrollto/index.html create mode 100644 files/pl/web/api/window/setinterval/index.html create mode 100644 files/pl/web/api/window/settimeout/index.html create mode 100644 files/pl/web/api/window/sidebar/index.html create mode 100644 files/pl/web/api/windowbase64/atob/index.html create mode 100644 files/pl/web/api/windowbase64/btoa/index.html create mode 100644 files/pl/web/api/windowbase64/index.html create mode 100644 files/pl/web/api/zdarzenia_dotykowe/index.html (limited to 'files/pl/web/api') diff --git a/files/pl/web/api/attr/index.html b/files/pl/web/api/attr/index.html new file mode 100644 index 0000000000..8088fae8a9 --- /dev/null +++ b/files/pl/web/api/attr/index.html @@ -0,0 +1,164 @@ +--- +title: Attr +slug: Web/API/Attr +tags: + - API + - DOM +translation_of: Web/API/Attr +--- +
{{APIRef("DOM")}}
+ +

Interfejs Attr reprezentuje jeden z atrybutów elementu DOM jako obiekt.W większości metod DOM otrzymujesz wartość atrybutu bezpośrednio jako ciąg znaków (np., {{domxref("Element.getAttribute()")}}), oprócz niektórych funkcji (np., {{domxref("Element.getAttributeNode()")}}) lub sposobów iteracji zwracających typ Attr.

+ +

{{InheritanceDiagram}}

+ +
Warning: Poczynając od Gecko 7.0 {{geckoRelease("7.0")}}, pojawia się szereg przestarzałych właściwości i metod wyświetlających ostrzeżenia w konsoli.  Powinieneś odpowiednio przejrzeć swój kod. Zobacz  Przestarzałe właściwości i metody aby zobacyć pełną listę.
+ +

Właściwości

+ +
+
{{domxref("Attr.name", "name")}} {{readOnlyInline}}
+
Nazwa atrybutu.
+
{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} reprezentujący przestrzeń nazw URI atrybutu lub null jeśli nie ma określonej przestrzeni nazw.
+
{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} reprezentujący lokalną część kwalifikowanej przestrzeni nazw atrybutu.
+
{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
+
{{domxref("DOMString")}} reprezentujący prefiks przestrzeni nazw atrybutu lub null jeśli nie określono prefiksu.
+
{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}
+
+

Element posiadający atrybut.

+ +
+

Note: DOM Level 4 usunął tę właściwość. Założono, że skoro otrzymujesz  Attr z  {{domxref("Element")}}, powinieneś znać powiązany element.
+ Ponieważ nie jest to prawdą w przypadkach, takich jak obiekty Attr zwracane przez {{domxref("Document.evaluate")}}, DOM Living Standard wprowadził tę właściwość ponownie.

+ +

Gecko wyświetla notę o deprecjonowaniu poczynając od Gecko 7.0 {{geckoRelease("7.0")}}. Nota została usunięta w in Gecko 49.0 {{geckoRelease("49.0")}}.

+
+
+
{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
+
Ta właściwosć zawsze zwraca true. Pierwotnie, zwracała true jeśli właściwość była określona wprost w kodzie źródłowym lub poprzez skrypt a false jeśli była domyślna lub określona w DTD.
+
{{domxref("Attr.value", "value")}}
+
Wartość atrybutu.
+
+ +
+

Note: DOM Level 3 zdefiniował namespaceURI, localName i prefix w interfejsie{{domxref("Node")}}. W DOM4 zostały przeniesione do Attr.

+ +

Ta zmiana została zaimplementowana w Chrome 46.0 i Firefox od wersji 48.0.

+
+ +

Przestarzałe właściwości i metody

+ +

Następujące właściwości są przestarzałe. Kiedy to możliwe, odpowiednie zastępcze właściwości są podane.

+ +
+
attributes
+
Obecnie zawsze zwraca NULL.
+
childNodes {{obsolete_inline(14)}}
+
Ta właściwość obecnie zawsze zwraca pusty {{domxref("NodeList")}}.
+
firstChild {{obsolete_inline(14)}}
+
Obecnie zawsze zwraca NULL.
+
isId {{readOnlyInline}}
+
Wskazuje czy atrybut jest atrybutem "ID". An "ID" jest atrybutem, którego wartość powinna być unikalna w całym dokumencie DOM. W HTML DOM, "id" to atrybut ID, ale XML może definiować inne. To, czy atrybut jest unikalny, czy nie, jest często determinowane przez {{Glossary("DTD")}} lub inny schemat dokumentu.
+
lastChild {{obsolete_inline(14)}}
+
Obecnie zawsze zwraca NULL.
+
nextSibling
+
Obecnie zawsze zwraca NULL.
+
nodeName
+
Zamiast tego używaj {{domxref("Attr.name")}} .
+
nodeType
+
Obecnie zawsze zwraca 2 (ATTRIBUTE_NODE).
+
nodeValue
+
Zamiast tego używaj {{domxref("Attr.value")}}.
+
ownerDocument
+
Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.
+
parentNode
+
Obecnie zawsze zwraca NULL.
+
previousSibling
+
Obecnie zawsze zwraca NULL.
+
schemaTypeInfo {{obsolete_inline}} {{readOnlyInline}}
+
Typ informacji powiązane z tym atrybutem. Podczas gdy typ informacji zawierany przez ten atrybut ma gwarantowaną poprawność po waładowaniu dokumentu lub wywołaniu {{domxref("Document.normalizeDocument")}}, ta właściwość może nie być wiarygodna jeśli węzeł został przeniesiony.
+
specified
+
Obecnie zawsze zwraca true.
+
textContent
+
Zamiast tego używaj {{domxref("Attr.value")}}.
+
+ +

Poniższe metody są przestarzałe:

+ +
+
appendChild() {{obsolete_inline(14)}}
+
Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}}.
+
cloneNode()
+
Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.
+
createAttribute()
+
Zamiast tego używaj {{domxref("Element.setAttribute()")}}.
+
createAttributeNS()
+
Zamiast tego używaj {{domxref("Element.setAttributeNS()")}}.
+
getAttributeNode()
+
Zamiast tego używaj {{domxref("Element.getAttribute()")}}.
+
getAttributeNodeNS()
+
Zamiast tego używaj {{domxref("Element.getAttributeNS()")}}.
+
hasAttributes() {{obsolete_inline("21.0")}}
+
Obecnie zawsze zwraca false.
+
hasChildNodes()
+
Obecnie zawsze zwraca false.
+
insertBefore()
+
Zamiast tego modyfikuj wartość {{domxref("Attr.value")}}.
+
isSupported()
+
Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.
+
isEqualNode()
+
Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.
+
normalize()
+
Nie powinieneś był tego używać, więc prawdopodobnie nie obchodzi cię, że to zniknie.
+
removeAttributeNode()
+
Zamiast tego używaj {{domxref("Element.removeAttribute()")}}.
+
removeChild() {{obsolete_inline(14)}}
+
Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}} instead.
+
replaceChild() {{obsolete_inline(14)}}
+
Zamiast tego, modyfikuj wartość {{domxref("Attr.value")}} instead.
+
setAttributeNode()
+
Zamiast tego używaj {{domxref("Element.setAttribute()")}}.
+
setAttributeNodeNS()
+
Zamiast tego używaj {{domxref("Element.setAttributeNS()")}}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}{{Spec2("DOM WHATWG")}}Przywraca właściwość ownerElement 
{{SpecName("DOM4", "#interface-attr", "Attr")}}{{Spec2("DOM4")}} +
    +
  • Przenosi namespaceURI, prefix i localName z {{domxref("Node")}} do tego API i usuwa ownerElement, schemaTypeInfo oraz isId.
    • +
+
{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}{{Spec2("DOM3 Core")}}Wstępna definicja
+ +

Kompatybilność z przeglądarkami

+ + + +

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

diff --git a/files/pl/web/api/audiobuffer/index.html b/files/pl/web/api/audiobuffer/index.html new file mode 100644 index 0000000000..ea611b7250 --- /dev/null +++ b/files/pl/web/api/audiobuffer/index.html @@ -0,0 +1,174 @@ +--- +title: AudioBuffer +slug: Web/API/AudioBuffer +translation_of: Web/API/AudioBuffer +--- +

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

+ +
+

Interfejs AudioBuffer przedstawia krótki zasób dźwiękowy znajdujący się w pamięci, stworzony z pliku dźwiękowego za pomocą metody {{ domxref("AudioContext.decodeAudioData()") }} lub z surowych danych przy użyciu {{ domxref("AudioContext.createBuffer()") }}. Dane audio umieszczone w AudioBuffer mogą być następnie odtwarzane przez przekazanie ich do {{ domxref("AudioBufferSourceNode") }}.

+
+ +

Obiekty tego typu są przeznaczone do przechowywania drobnych fragmentów dźwiękowych, zwykle mniej niż 45s. W przypadku dłuższych dźwięków, obiekty implementujące {{domxref("MediaElementAudioSourceNode")}} są bardziej odpowiednie. Bufor zawiera dane w następującym formacie: IEEE754 32 -bitowy liniowy PCM bez przeplotu o nominalnym zakresie między -1 i +1 , czyli 32-bitowy zmiennoprzecinkowy bufor z próbkami o znormalizowanych wartościach między -1.0 a 1.0. Jeśli {{domxref("AudioBuffer")}} ma wiele kanałów, są one przechowywane w osobnym buforze.

+ +

Właściwości

+ +
+
{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}
+
Zwraca wartość typu float reprezentującą częstotliwość próbkowania danych PCM przechowywanych w buforze wyrażoną w próbkach na sekundę.
+
{{domxref("AudioBuffer.length")}} {{readonlyInline}}
+
Zwraca wartość typu int reprezentującą wielkość danych PCM przechowywanych w buforze wyrażoną jako liczba okien próbek.
+
{{domxref("AudioBuffer.duration")}} {{readonlyInline}}
+
Zwraca wartość typu double reprezentującą czas trwania danych PCM zapisanych w buforze wyrażoną w sekundach.
+
{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}
+
Zwraca wartość typu int reprezentującą liczbę pojedynczych kanałów audio opisanych przez dane PCM zapisanych w buforze.
+
+ +

Metody

+ +
+
{{domxref("AudioBuffer.getChannelData()")}}
+
Zwraca tablicę {{jsxref("Float32Array")}} zawierającą dane PCM powiązane z kanałem audio określonym jako parametr channel (0 reprezentuje pierwszy kanał).
+
{{domxref("AudioBuffer.copyFromChannel()")}}
+
Kopiuje próbki z danego kanału w AudioBuffer do danej tablicy.
+
{{domxref("AudioBuffer.copyToChannel()")}}
+
Kopiuje próbki z danej tablicy do danego kanału w AudioBuffer.
+
+ +

Przykład

+ +

Następujący przykład kodu pokazuje jak stworzyć AudioBuffer i wypełnić go białym szumem. Pełną wersję kodu można znależć w naszym repozytorium audio-buffer demo; jest dostępna także uruchomiona na żywo wersja running live version.

+ +
// Stereo
+var channels = 2;
+
+// Tworzenie pustego, dwusekundowego buffera stereo
+// na wskaźniku audio z AudioContext
+var frameCount = audioCtx.sampleRate * 2.0;
+var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // Wypełnienie buffera białym szumem;
+  // Wartość losowa pomiędzy -1.0 a 1.0
+  for (var channel = 0; channel < channels; channel++) {
+    // To daje nam aktualną tablice zawierającą dane
+    var nowBuffering = myArrayBuffer.getChannelData(channel);
+    for (var i = 0; i < frameCount; i++) {
+      // Math.random() znajduje się w przedziale [0; 1.0]
+      // audio musi znajdować się w [-1.0; 1.0]
+      nowBuffering[i] = Math.random() * 2 - 1;
+    }
+  }
+
+  // Dostarczenie AudioBufferSourceNode.
+  // To jest AudioNode dedykowane do używania wtedy, kiedy chcemy odtworzyć dany AudioBuffer
+  var source = audioCtx.createBufferSource();
+
+  // Określanie buffera w AudioBufferSourceNode
+  source.buffer = myArrayBuffer;
+
+  // Podłączanie AudioBufferSourceNode do
+  // destynacji, dzięki czemu możemy usłyszeć dźwięk
+  source.connect(audioCtx.destination);
+
+  // start odtwarzania źródła
+  source.start();
+
+}
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}{{Spec2('Web Audio API')}}Definicja wstępna.
+ +

Kompatybilność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Wsparcie podstawowe14 {{property_prefix("webkit")}}{{CompatGeckoDesktop(25)}}{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22		6 {{property_prefix("webkit")}}
copyFromChannel() and copyToChannel(){{CompatUnknown}}{{CompatGeckoDesktop(27)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Wsparcie podstawowe{{CompatNo}}28 {{property_prefix("webkit")}}{{CompatGeckoMobile(25)}}1.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
copyFromChannel() and copyToChannel(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(27)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Zobacz także

+ + diff --git a/files/pl/web/api/audiocontext/createdynamicscompressor/index.html b/files/pl/web/api/audiocontext/createdynamicscompressor/index.html new file mode 100644 index 0000000000..7788cc64a9 --- /dev/null +++ b/files/pl/web/api/audiocontext/createdynamicscompressor/index.html @@ -0,0 +1,142 @@ +--- +title: AudioContext.createDynamicsCompressor() +slug: Web/API/AudioContext/createDynamicsCompressor +translation_of: Web/API/BaseAudioContext/createDynamicsCompressor +--- +

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

+ +
+

Metoda createDynamicsCompressor() interfejsu domxref("AudioContext") }} jest używana do utworzenia {{domxref("DynamicsCompressorNode")}}, który może być zastosowany do dodawania kompresji na sygnał audio.

+
+ +

Kompresja zcisza najgłośniejsze fragmenty sygnału i podgłaśnia najcichsze. W rezultacie możemy uzyskać głośniejszy, bogatszy i pełniejszy dźwięk. Jest to szczególnie istotne w przypadku gier oraz aplikacji muzycznych, w których duża ilość dźwięków jest odtwarzana jednocześnie oraz tam, gdzie chcesz kontrolować poziom sygnału głównego i unikać zniekształceń sygnału wyjściowego audio.

+ +

Składnia

+ +
var audioCtx = new AudioContext();
+var compressor = audioCtx.createDynamicsCompressor();
+ +

Zwracanie wartości funkcji (return)

+ +

{{domxref("DynamicsCompressorNode")}}.

+ +

Przykład

+ +

Poniższy kod przedstawia przykład prostego zastosowania createDynamicsCompressor() w celu dodania kompresji do ścieżki dźwiękowej. Pełniejszy przykład znajdziesz klikając na nasz przykład podstawowego kompresora (zobacz kod źródłowy).

+ +
// utworzenie MediaElementAudioSourceNode
+// wprowadzenie HTMLMediaElement
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// utworzenie węzła kompresora (compressor node)
+var compressor = audioCtx.createDynamicsCompressor();
+compressor.threshold.value = -50;
+compressor.knee.value = 40;
+compressor.ratio.value = 12;
+compressor.reduction.value = -20;
+compressor.attack.value = 0;
+compressor.release.value = 0.25;
+
+// podłączenie AudioBufferSourceNode do destynacji
+source.connect(audioCtx.destination);
+
+button.onclick = function() {
+  var active = button.getAttribute('data-active');
+  if(active == 'false') {
+    button.setAttribute('data-active', 'true');
+    button.innerHTML = 'Remove compression';
+
+    source.disconnect(audioCtx.destination);
+    source.connect(compressor);
+    compressor.connect(audioCtx.destination);
+  } else if(active == 'true') {
+    button.setAttribute('data-active', 'false');
+    button.innerHTML = 'Add compression';
+
+    source.disconnect(compressor);
+    compressor.disconnect(audioCtx.destination);
+    source.connect(audioCtx.destination);
+  }
+}
+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Web Audio API', '#widl-AudioContext-createDynamicsCompressor-DynamicsCompressorNode', 'createDynamicsCompressor()')}}{{Spec2('Web Audio API')}} 
+ +

Zgodność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CechaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Wsparcie podstawowe{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CechaAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Wsparcie podstawowe{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

Zobacz również

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

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

+ +
+

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

+
+ +

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

+ +

Konstruktor

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

Właściwości

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

Event handlers

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

Methods

+ +

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

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

Obsolete methods

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

Examples

+ +

Basic audio context declaration:

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

Cross browser variant:

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

Specifications

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

Browser compatibility

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

See also

+ + diff --git a/files/pl/web/api/audioparam/index.html b/files/pl/web/api/audioparam/index.html new file mode 100644 index 0000000000..390e9726f5 --- /dev/null +++ b/files/pl/web/api/audioparam/index.html @@ -0,0 +1,224 @@ +--- +title: AudioParam +slug: Web/API/AudioParam +tags: + - API + - Audio + - AudioParam + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Audio API +translation_of: Web/API/AudioParam +--- +

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

+ +
+

The AudioParam interface represents an audio-related parameter, usually a parameter of an {{domxref("AudioNode")}} (such as {{ domxref("GainNode.gain") }}). An AudioParam can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.

+
+ +

There are two kinds of AudioParam, a-rate and k-rate parameters:

+ + + +

Each {{domxref("AudioNode")}} defines which of its parameters are a-rate or k-rate in the spec.

+ +

Each AudioParam has a list of events, initially empty, that define when and how values change. When this list is not empty, changes using the AudioParam.value attributes are ignored. This list of events allows us to schedule changes that have to happen at very precise times, using arbitrary timelime-based automation curves. The time used is the one defined in {{domxref("AudioContext.currentTime")}}.

+ +

Properties

+ +

AudioParam Inherits properties from its parent, AudioNode.

+ +
+
{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}
+
Represents the initial volume of the attribute as defined by the specific {{domxref("AudioNode")}} creating the AudioParam.
+
{{domxref("AudioParam.maxValue")}} {{readonlyInline}}
+
Represents the maximum possible value for the parameter's nominal (effective) range. 
+
{{domxref("AudioParam.minValue")}} {{readonlyinline}}
+
Represents the minimum possible value for the parameter's nominal (effective) range. 
+
{{domxref("AudioParam.value")}}
+
Represents the parameter's current volume as a floating point value; initially set to the value of AudioParam.defaultValue. Though it can be set, any modifications happening while there are automation events scheduled — that is events scheduled using the methods of the AudioParam — are ignored, without raising any exception.
+
+ +

Methods

+ +

AudioParam Inherits methods from its parent, AudioNode.

+ +
+
{{domxref("AudioParam.setValueAtTime()")}}
+
Schedules an instant change to the value of the AudioParam at a precise time, as measured against {{domxref("AudioContext.currentTime")}}. The new value is given in the value parameter.
+
{{domxref("AudioParam.linearRampToValueAtTime()")}}
+
Schedules a gradual linear change in the value of the AudioParam. The change starts at the time specified for the previous event, follows a linear ramp to the new value given in the value parameter, and reaches the new value at the time given in the endTime parameter.
+
{{domxref("AudioParam.exponentialRampToValueAtTime()")}}
+
Schedules a gradual exponential change in the value of the AudioParam. The change starts at the time specified for the previous event, follows an exponential ramp to the new value given in the value parameter, and reaches the new value at the time given in the endTime parameter.
+
{{domxref("AudioParam.setTargetAtTime()")}}
+
Schedules the start of a change to the value of the AudioParam. The change starts at the time specified in startTime and exponentially moves towards the value given by the target parameter. The exponential decay rate is defined by the timeConstant parameter, which is a time measured in seconds.
+
{{domxref("AudioParam.setValueCurveAtTime()")}}
+
Schedules the values of the AudioParam to follow a set of values, defined by the values {{domxref("Float32Array")}} scaled to fit into the given interval, starting at startTime, and having a specific duration.
+
{{domxref("AudioParam.cancelScheduledValues()")}}
+
Cancels all scheduled future changes to the AudioParam.
+
{{domxref("AudioParam.cancelAndHoldAtTime()")}}
+
Cancels all scheduled future changes to the AudioParam but holds its value at a given time until further changes are made using other methods. The new value is given in the value parameter.
+
+ +

Examples

+ +

First, a basic example showing a {{domxref("GainNode")}} having its gain value set. gain is an example of an a-rate AudioParam, as the value can potentially be set differently for each sample frame of the audio.

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0;
+ +

Next, an example showing a {{ domxref("BiquadFilterNode") }} having some values set. These are examples of k-rate AudioParam's, as the values are set for the entire audio block at once.

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var biquadFilter = audioCtx.createBiquadFilter();
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audioparam-interface', 'AudioParam')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(14)}} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
minValue and maxValue{{CompatChrome(52)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}39{{CompatNo}}
cancelAndHoldAtTime(){{CompatChrome(57)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatChrome(28)}} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoMobile(25)}}{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
minValue and maxValue{{CompatChrome(52)}}{{CompatChrome(52)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}39{{CompatNo}}
cancelAndHoldAtTime(){{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/audioparam/setvalueattime/index.html b/files/pl/web/api/audioparam/setvalueattime/index.html new file mode 100644 index 0000000000..7d733e7b2b --- /dev/null +++ b/files/pl/web/api/audioparam/setvalueattime/index.html @@ -0,0 +1,182 @@ +--- +title: AudioParam.setValueAtTime() +slug: Web/API/AudioParam/setValueAtTime +tags: + - API + - AudioParam + - Metodă + - Referencja + - Web Audio API + - setValueAtTime +translation_of: Web/API/AudioParam/setValueAtTime +--- +

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

+ +
+

Metoda setValueAtTime() interfejsu {{ domxref("AudioParam") }} odpowiada za precyzyjne przyporządkowanie nagłych zmian do wartości {{domxref("AudioParam")}} w określonym czasie względem {{domxref("AudioContext.currentTime")}}. Nowa wartość zostaje podana w wartości parametru.

+
+ +

Składnia

+ +
var AudioParam = AudioParam.setValueAtTime(value, startTime)
+ +

Parametry

+ +
+
value
+
Liczba zmiennoprzecinkowa reprezentująca wartość AudioParam przyporządkuje się do podanego czasu.
+
startTime
+
Zmienna double reprezentująca czas (w sekundach) po {{ domxref("AudioContext") }} została utworzona jako pierwsza, dzięki czemu dochodzi do zmiany wartości. {{jsxref("TypeError")}} zostanie zwrócony, jeśli uzyskana wartość jest negatywna.
+
+ +

Zwracanie wartości funkcji (return)

+ +

Odnośnik do obiektu AudioParam. W niektórych przeglądarkach wprowadzenie tego interfejsu zaskutkuje zwróceniem pustego typu danych (void).

+ +

Przykłady

+ +

Ten stosunkowo prosty przykład zawiera źródło mediaelementu z dwiema kontrolkami (sprawdź kod źródłowy poprzez nasze repo audio-param lub zobacz przykład live). Jeśli kontrolki są wciśnięte, zmienna currGain jest inkrementowana/dekrementowana o 0.25. Wówczas metoda setValueAtTime() zostaje użyta do ustawienia wartości przedwzmacniacza (gain) jako równej currGain, jedną sekundę od teraz (audioCtx.currentTime + 1).

+ +
// utworzenie kontekstu audio
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+// podanie podstawowych zmiennych dla przykładu
+var myAudio = document.querySelector('audio');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+var targetAtTimePlus = document.querySelector('.set-target-at-time-plus');
+var targetAtTimeMinus = document.querySelector('.set-target-at-time-minus');
+
+// utworzenie MediaElementAudioSourceNode
+// wprowadzenie HTMLMediaElement
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// utworzenie parametrów przedwzmacniacza (gain node) i ustawienie wartości przedwzmacniacza na wartość 0.5
+var gainNode = audioCtx.createGain();
+gainNode.gain.value = 0.5;
+var currGain = gainNode.gain.value;
+
+// podłączenie AudioBufferSourceNode do gainNode
+// oraz gainNode do destynacji
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// określenie, co ma się wykonać po kliknięciu
+targetAtTimePlus.onclick = function() {
+  currGain += 0.25;
+  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
+}
+
+targetAtTimeMinus.onclick = function() {
+  currGain -= 0.25;
+  gainNode.gain.setValueAtTime(currGain, audioCtx.currentTime + 1);
+}
+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecifikacjaStatusKomentarz
{{SpecName('Web Audio API', '#widl-AudioParam-setValueAtTime-void-float-value-double-startTime', 'setValueAtTime')}}{{Spec2('Web Audio API')}} 
+ +

Zgodność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Wsparcie podstawowe{{CompatChrome(14)}} {{property_prefix("webkit")}}{{CompatVersionUnknown}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
Bez prefiksu{{CompatVersionUnknown}}{{CompatVersionUnknown}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari MobileChrome for Android
Wsparcie podstawowe{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}{{CompatChrome(28)}} {{property_prefix("webkit")}}
Bez prefiksu{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}     {{CompatVersionUnknown}}
+
+ +

Zobacz również

+ + diff --git a/files/pl/web/api/cache/index.html b/files/pl/web/api/cache/index.html new file mode 100644 index 0000000000..a4c75fd8d0 --- /dev/null +++ b/files/pl/web/api/cache/index.html @@ -0,0 +1,121 @@ +--- +title: Cache +slug: Web/API/Cache +translation_of: Web/API/Cache +--- +
{{draft}} {{APIRef("Service Workers API")}}
+ +

Interfejs Cache ServiceWorkera API reprezentuje magazyn dla par obiektu żądania oraz obiektu odpowiedzi, które są cache'owane jako część cyklu życia {{domxref("ServiceWorker", "ServiceWorkera")}}. Domena może mieć wielokrotne nazwane obiekty Cache, których zawartość jest pod całkowitą kontrolą service workerów.

+ +

Każdy obiekt Cache jest kolekcją par klucz/wartość. By w pełni zarządzać zawartością cache'ów (by następnie użyć je offline), interfejs ten dostarcza metody w dużej mierze zgodne z obiektem {{jsxref("Map")}}, jednakże wraz z dodatkowymi, poręcznymi metodami.

+ +

Jesteś odpowiedzialny za sposób zarządzania aktualizacjami Cache'u przez {{domxref("ServiceWorker", "ServiceWorkera")}}. Elementy w Cache'u nie są aktualizowane, chyba że jest to wyraźnie zażądane; nie wygasają jeżeli nie usunięte. Użyj {{domxref("CacheStorage.open", "CacheStorage.open(nazwa)")}}, by otworzyć własny, określony obiekt Cache'u, a następnie wywołać jakąkolwiek z jego metod, by nim operować.

+ +

Również do Ciebie należy okresowe opróżnianie wpisów cache'u. Każda przeglądarka ma określony limit powierzchni, który może zostać użyty przez danego service workera. Upewnij się, że opisujesz cache'y poprzez nazwy oraz używasz cache tylko z danej wersji {{domxref("ServiceWorker", "ServiceWorkera")}}, ażeby mogły one bezpiecznie na nich pracować.

+ +

Właściwości

+ +
+
{{domxref("Cache.options")}}
+
Opcjonalny parametr przekazywany do metod: {{domxref("Cache.match", "Cache.match(żądanie, opcje)")}}, {{domxref("Cache.add", "Cache.add(żądanie)")}} i {{domxref("Cache.keys", "Cache.keys(żądanie, opcje)")}} z poniższymi atrybutami: ignoreSearch, ignoreMethod, ignoreVary, prefixMatch, cacheName.
+
+ +

Metody

+ +
+
{{domxref("Cache.match", "Cache.match(żądanie, opcje)")}}
+
Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do pierwszego pasującego żądania w obiekcie {{domxref("Cache", "Cache'u")}}.
+
{{domxref("Cache.add", "Cache.add(żądanie)")}}
+
Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego wpisu {{domxref("Cache", "Cache'u")}}, którego kluczem jest żądanie. Ta metoda nadal jest w trakcie tworzenia (zobacz http://crbug.com/427652). Póki co używaj ServiceWorker cache polyfill.
+
{{domxref("Cache.addAll", "Cache.addAll(żądania)")}}
+
Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego szeregu złożonego z wpisów {{domxref("Cache", "Cache'u")}}, którego kluczami są żądania. Metoda ta jest nadal w trakcie tworzenia (zobacz http://crbug.com/427652). Póki co używaj ServiceWorker cache polyfill.
+
{{domxref("Cache.put", "Cache.put(żądanie, odpowiedź)")}}
+
Dodaje dodatkowe pary klucz/wartość do aktualnego obiektu {{domxref("Cache")}}.
+
{{domxref("Cache.delete", "Cache.delete(żądanie, opcje)")}}
+
Znajduje wpis {{domxref("Cache", "Cache'u")}}, którego klucz jest żądaniem, jeśli znaleziony, usuwa ten wpis, zwracając następnie {{jsxref("Promise")}}, rozwiązywany do true. Jeśli dany wpis {{domxref("Cache", "Cache'u")}} nie został znaleziony, zwraca false.
+
{{domxref("Cache.keys", "Cache.keys(żądanie, opcje)")}}
+
Zwraca {{jsxref("Promise")}}, który rozwiązuje się do szerego złożonego z kluczów {{domxref("Cache", "Cache'u")}}.
+
+ +

+

Specyfikacje

+

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Zgodność z przeglądarką

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{CompatGeckoDesktop("33.0")}}{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Warte uwagi

+ + diff --git a/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html b/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..ca8bc15570 --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,169 @@ +--- +title: Podstawowe użycie elementu canvas +slug: Web/API/Canvas_API/Tutorial/Basic_usage +tags: + - Canvas + - Grafika + - HTML + - Płótno + - Sredniozaawansowany + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +
+

Zacznijmy od przyjrzenia się znacznikowi {{HTMLElement("canvas")}} należącego do zbioru elementów {{Glossary("HTML")}}. W tym rozdziale nauczysz się jak ustanowić dwuwymiarowy kontekst płótna, oraz narysujesz swój pierwszy rysunek.

+
+ +

Element <canvas>

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +
+

Uwaga: W tym tutorialu będziemy używać słowa canvas zamiennie ze słowem płótno.

+
+ +

Na pierwszy rzut oka {{HTMLElement("canvas")}} wygląda jak element {{HTMLElement("img")}}, z tą różnicą, że nie posiada on atrybutów src oraz alt. W swojej specyfice element <canvas> posiada jedynie dwa atrybuty, {{htmlattrxref("width", "canvas")}} oraz {{htmlattrxref("height", "canvas")}}. Nie są one wymagane oraz mogą być ustanowione za pomocą właściwości {{Glossary("DOM")}}. Jeśli wartości atrybutów width oraz height nie zostaną określone, zostaną użyte domyślne: szerokość - 300 pikseli, wysokość - 150 pikseli. Za pomocą {{Glossary("CSS")}} możemy narzucić rozmiar płótna, ale podczas renderowania dokumentu, rysunek zostanie dopasowany do domyślnej wielkości: jeśli wartości określone za pomocą CSS nie będą proporcjonalne z wartościami domyślnymi, rysunek zostanie zniekształcony.

+ +
+

Uwaga: Jeśli rysunek wydaje się zniekształcony, spróbuj określić atrybuty width oraz height bezpośrednio wewnątrz znacznika <canvas>, a nie za pomocą CSS.

+
+ +

id jest globalnym atrybutem HTML i można go stosować z każdym elementem HTML (tak samo jak np. class). Warto go używać, aby w ten sposób mieć dostęp do elementu z poziomy skryptu.

+ +

Element <canvas> można stylizować za pomocą CSS tak, jak każdy obraz ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Z tym, że żadna z reguł CSS nie wpłynie na zawartość płótna. Zobaczymy to w późniejszym rozdziale tego tutorialu. Jeśli nie określimy inaczej, tło płótna będzie w pełni przezroczyste.

+ +
+

Treść zastępcza

+ +

Inaczej niż w przypadku {{HTMLElement("img")}}, w elemencie <canvas> tak samo jak w {{HTMLElement("video")}}, {{HTMLElement("audio")}}, czy {{HTMLElement("picture")}} łatwo jest określić to, co będzie wyświetlane w starszych przeglądarkach albo tych, które jeszcze nie obsługują tego elementu, jak np. Internet Explorer poprzedzający wersję 9 oraz przeglądarki tekstowe.

+ +

Aby zapewnić treść zastępczą wystarczy zagnieździć ją wewnątrz elementu <canvas> ... </canvas>. Przeglądarki nieobsługujące tego elementu, zignorują rysunek i zamiast tego wyświetlą to, co zagnieździliśmy wewnątrz tegoż elementu. Natomiast przeglądarki obsługujące element <canvas> wygenerują jego zawartość ignorując przy tym wszystko, co znajduje się wewnątrz tego elementu.

+ +
+

Uwaga: Gdy mówimy o tym, co znajduje się w znaczniku <canvas>, mamy na myśli jego atrybuty czyli to, co znajduje się pomiędzy znakami < oraz > (np. <canvas class="nazwa-klasy">. Natomiast gdy mówimy o tym, co znajduje się wewnątrz elementu <canvas>, mamy na myśli wszystko, co znajduje się pomiędzy znacznikiem otwierającym <canvas>, a znacznikiem zamykającym </canvas> (np. <canvas><img src="/canvas.jpg"></canvas>). W tym drugim przypadku mówimy o zagnieżdżaniu   jednego elementu w drugim.

+
+ +

Treść zastępczą może stanowić opis, tego co znajduje się na płótnie lub statyczny obraz wygenerowanej zawartości. Oto przykład:

+ +
<canvas id="stockGraph" width="150" height="150">
+  current stock price: $3.15 + 0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

Umieszczanie tekstu w stylu: Twoja przeglądarka nie obsługuje elementu canvas, nie pomoże czytelnikowi w zrozumieniu treści. Zapewnienie treści zastępczej uczyni element canvas bardziej dostępnym.

+ +

Wymagany znacznik końca </canvas>

+ +

Z uwagi na sposób w jaki tworzymy treść zastępczą, znacznikowi <canvas> musi towarzyszyć znacznik zamykający </canvas>.  Gdybyśmy go nie wprowadzili, przeglądarka zinterpretowałaby wszystko, co znajduje się po znaczniku otwierającym <canvas> jako treść zastępczą.

+ +

Jeśli nie decydujemy się, aby zapewnić treść zastępczą, w dalszym ciągu musimy użyć znaczników początkowego i końcowego <canvas id="foo" ...></canvas>, z tą różnicą, że nie będziemy umieszczać niczego wewnątrz tego elementu. Jest to prawidłowy zapis dla przeglądarki, która obsługuje element canvas. Przeglądarki, które go nie obsługują, niczego w tym miejscu nie wyświetlą.

+ +

Kontekst renderingu

+ +

Element {{HTMLElement("canvas")}} tworzy powierzchnię rysunkową o stałym rozmiarze zapewniając jeden lub więcej kontekstów renderingu, które są używane do tworzenia i manipulowania wyświetlaną zawartością. W tym tutorialu skupimy się na kontekście dwuwymiarowym (2D). Inne konteksty mogą wykorzystywać odmienne sposoby renderowania, np WebGL wykorzystuje kontekst trójwymiarowy (3D) bazujący na OpenGL ES.

+ +

Początkowo płótno jest puste, pozbawione tła. Aby coś na nim wyświetlić, skrypt musi posiadać dostęp do kontekstu renderowania a następnie musi coś w nim narysować. Element {{HTMLElement("canvas")}} posiada metodę {{domxref("HTMLCanvasElement.getContext", "getContext()")}} niezbędną, aby uzyskać dostęp do nowego kontekstu renderowania oraz jego funcji rysujących. Metoda getContext() wymaga podania jednego argumentu, który określa typ kontekstu. Dla rysunków dwuwymiarowych, o których mowa w tym tutorialu, argument metody {{domxref("CanvasRenderingContext2D")}} wymaga podania wartości tekstowej "2d".

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

W pierwszej lini program uzyskuje dostęp do węzła DOM reprezentującego element {{HTMLElement("canvas")}} za pomocą metody {{domxref("document.getElementById()")}}. Posiadając dostęp do węzła DOM, możemy następnie uzyskać dostęp do kontekstu renderowania rysunku za pomocą metody getContext().

+ +
+

Test zgodności

+ +

Treść zastępcza jest wyświetlana w przeglądarce, która nie obsługuje elementu {{HTMLElement("canvas")}}. Również z poziomu skryptu możemy sprawdzić czy przeglądarka wspiera znacznik canvas. W tym celu posługujemy się metodą getContext(). Oto przykład:

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext) {
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+
+ +

Przeglądarka, która nie wspiera znacznika canvas, nie rozpoznaje również metody getContext(). W takim wypadku wyrażenie canvas.getContext zwróci logiczną wartość false.

+
+
+ +

 Szkielet szablonu

+ +

Poniżej znajduje się szablon dokumentu HTML, którego będziemy używać jako podstawy w kolejnych przykładach ilustrujących canvas.

+ +
+

Uwaga: podczas produkcji stron internetowych warto umieszczać skrypty oraz arkusze stylów w osobnych plikach dla lepszej organizacji kodu. W tym tutorialu przykładowe skrypty będziemy jednak osadzać wewnątrz kodu HTML, tak aby cały przykład był zwięzły oraz w pełni funcjonalny.

+
+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw() {
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext) {
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

Skrypt zawiera funckcję draw(), która jest wykonywana po załadowaniu strony; uczyniliśmy to za pomocą obserwatora zdarzenia {{event("load")}} dokumentu HTML. Funkcja taka może być również wywołana za pomocą metody {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} lub jeszcze innej, która obsługuje zdarzenia, po tym jak strona zostanie załadowana.

+ +

Oto jak szablon wygląda w akcji. Jak widać, początkowo jest on pusty.

+ +

{{EmbedLiveSample("A_skeleton_template", 160, 160)}}

+ +

Prosty przykład

+ +

Na razie spójrzmy na poniższy przykład, zawierający rysunek dwóch przecinających się kwadratów, z których jeden jest przezroczysty. Szczegóły działania poszczególnych elementów kodu poznamy w dalszej części tego tutorialu.

+ +
<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8"/>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById('canvas');
+      if (canvas.getContext) {
+        var ctx = canvas.getContext('2d');
+
+        ctx.fillStyle = 'rgb(200, 0, 0)';
+        ctx.fillRect(10, 10, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

Przykład wygląda następująco:

+ +

{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

diff --git a/files/pl/web/api/canvas_api/tutorial/index.html b/files/pl/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..a8b41b4ca9 --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,60 @@ +--- +title: Rysowanie grafiki z elementem canvas +slug: Web/API/Canvas_API/Tutorial +tags: + - Grafika + - HTML + - HTML5 + - Internet + - Kanwa + - Poradnik + - instrukcja +translation_of: Web/API/Canvas_API/Tutorial +--- +
{{CanvasSidebar}}
+ +
+ +
+

<canvas> jest elementem HTML, który może być użyty do rysowania grafik używając skryptów (często JavaScript'u). To może zostać użyte do  na przykład rysowania wykresów, tworzenia kompozycji zdjęcia lub prostych (i i nie prostych) animacji. Obrazy na tej strone pokazują przykłady implementacji <canvas>, które będą stworzone w tym poradniku.

+
+ +

Ten poradnik opisuje jak używać elementu <canvas> do rysowania grafik 2D, rozpoczynając od podstaw. Zawarte przykłady powinny dać Ci kilka czystych pomysłów co możesz zrobić z kanwą i zapewnią przykłady kodu, które mogą ci pomóc w budowaniu własnej zawartości.

+ +

Wprowadzono ją jako pierwszą w WebKit przez Apple dla OS X Dashboard, <canvas> od tego momentu została wprowadzona do przeglądarek. Dziś wszystkie poważne przeglądarki wspierają kanwę.

+ +

Zanim zaczniesz

+ +

Używanie elementu <canvas> nie jest trudne, ale potrzebujesz podstawowego zrozumienia HTML i JavaScript. Element <canvas> nie jest wspierany w kilku starszych przeglądarkach, ale ma wsparcie ze strony nowych wersji poważnych przeglądarek. Domyślnym rozmiarem kanwy jest 300 px × 150 px (szerokość × wysokość). Ale własne rozmiary mogą zostać zdefiniowane za pomocą własności HTML height i width. W celu narysowania grafik na kanwie używamy obiektu kontekstu w JavaScript, który tworzy grafiki w locie.

+ +

W tym poradniku

+ + + +

Zobacz także

+ + + +

Notka dla współtwórców

+ +

Z powodu niefortunnego błędu technicznego, który miał miejsce 17 Czerwca 2013, straciliśmy historię tego poradnika, wliczając w to także atrybucje do wszystkich współtwórców do zawartości tego. Przepraszamy za to i mamy nadzieję, że wybaczycie nam tą niefortunną wpadkę.

+ +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
diff --git a/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html b/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html new file mode 100644 index 0000000000..68efe0225f --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/optymalizacja_canvas/index.html @@ -0,0 +1,119 @@ +--- +title: Optymalizacja elementu canvas +slug: Web/API/Canvas_API/Tutorial/Optymalizacja_canvas +tags: + - Canvas + - Grafika + - HTML + - HTML5 + - Poradnik + - Tutorial + - zaawansowany +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

{{HTMLElement("canvas")}}  to jeden z najczęściej używanych standardów do renderowania grafiki 2D w przeglądarce. Zazwyczaj stosuje się go do tworzenia gier i skomplikowanych wizualizacji, które nierzadko starają się wycinąć z „płótna" maksimum jego możliwości. Niestety, równie często prowadzi to do spadków wydajności. W tym artykule przygotowaliśmy dla was kilka wskazówek jak zoptymalizować element canvas, aby poprawić działanie waszych stron i aplikacji.

+
+ +

Wskazówki dot. wydajności

+ +

Poniżej znajdziecie kilka rozwiązań, które poprawią wydajność elementu canvas:

+ +

Pre-renderuj proste lub powtażające się obiekty na dodatkowym canvasie poza ekranem

+ +

Jeśli w każdej klatce rysujesz wiele podobnych obiektów, stwórz niewyświetlany, roboczy canvas, narysuj na nim swój element raz (lub za każdym razem gdy ulega zmianom), a następnie wykorzystaj render w głównym canvasie.

+ +
obiekt.canvasRoboczy = document.createElement('canvas');
+obiekt.canvasRoboczy.width = obiekt.width;
+obiekt.canvasRoboczy.height = obiekt.height;
+obiekt.canvasRoboczy = obiekt.canvasRoboczy.getContext('2d');
+
+obiekt.render(obiekt.offscreenContext);
+
+ +

Staraj się używać liczb całkowitch do koordynatów

+ +

Renderowanie między pikselami zachodzi, gdy rysujesz obiekt używając niepełnych wartości.

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

Ta praktyka zmusza przeglądarkę do wykonania dodatkowych obliczeń, by wytworzyć efekt anty-aliasingu. Żeby temu zapobiec, zaokrąglij koordynaty, na przykład przy użyciu {{jsxref("Math.floor()")}}.

+ +

Nie skaluj obrazów za pomocą drawImage

+ +

Posłuż się canvasem poza ekranem, renderując swój obrazek w kilku różnych rozmiarach podczas ładowania, zamiast renderować go w każdej klatce.

+ +

Używaj wielu warstw w skomplikowanych scenach

+ +

Tak jak niektóre elementy nieustannie są w ruchu, inne (jak np. UI) nigdy nie zmieniają położenia. Dobrym sposobem na optymalizację w tej sytuacji jest zastosowanie warstw przy użyciu kilku canvasów roboczych.

+ +

Przykładowo, możesz stworzyć warstwę dla interfejsu rysowaną nad innymi, która aktualizuje się tylko w momentach, gdy jest używana. Oprócz tego, możesz przenaczyć jedną warstwę na pierwszy plan, gdzie umieścisz wszystkie elementy, które odnawiane są często oraz jedną warstwę na tło, na której obiekty aktualizowane są bardzo rzadko.

+ +
<div id="scena">
+  <canvas id="warstwaUi" width="480" height="320"></canvas>
+  <canvas id="warstwaGry" width="480" height="320"></canvas>
+  <canvas id="warstwaTla" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #scena {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black
+  }
+  canvas { position: absolute; }
+  #warstwaUI { z-index: 3 }
+  #warstwaGry { z-index: 2 }
+  #warstwaTla { z-index: 1 }
+</style>
+
+ +

Użyj CSS dla dużych obrazów w tle

+ +

Jeśli twoja gra, jak większość, posiada statyczne tło, stwórz element {{HTMLElement("div")}} z własnością CSS {{cssxref("background")}} , który umieścisz pod canvasem. Dzięki temu unikniesz rysowania dużego obrazu w każdej klatce z osobna.

+ +

Skaluj canvas za pomocą CSS

+ +

Transformacje CSS są szybsze dzięki wykorzystaniu karty graficznej. Powiększanie canvasu działa szybciej niż jego pomniejszanie. Dla Firefox OS ustaw 480 x 320 px.

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+
+ +

Wyłącz przezroczystość

+ +

Jeśli twoja gra korzysta z canvasu i nie ma potrzeby, by był on przezroczysty, ustaw wartość alpha na false podczas tworzenia kontekstu: HTMLCanvasElement.getContext(). To powinno poprawić wydajność.

+ +
var ctx = canvas.getContext('2d', { alpha: false });
+ +

Pozostałe wskazówki

+ + + +

Zobacz również:

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html b/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html new file mode 100644 index 0000000000..08c589844b --- /dev/null +++ b/files/pl/web/api/canvas_api/tutorial/rysowanie_ksztaltow/index.html @@ -0,0 +1,571 @@ +--- +title: Rysowanie kształtów w canvas +slug: Web/API/Canvas_API/Tutorial/rysowanie_ksztaltow +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
+ +
+

Ok, stworzyliśmy nasze środowisko canvas i teraz możemy poznać tajniki tworzenia grafiki za pomocą canvas. W tym rozdziale nauczysz się rysować prostokąty, trójkąty, linie, łuki oraz krzywe - czyli podstawowe kształty.

+
+ +

Siatka

+ +

Nim zaczniemy rysować, poznajmy najpierw siatkę czyli układ współrzędnych canvas. Szablon dokumentu z poprzedniego rozdziału zawiera element canvas o rozmiarach 150 na 150 (pikseli). Ilustracja po prawej ukazuje standardową siatkę naszego płótna. Domyślnie jedna jednostka odległości na siatce odpowiada wielkości jednego piksela na płótnie. Wartości siatki liczone są od lewego górnego rogu układu współrzędnych (x,y). W dalszej części dowiesz się, jak zamienić pozycję, tak by początek układu współrzędnych znajdował się gdzie indziej, jak go obrócić a nawet przeskalować. Na razie jednak użyjemy ustawień domyślnych. 

+ +

Rysowanie prostokątów

+ +

W przeciwieństwie do {{Glossary("SVG")}}, {{HTMLElement("canvas")}} na razie wspiera jedynie tworzenie prostokątów. Pozostałe figury geometryczne musimy stworzyć za pomocą ścieżek. Na szczęście mamy do dyspozycji zestaw funkcji za pomocą których jesteśmy w stanie stworzyć figury o dowolnej złożoności.

+ +

Najpierw przyjrzyjmy się prostokątowi. Istnieją trzy funkcje rysujące prostokąt:

+ +
+
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
+
Rysuje pole prostokąta.
+
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
+
Rysuje obwód prostokąta.
+
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
+
Wymazuje prostokątny obszar, w wyniku czego staje się on całkiem przezroczysty. Działą to jak gumka w formie prostokąta.
+
+ +

Każda z tych funkcji posiada jednakowe parametry. x i y to współrzędne na siatce - wyznaczają one pozycje lewego górnego rogu prostokąta. A width oraz height określają jego rozmiar.

+ +

Poniżej znajduje się funkcjadraw() z poprzedniej strony, tutaj wzbogacona o trzy metody tworzenia prostokątów.

+ +

Rectangular shape example

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25,25,100,100);
+    ctx.clearRect(45,45,60,60);
+    ctx.strokeRect(50,50,50,50);
+  }
+}
+ +

Oto wynik działania tego skryptu:

+ +

{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

+ +

Funkcja fillRect() rysuje czarny kwadrat o boku 100 pikseli. Funkcja clearRect() wymazuje kwadratowy obszar o boku 60 pikseli pośrodku czarnego prostokąta, a następnie wywołanie funkcji strokeRect() tworzy obrys kratdatu o boku 50 pikseli również w centrum poprzedniej figury.

+ +

W kolejnych rozdziałąch poznasz dwie inne *metody dla clearReact(), oraz zobaczysz jak zmienić kolor oraz styl obrysu renderowanych kształtów.

+ +

W przeciwieńśtwie do funkcji tworzących ścieżki o czym przekonasz się później, wszystkie trzy funkcje tworzące prostokąt rysują kształ natychmiast po ich wywołaniu.

+ +

Rysowanie ścieżek

+ +

Drugim zarazem ostatnim podstawowym kształetem jest cieżka. Ścieżka złożona jest z punktów połączonych liniami prostymi lub krzywymi, o różnej grubości i o różnym kolorze. Ścieżka, a nawet jej fragment może być zamknięta. Aby utworzyć kształt za pomocą ścieżki wykonaj następujące kroki:

+ +
    +
  1. utwórz ścieżkę,
    2. +
  2. użyj komend rysujących aby rysować ścieżkę,
    3. +
  3. zamknij ścieżkę.
    4. +
  4. Po utworzeniu ścieżki możesz ją obrysować lub wypełnić, i dopiero wtedy ukaże się ona w canvasie.
    5. +
+ +

Oto funkcje potrzebne do wykonania tego zadania:

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
Tworzy nową ścieżkę. Po jej utworzeniu, wszelkie kolejne funkcce rysujące będą się do niej odwoływały oraz kontynuowały jej rysunek.
+
Path methods
+
Metoda do ustalania innych ścieżek dla obiektów.
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
Zamyka ścieżkę aby przyszłe polecenia rysowania, były kierowane ponownie do kontekstu(ctx).
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
Rysuje kształ poprzez odrysowanie konturu.
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
Rysuje kształ poprzez wypełnienie ścieżek wyznaczonego obszaru kontekstowego.
+
+ +

The first step to create a path is to call the beginPath(). Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we can start drawing new shapes.

+ +
Note: When the current path is empty, such as immediately after calling beginPath(), or on a newly created canvas, the first path construction command is always treated as a moveTo(), regardless of what it actually is. For that reason, you will almost always want to specifically set your starting position after resetting a path.
+ +

The second step is calling the methods that actually specify the paths to be drawn. We'll see these shortly.

+ +

The third, and an optional step, is to call closePath(). This method tries to close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or there's only one point in the list, this function does nothing.

+ +
Note: When you call fill(), any open shapes are closed automatically, so you don't have to call closePath(). This is not the case when you call stroke().
+ +

Drawing a triangle

+ +

For example, the code for drawing a triangle would look something like this:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.fill();
+  }
+}
+
+ +

The result looks like this:

+ +

{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

+ +

Moving the pen

+ +

One very useful function, which doesn't actually draw anything but becomes part of the path list described above, is the moveTo() function. You can probably best think of this as lifting a pen or pencil from one spot on a piece of paper and placing it on the next.

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
Moves the pen to the coordinates specified by x and y.
+
+ +

When the canvas is initialized or beginPath() is called, you typically will want to use the moveTo() function to place the starting point somewhere else. We could also use moveTo() to draw unconnected paths. Take a look at the smiley face below.

+ +

To try this for yourself, you can use the code snippet below. Just paste it into the draw() function we saw earlier.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+     var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);  // Mouth (clockwise)
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
+    ctx.stroke();
+  }
+}
+
+ +

The result looks like this:

+ +

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

If you'd like to see the connecting lines, you can remove the lines that call moveTo().

+ +
+

Note: To learn more about the arc() function, see the {{anch("Arcs")}} below.

+
+ +

Lines

+ +

For drawing straight lines, use the lineTo() method.

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
Draws a line from the current drawing position to the position specified by x and y.
+
+ +

This method takes two arguments, x and y, which are the coordinates of the line's end point. The starting point is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc. The starting point can also be changed by using the moveTo() method.

+ +

The example below draws two triangles, one filled and one outlined.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

This starts by calling beginPath() to start a new shape path. We then use the moveTo() method to move the starting point to the desired position. Below this, two lines are drawn which make up two sides of the triangle.

+ +

{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

You'll notice the difference between the filled and stroked triangle. This is, as mentioned above, because shapes are automatically closed when a path is filled, but not when they are stroked. If we left out the closePath() for the stroked triangle, only two lines would have been drawn, not a complete triangle.

+ +

Arcs

+ +

To draw arcs or circles, we use the arc() or arcTo() methods.

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
+
Draws an arc which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
+
Draws an arc with the given control points and radius, connected to the previous point by a straight line.
+
+ +

Let's have a more detailed look at the arc method, which takes six parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the start and end points of the arc in radians, along the curve of the circle. These are measured from the x axis. The anticlockwise parameter is a Boolean value which, when true, draws the arc anticlockwise; otherwise, the arc is drawn clockwise.

+ +
+

Note: Angles in the arc function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: radians = (Math.PI/180)*degrees.

+
+ +

The following example is a little more complex than the ones we've seen above. It draws 12 different arcs all with different angles and fills.

+ +

The two for loops are for looping through the rows and columns of arcs. For each arc, we start a new path by calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily do that in real life.

+ +

The x and y coordinates should be clear enough. radius and startAngle are fixed. The endAngle starts at 180 degrees (half a circle) in the first column and is increased by steps of 90 degrees, culminating in a complete circle in the last column.

+ +

The statement for the clockwise parameter results in the first and third row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the bottom half filled arcs.

+ +
+

Note: This example requires a slightly larger canvas than the others on this page: 150 x 200 pixels.

+
+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i<4;i++){
+      for(var j=0;j<3;j++){
+        ctx.beginPath();
+        var x = 25+j*50; // x coordinate
+        var y = 25+i*50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
+        var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i>1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+ +

{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

+ +

Bezier and quadratic curves

+ +

The next type of paths available are Bézier curves, available in both cubic and quadratic varieties. These are generally used to draw complex organic shapes.

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
Draws a quadratic Bézier curve from the current pen position to the end point specified by x and y, using the control point specified by cp1x and cp1y.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
Draws a cubic Bézier curve from the current pen position to the end point specified by x and y, using the control points specified by (cp1x, cp1y) and (cp2x, cp2y).
+
+ +

The difference between these can best be described using the image on the right. A quadratic Bézier curve has a start and an end point (blue dots) and just one control point (indicated by the red dot) while a cubic Bézier curve uses two control points.

+ +

The x and y parameters in both of these methods are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the second control point.

+ +

Using quadratic and cubic Bézier curves can be quite challenging, because unlike vector drawing software like Adobe Illustrator, we don't have direct visual feedback as to what we're doing. This makes it pretty hard to draw complex shapes. In the following example, we'll be drawing some simple organic shapes, but if you have the time and, most of all, the patience, much more complex shapes can be created.

+ +

There's nothing very difficult in these examples. In both cases we see a succession of curves being drawn which finally result in a complete shape.

+ +

Quadratic Bezier curves

+ +

This example uses multiple quadratic Bézier curves to render a speech balloon.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+
+ +

{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

Cubic Bezier curves

+ +

This example draws a heart using cubic Bézier curves.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+
+ +

{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

Rectangles

+ +

In addition to the three methods we saw in {{anch("Drawing rectangles")}}, which draw rectangular shapes directly to the canvas, there's also the rect() method, which adds a rectangular path to a currently open path.

+ +
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "rect(x, y, width, height)")}}
+
Draws a rectangle whose top-left corner is specified by (x, y) with the specified width and height.
+
+ +

When this method is executed, the moveTo() method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.

+ +

Making combinations

+ +

So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i<8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i<6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i<8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.arcTo(x,y+height,x+radius,y+height,radius);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.arcTo(x+width,y+height,x+width,y+height-radius,radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.arcTo(x+width,y,x+width-radius,y,radius);
+  ctx.lineTo(x+radius,y);
+  ctx.arcTo(x,y,x,y+radius,radius);
+  ctx.stroke();
+}
+
+ +

The resulting image looks like this:

+ +

{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}

+ +

We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the fillStyle property on the drawing context, and the use of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.

+ +

We'll take another look at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.

+ +

Path2D objects

+ +

As we have seen in the last example, there can be a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to improve performance, the {{domxref("Path2D")}} object, available in recent versions of browsers, lets you cache or record these drawing commands. You are able to play back your paths quickly.
+ Lets see how we can construct a Path2D object:

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
The Path2D() constructor returns a newly instantiated Path2D object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of SVG path data.
+
+ +
new Path2D();     // empty path object
+new Path2D(path); // copy from another Path2D object
+new Path2D(d);    // path from SVG path data
+ +

All path methods like moveTo, rect, arc or quadraticCurveTo, etc., which we got to know above, are available on Path2D objects.

+ +

The Path2D API also adds a way to combine paths using the addPath method. This can be useful when you want to build objects from several components, for example.

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
+
Adds a path to the current path with an optional transformation matrix.
+
+ +

Path2D example

+ +

In this example, we are creating a rectangle and a circle. Both are stored as a Path2D object, so that they are available for later usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to use instead of the current path. Here, stroke and fill are used with a path argument to draw both objects onto the canvas, for example.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+
+ +

{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+ +

Using SVG paths

+ +

Another powerful feature of the new canvas Path2D API is using SVG path data to initialize paths on your canvas. This might allow you to pass around path data and re-use them in both, SVG and canvas.

+ +

The path will move to point (M10 10) and then move horizontally 80 points to the right (h 80), then 80 points down (v 80), then 80 points to the left (h -80), and then back to the start (z). You can see this example on the Path2D constructor page.

+ +
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/pl/web/api/childnode/index.html b/files/pl/web/api/childnode/index.html new file mode 100644 index 0000000000..f10d177d3c --- /dev/null +++ b/files/pl/web/api/childnode/index.html @@ -0,0 +1,190 @@ +--- +title: ChildNode +slug: Web/API/ChildNode +tags: + - API + - DOM + - Experimental + - Interface + - NeedsTranslation + - Node + - TopicStub +translation_of: Web/API/ChildNode +--- +
{{APIRef("DOM")}}
+ +

The childNodes interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.

+ +

childNodes is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.

+ +

Properties

+ +

There are neither inherited, nor specific properties.

+ +

Methods

+ +

There are no inherited methods.

+ +
+
{{domxref("childNodes.remove()")}} {{experimental_inline}}
+
Removes this childNodes from the children list of its parent.
+
{{domxref("childNodes.before()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this childNodes's parent, just before this childNodes. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("childNodes.after()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this childNodes's parent, just after this childNodes. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("childNodes.replaceWith()")}} {{experimental_inline}}
+
Replaces this childNodes in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'childNodes')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface in {{domxref("ParentNode")}} and childNodes. previousElementSibling and nextElementSibling are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the remove(), before(), after() and replaceWith() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Polyfill

+ +

External on github: childNode.js

+ +

Browser compatibility

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}}){{CompatChrome(1.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}9.010.04.0
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatChrome(23.0)}}{{CompatNo}}{{CompatGeckoDesktop(23)}}{{CompatNo}}16.0{{CompatNo}}
remove(){{experimental_inline}}{{CompatChrome(29.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}{{CompatNo}}16.0{{CompatNo}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatChrome(54.0)}}{{CompatNo}}{{CompatGeckoDesktop(49)}}{{CompatNo}}{{CompatOpera(39)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support (on {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
remove(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatNo}}{{CompatChrome(54.0)}}{{CompatNo}}{{CompatGeckoMobile(49)}}{{CompatNo}}{{CompatOperaMobile(39)}}{{CompatNo}}{{CompatChrome(54.0)}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/childnode/remove/index.html b/files/pl/web/api/childnode/remove/index.html new file mode 100644 index 0000000000..377e529db2 --- /dev/null +++ b/files/pl/web/api/childnode/remove/index.html @@ -0,0 +1,91 @@ +--- +title: ChildNode.remove() +slug: Web/API/ChildNode/remove +translation_of: Web/API/ChildNode/remove +--- +
{{APIRef("DOM")}}
+ +

Metoda ChildNode.remove() usuwa obiekt z drzewa, do którego należy.

+ +

Składnia

+ +
node.remove();
+
+ +

Przykład

+ +

Użycie remove()

+ +
<div id="div-01">To jest div-01</div>
+<div id="div-02">To jest div-02</div>
+<div id="div-03">To jest div-03</div>
+
+ +
var el = document.getElementById('div-02');
+el.remove(); // Usuwa div z ID 'div-02'
+
+ +

ChildNode.remove() jest poza zakresem

+ +

Metoda remove() nie wchodzi w zakres wyrażenia with. Zobacz  {{jsxref("Symbol.unscopables")}}, aby uzyskać więcej informacji.

+ +
with(node) {
+  remove();
+}
+// ReferenceError: remove is not defined
+ +

Polyfill

+ +

Można utworzyć polyfill metody remove() w Internet Explorer 9 (lub wyższej wersji) za pomocą następującego kodu: 

+ +
// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('remove')) {
+      return;
+    }
+    Object.defineProperty(item, 'remove', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function remove() {
+        this.parentNode.removeChild(this);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Initial definition.
{{SpecName('DOM4', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM4')}} 
+ +

Kompatybilność z przeglądarkami

+ +
{{Compat("api.ChildNode.remove")}}
+ +

Zobacz również

+ + diff --git a/files/pl/web/api/console/index.html b/files/pl/web/api/console/index.html new file mode 100644 index 0000000000..0e2b03ab60 --- /dev/null +++ b/files/pl/web/api/console/index.html @@ -0,0 +1,232 @@ +--- +title: Console +slug: Web/API/Console +translation_of: Web/API/Console +--- +
{{APIRef}}{{Non-standard_header}}
+ +

The console object provides access to the browser's debugging console (e.g. the Web Console in Firefox). The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.

+ +

The console can be accessed from any global object, {{domxref("Window")}} on browsing scopes, {{domxref("WorkerGlobalScope")}} and its specific variants in workers.

+ +

This page documents the {{anch("Methods")}} available on the console object and gives a few {{anch("Usage")}} examples.

+ +

Methods

+ +
+
{{domxref("Console.assert()")}}
+
Log a message and stack trace to console if first argument is false.
+
{{domxref("Console.count()")}}
+
Log the number of times this line has been called with the given label.
+
{{domxref("Console.debug()")}} {{deprecated_inline}}
+
An alias for log(); this was added to improve compatibility with existing sites already using debug(). However, you should use {{domxref("console.log()")}} instead.
+
{{domxref("Console.dir()")}}
+
Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.
+
{{domxref("Console.error()")}}
+
Outputs an error message. You may use string substitution and additional arguments with this method.
+
{{domxref("Console._exception()")}}
+
An alias for error();
+
{{domxref("Console.group()")}}
+
Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
+
{{domxref("Console.groupCollapsed()")}}
+
Creates a new inline group, indenting all following output by another level; unlike group(), this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call groupEnd().
+
{{domxref("Console.groupEnd()")}}
+
Exits the current inline group.
+
{{domxref("Console.info()")}}
+
Informative logging information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.log()")}}
+
For general output of logging information. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.profile()")}}
+
Starts the JavaScript profiler. You can specify an optional label for the profile.
+
{{domxref("Console.profileEnd()")}}
+
Stops the profiler. You can see the resulting profile in the JavaScript profiler.
+
{{domxref("Console.table()")}}
+
Displays tabular data as a table.
+
{{domxref("Console.time()")}}
+
Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
+
{{domxref("Console.timeEnd()")}}
+
Stops the specified timer and logs the elapsed time in seconds since its start.
+
{{domxref("Console.trace()")}}
+
Outputs a stack trace.
+
{{domxref("Console.warn()")}}
+
Outputs a warning message. You may use string substitution and additional arguments with this method.
+
+ + +

Usage

+ +

Outputting text to the console

+ +

The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.

+ +

There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.

+ +

Outputting a single object

+ +

The simplest way to use the logging methods is to output a single object:

+ +
var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+
+ +

The output looks something like this:

+ +
[09:27:13.475] ({str:"Some text", id:5})
+ +

Outputting multiple objects

+ +

You can also output multiple objects by simply listing them when calling the logging method, like this:

+ +
var car = "Dodge Charger";
+var someObject = {str:"Some text", id:5};
+console.info("My first car was a", car, ". The object is: ", someObject);
+ +

This output will look like this:

+ +
[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+
+ +

Using string substitutions

+ +

Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Substitution stringDescription
%oOutputs a hyperlink to a JavaScript object. Clicking the link opens an inspector.
%d or %iOutputs an integer. Formatting is not yet supported.
%sOutputs a string.
%fOutputs a floating-point value. Formatting is not yet supported.
+ +

Each of these pulls the next argument after the format string off the parameter list. For example:

+ +
for (var i=0; i<5; i++) {
+  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+}
+
+ +

The output looks like this:

+ +
[13:14:13.481] Hello, Bob. You've called me 1 times.
+[13:14:13.483] Hello, Bob. You've called me 2 times.
+[13:14:13.485] Hello, Bob. You've called me 3 times.
+[13:14:13.487] Hello, Bob. You've called me 4 times.
+[13:14:13.488] Hello, Bob. You've called me 5 times.
+
+ +

Styling console output

+ +

You can use the "%c" directive to apply a CSS style to console output:

+ +
console.log("%cMy stylish message", "color: red; font-style: italic");
+ +
+ +
{{h3_gecko_minversion("Using groups in the console", "9.0")}}
+ +

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

+ +
Note: Collapsed groups are not supported yet in Gecko; the groupCollapsed() method is the same as group() at this time.
+ +

To exit the current group, simply call console.groupEnd().

+ +

For example, given this code:

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+
+ +

The output looks like this:

+ +

nesting.png

+ +
{{h3_gecko_minversion("Timers", "10.0")}}
+ +

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as only parameter. To stop the timer, and to get the elapsed time in miliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

+ +

For example, given this code:

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+
+ +

will log the time needed by the user to discard the alert box:

+ +

timerresult.png

+ +

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

+ +
Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.
+ +

Stack traces

+ +

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:

+ +
foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+ +

The output in the console looks something like this:

+ +

+ +

Notes

+ + + +

See also

+ + + +

Other implementations

+ +

 

+ + diff --git a/files/pl/web/api/console/log/index.html b/files/pl/web/api/console/log/index.html new file mode 100644 index 0000000000..0f18916b5a --- /dev/null +++ b/files/pl/web/api/console/log/index.html @@ -0,0 +1,69 @@ +--- +title: Console.log() +slug: Web/API/Console/log +translation_of: Web/API/Console/log +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Wyświetla tekst w konsoli.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+
+ +

Parameters

+ +
+
obj1 ... objN
+
Lista obiektów JavaScript do wyświelenia. Podane obiekty są kolejno dołączane i przekazywane na wyjście.
+
msg
+
String JavaScript zawierający zero lub więcej stringów podmieniających.
+
subst1 ... substN
+
Obiekt JavaScript w którym zastępowane są stringi podmieniające z msg.  Daje Ci to dodatkową kontrolę nad formatem.
+
+ +

Zobacz również Outputting text to the console w dokumentacji {{domxref("console")}}.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName("Console API", "#consolelogobject--object-", "console.log()")}}{{Spec2("Console API")}}Początkowa definicja
+ +

Browser compatibility

+ +

 

+ + + +

{{Compat("api.Console.log")}}

+ +

 

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/cssnumericvalue/div/index.html b/files/pl/web/api/cssnumericvalue/div/index.html new file mode 100644 index 0000000000..cd74042e3e --- /dev/null +++ b/files/pl/web/api/cssnumericvalue/div/index.html @@ -0,0 +1,59 @@ +--- +title: CSSNumericValue.div() +slug: Web/API/CSSNumericValue/div +translation_of: Web/API/CSSNumericValue/div +--- +
{{draft}}{{APIRef("CSS Typed OM")}}{{SeeCompatTable}}
+ +

The div() method of the {{domxref("CSSNumericValue")}} interface divides the CSSNumericValue by the supplied value.

+ +

Syntax

+ +
var cssNumericValue = CSSNumericValue.div(number);
+ +

Parameters

+ +
+
number
+
Either a {{jsxref('Number')}} or a {{domxref('CSSNumericValue')}}.
+
+ +

Return value

+ +

A {{domxref('CSSMathProduct')}}.

+ +

Exceptions

+ +
+
TypeError
+
Indicates that an invalid type was passed to the method.
+
+ +

Examples

+ +
let mathProduct = CSS.px("24").div(CSS.percent("4"));
+// Prints "calc(24px / 4%)"
+mathProduct.toString();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Typed OM','#dom-cssnumericvalue-div','div')}}{{Spec2('CSS Typed OM')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.CSSNumericValue.div")}}

diff --git a/files/pl/web/api/cssnumericvalue/index.html b/files/pl/web/api/cssnumericvalue/index.html new file mode 100644 index 0000000000..eace9532a3 --- /dev/null +++ b/files/pl/web/api/cssnumericvalue/index.html @@ -0,0 +1,113 @@ +--- +title: CSSNumericValue +slug: Web/API/CSSNumericValue +tags: + - API + - CSS Typed Object Model API + - CSSNumericValue + - Experimental + - Houdini + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CSSNumericValue +--- +
{{draft}}{{APIRef("CSS Typed OM")}}{{SeeCompatTable}}
+ +

The CSSNumericValue interface of the CSS Typed Object Model API represents operations that all numeric values can perform.

+ +

Interfaces based on CSSNumericValue

+ +

Below is a list of interfaces based on the CSSNumericValue interface.

+ +
+ +
+ +

Properties

+ +

None.

+ +

Event handlers

+ +

No

+ +

Methods

+ +
+
{{domxref('CSSNumericValue.add')}}
+
Adds a supplied number to the CSSNumericValue.
+
{{domxref('CSSNumericValue.sub')}}
+
Subtracts a supplied number from the CSSNumericValue.
+
{{domxref('CSSNumericValue.mul')}}
+
Multiplies the CSSNumericValue by the supplied value.
+
{{domxref('CSSNumericValue.div')}}
+
Divides the CSSNumericValue by the supplied value.
+
{{domxref('CSSNumericValue.min')}}
+
Returns the minimum value passed
+
{{domxref('CSSNumericValue.max')}}
+
Returns the maximum value passed
+
{{domxref('CSSNumericValue.equals')}}
+
True if all the values are the exact same type and value, in the same order. Otherwise, false.
+
{{domxref('CSSNumericValue.to')}}
+
Converts value into another one with the specified unit.
+
{{domxref('CSSNumericValue.toSum')}}
+
TBD
+
{{domxref('CSSNumericValue.type')}}
+
TBD
+
{{domxref('CSSNumericValue.parse')}}
+
Allows a CSSNumericValue to be constructed directly from a string containing CSS. 
+
+ + + +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Typed OM','#numeric-value','CSSNumericValue')}}{{Spec2('CSS Typed OM')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See Also

+ + diff --git a/files/pl/web/api/cssrule/index.html b/files/pl/web/api/cssrule/index.html new file mode 100644 index 0000000000..e8893fe44c --- /dev/null +++ b/files/pl/web/api/cssrule/index.html @@ -0,0 +1,97 @@ +--- +title: cssRule +slug: Web/API/CSSRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSRule +--- +

{{ ApiRef() }}

+

Obiekt CSSRule reprezentuje pojedynczy arkusz stylu CSS. To może być pojedyncza reguła arkusza stylów CSS. Może być częścią listy stylesheet cssRules.

+

Jest tu kilka rodzajów reguł. Wszystkie one dzielą kilka wspólnych własności interfejsu {{ Anch("CSSRule") }} i większość posiada pewne specyficzne własności oraz typy reguł.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypInterfejs związany z regułąOpis
CSSRule.STYLE_RULE{{ Anch("CSSStyleRule") }} 
CSSRule.MEDIA_RULE{{ Anch("CSSMediaRule") }} 
CSSRule.FONT_FACE_RULE{{ Anch("CSSFontFaceRule") }} 
CSSRule.PAGE_RULE{{ Anch("CSSPageRule") }} 
CSSRule.IMPORT_RULE{{ Anch("CSSImportRule") }} 
CSSRule.CHARSET_RULE{{ Anch("CSSCharsetRule") }} 
CSSRule.UNKNOWN_RULE{{ Anch("CSSUnknownRule") }} 
+

CSSRule

+
+
+ cssText
+
+ Zwraca tekstową reprezentację reguły, np. "h1,h2 { font-size: 16pt }".
+
+ parentRule
+
+ Zwraca regule zawarta w treści jeśli takowa istnieje, np. regułę stylu znajdującą sie wewnątrz bloku @media.
+
+ parentStyleSheet
+
+ Zwraca obiekt stylesheet, którego reguła jest częścią.
+
+ type
+
+ Zwraca typ reguły, np. CSSRule.CHARSET_RULE lub CSSRule.IMPORT_RULE.
+
+

CSSStyleRule

+
+
+ selectorText
+
+ Pobiera/ustawia tekstową reprezentację selektora dla reguły, np.: "h1,h2".
+
+ style
+
+ Zwraca obiekt CSSStyleDeclaration dla reguły deklaracji bloku.
+
+

CSSStyleRule

+

CSSMediaRule

+

CSSFontFaceRule

+

CSSPageRule

+

CSSImportRule

+

CSSCharsetRule

+

CSSUnknownRule

+

Specyfikacja

+

DOM Level 2 CSS: CSSRule

+

{{ languages( { "en": "en/DOM/cssRule" } ) }}

diff --git a/files/pl/web/api/document/activeelement/index.html b/files/pl/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..bd8527e319 --- /dev/null +++ b/files/pl/web/api/document/activeelement/index.html @@ -0,0 +1,26 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/DocumentOrShadowRoot/activeElement +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca element, na którym ustawiony jest fokus.

+

{{ Note("Ten atrybut jest częścią specyfikacji HTML 5, która jest wciąż opracowywana.") }}

+

Składnia

+
var curElement = document.activeElement;
+
+

Przykład

+

Specyfikacja

+

Zarządzanie fokusem

+

 

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/document.activeElement", "es": "es/DOM/element.activeElement", "fr": "fr/DOM/document.activeElement", "ja": "ja/DOM/document.activeElement" } ) }}

diff --git a/files/pl/web/api/document/alinkcolor/index.html b/files/pl/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..82e8dda6cd --- /dev/null +++ b/files/pl/web/api/document/alinkcolor/index.html @@ -0,0 +1,24 @@ +--- +title: document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/alinkColor +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca bądź ustawia kolor aktywnych odnośników w ciele dokumentu.

+

Składnia

+
kolor = HTMLBodyElement.aLinkColor
+HTMLBodyElement.aLinkColor =kolor
+
+

Parametry

+ +

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.alinkColor", "es": "es/DOM/document.alinkColor" } ) }}

diff --git a/files/pl/web/api/document/anchors/index.html b/files/pl/web/api/document/anchors/index.html new file mode 100644 index 0000000000..e1681f5372 --- /dev/null +++ b/files/pl/web/api/document/anchors/index.html @@ -0,0 +1,38 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/anchors +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

anchors zwraca listę wszystkich kotwic w dokumencie.

+ +

Składnia

+ +
listaWęzłów = document.anchors
+
+ +

Przykład

+ +
if ( document.anchors.length >= 5 ) {
+    dump("dump found too many anchors");
+    window.location = "http://www.google.com";
+}
+
+ +

Uwagi

+ +

Ze względu na zgodność wsteczną, zwracany zestaw kotwic zawiera tylko kotwice posiadające atrybut name, bez tych które posiadają jedynie atrybut id.

+ +

Specyfikacja

+ +

DOM Level 2 HTML: anchors

+ +

{{ languages( { "en": "en/DOM/document.anchors", "es": "es/DOM/document.anchors", "ja": "ja/DOM/document.anchors" } ) }}

diff --git a/files/pl/web/api/document/applets/index.html b/files/pl/web/api/document/applets/index.html new file mode 100644 index 0000000000..719c43b33b --- /dev/null +++ b/files/pl/web/api/document/applets/index.html @@ -0,0 +1,26 @@ +--- +title: document.applets +slug: Web/API/Document/applets +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/applets +--- +

{{ ApiRef() }}

+

Podsumowanie

+

applets zwraca uporządkowaną listę apletów umieszczonych w dokumencie.

+

Składnia

+
listaWęzłów = document.applets
+
+

Przykład

+
// (Kiedy wiesz, że drugi aplet jest tym,
+// którego szukasz)
+my_java_app = document.applets[1];
+
+

Specyfikacja

+

applets

+
+  
+

{{ languages( { "en": "en/DOM/document.applets", "es": "es/DOM/document.applets" } ) }}

diff --git a/files/pl/web/api/document/bgcolor/index.html b/files/pl/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..cdc5731cbf --- /dev/null +++ b/files/pl/web/api/document/bgcolor/index.html @@ -0,0 +1,33 @@ +--- +title: document.bgColor +slug: Web/API/Document/bgColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/bgColor +--- +

{{ ApiRef() }}

+

Podsumowanie

+

{{ Deprecated_header() }} Własność + + bgColor + pobiera/zwraca kolor tła dokumentu.

+

Składnia

+
kolor = document.bgColor
+document.bgColor =kolor
+
+

Parametry

+ +

Przykład

+
document.bgColor = "darkblue";
+
+

Notes

+

Domyślną wartością tej własności w Mozilli Firefox jest kolor biały (#ffffff w systemie szesnastkowym).

+

Własność document.bgColor jest wycofywana DOM Level 2 HTML. Zalecanym rozwiązaniem alternatywnym jest użycie stylu CSS background-color, gdy możemy uzyskać dostęp bezpośrednio przez DOM za pomocą własnościdocument.body.style.backgroundColor. Innym alternatywnym rozwiązaniem jest document.body.bgColor, chociaż to rozwiązanie jest także wycofywane w HTML 4.01 na rzecz rozwiązania wykorzystującego CSS .

+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.bgColor", "es": "es/DOM/document.bgColor" } ) }}

diff --git a/files/pl/web/api/document/body/index.html b/files/pl/web/api/document/body/index.html new file mode 100644 index 0000000000..1ae1aa480e --- /dev/null +++ b/files/pl/web/api/document/body/index.html @@ -0,0 +1,31 @@ +--- +title: document.body +slug: Web/API/Document/body +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/body +--- +

{{ ApiRef() }}

+

Podsumowanie

+

body zwraca węzeł <body> lub <frameset> z bieżącego dokumentu.

+

Składnia

+
objRef = document.body
+document.body =objRef
+
+

Przykład

+
// HTML: <body id="oldBodyElement"></body>
+alert(document.body.id); // "oldBodyElement"
+var aNewBodyElement = document.createElement("body");
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+
+

Uwagi

+

document.body to element zawierający treść dokumentu. W dokumentach z elementem <body> własność zwraca tenże element, w dokumentach z definicją ramek zwracany jest najbardziej zewnętrzny element <frameset>.

+

Mimo, że body można samemu ustawić, jego zmiana spowoduje skuteczne usunięcie wszystkich potomków istniejącego elementu <body>.

+

Specyfikacja

+

body

+

{{ languages( { "en": "en/DOM/document.body", "es": "es/DOM/document.body" } ) }}

diff --git a/files/pl/web/api/document/characterset/index.html b/files/pl/web/api/document/characterset/index.html new file mode 100644 index 0000000000..4d7fa83359 --- /dev/null +++ b/files/pl/web/api/document/characterset/index.html @@ -0,0 +1,26 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/characterSet +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca kodowanie znaków dokumentu.

+

Składnia

+
ciąg = document.characterSet
+
+

Przykład

+
<button onclick="alert(document.characterSet);">Pokaż kodowanie znaków</button>
+// zwraca kodowanie znaków dokumentu, takie jak "ISO-8859-1 lub UTF-8"
+
+

Uwagi

+

Jest to zestaw znaków użyty przy renderowaniu strony, niekoniecznie taki, jak zadeklarowany w kodzie strony (użytkownik może narzucić własne kodowanie).

+

Kompletną listę dostępnych zestawów znaków znajdziesz tu: http://www.iana.org/assignments/character-sets.

+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.characterSet", "es": "es/DOM/document.characterSet" } ) }}

diff --git a/files/pl/web/api/document/clear/index.html b/files/pl/web/api/document/clear/index.html new file mode 100644 index 0000000000..fdeaf2e52e --- /dev/null +++ b/files/pl/web/api/document/clear/index.html @@ -0,0 +1,19 @@ +--- +title: document.clear +slug: Web/API/Document/clear +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/clear +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda clear czyści dokument, usuwając całą jego zawartość.

+

Składnia

+
document.clear()
+
+

Przykład

+
<button label="empty" onclick="document.clear();" />
+
+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

diff --git a/files/pl/web/api/document/close/index.html b/files/pl/web/api/document/close/index.html new file mode 100644 index 0000000000..b325beb8cc --- /dev/null +++ b/files/pl/web/api/document/close/index.html @@ -0,0 +1,26 @@ +--- +title: document.close +slug: Web/API/Document/close +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/close +--- +
+ {{APIRef}}
+
+  
+

Podsumowanie

+

Metoda document.close() kończy zapis do otwartego dokumentu.

+

Składnia

+
document.close()
+
+

Przykład

+
// otwieramy dokument do zapisu
+// i kończymy zamknięciem poprzez close()
+document.open();
+document.write("<P>The only content</P>.");
+document.close();
+
+

Specyfikacja

+

close

diff --git a/files/pl/web/api/document/compatmode/index.html b/files/pl/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..a2750f2ad8 --- /dev/null +++ b/files/pl/web/api/document/compatmode/index.html @@ -0,0 +1,32 @@ +--- +title: document.compatMode +slug: Web/API/Document/compatMode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/compatMode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy dokument renderowany jest w trybie zgodności wstecznej (ang. + + quirks mode + ), czy też w trybie standardów (ang. + + strict mode + ).

+

Składnia

+
tryb = document.compatMode
+
+

Parametry

+ +

Przykład

+
if ( document.compatMode == "BackCompat" ){
+  //wykonaj coś dla trybu zgodności
+}
+
+

{{ languages( { "en": "en/DOM/document.compatMode" } ) }}

diff --git a/files/pl/web/api/document/cookie/index.html b/files/pl/web/api/document/cookie/index.html new file mode 100644 index 0000000000..a711e9c1d2 --- /dev/null +++ b/files/pl/web/api/document/cookie/index.html @@ -0,0 +1,49 @@ +--- +title: document.cookie +slug: Web/API/Document/cookie +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/cookie +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Pobiera/ustawia listę ciasteczek powiązanych z dokumentem.

+ +

Składnia

+ +
listaCiasteczek = document.cookie
+document.cookie = listaCiasteczek
+
+ +

Parametry

+ + + +

Przykład

+ +
// ta funkcja ustawia dwa ciasteczka
+// a następnie wyświetla je w ostrzeżeniu
+function sgCookie() {
+  document.cookie = "name=oeschger";
+  document.cookie = "favorite_food=tripe";
+  alert(document.cookie);
+}
+// wyświetli: name=oeschger;favorite_food=tripe
+
+ +

Uwagi

+ +

Jeżeli nie ma ciasteczek powiązanych z tym dokumentem, funkcja zwraca pusty ciąg. Zauważ również, że nie możesz użyć tej własności, bu ustawić więcej niż jedno ciasteczko za jednym razem.

+ +

Specyfikacja

+ +

cookie

+ +

{{ languages( { "en": "en/DOM/document.cookie", "es": "es/DOM/document.cookie" } ) }}

diff --git a/files/pl/web/api/document/createattribute/index.html b/files/pl/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..ad996d5161 --- /dev/null +++ b/files/pl/web/api/document/createattribute/index.html @@ -0,0 +1,29 @@ +--- +title: document.createAttribute +slug: Web/API/Document/createAttribute +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/createAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

createAttribute tworzy nowy atrybut w bieżącym elemencie.

+

Składnia

+
atrybut = element.createAttribute(nazwa)
+
+

Parametry

+ +

Przykład

+
d = document.getElementById("div1");
+p = d.createAttribute("proportion");
+p.value = "100";
+
+

Uwagi

+

Zwracany jest węzeł typu Attribute. Kiedy masz już ten węzeł, tak jak w powyzszym przykładzie, możesz ustawić jego wartość za pomocą własności value. DOM nie wymusza typu atrybutów, jakie mogą zostać dodane w ten sposób do konkretnych elementów.

+

Specyfikacja

+

createAttribute

+

{{ languages( { "en": "en/DOM/document.createAttribute", "fr": "fr/DOM/document.createAttribute" } ) }}

diff --git a/files/pl/web/api/document/createdocumentfragment/index.html b/files/pl/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..e6bf6e6da3 --- /dev/null +++ b/files/pl/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,43 @@ +--- +title: document.createDocumentFragment +slug: Web/API/Document/createDocumentFragment +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createDocumentFragment +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Tworzy pusty fragment dokumentu.

+ +

Składnia

+ +
var fragmentDokumentu = document.createDocumentFragment();
+
+ +

fragmentDokumentu jest odniesieniem do pustego obiektu DocumentFragment.

+ +

Przykład

+ +
var frag = document.createDocumentFragment();
+frag.appendChild(document.createTextNode('Ipsum Lorem'));
+document.body.appendChild(frag);
+
+ +

Uwagi

+ +

DocumentFragment jest minimalnym obiektem dokumentu, który nie posiada rodzica. Obsługuje on następujące metody DOM 2: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.

+ +

Obsługuje on również następujące własności DOM 2: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.

+ +

Różne inne metody potrafią pobrać fragment dokumentu jako argument (na przykład metody interfejsu Node takie jak appendChild i insertBefore), w przypadku których dodawane lub wstawiane są dzieci fragmentu, nie zaś same fragmenty.

+ +

Specyfikacja

+ +

createDocumentFragment

+ +

{{ languages( { "en": "en/DOM/document.createDocumentFragment" } ) }}

diff --git a/files/pl/web/api/document/createelement/index.html b/files/pl/web/api/document/createelement/index.html new file mode 100644 index 0000000000..bf657b4103 --- /dev/null +++ b/files/pl/web/api/document/createelement/index.html @@ -0,0 +1,74 @@ +--- +title: document.createElement +slug: Web/API/Document/createElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createElement +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Tworzy element podanego typu. Zauważ, że zwracana instancja implementuje interfejs Element, zatem można manipulować atrybutami bezpośrednio na zwróconym obiekcie.

+ +

Składnia

+ +
''element'' = document.createElement(''typ'')
+
+ +

Parametry

+ + + +

Przykład

+ +
<html>
+<head>
+<title>||Praca z elementami||</title>
+</head>
+
+<script type="text/javascript">
+var my_div = null;
+var newDiv = null;
+
+function addElement()
+{
+  // tworzy nowy element div
+  // i daje jego zawartość
+  newDiv = document.createElement("div");
+  newDiv.innerHTML = "<h1>Hi there and greetings!</h1>";
+
+  // add the newly created element and it's content into the DOM
+  my_div = document.getElementById("org_div1");
+  document.body.insertBefore(newDiv, my_div);
+}
+
+</script>
+
+<body onload="addElement()">
+    <div id='org_div1'> The text above has been created dynamically.</div>
+</body>
+</html>
+
+ +

Uwagi

+ +

Jeżeli znane są atrybuty o domyślnych wartościach, zostaną automatycznie utworzone i przypisane do elementu węzły tychże atrybutów.

+ +

Aby utworzyć element o uściślonej nazwie i URI przestrzeni nazw, użyj metody createElementNS.

+ +

Specyfikacja

+ +

createElement

+ + + +
+ +

{{ languages( { "en": "en/DOM/document.createElement", "fr": "fr/DOM/document.createElement", "it": "it/DOM/document.createElement", "ja": "ja/DOM/document.createElement", "ko": "ko/DOM/document.createElement" } ) }}

diff --git a/files/pl/web/api/document/createevent/index.html b/files/pl/web/api/document/createevent/index.html new file mode 100644 index 0000000000..1064131504 --- /dev/null +++ b/files/pl/web/api/document/createevent/index.html @@ -0,0 +1,134 @@ +--- +title: document.createEvent +slug: Web/API/Document/createEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createEvent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Tworzy obiekt obsługi zdarzenia o określonym typie. Utworzony obiekt powinien zostać najpierw zainicjalizowany, a następnie przekazany do metody dispatchEvent elementu.

+

Składnia

+
var zdarzenie =document.createEvent(typ);
+
+ +

Przykład

+

dispatchEvent - przykład [pl]

+

Uwagi

+

Nazwy typów zdarzeń, które można przekazać do createEvent określane są przez + + moduły zdarzeń + . Niektóre moduły zdarzeń zdefiniowane są w specyfikacjach DOM Events, niektóre moduły w innych specyfikacjach (jak np. SVG), a pewne typy zdarzeń są specyficzne dla Gecko.

+

Szczegóły znajdziesz w poniższej tabeli.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Moduł zdarzeńTyp do przekazania w createEventMetoda używana do inicjalizacji zdarzenia
DOM Level 2 Events
Moduł zdarzeń interfejsu użytkownika"UIEvents"event.initUIEvent
Moduł zdarzeń myszy"MouseEvents"event.initMouseEvent
Moduł zdarzeń mutacji"MutationEvents"event.initMutationEvent
Moduł zdarzeń HTML"HTMLEvents"event.initEvent
DOM Level 3 Events
Moduł zdarzeń interfejsu użytkownika"UIEvent", "UIEvents"event.initUIEvent
Moduł zdarzeń myszy"MouseEvent", "MouseEvents"event.initMouseEvent
Moduł zdarzeń mutacji"MutationEvent", "MutationEvents"event.initMutationEvent
Moduł zdarzeń mutacji nazw (nie zaimplementowany przez Gecko - czerwiec 2006)"MutationNameEvent"event.initMutationNameEvent
Moduł zdarzeń tekstowych"TextEvent" (Gecko obsługuje też "TextEvents")event.initTextEvent
Moduł zdarzeń klawiatury"KeyboardEvent" (Gecko obsługuje też "KeyEvents")event.initKeyboardEvent
Moduł podstawowych zdarzeń"Event" (Gecko obsługuje też "Events")event.initEvent
SVG 1.1 Scripting
SVG"SVGEvents" (Gecko obsługuje też "SVGEvent")event.initEvent
"SVGZoomEvents" (Gecko obsługuje też "SVGZoomEvent")event.initUIEvent
Inne typy zdarzeń obsługiwane przez Gecko Gecko-related information is taken from nsEventDispatcher::CreateEvent code - see lxr.m.o
-"MouseScrollEvents", "PopupEvents"event.initMouseEvent
"PopupBlockedEvents"event.initPopupBlockedEvent
"XULCommandEvent", "XULCommandEvents"event.initCommandEvent
+

Niektóre zdarzenia mogą być tworzone przy użyciu dwóch nazw typów, ponieważ w specyfikacji DOM Level 3 Events zmieniono nazwy z liczby mnogiej na pojedynczą, pozostawiając nazwy w liczbie mnogiej dla zgodności wstecznej.

+

Specyfikacja

+

DOM Level 2 Events: createEvent

+

DOM Level 3 Events: createEvent

+

 

+
+  
+

{{ languages( { "en": "en/DOM/document.createEvent", "es": "es/DOM/document.createEvent", "ja": "ja/DOM/document.createEvent" } ) }}

diff --git a/files/pl/web/api/document/createrange/index.html b/files/pl/web/api/document/createrange/index.html new file mode 100644 index 0000000000..75dbacfe83 --- /dev/null +++ b/files/pl/web/api/document/createrange/index.html @@ -0,0 +1,29 @@ +--- +title: document.createRange +slug: Web/API/Document/createRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createRange +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca nowy objekt Range.

+

Składnia

+
range = document.createRange();
+
+

range jest utworzonym objektem range.

+

Przykład

+
var range = document.createRange();
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+
+

Uwagi

+

Gdy tylko Range jest utworzony, musisz określić jego punkty graniczne zanim będziesz mógł użyć większości jego metod.

+

Specyfikacja

+

DOM Level 2 Range: DocumentRange.createRange

+
+  
+

{{ languages( { "en": "en/DOM/document.createRange", "es": "es/DOM/document.createRange" } ) }}

diff --git a/files/pl/web/api/document/createtextnode/index.html b/files/pl/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..1fe0f9bd27 --- /dev/null +++ b/files/pl/web/api/document/createtextnode/index.html @@ -0,0 +1,62 @@ +--- +title: document.createTextNode +slug: Web/API/Document/createTextNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/createTextNode +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Tworzy nowy węzeł tekstowy.

+ +

Składnia

+ +
var tekst = document.createTextNode(tresc)
+
+ +

Parametry

+ + + +

Przykład

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode - przyklad</title>
+<script>
+function dodajWezelTekstowy(tekst) {
+  var nowytekst = document.createTextNode(tekst),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(nowytekst);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="dodajWezelTekstowy('TAK! ');">TAK!</button>
+  <button onclick="dodajWezelTekstowy('NIE! ');">NIE!</button>
+  <button onclick="dodajWezelTekstowy('JASNE! ');">JASNE!</button>
+
+  <hr />
+
+  <p id="p1">Pierwsza linia paragrafu.</p>
+</body>
+</html>
+ +

Specyfikacja

+ +

createTextNode

+ +
 
+ +

{{ languages( { "en": "en/DOM/document.createTextNode", "fr": "fr/DOM/document.createTextNode", "ko": "ko/DOM/document.createTextNode" } ) }}

diff --git a/files/pl/web/api/document/defaultview/index.html b/files/pl/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..905a966998 --- /dev/null +++ b/files/pl/web/api/document/defaultview/index.html @@ -0,0 +1,24 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/defaultView +--- +

{{ ApiRef() }}

+

 

+

Podsumowanie

+

document.defaultView zwraca odnośnik do domyślnego AbstractView dokumentu, lub null jeśli żadny nie jest dostępne

+

Składnia

+
var docDView = document.defaultView;
+
+

Własność tylko do odczytu.

+

Uwagi

+

document.defaultView jest częścią interfejsu DOM poziomu 2 DocumentView.

+

document.defaultView jest głównie odnośnikiem do okna obiektu dla dokumentu, jednakże nie jest to zdefiniowane w specyfikacji i nie można się na tym opierać we wszystkich środowiskach zwłaszcza, że nie wszystkie przeglądarki to implementują. it would probably be useful to provide concrete examples here

+

Specyfikacja

+

DOM Level 2 Views: defaultView

+

{{ languages( { "en": "en/DOM/document.defaultView" } ) }}

diff --git a/files/pl/web/api/document/designmode/index.html b/files/pl/web/api/document/designmode/index.html new file mode 100644 index 0000000000..3956fa8d9e --- /dev/null +++ b/files/pl/web/api/document/designmode/index.html @@ -0,0 +1,53 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +translation_of: Web/API/Document/designMode +--- +
{{ApiRef()}}
+ +

document.designMode kontroluje czy dokument może być edytowany. Dopuszczalne wartości to "on" (włączona edycja) oraz "off" (wyłączona edycja). Zgodnie ze specyfikacją, wartość domyślna to "off". Firefox stosuje ten standard. Dla wcześniejszych wersji Chrome oraz IE domyślną wartością było "inherit". Od wersji Chrome 43, standardem jest wartość "off", a "inherit" nie jest wspierane. W IE 6-10, wartość jest używana naprzemiennie.

+ +

Składnia

+ +
var mode = document.designMode;
+document.designMode = "on" || "off";
+ +

Przykład

+ +

Spraw aby element {{HTMLElement("iframe")}} był edytowalny:

+ +
iframeNode.contentDocument.designMode = "on";
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}Definicja
+ +

Kompatybilność przeglądarek

+ + + +

{{Compat("api.Document.designMode")}}

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/document/doctype/index.html b/files/pl/web/api/document/doctype/index.html new file mode 100644 index 0000000000..4894005b15 --- /dev/null +++ b/files/pl/web/api/document/doctype/index.html @@ -0,0 +1,21 @@ +--- +title: document.doctype +slug: Web/API/Document/doctype +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/doctype +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca definicję typu bieżącego dokumentu (DTD).

+

Składnia

+
ciąg = document.doctype
+
+

Uwagi

+

Atrybut doctype jest tylko do odczytu. Jeżeli nie ma DTD w dokumencie, zwrócone zostaje NULL.

+

Specyfikacja

+

docType

+

{{ languages( { "en": "en/DOM/document.doctype" } ) }}

diff --git a/files/pl/web/api/document/documentelement/index.html b/files/pl/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..bc729c829f --- /dev/null +++ b/files/pl/web/api/document/documentelement/index.html @@ -0,0 +1,60 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/documentElement +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Tylko do odczytu

+ +

Zwraca Element będący bezpośrednim dzieckiem document (na przykład dla dokumentów HTML jest to element <html>).

+ +

Składnia

+ +
varelement = document.documentElement;
+
+ +

Przykład

+ +
actual_doc = document.documentElement;
+first_tier = actual_doc.childNodes;
+//first_tier to bezpośrednie dzieci HTML
+for (var i = 0; i < first_tier.length; i++) {
+   //zrób cos z każdym dzieckiem HTML
+   //poprzez first_tier[i]
+}
+
+ +
var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+// firstTier jest NodeList bezpośredniego dziecka elementu głównego
+for (var i = 0; i < firstTier.length; i++) {
+   // zrób coś z każdym dzieckiem HTML głównego elementu
+   // as firstTier[i]
+}
+
+ +

Uwagi

+ +

Ta własność tylko do odczytu jest udogodnieniem w przechwytywaniu elementu HTML, powiązanego z każdym prawidłowym dokumentem HTML.

+ +

Powyżej typowy przykład: potrzebujesz w rzeczywistości elementu HTML, aby mieć dostęp do wszystkich jego dzieci, więc używasz tej własności obiektu document, aby go przejąć.

+ +

Zauważ też, że zazwyczaj document zawiera jeden węzeł-dziecko - HTML - który sam zawiera wszystkie elementy faktycznego dokumentu jako listę węzłów-dzieci (nodeList).

+ +

Specyfikacja

+ +

DOM Level 2 Core: Document.documentElement

+ + + +
+ +

{{ languages( { "en": "en/DOM/document.documentElement", "es": "es/DOM/document.documentElement", "fr": "fr/DOM/document.documentElement", "ja": "ja/DOM/document.documentElement" } ) }}

diff --git a/files/pl/web/api/document/domain/index.html b/files/pl/web/api/document/domain/index.html new file mode 100644 index 0000000000..e64ad2e641 --- /dev/null +++ b/files/pl/web/api/document/domain/index.html @@ -0,0 +1,30 @@ +--- +title: document.domain +slug: Web/API/Document/domain +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/domain +--- +

{{ ApiRef() }}

+

Podsumowanie

+

domain pobiera/ustawia domenę bieżącego dokumentu.

+

Składnia

+
ciąg = document.domain
+document.domain =ciąg
+
+

Przykład

+
bad_domain = "www.love.com";
+if ( document.domain == bad_domain ) {
+   window.close();
+}
+// jeśli dokument to www.love.com/good.html,
+// to skrypt zamknie okno
+
+

Uwagi

+

Właściwość zwraca NULL jezeli nie można zidentyfikować serwera. W specyfikacji DOM własność tą oznaczono jako tylko do oczytu, jednak Mozilla pozwala na jej modyfikację.

+

Specyfikacja

+

domain

+

{{ languages( { "en": "en/DOM/document.domain" } ) }}

diff --git a/files/pl/web/api/document/drag_event/index.html b/files/pl/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..ccc5d55cbb --- /dev/null +++ b/files/pl/web/api/document/drag_event/index.html @@ -0,0 +1,333 @@ +--- +title: drag +slug: Web/API/Document/drag_event +tags: + - DOM + - Zdarzenie + - przeciągnij i upuść +translation_of: Web/API/Document/drag_event +--- +
{{APIRef}}
+ +

Zdarzenie przeciągania uruchamiane jest po przeciągnięciu elementu lub tekstu (co kilkaset milisekund).

+ +

Ogólne informacje

+ + + + + + + + + + + + + + + + + + + + + + + + +
BąbelkowanieTak
CancelableTak
Obiekt docelowy{{domxref("Document")}}, {{domxref("Element")}}
Interfejs{{domxref("DragEvent")}}
Domyślna akcjaKontynuuje operacje przeciągania i upuszczania
+ +

Właściwości

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Przykład

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* events fired on the draggable target */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // store a ref. on the dragged elem
+      dragged = event.target;
+      // make it half transparent
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset the transparency
+      event.target.style.opacity = "";
+  }, false);
+
+  /* events fired on the drop targets */
+  document.addEventListener("dragover", function( event ) {
+      // prevent default to allow drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // highlight potential drop target when the draggable element enters it
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset background of potential drop target when the draggable element leaves it
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // prevent default action (open as link for some elements)
+      event.preventDefault();
+      // move dragged elem to the selected drop target
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}{{Spec2("HTML5.1")}}Initial definition
+ +

Obsługiwane przeglądarki

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

Zobacz również

+ + diff --git a/files/pl/web/api/document/embeds/index.html b/files/pl/web/api/document/embeds/index.html new file mode 100644 index 0000000000..ca0ab4ff2f --- /dev/null +++ b/files/pl/web/api/document/embeds/index.html @@ -0,0 +1,22 @@ +--- +title: document.embeds +slug: Web/API/Document/embeds +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/embeds +--- +

{{ ApiRef() }}

+

Podsumowanie

+

embeds zwraca listę obiektów OBJECT zagnieżdżonych w bieżącym dokumencie.

+

Składnia

+
listaWęzłów = document.embeds
+
+

Specyfikacja

+

{{ DOM0() }}

+


+ MSDN: embeds collection

+

{{ languages( { "en": "en/DOM/document.embeds" } ) }}

diff --git a/files/pl/web/api/document/execcommand/index.html b/files/pl/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..0718107051 --- /dev/null +++ b/files/pl/web/api/document/execcommand/index.html @@ -0,0 +1,280 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - Method + - NeedsBrowserCompatibility + - NeedsExample + - Reference + - edytor +translation_of: Web/API/Document/execCommand +--- +
+ +
Kiedy dokument HTML jest przełączony w tryb designMode, obiekt dokumentu udostępnia metodę execCommand, która pozwala uruchomić komendy manipulujące edytowalnym obszarem. Większość poleceń wpływa na zaznaczony obszar (pogrubienie, kursywa itd.), podczas gdy inne wstawiają nowe elementy (dodawanie linku) lub wpływają na całą linię (wcięcia). Przy użyciu contentEditable, wywołanie execCommand() wpływa na aktywny edytowalny element.
+ +

Składnia

+ +
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+
+ +

Zwracane wartości

+ +

Obiekt {{jsxref('Boolean')}}, który zwraca false, jeśli polecenie jest niewspierane lub włączone. Uwaga: Zwraca prawdę tylko jeśli jest częścią UI, to znaczy - nie jest używana do sprawdzania wsparcia przeglądarki przed renderowaniem elementu, który wywołuje polecenie. 

+ +

Parametry

+ +
+
aCommandName
+
Typu {{domxref("DOMString")}} - określanazwę polecenia do wykonania. Zobacz {{anch("Commands")}}, aby wyświetlić listę poleceń.
+
aShowDefaultUI
+
Typu {jsxref("Boolean")}} - wskazuje czy domyślny interfejs użytkownika powinien być pokazany. Nie jest implementowane przez Mozillę.
+
aValueArgument
+
W przypadku komend wymagających wprowadzenia argumentu (takiego jak insertImage, gdzie jest to URL do grafiki do wstawienia), jest to {{domxref("DOMString")}} przekazujący te informacje. Podaj null, jeśli niewymagany.
+
+ +

Polecenia

+ +
+
backColor
+
Zmienia kolor tła. W trybie styleWithCss zmieia kolor jedynie zawierającego elementu. Wymaga podania ciągu znaków{{cssxref("<color>")}} jako wartości argumentu. Zwróć uwagę na to, że Internet Explorer używa tego do zmiany koloru tła tekstu.
+
bold
+
Włącza/wyłącza pogrubienie w zaznaczeniu lub miejscu wstawiania. IE używa znacznika {{HTMLElement("strong")}} zamiast {{HTMLElement("b")}}.
+
contentReadOnly
+
Sprawia, że dokument jest zawartość jest tylko do odczytu lub edytowalna. Wymaga prawdy/fałszu jako wartości argumentu. (Nie wspierany przez IE).
+
copy
+
Kopiuje zaznaczenie do schowkka. Warunki włączenia tego zachowania różnią się między przeglądarkami i zmieniają się w czasie. Sprawdź tabelę zgodności, aby określić, czy możesz użyć w swoim przypadku.
+
createLink
+
Wstawia link z zaznaczenia (wymaga zaznaczenia). HREF URI musi być podany jako wartość argumentu. URI musi zawierać co najmniej jeden zak, może być białym znakiem (IE utworzy link z wartością null).
+
cut
+
Usuwa zaznaczenie kopiując do schowka. Warunki włączenia tego zachowania różnią się między przeglądarkami i zmieniają się w czasie. Sprawdź tabelę zgodności, aby określić, czy możesz użyć w swoim przypadku.
+
decreaseFontSize
+
Wstawia znacznik {{HTMLElement("small")}} wokół zaznaczenia lub w miejscu wstawienia. (Nie wspierane przez IE.)
+
defaultParagraphSeparator
+
Zmienia separator akapitu używany podczas tworzenia nowych akapitów w edytowalnych regionach tekstowych.  Zobacz Differences in markup generation po więcej szczegółów.
+
delete
+
Usuwa zaznaczenie.
+
enableInlineTableEditing
+
Włącza lub wyłącza wstawianie wierszy i kolumn oraz elementy sterujące usuwaniem. (Nie obsługiwane przez Internet Explorer.)
+
enableObjectResizing
+
Umożliwia lub uniemożliwia zmianę rozmiaru uchwytów na obrakach lub innych skalowalnych obiektów.  (Nie wspierane przez IE)
+
fontName
+
Zmienia nazwę czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga ciągu znaków (np. "Arial") jako wartości argumentu.
+
fontSize
+
Zmienia rozmiar czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga rozmiaru czcionki HTML (1-7) jako wartości argumentu.
+
foreColor
+
Zmienia kolor czcionki dla zaznaczenia lub w punkcie wstawiania. Wymaga wartości koloru (w postaci ciągu znaków) jako wartości argumentu.
+
formatBlock
+
Wstawia tag stylu blokowego dla linii w zaznaczeniu, zastępując blokowy element zawierający linię, jeśli taki istnieje (w Firefoxie, BLOCKQUOTE jest wyjątkiem - zawinie blokowy element zawierający).  Wymaga ciągu znaków oznaczającego znacznik jako wartość argumentu. Można użyć praktycznie wszystkich (np. "H1", "P", "DL", "BLOCKQUOTE). (IE wspiera jedynie H1-H6, "ADDRESS", PRE, które jeszcze muszą zawierać nawiasy znaczników <>, tak jak "<h1">).
+
forwardDelete
+
Usuwa znak przed pozycją kursora.  Działa jak wciśnięcie klawisza Delete.
+
heading
+
Wstawia tag nagłówka naokoło zaznaczenia lub w miejscu wstawiania. Wymaga ciągu znaków oznaczającego nazwę tagu jako wartości argumentu (np. "H1", "H6"). (Nie wspierane przez IE ani Safari).
+
hiliteColor
+
Zmienia kolor tła dla zaznaczenia lub w miejscu wstawiania. Wymaga ciągu znaków w postaci wartości kolorów jako wartości argumentu. Do użycia tej funkcji jest wymagane użycie CSS. (Nie wspierane przez IE).
+
increaseFontSize
+
Wstawia tag BIG naokoło zaznaczenia lub w miejscu wstawiania. (Nie wspierane przez IE).
+
indent
+
Wcina wiersz zawierający zaznaczenie lub punkt wstawiania. W Firefixie, jeśli zaznaczenie obejmuje wiele linii na różnych poziomach wcięcia, jedynie ostatnie wcięte linie zostaną wcięte.
+
insertBrOnReturn
+
Kontroluje, czy klawisz Enter wstawia tag BR, czy dzieli elemet blokowy na dwa (Nie wspierane przez IE)
+
insertHorizontalRule
+
Wstawia poziomą linię w miejscu wstawiania (usuwa zaznaczenie).
+
insertHTML
+
Wstawia ciąg znaków w postaci kodu HTML (usuwa zaznaczenie). Wymaga poprawnego kodu jako wartość argumentu. (Nie wspierane prze
+
insertImage
+
Wstawia grafikę w punkcie wstawiania (usuwa zaznaczenie). Wymaga ciągu znaków w postaci SRC URI jako wartości argumentu. URI musi zawierać co najmniej jeden znak (może być to biały znak). (Nie wspierane przez IE).
+
insertOrderedList
+
Wstawia numerowaną listę dla zaznaczenia lub w punkcie wstawiania.
+
insertUnorderedList
+
Wstawia punktowaną listę dla zaznaczenia lub w punkcie wstawiania.
+
insertParagraph
+
Wstawia akapit naokoło zaznaczenia lub w danej linii. (IE wstawia akapit w miejscu wstaawiania i usuwa zaznaczenie).
+
insertText
+
Wstawia dany tekst w miejsce wstawiania (usuwa zaznaczenie).
+
italic
+
Włącza/wyłącza pochylenie dla zaznaczenia lub w miejscu wstawiania (IE używa tagu EM zamiast I).
+
justifyCenter
+
Wyśrodkowuje zaznaczenie lub miejsce wstawiania.
+
justifyFull
+
Justuje zaznaczenie lub miejsce wstawiania.
+
justifyLeft
+
Wyrównuje do lewej zaznaczenie lub miejsce wstawiania.
+
justifyRight
+
Wyrównuje do prawej zaznaczenie lub miejsce wstawiaia.
+
outdent
+
Wysuwa linię zawierającą zaznaczenie lub punkt wstawiania.
+
paste
+
Wstawia zawartość schowka w miejscu wstawiania (zastępuje zaznaczenie). Nie działa dla zawartości z internetu. Zobacz [1]
+
redo
+
Ponawia ostatnio cofniętą komendę.
+
removeFormat
+
Usuwa całe formatowanie z zaznaczenia.
+
selectAll
+
Zaznacza całą zawartość z edytowalnego obszaru.
+
strikeThrough
+
Włącza/wyłącza przekreślenie dla zaznaczenia lub w punkcie wstawiania.
+
subscript
+
Włącza/wyłącza indeks dolny dla zaznaczenia lub w punkcie wstawiania.
+
superscript
+
Włącza/wyłącza indeks górny dla zaznaczenia lub w punkcie wstawiania.
+
underline
+
Włącza/wyłącza podkreślenie dla zaznaczenia lub w punkcie wstawiania.
+
undo
+
Cofa ostatnio wykonaną komendę.
+
unlink
+
Usuwa tag kotwicy z zaznaczonego linku.
+
useCSS {{Deprecated_inline}}
+
Przełącza użycie HTML/CSS dla generowanego kodu. Wymaga prawdy/fałszu jako wartości argumentu. UWAGA: dla CSS wymaga fałszu, dla HTML - prawdy. (Nie jest wspierane przez IE). Deprecjonowana właściwość. Użyj styleWithCSS
+
styleWithCSS
+
Zastępuje useCSS; działa normalnie - dla CSS wymaga prawdy, fałsz generuje HTML.
+
+ +

Example

+ +

Zobacz how to use w CodePen.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}{{Spec2('HTML Editing')}}Initial definition
+ +

Kompatybilność przeglądarek

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
insertBrOnReturn{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
copy/cut{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(41)}}92910
defaultParagraphSeparator{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(55)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
insertBrOnReturn{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
copy/cut{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
defaultParagraphSeparator{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(55)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

[1] Przed przeglądarką Firefox 41 w pliku preferencji user.js trzeba było włączyć obsługę schowka. Aby uzyskać więcej informacji, zobacz Krótki przewodnik po preferencjach Mozilli. Jeśli polecenie nie było obsługiwane lub włączone, execCommand rzucał wyjątek zamiast zwracać false. W Firefoxie 41 i nowszych, schowek może zostać zapisany w dowolnym programie obsługi zdarzeń read the clipboard. WebExtensions can interact with the clipboard.

+ +

Przed przeglądarką Firefox 41 w pliku preferencji user.js trzeba było włączyć obsługę schowka. Aby uzyskać więcej informacji, zobacz Krótki przewodnik po preferencjach Mozilli. Jeśli polecenie nie było obsługiwane lub włączone, execCommand podnosił wyjątek zamiast zwracać fałsz. W przeglądarce Firefox 41 i nowszych schowek może zostać zapisany w dowolnej obsłudze zdarzeń, która może spowodować wyskoczenie okna (częściowo zaufane skrypty), ale żadna treść internetowa nie może odczytać schowka. WebExtensions mogą wchodzić w interakcje ze schowkiem.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/document/fgcolor/index.html b/files/pl/web/api/document/fgcolor/index.html new file mode 100644 index 0000000000..a9f0287372 --- /dev/null +++ b/files/pl/web/api/document/fgcolor/index.html @@ -0,0 +1,28 @@ +--- +title: document.fgColor +slug: Web/API/Document/fgColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/fgColor +--- +

{{ ApiRef() }}

+

Podsumowanie

+

fgColor pobiera/ustawia kolor pierwszoplanowy (kolor tekstu) bieżącego dokumentu.

+

Składnia

+
kolor = document.fgColor
+document.fgColor =kolor
+
+

Parametry

+ +

Przykład

+
document.fgColor = "white";
+document.bgColor = "darkblue";
+
+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.fgColor" } ) }}

diff --git a/files/pl/web/api/document/firstchild/index.html b/files/pl/web/api/document/firstchild/index.html new file mode 100644 index 0000000000..c2bc145b41 --- /dev/null +++ b/files/pl/web/api/document/firstchild/index.html @@ -0,0 +1,36 @@ +--- +title: document.firstChild +slug: Web/API/Document/firstChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/firstChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

document.firstChild zwraca pierwszy węzeł z listy bezpośrednich dzieci dokumentu.

+

Składnia

+
dziecko = document.firstChild
+
+

Parametry

+ +

Przykład

+
function fChild() {
+  f = document.firstChild;
+  alert(f.tagName);
+}
+// wyświetli: HTML
+
+

Uwagi

+

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 firstChild zwraca element HTML.

+

Specyfikacja

+

firstChild

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/document.firstChild", "es": "es/DOM/document.firstChild", "fr": "fr/DOM/document.firstChild", "ja": "ja/DOM/document.firstChild" } ) }}

diff --git a/files/pl/web/api/document/forms/index.html b/files/pl/web/api/document/forms/index.html new file mode 100644 index 0000000000..dcba1e18e0 --- /dev/null +++ b/files/pl/web/api/document/forms/index.html @@ -0,0 +1,45 @@ +--- +title: document.forms +slug: Web/API/Document/forms +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/forms +--- +

{{ ApiRef() }}

+

Podsumowanie

+

forms zwraca listę elementów FORM z bieżącego dokumentu.

+

Składnia

+
listaWęzłów = document.forms
+
+

Przykład

+
<html>
+
+<head>
+<title> document.forms example</title>
+</head>
+
+<body>
+<form id="robby">
+ <input type="button" onclick="alert(document.forms[0].id);"
+ value="robby's form" />
+</form>
+
+<form id="dave">
+ <input type="button" onclick="alert(document.forms[1].id);"
+ value="dave's form" />
+</form>
+
+<form id="paul">
+ <input type="button" onclick="alert(document.forms[2].id);"
+ value="paul's form" />
+</form>
+
+</body>
+</html>
+
+

Specyfikacja

+

forms

+

{{ languages( { "en": "en/DOM/document.forms", "ja": "ja/DOM/document.forms" } ) }}

diff --git a/files/pl/web/api/document/getelementbyid/index.html b/files/pl/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..51e1bd68c0 --- /dev/null +++ b/files/pl/web/api/document/getelementbyid/index.html @@ -0,0 +1,67 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementById +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca element o określonym ID.

+ +

Składnia

+ +
var element = document.getElementById(id);
+
+ +

Parametry

+ + + +

Przykład

+ +
<html>
+<head>
+<title>Przykład getElementById</title>
+
+<script type="text/javascript">
+
+function changeColor(newColor)
+{
+ var elem = document.getElementById("para1");
+ elem.style.color = newColor;
+}
+</script>
+</head>
+
+<body>
+<p id="para1">Jakiś tekst</p>
+<button onclick="changeColor('blue');">niebieski</button>
+<button onclick="changeColor('red');">czerwony</button>
+</body>
+</html>
+
+ +

Uwagi

+ +

getElementById jest absolutną podstawą DOM. Jedną z najważniejszych zasad w programowaniu DOM jest unikalne identyfikowanie elementów, dzięki czemu można je przechwycić i manipulować nimi.

+ +

Jeżeli nie ma elementu o podanym ID, funkcja zwraca NULL. Zauważ też, że implementacja DOM musi wiedzieć, które atrybuty mają typ ID. Atrybuty o nazwie "ID" nie mają typu ID, o ile nie zostanie to tak zdefiniowane. Implementacje, które nie wiedzą, czy atrybuty mają typ ID czy nie, powinny zwracać NULL.

+ +

getElementById wprowadzono w DOM Level 2.

+ +

Specyfikacja

+ + + +

{{ languages( { "en": "en/DOM/document.getElementById", "fr": "fr/DOM/document.getElementById", "ja": "ja/DOM/document.getElementById" } ) }}

diff --git a/files/pl/web/api/document/getelementsbyclassname/index.html b/files/pl/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..a9e2037ac3 --- /dev/null +++ b/files/pl/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,82 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - HTML5 + - Klasy +translation_of: Web/API/Document/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Zwraca obiekt podobny do tablicy, zawierający wszystkie elementy, które mają przypisaną daną klasę. Kiedy użyjemy tej funkcji w odniesieniu do elementu document, cały dokument jest przeszukiwany - na wszystkich poziomach.

+ +

Możesz również użyć funkcji {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} na dowolnym elemencie; wtedy zwróci jedynie elementy zawierające daną klasę, które zawierają się w obrębie elementu wskazanego przez nas.

+ +

Składnia

+ +
var elements = document.getElementsByClassName(names); // or:
+var elements = rootElement.getElementsByClassName(names);
+ + + +

Przykłady

+ +

Szukamy wszystkich elementów posiadających klasę 'test':

+ +
document.getElementsByClassName('test');
+ +

Szukamy elementów, które posiadają jednocześnie klasę 'red' oraz 'test':

+ +
document.getElementsByClassName('red test');
+ +

Szukamy elementów posiadających klasę 'test', w obrębie elementu o ID 'main':

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Możemy też użyć metody Array.prototype. W ten sposób znajdziemy wszystkie elementy div posiadające klasę 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

Uwagi

+ +

Należy zwrócić uwagę na różnice w zwracanej wartości w zależności od składni (aby została zwrócona konkretna wartość należy posłużyć się indeksem):

+ +
<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p class="test">hello word2</p>
+        <p >hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById("parent-id");
+
+        var test=parentDOM.getElementsByClassName("test");//test is not target element
+        console.log(test);//HTMLCollection[1]
+
+        var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target
+        console.log(testTarget);//<p class="test">hello word2</p>
+    </script>
+</body>
+</html>
+ +

Specyfikacja

+ + diff --git a/files/pl/web/api/document/getelementsbyname/index.html b/files/pl/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..1cadc785de --- /dev/null +++ b/files/pl/web/api/document/getelementsbyname/index.html @@ -0,0 +1,35 @@ +--- +title: document.getElementsByName +slug: Web/API/Document/getElementsByName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementsByName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca listę elementów w dokumencie o żądanym atrybucie name.

+

Składnia

+
elementy = document.getElementsByName(nazwa)
+
+

Parametry

+ +

Przykład

+
// zwraca niektóre z DIV-ów
+<div name="up">200</div>
+<div name="up">145</div>
+<div name="down">146</div>
+<div name="other">178</div>
+up_divs = document.getElementsByName("up");
+dump(up_divs.item(0).tagName); // zwraca "div"
+
+

Uwagi

+

document.getElementsByName zwraca listę węzłów wszystkich elementów o zadanej wartości atrybutu name. W przeciwieństwie do getElementsByTagName, który analizuje samą nazwę elementu, ta metoda pracuje tylko na elementach, których atrybut name został wyraźnie podany.

+

Specyfikacja

+

getElementsByName

+

{{ languages( { "en": "en/DOM/document.getElementsByName", "fr": "fr/DOM/document.getElementsByName", "ja": "ja/DOM/document.getElementsByName" } ) }}

diff --git a/files/pl/web/api/document/getelementsbytagname/index.html b/files/pl/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..b4db8f428d --- /dev/null +++ b/files/pl/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,108 @@ +--- +title: document.getElementsByTagName +slug: Web/API/Document/getElementsByTagName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Document/getElementsByTagName +--- +

{{ ApiRef("DOM") }}

+ +

Podsumowanie

+ +

Zwraca listę elementów o podanej nazwie znacznika. Przeszukiwany jest cały dokument, łącznie z głównym węzłem.

+ +

Składnia

+ +
elements = document.getElementsByTagName(name)
+
+ + + +

Przykład

+ +

W poniższym przykładzie getElementsByTagName starts from a particular parent element, and searches topdown recursively through the DOM from that parent element, looking for child elements matching the tag name parameter.

+ +

Zauważ, że gdy węzeł, w którym przywołano getElementsByTagName, nie jest węzłem document, to w rzeczywistości użyta jest metoda element.getElementsByTagName.

+ +
<html>
+
+<head>
+<title>Przykład getElementsByTagName</title>
+
+<script type="text/javascript">
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagName("p");
+
+  var num = allParas.length;
+
+  alert("W tym dokumencie jest " + num + " elementów <p>");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagName("p");
+
+  var num = div1Paras.length;
+
+  alert("W elemencie div1 znajduje się " + num + " elementów <p>");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagName("p");
+
+  var num = div2Paras.length;
+
+  alert("W elemencie div2 znajduje się " + num + " elementów <p>");
+}
+
+</script>
+</head>
+
+<body style="border: solid green 3px">
+<p>Trochę zewnętrznego tekstu</p>
+<p>Trochę zewnętrznego tekstu</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Trochę tekstu w div1</p>
+    <p>Trochę tekstu w div1</p>
+    <p>Trochę tekstu w div1</p>
+
+    <div id="div2" style="border: solid red 3px">
+    <p>Trochę tekstu w div2</p>
+    <p>Trochę tekstu w div2</p>
+    </div>
+  </div>
+
+<p>Trochę zewnętrznego tekstu</p>
+<p>Trochę zewnętrznego tekstu</p>
+
+<button onclick="getAllParaElems();">
+ pokaż wszystkie elementy p w dokumencie</button><br />
+
+<button onclick="div1ParaElems();">
+ pokaż wszystkie elementy p w elemencie div1</button><br />
+
+<button onclick="div2ParaElems();">
+ pokaż wszystkie elementy p w elemencie div2</button>
+
+</body>
+</html>
+
+ +

Specyfikacja

+ +

DOM Level 2 Core: Document.getElementsByTagName

diff --git a/files/pl/web/api/document/hasfocus/index.html b/files/pl/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..afaa6079af --- /dev/null +++ b/files/pl/web/api/document/hasfocus/index.html @@ -0,0 +1,25 @@ +--- +title: document.hasFocus +slug: Web/API/Document/hasFocus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/hasFocus +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność hasFocus zwraca wartość true, jeżeli fokus jest zlokalizowany w dowolnym miejscu danego dokumentu. {{ Note("Ten atrybut jest częścią specyfikacji HTML 5, która jest wciąż opracowywana.") }}

+

Składnia

+
focused = document.hasFocus();
+
+

Przykład

+

Specyfikacja

+

Zarządzanie fokusem

+

 

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/document.hasFocus", "es": "es/DOM/element.hasFocus", "fr": "fr/DOM/document.hasFocus", "ja": "ja/DOM/document.hasFocus" } ) }}

diff --git a/files/pl/web/api/document/head/index.html b/files/pl/web/api/document/head/index.html new file mode 100644 index 0000000000..d5436385fa --- /dev/null +++ b/files/pl/web/api/document/head/index.html @@ -0,0 +1,110 @@ +--- +title: Document.head +slug: Web/API/Document/head +translation_of: Web/API/Document/head +--- +

{{APIRef("DOM")}}

+ +

Zwraca element {{HTMLElement("head")}} aktualnego dokumentu. Jeżeli występuje więcej niż jeden element <head>, zwrócony zostanie tylko pierwszy.

+ +

Syntax

+ +
var objRef = document.head;
+
+ +

Przykład

+ +
// in HTML: <head id="my-document-head">
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+
+ +

Uwagi

+ +

document.head jest atrybutem tylko do odczytu. Próby przypisania mu wartości nie spowodują żadnego efektu czy skutku ubocznego (przejdą 'po cichu') lub, jeżeli pracujemy w ECMAScript Strict Mode w przeglądarce Gecko, zostanie rzucony TypeError.

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Initial definition.
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}} 
+ +

Kompatybilność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support4.0{{CompatGeckoDesktop("2")}}9.011.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("2")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Zobacz także

+ + diff --git a/files/pl/web/api/document/height/index.html b/files/pl/web/api/document/height/index.html new file mode 100644 index 0000000000..1f777a7eb5 --- /dev/null +++ b/files/pl/web/api/document/height/index.html @@ -0,0 +1,34 @@ +--- +title: document.height +slug: Web/API/Document/height +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/height +--- +

{{ ApiRef() }}

+

Podsumowanie

+

height pobiera/ustawia wysokość dokumentu.

+

Składnia

+
wysokość = document.height
+document.height =wysokość
+
+

Parametry

+ +

Przykład

+
// zmniejsz okno po załadowaniu
+function onLoad() {
+    document.height = "200";
+    document.width = "200";
+}
+
+

Uwagi

+

Zobacz także DOM:document.width.

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/document.height" } ) }}

diff --git a/files/pl/web/api/document/images/index.html b/files/pl/web/api/document/images/index.html new file mode 100644 index 0000000000..e7d21794da --- /dev/null +++ b/files/pl/web/api/document/images/index.html @@ -0,0 +1,31 @@ +--- +title: document.images +slug: Web/API/Document/images +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/images +--- +

{{ ApiRef() }}

+

Podsumowanie

+

document.images zwraca listę obrazków w dokumencie.

+

Składnia

+
listaWęzłów = document.images
+
+

Przykład

+
var ilist = document.images;
+for(var i = 0; i < ilist.length; i++) {
+    if(ilist[i] == "banner.gif") {
+         // found the banner
+    }
+}
+
+

 

+

Uwagi

+

document.images.length – własność, zwraca liczbę obrazków na stronie.

+

document.images jest częścią DOM HTML i działa tylko dla dokumentów HTML.

+

Specyfikacja

+

DOM Level 2 HTML: HTMLDocument.images

+

{{ languages( { "ru": "ru/DOM/document.images", "en": "en/DOM/document.images", "fr": "fr/DOM/document.images" } ) }}

diff --git a/files/pl/web/api/document/implementation/index.html b/files/pl/web/api/document/implementation/index.html new file mode 100644 index 0000000000..3fe4d51af0 --- /dev/null +++ b/files/pl/web/api/document/implementation/index.html @@ -0,0 +1,21 @@ +--- +title: document.implementation +slug: Web/API/Document/implementation +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/implementation +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt implementacji DOM powiązanej z bieżącym dokumentem.

+

Składnia

+
obiektDOMImplementation = document.DOMImplentation
+
+

Uwagi

+

Obiekt DOMImplementaion, jeżeli jest dostępny, stanowi specjalny obiekt zapewniający możliwość kontrolowania spraw poza pojedynczym dokumentem. Na przykład interfejs DOMImplementation zawiera metodę createDocumentType pozwalającą na tworzenie DTD dla jednego lub więcej dokumentów zarządzanych przez implementację.

+

Specyfikacja

+

implementation (?)

+

{{ languages( { "en": "en/DOM/document.implementation" } ) }}

diff --git a/files/pl/web/api/document/importnode/index.html b/files/pl/web/api/document/importnode/index.html new file mode 100644 index 0000000000..be2cdf6367 --- /dev/null +++ b/files/pl/web/api/document/importnode/index.html @@ -0,0 +1,57 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Document/importNode +--- +

{{ ApiRef("DOM") }}

+ +

Podsumowanie

+ +

Tworzy kopię węzła z zewnętrznego dokumentu, która może być umieszczona wewnątrz bieżącego dokumentu.

+ +

Składnia

+ +
var node = document.importNode(externalNode,deep);
+
+ +
+
node
+
Zaimportowany węzeł
+ Własność parentNode jest ustawiona na null, ponieważ nie został jeszcze wstawiony do drzewa dokumentu
+
externalNode
+
Węzeł, bądź DocumentFragment przeznaczony do zaimportowania do bieżącego dokumentu.
+
deep
+
Boolean mówiący, czy importować potomki externalNode
+
+ +

Przykład

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentDocument.getElementById("myNode");
+var newNode = document.importNode(oldNode,true);
+document.getElementById("container").appendChild(newNode);
+
+ +

Uwagi

+ +

Pierwotny węzeł nie jest usunięty z oryginalnego dokumentu. Importowany węzeł jest klonem oryginału .

+ + +

Przed włączeniem węzłów pochodzących z zewnętrznych dokumentów do bieżącego dokumentu konieczne jest ich sklonowanie za + pomocą metody document.importNode() (lub zaadaptowanie przy użyciu metody document.adoptNode()). Więcej informacji na temat własności + Node.ownerDocument znajduje się na liście najczęściej zadawanych pytań na temat + DOM w witrynie W3C.

+ +

Aktualnie Firefox nie wymusza tej reguły (robił to przez pewien czas podczas cykli rozwojowych Firefoksa 3, ale zbyt + dużo stron przestawało działać po wymuszeniu tej reguły). Zachęcamy autorów stron do poprawienia ich kodu dla lepszej + kompatybilności w przyszłości.

+ +

Specyfikacja

+ +

DOM Level 2 Core: Document.importNode

diff --git a/files/pl/web/api/document/index.html b/files/pl/web/api/document/index.html new file mode 100644 index 0000000000..a5aa06d6dd --- /dev/null +++ b/files/pl/web/api/document/index.html @@ -0,0 +1,332 @@ +--- +title: document +slug: Web/API/Document +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document +--- +

{{ ApiRef() }}

+ +

Wprowadzenie

+ +

Obiekt document stanowi w DOM ogólny sposób reprezentowania dokumentów HTML, XHTML i XML. Poza ogólnym interfejsem dokumentu, w ponizszej liscie uwzgledniono takze DOM HTMLDocument, bedacy bardziej wyspecjalizowanym interfejsem, przeznaczonym do pracy z dokumentami HTML (np. wlasnosci takie jak document.cookie, document.alinkColor). Czesci tego bardziej wyspecjalizowanego interfejsu zostaly oznaczone gwiazdka (*).

+ +

document zawarty jest w obiekcie window i moze zawierac dowolna liczbe elementów.

+ +

Tak jak widac na ponizszej liscie, interfejsy document odpowiadaja za rzeczy takie jak typ dokumentu, jego cechy, jak kolory czy formatowanie, wtyczki i aplety przedstawiane uzytkownikowi, ale sa tu tez metody do tworzenia węzłów potomnych dokumentu, a takze elementy znajdujace sie zwykle w reprezentacji dokumentu, jak <BODY>.

+ +

Wlasnosci

+ +
+
document.alinkColor* {{ Deprecated_inline() }}
+
Zwraca lub ustawia kolor aktywnych odnośników w dokumencie.
+
+ +
+
document.anchors*
+
Zwraca listę wszystkich kotwic w dokumencie.
+
+ +
+
document.applets*
+
Zwraca uporządkowaną listę apletów w dokumencie.
+
+ +
+
document.bgColor* {{ Deprecated_inline() }}
+
Pobiera/ustawia kolor tła dokumentu.
+
+ +
+
document.body*
+
Zwraca węzeł elementu BODY w dokumencie.
+
+ +
+
document.characterSet
+
Zwraca nazwę zestawu znaków uzytego w dokumencie.
+
+ +
+
document.compatMode*
+
Wskazuje, czy dokument jest renderowany w trybie zgodności wstecznej czy w trybie standardów.
+
+ +
+
document.contentType
+
Zwraca Content-Type z nagłówka MIME bieżącego dokumentu.
+
+ +
+
document.cookie*
+
Zwraca rozdzielona średnikami listę ciasteczek dokumentu bądź zapisuje pojedyncze ciasteczko.
+
+ +
+
document.defaultView
+
Zwraca referencje do obiektu window.
+
+ +
+
document.designMode*
+
Pobiera/ustawia możliwość edytowania w trybie WYSIWYG za pomocą edytora Midas. Może zostać użyty wyłącznie w dokumentach HTML.
+
+ +
+
document.doctype
+
Zwraca definicje typu dokumentu (DTD).
+
+ +
+
document.documentElement
+
Zwraca element będący bezpośrednim dzieckiem dokumentu.W dokumentach <HTML> jest to zazwyczaj element.
+
+ +
+
document.documentURIObject {{ Fx_minversion_inline(3) }}
+
Zwraca obiekt nsIURI reprezentujący URI dokumentu. Własność ta jest wspomagana wyłącznie z kodu JavaScriptu.
+
+ +
+
document.domain*
+
Zwraca domenę bieżącego dokumentu.
+
+ +
+
document.embeds*
+
Zwraca listę obiektów (OBJECT) zagnieżdżonych w dokumencie.
+
+ +
+
document.fgColor* {{ Deprecated_inline() }}
+
Pobiera/ustawia kolor pierwszoplanowy (kolor tekstu) w dokumencie.
+
+ +
+
document.firstChild
+
Zwraca pierwszy węzeł spośród bezpośrednich dzieci dokumentu (zob. własność elementów firstChild).
+
+ +
+
document.forms*
+
Zwraca listę elementów FORM w dokumencie.
+
+ +
+
document.height*
+
Pobiera/ustawia wysokość dokumentu.
+
+ +
+
document.images*
+
Zwraca listę obrazków w dokumencie.
+
+ +
+
document.implementation*
+
Zwraca obiekt implementacji DOM powiązany z bieżącym dokumentem.
+
+ +
+
document.lastModified*
+
Zwraca datę ostatniej modyfikacji dokumentu.
+
+ +
+
document.linkColor* {{ Deprecated_inline() }}
+
Pobiera/ustawia kolor odnośników w dokumencie.
+
+ +
+
document.links*
+
Zwraca listę wszystkich odnośników w dokumencie.
+
+ +
+
document.location*
+
Zwraca URI bieżącego dokumentu.
+
+ +
+
document.namespaceURI
+
Zwraca przestrzeń nazw XML dokumentu.
+
+ +
+
document.plugins*
+
Zwraca listę dostępnych wtyczek.
+
+ +
+
document.popupNode
+
Zwraca węzeł, do którego odwoływał sie {{ XULElem("popup") }} (wyłącznie dokumenty XUL).
+
+ +
+
document.referrer*
+
Zwraca URI strony, która przekierowała do bieżącej strony.
+
+ +
+
document.styleSheets*
+
Zwraca listę obiektów typu stylesheet w bieżącym dokumencie.
+
+ +
+
document.title*
+
Zwraca tytuł bieżącego dokumentu.
+
+ +
+
document.tooltipNode
+
Zwraca węzeł, który jest bieżącym celem {{ XULElem("tooltip") }}.
+
+ +
+
document.URL
+
Zwraca ciąg znaków zawierający adres URL bieżącego dokumentu.
+
+ +
+
document.vlinkColor* {{ Deprecated_inline() }}
+
Pobiera/ustawia kolor odwiedzonych odnośników.
+
+ +
+
document.width*
+
Zwraca szerokość bieżącego dokumentu.
+
+ +

Metody

+ +
+
document.clear* {{ Deprecated_inline() }}
+
W wiekszosci nowoczesnych przegladarek wlacznie z Firefoksem oraz Internet Explorerem metoda ta nie robi nic.
+
+ +
+
document.close*
+
Konczy dopisywanie do strumienia dokumentu.
+
+ +
+
document.createAttribute
+
Tworzy i zwraca nowy wezel atrybutu.
+
+ +
+
document.createDocumentFragment
+
Tworzy nowy fragment dokumentu.
+
+ +
+
document.createElement
+
Tworzy nowy element o podanej nazwie.
+
+ +
+
document.createElementNS
+
Tworzy nowy element o podanej nazwie i URI przestrzeni nazw.
+
+ +
+
document.createNSResolver
+
Tworzy XPathNSResolver.
+
+ +
+
document.createTextNode
+
Tworzy nowy wezel tekstowy.
+
+ +
+
document.createTreeWalker
+
Tworzy obiekt TreeWalker.
+
+ +
+
document.createEvent
+
Tworzy obiekt zdarzenia.
+
+ +
+
document.createRange
+
Tworzy obiekt Range.
+
+ +
+
document.execCommand
+
Wykonuje komende dla edytora Midas.
+
+ +
+
document.evaluate
+
Wykonuje wyrazenie XPath.
+
+ +
+
document.getElementById
+
Zwraca referencje do elementu o podanym ID.
+
+ +
+
document.getElementsByName
+
Zwraca liste elementów o podanej nazwie.
+
+ +
+
document.getElementsByTagName
+
Zwraca liste elementów o danej nazwie znacznika.
+
+ +
+
document.importNode
+
Zwraca kopie wezla z zewnetrznego dokumentu.
+
+ +
+
document.loadOverlay
+
{{ Fx_minversion_inline(1.5) }} Laduje nakladke XUL. Dziala to tylko w dokumentach XUL.
+
+ +
+
document.open*
+
Otwiera strumien dokumentu do zapisu.
+
+ +
+
document.queryCommandEnabled*
+
Zwraca prawde, jesli komenda edytora Midas moze byc wykonana na biezacym zakresie.
+
+ +
+
document.queryCommandIndeterm*
+
Zwraca prawde, jesli komenda edytora Midas jest w stanie nieokreslonym dla biezacego zakresu.
+
+ +
+
document.queryCommandState*
+
Zwraca prawde, jesli komenda edytora Midas zostala wykonana na biezacym zakresie.
+
+ +
+
document.queryCommandValue*
+
Zwraca wartosc biezacego zakresu dla komendy edytora Midas.Wraz z Firefoksem 2.0.0.2 queryCommandValue zwróci pusty ciag jesli wartosc nie zostala ustawiona.
+
+ +
+
document.write*
+
Zapisuje tekst w dokumencie.
+
+ +
+
document.writeln*
+
Zapisuje linie tekstu w dokumencie.
+
+ +

 

+ +

{{ languages( { "en": "en/DOM/document", "es": "es/DOM/document", "fr": "fr/DOM/document", "ja": "ja/DOM/document", "zh-cn": "cn/DOM/document", "de" : "de/DOM/document" } ) }}

diff --git a/files/pl/web/api/document/lastmodified/index.html b/files/pl/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..a79e097ab8 --- /dev/null +++ b/files/pl/web/api/document/lastmodified/index.html @@ -0,0 +1,25 @@ +--- +title: document.lastModified +slug: Web/API/Document/lastModified +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/lastModified +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca datę i czas ostatniej modyfikacji dokumentu.

+

Składnia

+
ciąg = document.lastModified
+
+

Przykład

+
dump(document.lastModified);
+// zwróci np.: Tuesday, July 10, 2001 10:19:42
+
+

Uwagi

+

Zauważ, że lastModified będąc ciągiem nie może zostać łatwo użyte do porównywania dat modyfikacji między dokumentami.

+

Specyfikacja

+

(DOM Level 0 - brak w specyfikacji (?))

+

{{ languages( { "en": "en/DOM/document.lastModified" } ) }}

diff --git a/files/pl/web/api/document/linkcolor/index.html b/files/pl/web/api/document/linkcolor/index.html new file mode 100644 index 0000000000..ef025b4bfa --- /dev/null +++ b/files/pl/web/api/document/linkcolor/index.html @@ -0,0 +1,33 @@ +--- +title: document.linkColor +slug: Web/API/Document/linkColor +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/linkColor +--- +

{{ ApiRef() }}

+

Podsumowanie

+

{{ Deprecated_header() }} linkColor pobiera/ustawia kolor odnośników w dokumencie.

+

Składnia

+
kolor = document.linkColor
+document.linkColor =kolor
+
+

Parametry

+ +

Uwagi

+

document.linkColor jest przestarzałe w DOM Level 2 HTML.

+

Rekomendowaną alternatywą jest pobranie/ustawienie własności CSS {{ Cssxref("color") }} na elemencie HTML anchor (<a>) links (np: a {color:red;}).

+

Kolejną alternatywą document.body.link mimo, że jest przestarzałe w HTML 4.01 szczególnie przy użyciu alternatywnego CSS.

+

Przykład

+
document.linkColor = "blue";
+
+

Specyfikacja

+

{{ DOM0() }}

+

MSDN: Własność linkColor

+

{{ languages( { "en": "en/DOM/document.linkColor" } ) }}

diff --git a/files/pl/web/api/document/links/index.html b/files/pl/web/api/document/links/index.html new file mode 100644 index 0000000000..d4ed79c435 --- /dev/null +++ b/files/pl/web/api/document/links/index.html @@ -0,0 +1,30 @@ +--- +title: document.links +slug: Web/API/Document/links +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/links +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność links zwraca zestaw wszystkich elementów AREA i A z ustawioną wartością atrybutu href.

+

Składnia

+
listaWęzłów = document.links
+
+

Przykład

+
var links = document.links;
+for(var i = 0; i < links.length; i++) {
+  var linkHref = document.createTextNode(links[i].href);
+  var lineBreak = document.createElement("br");
+  document.body.appendChild(linkHref);
+  document.body.appendChild(lineBreak);
+}
+
+

Specyfikacja

+

links

+
+  
+

{{ languages( { "en": "en/DOM/document.links", "it": "it/DOM/document.links", "ja": "ja/DOM/document.links" } ) }}

diff --git a/files/pl/web/api/document/location/index.html b/files/pl/web/api/document/location/index.html new file mode 100644 index 0000000000..6a754d5c0d --- /dev/null +++ b/files/pl/web/api/document/location/index.html @@ -0,0 +1,37 @@ +--- +title: document.location +slug: Web/API/Document/location +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/location +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Pobiera URL bieżącego dokumentu.

+ +

Składnia

+ +
ciąg = document.location
+
+ +

Przykład

+ +
dump(document.location);
+// zwraca ciąg taki jak np.:
+// http://www.peoplemagazine.com/juicybits.html
+
+ +

Uwagi

+ +

document.location działa tak samo jak document.URL. Obydwie te własności są tylko do odczytu, w przeciwieństwie do window.location, które można ustawiać. Ponieważ document reprezentuje jeden dokument lub URL, nie można zmieniać jego lokalizacji.

+ +

Specyfikacja

+ +

DOM Level 0 - brak w specyfikacji.

+ +

{{ languages( { "en": "/en/DOM/document.location" } ) }}

diff --git a/files/pl/web/api/document/namespaceuri/index.html b/files/pl/web/api/document/namespaceuri/index.html new file mode 100644 index 0000000000..d6f9e8ac44 --- /dev/null +++ b/files/pl/web/api/document/namespaceuri/index.html @@ -0,0 +1,25 @@ +--- +title: document.namespaceURI +slug: Web/API/Document/namespaceURI +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/namespaceURI +--- +

{{ ApiRef() }}

+

Podsumowanie

+

namespaceURI zwraca przestrzeń nazw XML dokumentu.

+

Składnia

+
NSURI = document.namespaceURI
+
+

Parametry

+ +

Uwagi

+

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.

+

Specyfikacja

+

namespaceURI

+

{{ languages( { "en": "en/DOM/document.namespaceURI", "fr": "fr/DOM/document.namespaceURI" } ) }}

diff --git a/files/pl/web/api/document/open/index.html b/files/pl/web/api/document/open/index.html new file mode 100644 index 0000000000..2a7b0347b7 --- /dev/null +++ b/files/pl/web/api/document/open/index.html @@ -0,0 +1,40 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/open +--- +

{{APIRef("DOM")}}

+ +

Podsumowanie

+ +

Metoda document.open otwiera strumień dokumentu do zapisu.

+ +

Składnia

+ +
document.open()
+
+ +

Przykład

+ +
//W tym przykładzie zawartość dokumentu jest
+//usuwana przy reinicjalizacji poprzez open()
+
+document.write("<html><p>wyczyść to</p></html>");
+document.open();
+//dokument jest pusty
+
+ +

Uwagi

+ +

Jeżeli dokument docelowy istnieje, metoda ta wyczyści go (zob. powyzszy przykład). document.open jest wywoływane również wtedy, gdy zostanie użyte document.write po załadowaniu dokumentu.

+ +

Specyfikacja

+ +

open

+ +
 
+ +

{{ languages( { "en": "en/DOM/document.open", "fr": "fr/DOM/document.open", "ja": "ja/DOM/document.open" } ) }}

diff --git a/files/pl/web/api/document/plugins/index.html b/files/pl/web/api/document/plugins/index.html new file mode 100644 index 0000000000..fb946ff710 --- /dev/null +++ b/files/pl/web/api/document/plugins/index.html @@ -0,0 +1,40 @@ +--- +title: document.plugins +slug: Web/API/Document/plugins +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/plugins +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca listę aktualnie zainstalowanych wtyczek.

+

Składnia

+
obiektPluginArray = document.plugins
+
+

Przykład

+

Poniższy przykład wyświetla informację o zainstalowanych wtyczkach dla dokumentu wysokiego poziomu. Zwróć uwagę na właściwości obiektu Plugin: length (dla tablicy wtyczek), name, filename i description.

+
 <script TYPE="text/javascript">
+  <!--
+   var L = navigator.plugins.length
+   document.write( L );
+   document.write("Plugins".bold());
+   document.write("<BR>");
+   document.write("Name | Filename | description".bold());
+   document.write("<BR>");
+   for(i=0; i<L; i++){
+     document.write(navigator.plugins[i].name);
+     document.write(" | ".bold());
+     document.write(navigator.plugins[i].filename);
+     document.write(" | ".bold());
+     document.write(navigator.plugins[i].description);
+     document.write("<BR>");
+   }
+  //-->
+ </script>
+
+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.plugins" } ) }}

diff --git a/files/pl/web/api/document/queryselector/index.html b/files/pl/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..cecd7c4f14 --- /dev/null +++ b/files/pl/web/api/document/queryselector/index.html @@ -0,0 +1,159 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Metodă + - Referencje + - Selektory +translation_of: Web/API/Document/querySelector +--- +
{{ ApiRef("DOM") }}
+ +

Funkcja zwraca pierwszy element wewnątrz dokumentu, który pasuje do podanego selektora lub grupy selektorów.

+ +

Składnia

+ +
element = document.querySelector(selectors);
+
+ +

gdzie

+ + + +

Przykład

+ +

W tym przykladzie zostaje zwrócony pierwszy element w dokumencie o klasie "myclass":

+ +
var el = document.querySelector(".myclass");
+
+ +

Przykład: Powerful

+ +

Selectory mogą być naprawdę potężne, jak pokazano na poniższym przykładzie. Pierwszy element <input name="login"/> wewnątrz <div class="user-panel main"> w dokumencie zostaje zwrócony:

+ +
var el = document.querySelector("div.user-panel.main input[name='login']");
+
+ +

Uwagi

+ +

Jeśli nie znaleziono dopasowań - zwraca null. W przeciwnym wypadku zwraca pierwszy pasujący element.

+ +

Jeśli selektor zawiera ID i to ID zostaje wielokrotnie błędnie użyte w dokumencie, zwracany jest pierwszy pasujący element.

+ +

Gdy podana grupa selektorów jest nieprawidłowa, zwrócony zostaje wyjątek SYNTAX_ERR.

+ +

querySelector() został wprowadzony w API Selektorów.

+ +

Przekazany do funkcji querySelector łańcuch znaków (string) musi być zgodny ze składnią CSS.

+ +

Zgodnie z API Selektorów pseudoklasy CSS nigdy nie zwrócą żadnego elementu.

+ +

Aby użyć ID lub selektorów niezgodnych ze składnią CSS (np. ze względu na niewłaściwe użycie dwukropka czy spacji) należy poprzedzić niezgodny znak ukośnikiem wstecznym (backslash). Z racji, że w JavaScript backslash jest używany jako znak ucieczki chcąc użyć go w stringu należy wpisać go podwójnie(jeden dla stringa JavaScriptu i drugi raz dla querySelector):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar')               // "#fooar"
+  document.querySelector('#foo\bar')    // Nie pasuje do żadnego elementu
+
+  console.log('#foo\\bar')              // "#foo\bar"
+  console.log('#foo\\\\bar')            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar') // Odnosi się do pierwszego diva
+
+  document.querySelector('#foo:bar')    // Nie pasuje do żadnego elementu
+  document.querySelector('#foo\\:bar')  // Odnosi się do drugiego diva
+</script>
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}}
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definicja wstępna
+ +

Zgodność z przeglądarkami

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CechaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Wsparcie podstawowe13.5 (1.9.1)
+ {{bug(416317)}}		8103.2 (525.3)
+ {{Webkitbug("16587")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CechaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Wsparcie podstawowe2.1yes910.03.2
+
+ + + +

Zobacz także

+ + + + diff --git a/files/pl/web/api/document/referrer/index.html b/files/pl/web/api/document/referrer/index.html new file mode 100644 index 0000000000..0667be8e4c --- /dev/null +++ b/files/pl/web/api/document/referrer/index.html @@ -0,0 +1,22 @@ +--- +title: document.referrer +slug: Web/API/Document/referrer +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/referrer +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca URI strony, która przekierowała na bieżącą stronę.

+

Składnia

+
ciąg = document.referrer
+
+

Uwagi

+

Jeżeli użytkownik otworzył stronę bezpośrednio (nie poprzez odnośnik, ale np. za pomocą zakładki), wartością tej właściwości jest pusty ciąg.

+

Zauważ też, że właściwość ta zwraca tylko ciąg tekstowy, nie daje dostępu do DOM strony odsyłającej.

+

Specyfikacja

+

referrer

+

{{ languages( { "en": "en/DOM/document.referrer" } ) }}

diff --git a/files/pl/web/api/document/releasecapture/index.html b/files/pl/web/api/document/releasecapture/index.html new file mode 100644 index 0000000000..7585229fe5 --- /dev/null +++ b/files/pl/web/api/document/releasecapture/index.html @@ -0,0 +1,31 @@ +--- +title: Document.releaseCapture() +slug: Web/API/Document/releaseCapture +translation_of: Web/API/Document/releaseCapture +--- +
{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}
+ +
 
+ +

Zwalnia śledzenie myszy, jeśli śledzenie jest ustawione na jakimś elemencie wewnątrz dokumentu. Możesz włączyć śledzenie wywołując {{domxref("element.setCapture()")}}.

+ +

Składnia

+ +
document.releaseCapture()
+
+ +

Po zwolnieniu śledzenia, zdarzenia myszy nie będą przekierowywane do elementu dla którego śledzenie było włączone.

+ +

Przykład

+ +

Zobacz przykład przykład dla {{domxref("element.setCapture()")}}.

+ +

Specyfikacja

+ +

Oparta na implementacji Internet Explorera.

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/document/stylesheets/index.html b/files/pl/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..4c8312b281 --- /dev/null +++ b/files/pl/web/api/document/stylesheets/index.html @@ -0,0 +1,19 @@ +--- +title: document.styleSheets +slug: Web/API/Document/styleSheets +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność styleSheets zwraca listę obiektów stylesheet w bieżącym dokumencie.

+

Składnia

+
listaWęzłów = document.styleSheets
+
+

Specyfikacja

+

DOM Level 2.

+

{{ languages( { "en": "en/DOM/document.styleSheets", "ja": "ja/DOM/document.styleSheets" } ) }}

diff --git a/files/pl/web/api/document/title/index.html b/files/pl/web/api/document/title/index.html new file mode 100644 index 0000000000..0a379426e5 --- /dev/null +++ b/files/pl/web/api/document/title/index.html @@ -0,0 +1,45 @@ +--- +title: document.title +slug: Web/API/Document/title +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/title +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pobiera lub ustawia tytuł dokumentu.

+

Składnia

+
tytul =document.title;
+
+ +
document.title =nowyTytul;
+
+ +

Przykład

+
<html>
+<head>
+ <title>Hello World!</title>
+</head>
+<body>
+ <script>
+ alert(document.title); // wyswietla "Hello World!"
+ document.title = "Goodbye World!";
+ alert(document.title); // wyswietla "Goodbye World!"
+ </script>
+</body>
+</html>
+
+

Uwagi

+

Własność ta ma zastosowanie w HTML, SVG, XUL i innych dokumentach w Gecko.

+

Dla dokumentów HTML początkową wartością document.title jest zawartość tekstowa elementu <title>. Dla XUL-a jest to wartość atrybutu {{ XULAttr("title") }} elementu {{ XULElem("window") }} lub innego elementu XUL najwyższego poziomu.

+

W XUL-u próba dostępu do document.title zanim jeszcze dokument zostanie w pełni załadowany może skutkować niepożądanym zachowaniem (document.title może zwrócić pusty łańcuch znaków, a ustawienie document.title może nie mieć żadnego efektu).

+

Specyfikacja

+

DOM Level 2 HTML: document.title

+

{{ languages( { "en": "en/DOM/document.title" } ) }}

diff --git a/files/pl/web/api/document/url/index.html b/files/pl/web/api/document/url/index.html new file mode 100644 index 0000000000..90bb037e8b --- /dev/null +++ b/files/pl/web/api/document/url/index.html @@ -0,0 +1,25 @@ +--- +title: document.URL +slug: Web/API/Document/URL +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/URL +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca URL bieżącego dokumentu.

+

Składnia

+
ciąg = document.URL
+
+

Przykład

+
var currentURL = document.URL;
+alert(currentURL);
+
+

Uwagi

+

URL ma zastąpić używaną w DOM Level 0 własność document.location.href. Jednakże, w przeciwieństwie do niej, document.URL nie można ustawiać.

+

Specyfikacja

+

DOM Level 2 HTML: URL

+

{{ languages( { "en": "en/DOM/document.URL", "es": "es/DOM/document.URL", "ja": "ja/DOM/document.URL" } ) }}

diff --git a/files/pl/web/api/document/vlinkcolor/index.html b/files/pl/web/api/document/vlinkcolor/index.html new file mode 100644 index 0000000000..b33a53c482 --- /dev/null +++ b/files/pl/web/api/document/vlinkcolor/index.html @@ -0,0 +1,29 @@ +--- +title: document.vlinkColor +slug: Web/API/Document/vlinkColor +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/vlinkColor +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca/ustawia kolor odwiedzonych linków w dokumencie.

+

Składnia

+
kolor = document.vlinkColor
+document.vlinkColor =kolor
+
+

Parametry

+ +

Uwagi

+

Domyślną wartością tej własności jest + + purple + .

+

Specyfikacja

+

DOM Level 0 - brak w specyfikacji.

+

{{ languages( { "en": "en/DOM/document.vlinkColor" } ) }}

diff --git a/files/pl/web/api/document/width/index.html b/files/pl/web/api/document/width/index.html new file mode 100644 index 0000000000..af36011079 --- /dev/null +++ b/files/pl/web/api/document/width/index.html @@ -0,0 +1,28 @@ +--- +title: document.width +slug: Web/API/Document/width +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/width +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca szerokość bieżącego dokumentu w pikselach.

+

Nie obsługiwana przez IE.

+

Składnia

+
piksele = document.width
+
+

Przykład

+
function init() {
+  alert("Szerokość dokumentu wynosi " + document.width + " pikseli.");
+}
+
+

Uwagi

+

Zobacz także DOM:document.height.

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/document.width" } ) }}

diff --git a/files/pl/web/api/document/write/index.html b/files/pl/web/api/document/write/index.html new file mode 100644 index 0000000000..24daccf070 --- /dev/null +++ b/files/pl/web/api/document/write/index.html @@ -0,0 +1,38 @@ +--- +title: document.write +slug: Web/API/Document/write +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Document/write +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zapisuje ciąg tekstu w strumieniu dokumentu otwartym przez document.open.

+

Składnia

+
document.write(tekst)
+
+

Parametry

+ +

Przykład

+
document.open();
+document.write("<h1>witam!</h1>");
+document.close();
+
+

Uwagi

+

Zapis do dokumentu, który już się załadował, bez wywoływania document.open spowoduje automatyczne przeprowadzenie document.open. Zaleca się wywołanie document.close po skończeniu zapisu, aby poinformować przeglądarkę, by zakończyła ładowanie strony. Tekst, który zapisujesz, jest parsowany i trafia do modelu struktury dokumentu. W poniższym przykładzie element H1 staje się węzłem. Jeżeli wywołanie document.write() zostało zagnieżdżone bezpośrednio w kodzie HTML, nie spowoduje ono uruchomienia document.open. Np.:

+
 <div>
+  <script type="text/javascript">
+    document.write("<h1>Main title</h1>")
+  </script>
+ </div>
+
+

Specyfikacja

+

write

+
+  
+

{{ languages( { "en": "en/DOM/document.write", "fr": "fr/DOM/document.write", "ja": "ja/DOM/document.write" } ) }}

diff --git a/files/pl/web/api/document/writeln/index.html b/files/pl/web/api/document/writeln/index.html new file mode 100644 index 0000000000..f70d4f72a4 --- /dev/null +++ b/files/pl/web/api/document/writeln/index.html @@ -0,0 +1,41 @@ +--- +title: document.writeln +slug: Web/API/Document/writeln +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Document/writeln +--- +

{{APIRef("DOM")}}

+ +

Podsumowanie

+ +

Zapisuje w dokumencie ciąg tekstu, a po nim znak nowej linii.

+ +

Składnia

+ +
document.writeln(linia)
+
+ +

Parametry

+ + + +

Przykład

+ +
document.writeln("<p>podaj hasło:</p>");
+
+ +

Uwagi

+ +

document.writeln nie różni się niczym od document.write, poza tym, że dodaje na końcu znak nowego wiersza.

+ +

Specyfikacja

+ +

writeln

+ +
 
+ +

{{ languages( { "en": "en/DOM/document.writeln", "ja": "ja/DOM/document.writeln" } ) }}

diff --git a/files/pl/web/api/domapplicationsmanager/getall/index.html b/files/pl/web/api/domapplicationsmanager/getall/index.html new file mode 100644 index 0000000000..272c82b938 --- /dev/null +++ b/files/pl/web/api/domapplicationsmanager/getall/index.html @@ -0,0 +1,47 @@ +--- +title: DOMApplicationsManager.getAll() +slug: Web/API/DomApplicationsManager/getAll +translation_of: Archive/Marketplace/API/DOMApplicationsManager/getAll +--- +

  

+ +
{{ ApiRef("Apps") }}
+ +

{{ non-standard_header() }}

+ +

Summary

+ +

Lists all installed apps in the user's repository.

+ +

Syntax

+ +
window.navigator.mozApps.mgmt.getAll()
+
+ +

Return value

+ +

getAll() returns a pendingGetAll object. Callers are expected to set the onsuccess and onerror callback properties of the returned object.

+ +

pendingGetAll.result will be an array of App objects that contains all the apps installed in the current browser. pendingGetAll.result will be the empty list if no apps are installed. onerror will be called if a serious problem occurs while checking this.

+ +

This is a privileged call. navigator.mozApps.mgmt will be null if you do not have the privilege to query apps.

+ +

Errors

+ +

The following error can be returned in DOMRequest.error.

+ +
+
+ +
+
DENIED
+
Permission denied.
+
+ + + + + +

  

diff --git a/files/pl/web/api/domapplicationsmanager/index.html b/files/pl/web/api/domapplicationsmanager/index.html new file mode 100644 index 0000000000..e19495d68e --- /dev/null +++ b/files/pl/web/api/domapplicationsmanager/index.html @@ -0,0 +1,86 @@ +--- +title: DOMApplicationsManager +slug: Web/API/DOMApplicationsManager +tags: + - API + - Apps + - Apps API + - NeedsTranslation + - TopicStub +translation_of: Archive/Marketplace/API/DOMApplicationsManager +--- +

{{ ApiRef("Apps") }}

+ +

{{ non-standard_header() }}

+ +

Provides support for managing, and Open Web apps in a browser. A manager can be accessed via {{domxref("DOMApplicationsRegistry.mgmt", "Navigator.mozApps.mgmt")}}

+ +

Property

+ +
+
{{domxref("DOMApplicationsManager.oninstall")}}
+
Is an {{domxref("EventManager")}} call when install event is received.
+
{{domxref("DOMApplicationsManager.onuninstall")}}
+
Is an {{domxref("EventManager")}} call when uninstall event is received.
+
{{domxref("DOMApplicationsManager.onenablestatechange")}}
+
Is an {{domxref("EventManager")}} call when enablestatechange event is received.
+
+ +

Methods

+ +
+
{{ domxref("DOMApplicationsManager.getAll()") }}
+
Returns all applications.
+
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatUnknown() }}16.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}16.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/pl/web/api/element/addeventlistener/index.html b/files/pl/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..781ec7f3b6 --- /dev/null +++ b/files/pl/web/api/element/addeventlistener/index.html @@ -0,0 +1,109 @@ +--- +title: element.addEventListener +slug: Web/API/Element/addEventListener +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/addEventListener +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda addEventListener pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.

+

Składnia

+
target.addEventListener(type, listener, useCapture);
+
+
+
+ type 
+
+ Łańcuch przedstawiający typ zdarzenia do nasłuchu.Need a link here
+
+ listener 
+
+ Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu EventListener lub pojedynczą funkcją JavaScript.
+
+ useCapture 
+
+ Jeśli zostanie ustawione na true, useCapture wskazuje, że użytkownik chce przechwytywać zdarzenia. Po rozpoczęciu przechwytywania, wszystkie zdarzenia typu type będą przekazywane do naszego listener'a zanim zostaną wysłane do innych obiektów nasłuchujących (EventTarget) znajdujących się poniżej w drzewie DOM. Zdarzenia, które propagują w górę drzewa nie uruchamiają systemu nasłuchującego (listener) ustawionego na przechwytywanie.
+
+

Dla uzyskania szczegółowego objaśnienia zobacz DOM Level 3 Events.

+

Przykład

+
 <html>
+ <head>
+   <title>Przykład zdarzenia DOM</title>
+   <style type="text/css">
+     #t { border: 1px solid red }
+     #t1 { background-color: pink; }
+   </style>
+   <script type="text/javascript">
+
+   // Funkcja zmieniająca zawartość komórki tabeli t2
+   function modifyText() {
+     var t2 = document.getElementById("t2");
+     t2.firstChild.nodeValue = "Trzy";
+   }
+
+   // Funkcja dodająca obserwatora zdarzeń dla tabeli t
+   function load() {
+     var el = document.getElementById("t");
+     el.addEventListener("click", modifyText, false);
+   }
+
+   </script>
+ </head>
+ <body onload="load();">
+ <table id="t">
+   <tr><td id="t1">Jeden</td></tr>
+   <tr><td id="t2">Dwa</td></tr>
+ </table>
+ </body>
+ </html>
+
+

W powyższym przykładzie, funkcja modifyText() została zarejestrowana za pomocą addEventListener() do obsługi zdarzenia typu click na tabeli t. Kliknięcie w dowolnym miejscu tej tabeli rozpocznie propagowanie zdarzenia i wywoła funkcję modifyText().

+

Uwagi

+

Po co używać addEventListener?

+

addEventListener daje możliwość zarejestrowania obsługi zdarzenia według specyfikacji W3C DOM. Korzyści są następujące:

+ +

Alternatywne, starsze sposoby rejestracji zdarzeń są opisane poniżej.

+

Dodawanie nasłuchu podczas obsługi zdarzenia

+

Jeśli podczas obsługi zdarzenia zostanie dodany nowy obiekt nasłuchujący to zdarzenie, nie zostanie on uruchomiony dla tego zdarzenia. Może zostać wywołany podczas dalszego etapu przepływu zdarzeń(Event flow), np. w fazie propagowania zdarzenia w górę drzewa DOM.

+

Identyczne obiekty nasłuchujące

+

Jeśli kilka identycznych obiektów nasłuchujących zostanie zarejestrowanych dla tego samego zdarzenia (EventTarget) z tymi samymi parametrami to duplikaty są ignorowane. Obiekt nasłuchujący nie będzie wywołany więcej niż jeden raz. Powielone powiązania nie muszą być usuwane ręcznie za pomocą funkcji removeEventListener, ponieważ są one usuwane automatycznie.

+

Wartość this

+

Doczepianie akcji używając addEventListener() zmienia wartość this—zauważ, że wartość this ijest przekazywana funkcji przez zdarzenie.

+

W powyższym przykładzie, wartość this wewnątrz modifyText() gdy zostanie wywołana ze zdarzenia onclick event jest odwołaniem do tabeli 't'. Jeśli obsługa zdarzenia onclick jest dodana w źródle HTML:

+
<table id="t" onclick="modifyText();">
+  ...
+</table>
+
+

to wartość this wewnątrz funkcji modifyText() wywołanej z poziomu zdarzenia onclick będzie odwołaniem od obiektu globalnego(window).

+

Internet Explorer

+

W IE 8 i niższych należy użyć attachEvent zamiast standardowego addEventListener. By wspierać IE, powyższy przykład może zostać zmodyfikowany do:

+
if (el.addEventListener){
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent){
+  el.attachEvent('onclick', modifyText);
+}
+
+

Starsze sposoby dołączania zdarzeń

+

addEventListener() zostało wprowadzone wraz ze specyfikacją DOM 2 Events. Wcześniej, zdarzenia były dołączone jak pokazano poniżej:

+
// Using a function reference—note lack of '()'
+el.onclick = modifyText;
+
+// Używając deklaracji funkcji
+element.onclick = function(){
+                    // ... logika funkcji ...
+                  };
+
+

Ta metoda zastępuje istniejącą obsługę zdarzenia onclick na elemencie jeśli jest jakakolwiek. Podobnie do innych zdarzeń 'on' takich jak onblur, onkeypress, i tak dalej.

+

Ponieważ była to istotna część DOM 0, ta metoda jest bardzo szeroko wspierana i nie wymaga specjalnych kodów do różnych przeglądarek; stąd też jest to normalnie używana do dynamicznego zaczepienia obsługi zdarzenia jeśli nie potrzeba dodatkowych możliwości  addEventListener().

+

Specyfikacja

+

DOM Level 2 Events: addEventListener

+

{{ languages( { "en": "en/DOM/element.addEventListener", "fr": "fr/DOM/element.addEventListener", "ja": "ja/DOM/element.addEventListener" } ) }}

diff --git a/files/pl/web/api/element/appendchild/index.html b/files/pl/web/api/element/appendchild/index.html new file mode 100644 index 0000000000..ae2b141231 --- /dev/null +++ b/files/pl/web/api/element/appendchild/index.html @@ -0,0 +1,52 @@ +--- +title: element.appendChild +slug: Web/API/Element/appendChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/appendChild +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Metoda Node.appendChild() wstawia określony węzeł na koniec listy dzieci określonego rodzica. Jeśli węzeł ma już rodzica, jest on najpierw od niego oddzielany.

+ +

Składnia

+ +
var dziecko = element.appendChild(dziecko)
+
+ + + +

Opis

+ +

Metoda appendChild zwraca referencję do dodanego węzła. 

+ +

Przykład

+ +
// Tworzy nowy element paragrafu
+var p = document.createElement("p");
+
+// Wstawia go na koniec ciała dokumentu
+document.body.appendChild(p);
+
+ +

 

+ +

Uwagi

+ +

appendChild jest jedną z fundamentalnych metod w programowaniu z użyciem DOM. Metoda ta wstawia nowy węzeł do struktury DOM dokumentu HTML. Jest to druga część procesu stwórz-i-wstaw, podstawowego przy programowym budowaniu strony. Inne związane z tym metody to insertBefore, replaceChild i removeChild.

+ +

Jeśli dziecko jest referencją do węzła, który istnieje już w dokumencie, appendChild przenosi go z dotychczasowej pozycji w nowe miejsce (tj. nie ma potrzeby odzielać węzeł od jego rodzica przed wstawieniem go do innego węzła).

+ +

Specyfikacja

+ +

DOM Level 2 Core: appendChild

+ +

{{ languages( { "en": "en/DOM/element.appendChild", "fr": "fr/DOM/element.appendChild", "ja": "ja/DOM/element.appendChild" } ) }}

diff --git a/files/pl/web/api/element/attributes/index.html b/files/pl/web/api/element/attributes/index.html new file mode 100644 index 0000000000..5ae9839a79 --- /dev/null +++ b/files/pl/web/api/element/attributes/index.html @@ -0,0 +1,82 @@ +--- +title: element.attributes +slug: Web/API/Element/attributes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/attributes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

attributes zwraca kolekcję atrybutów określonych dla danego elementu.

+

Składnia i wartości

+
var kolekcjaAtrybutów = elementNodeReference.attributes;
+
+

Typem zwracanego obiektu kolekcji jest NamedNodeMap. Jeśli element nie ma określonych żadnych atrybutów, zwrócony obiekt ma zerową długość. Właściwość attributes jest tylko do odczytu.

+

kolekcjaAtrybutów to referencja do kolekcji atrybutów.

+

Przykład

+
// weź pierwszy element <p> z dokumentu
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+
+

Uwagi

+

Zwracany obiekt ma typ NamedNodeMap, nazywany także kolekcją, będący listą węzłów, a nie ciągów znakowych. Właściwości obiektów atrybutów dostępne są poprzez indeks, tak jak w poniższym przykładzie, który pobiera parę nazwa/wartość pierwszego atrybutu akapitu "p1":

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function showFirstAttr()
+   {
+    var FirstParg = document.getElementById("p1");
+    var outputText = document.getElementById("result");
+
+    if (FirstParg.hasAttributes())
+    // sprawdźmy, czy FirstParg ma atrybuty
+     {
+      outputText.value = FirstParg.attributes[0].name + "->"
+                       + FirstParg.attributes[0].value;
+     }
+    else
+     {
+      outputText.value = "Brak atrybutów do wyświetlenia"
+     };
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="p1" style="color: green;">Przykładowy akapit</p>
+ <form action="">
+  <p><input type="button" value="Pokaż nazwę i wartość pierwszego atrybutu"
+      onclick="showFirstAttr();">
+  <input id="result" type="text" value=""></p>
+ </form>
+</body>
+</html>
+
+

Obiekt z atrybutami jest kolekcją, która podobna jest do tablicy, ponieważ ma właściwość length, a do atrybutów można odnosić się poprzez indeks liczbowy, ale kolekcja nie posiada specjalnych metod, jakie mają tablice, jak join, split, itd.

+

Kolejność w kolekcji atrybutów nie jest wiarygodna - dwie przeglądarki po otrzymaniu takiego samego kodu znaczników mogą zwracać różnie uporządkowane obiekty attributes.

+

By uzyskać dostęp do konkretnego atrybutu, użyj metody getAttribute lub zapisu z użyciem kropki:

+
 // pokaż id elementu, jeśli element go posiada
+ if(element.id)
+  {
+   alert("id elementu to " + element.id);
+  }
+ else
+  {
+   alert("element nie ma id");
+  };
+
+

Specyfikacja

+ +

{{ languages( { "en": "en/DOM/element.attributes", "fr": "fr/DOM/element.attributes", "ja": "ja/DOM/element.attributes", "zh-cn": "cn/DOM/element.attributes" } ) }}

diff --git a/files/pl/web/api/element/blur/index.html b/files/pl/web/api/element/blur/index.html new file mode 100644 index 0000000000..1febd21617 --- /dev/null +++ b/files/pl/web/api/element/blur/index.html @@ -0,0 +1,21 @@ +--- +title: element.blur +slug: Web/API/Element/blur +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/blur +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda blur dezaktywuje bieżący element (usuwa focus).

+

Składnia

+
element.blur()
+
+

Specyfikacja

+

blur

+
+  
+

{{ languages( { "en": "en/DOM/element.blur", "fr": "fr/DOM/element.blur" } ) }}

diff --git a/files/pl/web/api/element/childnodes/index.html b/files/pl/web/api/element/childnodes/index.html new file mode 100644 index 0000000000..2f15d119e2 --- /dev/null +++ b/files/pl/web/api/element/childnodes/index.html @@ -0,0 +1,49 @@ +--- +title: element.childNodes +slug: Web/API/Element/childNodes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/childNodes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

childNodes zwraca kolekcję węzłów-dzieci elementu.

+

Składnia i wartości

+
var listaWęzłów = referencjaDoWęzłaElementu.childNodes;
+
+

listaWęzłów to uporządkowana kolekcja obiektów węzłów, będącymi dziećmi bieżącego elementu. Jeśli element nie ma dzieci, listaWęzłów jest pusta.

+

listaWęzłów to zmienna przechowująca listę węzłów. Lista taka ma typ NodeList. Właściwość childNodes jest tylko do odczytu.

+

Przykład

+
// parg to referencja do obiektu elementu <p>
+if (parg.hasChildNodes())
+// sprawdzamy czy obiekt nie jest pusty - czy ma dzieci
+ {
+   var children = parg.childNodes;
+   for (var i = 0; i < children.length; i++)
+   {
+   // zrob cos z kazdym dzieckiem jako children[i]
+   // uwaga: lista "żyje", dodawanie bądź usuwanie dzieci ją zmieni
+   };
+ };
+
+
// sposób na usunięcie wszystkich dzieci węzła
+// box to referencja do obiektu elementu, który ma dzieci
+while (box.firstChild)
+ {
+    //lista jest "żywa", więc będzie przeindeksowana po każdym wywołaniu
+    box.removeChild(box.firstChild);
+ };
+
+

Uwagi

+

Elementy kolekcji węzłów są obiektami, a nie łańcuchami. By pobrać dane z tych obiektów, musisz użyć ich atrybutów (np. referencjaDoWęzłaElementu.childNodes{{ mediawiki.external(1) }}.nodeName by pobrać nazwę).

+

Obiekt document ma dwoje dzieci: deklarację DOCTYPE i element HTML.

+

Specyfikacja

+ +

{{ languages( { "en": "en/DOM/element.childNodes", "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes" } ) }}

diff --git a/files/pl/web/api/element/classlist/index.html b/files/pl/web/api/element/classlist/index.html new file mode 100644 index 0000000000..5e7112b8d5 --- /dev/null +++ b/files/pl/web/api/element/classlist/index.html @@ -0,0 +1,264 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

Element.classList jest właściwością tylko do odczytu, która zwraca zbiór live {{domxref("DOMTokenList")}} atrybutów klasy danego elementu.

+ +

Używanie classList stanowi wygodną alternatywę uzyskiwania dostępu do listy klas danego elementu w formie skompresowanego stringa poprzez {{domxref("element.className")}}.

+ +

Składnia

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses to DOMTokenList reprezentujący atrybuty klasy elementNodeReference. Jeśli atrybut klasy nie został określony lub jest pusty, elementClasses.length zwraca 0. Sam w sobie element.classList jest tylko do odczytu, ale można go mimo to modyfikować poprzez stosowanie metod add() i remove().

+ +

Metody

+ +
+
add( String [, String] )
+
Nadaje określone wartości klasy. Jeśli wartości te już istnieją w atrybucie elementu, wówczas zostają zignorowane.
+
remove( String [,String] )
+
Usuwa określone wartości klasy.
+
item ( Number )
+
Zwraca wartosć klasy wg indeksu w zbiorze.
+
toggle ( String [, force] )
+
Jeśli występuje tylko jeden argument: Przełącza wartość klasy, tzn. jeśli klasa istnieje, wówczas zostaje usunięta i zwraca false, jeśli nie, wówczas dodaje ją i zwraca true.
+ Jeśli występuje również drugi argument: Jeśli drugi argument uznawany jest za true, dodaje określoną wartość klasy, natomiast jeśli zostaje uznany za false, wówczas zostaje usunięty.
+
contains( String )
+
Sprawdza, czy określona wartość klasy istnieje w atrybucie klasy danego elementu.
+
+ +

Przykłady

+ +
// div jest obiektem odwołującym się do elementu <div> o klasie ="foo bar"
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// jeśli ustawiona jest widoczność usuwa ją, w przeciwnym wypadku dodaje
+div.classList.toggle("visible");
+
+// dodaj/usuń (add/remove) jest widoczne, w zależności od warunku testowego, i mniejsze od 10
+div.classList.toggle("visible", i < 10 );
+
+alert(div.classList.contains("foo"));
+
+// dodaj lub usuń złożone klasy
+div.classList.add("foo", "bar");
+div.classList.remove("foo", "bar");
+ +
+

Wersje Firefoxa wcześniejsze niż 26 nie implementują użycia niektórych argumentów metod dodaj/usuń/przełącz (add/remove/toggle). Zobacz https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Polyfill

+ +
// Źródło: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+;(function() {
+    // pomocnicy
+    var regExp = function(name) {
+        return new RegExp('(^| )'+ name +'( |$)');
+    };
+    var forEach = function(list, fn, scope) {
+        for (var i = 0; i < list.length; i++) {
+            fn.call(scope, list[i]);
+        }
+    };
+
+    // obiekt listy klasy z podstawowymi metodami
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className += this.element.className.length > 0 ? ' ' + name : name;
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className =
+                    this.element.className.replace(regExp(name), '');
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name)
+                ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        // bonus..
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    if (!('classList' in Element.prototype)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // replace() wspierane przez pozostałe przeglądarki
+    if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecifikacjaStatusKomentarz
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Initial definition
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}} 
+ +

Zgodność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Zgodność podstawowa812{{CompatGeckoDesktop(1.9.2)}}10[1]11.505.1
toggle() method's second argument2412{{CompatGeckoDesktop(24)}}{{CompatNo}}[2]157
Multiple arguments for add() & remove()2812{{CompatGeckoDesktop(26)}}{{CompatNo}}157
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Wsparcie podstawowe3.012{{CompatGeckoMobile(1.9.2)}}10[1]11.105.0
toggle method's second argument4.412{{CompatGeckoMobile(24)}}{{CompatNo}}[2]{{CompatUnknown}}7.0
multiple arguments for add() & remove()4.412{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}7.0
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Brak wsparcia dla elementów SVG. Zobacz raport w tej kwestii na stronie Microsoftu.
+ [2] Internet Explorer nigdy tego nie zimplementował. Zobacz raport w tej kwestii na stronie Microsoftu.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/element/classname/index.html b/files/pl/web/api/element/classname/index.html new file mode 100644 index 0000000000..31f21befb2 --- /dev/null +++ b/files/pl/web/api/element/classname/index.html @@ -0,0 +1,37 @@ +--- +title: element.className +slug: Web/API/Element/className +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/className +--- +
+ {{APIRef}}
+
+  
+
+ Podsumowanie
+

className pobiera/ustawia wartość atrybutu class bieżącego elementu.

+

Składnia i wartości

+
var nazwaKlasy = referencjaDoWęzłaElementu.className;
+referencjaDoWęzłaElementu.className = nazwaKlasy;
+
+ +

Przykład

+
var elementNodeReference = document.getElementById("div1");
+
+if (elementNodeReference.className == "fixed") {
+  // pomiń elementy określonej klasy
+  goNextElement();
+};
+

Uwagi

+

Dla tej właściwości użyto nazwy className, a nie class, ponieważ "class" jest w wielu językach korzystających z DOM słowem kluczowym.

+

Specyfikacja

+ diff --git a/files/pl/web/api/element/click/index.html b/files/pl/web/api/element/click/index.html new file mode 100644 index 0000000000..5c0fe512d5 --- /dev/null +++ b/files/pl/web/api/element/click/index.html @@ -0,0 +1,23 @@ +--- +title: element.click +slug: Web/API/Element/click +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/click +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda click wywołuje kliknięcie na bieżącym elemencie.

+

Składnia

+
element.click()
+
+

Notatki

+

Metoda click symuluje zdarzenie kliknięcia na bieżącym elemencie. Zwykle używa się tego by wywołać obsługę zdarzenia przypisaną do elementu bieżącego bądź leżącego wyżej w "łańcuchu zdarzeń".

+

Specyfikacja

+

click

+
+  
+

{{ languages( { "en": "en/DOM/element.click", "fr": "fr/DOM/element.click" } ) }}

diff --git a/files/pl/web/api/element/clientheight/index.html b/files/pl/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..7014fd35f5 --- /dev/null +++ b/files/pl/web/api/element/clientheight/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/clientHeight +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wewnętrzną wysokość elementu w pikselach, włączając marginesy wewnętrzne ( + + padding + ), ale bez poziomego paska przewijania, obramowań i marginesów zewnętrznych ( + + margin + ).

+

clientHeight można wyliczyć jako (właśność height CSS) + (padding w CSS) - (wysokość poziomego paska przewijania (jeśli jest)).

+

Składnia i wartości

+
var h = element.clientHeight;
+
+

h to liczba całkowita reprezentująca clientHeight elementu w pikselach.

+

clientHeight jest tylko do odczytu.

+

Przykład

+
+
+

padding-top

+

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

+

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

+

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

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom
+

Grafika:clientHeight.png

+

Specyfikacja

+

Nie należy do żadnej ze specyfikacji W3C.

+

Uwagi

+

clientHeight jest niestandardową właściwością, wprowadzoną w modelu obiektowym przeglądarki Internet Explorer.

+

Dokumentacja

+ +

{{ languages( { "en": "en/DOM/element.clientHeight", "fr": "fr/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}

diff --git a/files/pl/web/api/element/clientnode/index.html b/files/pl/web/api/element/clientnode/index.html new file mode 100644 index 0000000000..eb0550678b --- /dev/null +++ b/files/pl/web/api/element/clientnode/index.html @@ -0,0 +1,32 @@ +--- +title: element.cloneNode +slug: Web/API/Element/clientNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/cloneNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda cloneNode zwraca kopię bieżącego węzła.

+

Składnia

+
kopiaWęzła = element.cloneNode(głębokość)
+
+

Parametry

+ +

Przykład

+
p = document.getElementById("para1");
+p_prime = p.cloneNode(true);
+
+

Uwagi

+

Kopia węzła zwrócona przez cloneNode() nie ma rodzica. Podczas klonowania węzła skopiowane zostają wszystkie jego atrybuty i ich wartości, ale nie zostaje skopiowana treść zawarta w węźle, ponieważ treść ta przechowywana jest w węźle potomnym typu Text.

+

Głębokie klonowanie kopiuje i zwraca węzeł wraz z całym drzewem pod nim się znajdującym (w tym treścią z potomnych węzłów Text) .

+

Specyfikacja

+

DOM Level 2 Core: cloneNode

+
+  
+

{{ languages( { "en": "en/DOM/element.cloneNode", "fr": "fr/DOM/element.cloneNode", "ja": "ja/DOM/element.cloneNode", "pt": "pt/DOM/element.cloneNode", "zh-cn": "cn/DOM/element.cloneNode" } ) }}

diff --git a/files/pl/web/api/element/clientwidth/index.html b/files/pl/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..5cf48d16ad --- /dev/null +++ b/files/pl/web/api/element/clientwidth/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/clientWidth +--- +

{{ ApiRef() }}

+

Podsumowanie

+

clientWidth to wewnętrzna szerokość elementu w pikselach. Zawiera margines wewnętrzny ( + + padding + ), ale pomija pionowy pasek przewijania (jeśli jest obecny lub renderowany), obramowania i margines zewnętrzny ( + + margin + ).

+

Składnia i wartości

+
var w = element.clientWidth;
+
+

w to liczba całkowita odpowiadająca clientWidth elementu w pikselach. clientWidth jest tylko do odczytu.

+

Przykład

+
+
+

padding-top

+

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

+

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

+

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

+

padding-bottom

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

Image:clientWidth.png

+

Specyfikacja

+

Nie należy do żadnej ze specyfikacji W3C.

+

Uwagi

+

clientWidth został wprowadzony w modelu obiektowym DHTML przeglądarki Internet Explorer.

+

Dokumentacja

+ +
+  
+

{{ languages( { "en": "en/DOM/element.clientWidth", "fr": "fr/DOM/element.clientWidth" } ) }}

diff --git a/files/pl/web/api/element/dir/index.html b/files/pl/web/api/element/dir/index.html new file mode 100644 index 0000000000..5e20e1e6ad --- /dev/null +++ b/files/pl/web/api/element/dir/index.html @@ -0,0 +1,34 @@ +--- +title: element.dir +slug: Web/API/Element/dir +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/dir +--- +
+ {{ApiRef}}
+

Podsumowanie

+

Atrybut dir ustawia lub pobiera kierunek pisania tekstu dla zawartości bieżącego elementu.

+

Składnia i wartości

+
var bieżącyKierunekPisania = elementNodeReference.dir;
+elementNodeReference.dir = nowyKierunekPisania;
+
+

bieżącyKierunekPisania jest łańcuchem reprezentującym kierunek pisania tekstu bieżącego elementu. nowyKierunekPisania to zmienna łańcuchowa, której wartość reprezentuje kierunek pisania tekstu.

+

Możliwe wartości dir to ltr dla "od lewej do prawej" i rtl dla "od prawej do lewej".

+

Przykład

+
var parg = document.getElementById("para1");
+
+parg.dir = "rtl";
+// zmienia kierunek tekstu w paragrafie "para1"
+
+

Uwagi

+

Kierunek pisania tekstu elementu oznacza kierunek, w którym idzie tekst (do obsługi różnych języków). Języki arabski i hebrajski to typowe przykłady użycia kierunku rtl.

+

Obrazek może mieć atrybut dir ustawiony na rtl. W takim wypadku atrybuty title i alt będą sformatowane i wyświetlona jako rtl.

+

Jeśli tabela ma kierunek rtl, kolumny porządkowane są od prawej do lewej.

+

Specyfikacja

+ diff --git a/files/pl/web/api/element/dispatchevent/index.html b/files/pl/web/api/element/dispatchevent/index.html new file mode 100644 index 0000000000..266c570cfe --- /dev/null +++ b/files/pl/web/api/element/dispatchevent/index.html @@ -0,0 +1,43 @@ +--- +title: element.dispatchEvent +slug: Web/API/Element/dispatchEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/dispatchEvent +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wywołuje zdarzenie w bieżącym elemencie.

+ +

Składnia

+ +
bool = element.dispatchEvent(event)
+
+ + + +

Uwagi

+ +

Jak pokazuje powyższy przykład, dispatchEvent to ostatni krok w procesie utwórz-zainicjuj-wywołaj, którego używa się by ręcznie wywołać zdarzenia w modelu zdarzeń implementacji.

+ +

Zdarzenie może zostać utworzone przy użyciu metody document.createEvent i zainicjowane za pomocą initEvent lub innej, bardziej wyspecjalizowanej metody, jak initMouseEvent albo initUIEvent.

+ +

Zobacz też dokumentację obiektu event.

+ +

Specyfikacja

+ +

DOM Level 2 Events: dispatchEvent

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.dispatchEvent", "es": "es/DOM/element.dispatchEvent", "fr": "fr/DOM/element.dispatchEvent", "ja": "ja/DOM/element.dispatchEvent" } ) }}

diff --git a/files/pl/web/api/element/firstchild/index.html b/files/pl/web/api/element/firstchild/index.html new file mode 100644 index 0000000000..20189ce803 --- /dev/null +++ b/files/pl/web/api/element/firstchild/index.html @@ -0,0 +1,101 @@ +--- +title: element.firstChild +slug: Web/API/Element/firstChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/firstChild +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

firstChild jest właściwością tylko do odczytu, która zwraca pierwszego potomka węzła lub wartość null, jeżeli węzeł nie ma potomków. Jeżeli węzeł jest elementem Document, wtedy zwraca pierwszy węzeł z listy swoich bezpośrednich dzieci.

+ +

Składnia i wartości

+ +
var elt = element.firstChild;
+
+ +

elt to referencja do pierwszego dziecka elementu, jeśli jest takie - w przeciwnym razie jest to null.

+ +

Przykład

+ +

Przeglądarki oparte o Gecko wstawiają do dokumentu węzły tekstowe reprezentujące białe znaki w kodzie. Dlatego pierwsze dziecko elementu może odnosić się do wstawionego węzła tekstowego, a nie elementu określonego przez następny znacznik w źródle strony.

+ +
<p id="para-01">
+  <span>Pierwszy span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

W powyższym przykładzie alert wyświetli '#text', ponieważ wstawiony jest węzeł tekstowy oznaczający przerwę między otwierającymi znacznikami <p> i <span> . Dowolny biały znak spowoduje wstawienie węzła tekstowego - zarówno pojedyncza spacja, jak i dowolna ilość spacji, nowych linii, znaków tabulacji itd.

+ +

Kolejny węzeł #text jest wstawiany między zamykającymi znacznikami </span> i </p>

+ +

Jeśli usunie się białe znaki ze źródła, nie zostaną wstawione węzły tekstowe, a element span stanie się pierwszym dzieckiem paragrafu.

+ +
<p id="para-01"><span>Pierwszy span</span></p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

Teraz alert wyświetli 'SPAN'.

+ +

Uwagi

+ +

Więcej o problemach z węzłami-zjawami znajdziesz w {{ Bug(26179) }} (nie komentuj tego błędu!). Oto jeden ze sposobów na ominięcie problemu:

+ +
<!-- konwencjonalne formatowanie prowadzi do
+     zaśmiecenia drzewa dokumentu w Gecko
+ -->
+<div>
+ <ul>
+  <li>Pozycja 1</li>
+  <li>Pozycja 2</li>
+  <li>Pozycja 3</li>
+ </ul>
+</div>
+
+<!-- Formatowanie ustawione, by ominąć
+     problem węzłów-zjaw
+ -->
+<div
+ ><ul
+  ><li>Pozycja 1</li
+  ><li>Pozycja 2</li
+  ><li>Pozycja 3</li
+ ></ul
+></div>
+
+ +

Węzły bezdzietne

+ +

Własność zwraca null, jeśli bieżący węzeł jest bezdzietny.

+ +

Białe znaki i węzły dzieci

+ +

Węzły #text mogą być wstawione jako dzieci elementów takich jak TR pomimo że specyfikacja HTML pozwala tylko na TD jako ich dzieci. Z uwagi na XML białe znaki muszą zostać zachowane i gdzieś wstawione.

+ +

Ponieważ węzły #text nie są elementami HTML, białe znaki są tam wstawiane.

+ +

W3C DOM 3 FAQ: Why are some Text nodes empty?

+ +

Specyfikacja

+ +

DOM Level 1 Core: firstChild

+ +

DOM Level 2 Core: firstChild

+ +
+ +

{{ languages( { "en": "en/DOM/element.firstChild", "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "zh-cn": "cn/DOM/element.firstChild" } ) }}

diff --git a/files/pl/web/api/element/focus/index.html b/files/pl/web/api/element/focus/index.html new file mode 100644 index 0000000000..7f3eef32fa --- /dev/null +++ b/files/pl/web/api/element/focus/index.html @@ -0,0 +1,23 @@ +--- +title: element.focus +slug: Web/API/Element/focus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/focus +--- +

{{ ApiRef() }}

+

Podsumowanie

+

focus aktywuje bieżący element (ustawia focus).

+

Składnia

+
element.focus()
+
+

Uwagi

+

Wywołanie metody focus() jest równoważne z zaznaczeniem elementu przez użytkownika.

+

Specyfikacja

+

focus

+
+  
+

{{ languages( { "en": "en/DOM/element.focus", "fr": "fr/DOM/element.focus" } ) }}

diff --git a/files/pl/web/api/element/getattribute/index.html b/files/pl/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..da509fb349 --- /dev/null +++ b/files/pl/web/api/element/getattribute/index.html @@ -0,0 +1,43 @@ +--- +title: element.getAttribute +slug: Web/API/Element/getAttribute +translation_of: Web/API/Element/getAttribute +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

getAttribute zwraca wartość atrybutu o podanej nazwie.

+ +

Składnia

+ +
atrybut = element.getAttribute(nazwaAtrybutu)
+
+ + + +

Przykład

+ +
var div1 = document.getElementById("div1");
+var a = div1.getAttribute("align");
+alert(a); // pokaże wartość atrybutu "align" dla elementu o id="div1"
+
+ +

Uwagi

+ +

W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają null, jeśli bieżący element nie posiada atrybutu o podanej nazwie. Specyfikacja DOM mówi, że w takiej sytuacji powinien być zwracany pusty ciąg znaków i niektórze implementacje DOM tak się zachowują. Zatem jeśli jest możliwe, że element nie posiada żądanego atrybutu, powinieneś użyć metody hasAttribute aby sprawdzić istnienie atrybutu zanim wywołasz getAttribute.

+ +

nazwaAtrybutu jest zazwyczaj zależna od wielkości liter, jednak nie w przypadku elementów HTML - wtedy wielkość liter nie ma znaczenia.

+ +

{{ DOMAttributeMethods() }}

+ +

Specyfikacja

+ +

DOM Level 2 Core: getAttribute (wprowadzono w DOM Level 1 Core)

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.getAttribute", "fr": "fr/DOM/element.getAttribute", "ja": "ja/DOM/element.getAttribute" } ) }}

diff --git a/files/pl/web/api/element/getattributenode/index.html b/files/pl/web/api/element/getattributenode/index.html new file mode 100644 index 0000000000..0bdf977063 --- /dev/null +++ b/files/pl/web/api/element/getattributenode/index.html @@ -0,0 +1,36 @@ +--- +title: element.getAttributeNode +slug: Web/API/Element/getAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca określony atrybut elementu jako węzeł typu Attr.

+

Składnia

+
węzełAtrybutu = element.getAttributeNode(nazwaAtrybutu)
+
+ +

Przykład

+
// html: <div id="top" />
+t = document.getElementById("top");
+iNode = t.getAttributeNode("id");
+// iNode.value = "top"
+
+

Uwagi

+

Interfejs węzła Attr dziedziczy ze wspólnego interfejsu węzłów Node, ale węzły atrybutów nie stanowią części drzewa dokumentu. Wpólne atrybuty wszystkich węzłów, takie jak parentNode, previousSibling i nextSibling mają w przypadku węzłów Attr wartość null.

+

Do elementu, do którego należy atrybut, możesz odnosić się wykorzystując właściwość ownerElement.

+

Do pobrania wartości atrybutu używa się raczej metody getAttribute niż getAttributeNode.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

getAttributeNode

+
+  
+

{{ languages( { "en": "en/DOM/element.getAttributeNode", "fr": "fr/DOM/element.getAttributeNode", "ja": "ja/DOM/element.getAttributeNode" } ) }}

diff --git a/files/pl/web/api/element/getattributenodens/index.html b/files/pl/web/api/element/getattributenodens/index.html new file mode 100644 index 0000000000..b1ec0f2281 --- /dev/null +++ b/files/pl/web/api/element/getattributenodens/index.html @@ -0,0 +1,39 @@ +--- +title: element.getAttributeNodeNS +slug: Web/API/Element/getAttributeNodeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNodeNS +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca węzeł Attr dla atrybutu z daną przestrzenią nazw i nazwą.

+ +

Składnia

+ +
attributeNode = element.getAttributeNodeNS(namespace,nodeName)
+
+ + + +

== Przykład == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top" </pre

+ +

Uwagi

+ +

getAttributeNodeNS is more specific than getAttributeNode in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is setAttributeNodeNS.

+ +

{{ DOMAttributeMethods() }}

+ +

Specyfikacja

+ +

DOM Level 2 Core: getAttributeNodeNS

diff --git a/files/pl/web/api/element/getattributens/index.html b/files/pl/web/api/element/getattributens/index.html new file mode 100644 index 0000000000..1ece5594ec --- /dev/null +++ b/files/pl/web/api/element/getattributens/index.html @@ -0,0 +1,47 @@ +--- +title: element.getAttributeNS +slug: Web/API/Element/getAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

getAttributeNS zwraca ciąg z wartością atrybutu o podanej nazwie i przestrzeni nazw. Jeśli nie ma atrybutu o takiego atrybutu, zwrócone zostanie null bądź "" (pust ciąg) - zob. {{ Anch("Uwagi") }}.

+

Składnia

+
wartośćAtr =element.getAttributeNS(przestrzeńNazw,nazwa)
+
+

Parametry

+ +

Przykład

+
var div1 = document.getElementById("div1");
+var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/",
+                            "special-align");
+alert(a); // wyświetli zawartość special-align elementu div
+
+

Uwagi

+

getAttributeNS różni się od getAttribute tym, że pozwala Ci określić do jakiej przestrzeni nazw należy atrybut, tak jak w powyższym przykładzie, gdzie atrybut należał do fikcyjnej przestrzeni "specialspace".

+

W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają null, jeśli bieżący element nie posiada atrybutu o podanej nazwie. Specyfikacja DOM mówi, że w takiej sytuacji powinien być zwracany pusty ciąg znaków i niektórze implementacje DOM tak się zachowują. Zatem jeśli jest możliwe, że element nie posiada żądanego atrybutu, powinieneś użyć metody hasAttributeNS aby sprawdzić istnienie atrybutu zanim wywołasz getAttributeNS.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: getAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.getAttributeNS", "fr": "fr/DOM/element.getAttributeNS", "ja": "ja/DOM/element.getAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/getboundingclientrect/index.html b/files/pl/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..dc189b37af --- /dev/null +++ b/files/pl/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,146 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Metoda(2) + - Pudełko + - Widok CSSOM +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

Metoda Element.getBoundingClientRect() zwraca rozmiar  oraz  położenie elementu względem okna widoku (viewport).

+ +

Składnia

+ +
rectObject = object.getBoundingClientRect();
+
+ +

Wynik

+ +

Zwrócony  jest obiekt DOMRect,  wyznaczony z tablicy prostokątów zwróconych przez  metodę getClientRects(), zastosowaną do danego elementu, czyli wyznaczony ze wszystkich pudełek  CSS związanych z danym elementem.

+ +

Zwrócony obiekt  DOMRect posiada następujące (tylko do odczytu) właściwości: left, top, right and bottom,  opisujące parametry otaczającego element pudełka w  pikselach. Właściwości top and left  oznaczają odległość od górnego-lewego rogu aktualnego okna widoku.

+ +
+

Uwaga: {{Gecko("1.9.1")}} dodało właściwości width and height do obiektu DOMRect.

+
+ +

Puste pudełka są całkowicie ignorowane. Jeśli wszystkie elementy pudełka są puste, to zwrócony prostokąt ma wysokość i szerokość równą zero zaś własności top oraz left dotyczą pierwszego pudełka CSS (w porządku kontekstowym) który zawiera dany element.

+ +

Efekt przewijania (scrolling) okna widoku  (lub dowolnego innego przewijalnego elementu) jest uwzględniany podczas wyznaczania otaczającego pudełka. Zatem, właściwości top oraz left zmieniają się natychmiast po dowolnym przewinięciu (są więc względne w stosunku do widoku, a więc nie są absolutne). W celu wyznaczenia absolutnego położenie elementu  należy do właściwości top oraz left dodać aktualne pozycje przesuwania (scrolling position)  (można je uzyskać za  pomocą window.scrollX and window.scrollY).

+ +

Skrypty wymagające  zgodności z różnymi przeglądarkami mogą korzystać z metod  window.pageXOffset oraz window.pageYOffset zamiast window.scrollX oraz window.scrollY. Skrypty które nie mają dostępu do  window.pageXOffset, window.pageYOffset, window.scrollX ani window.scrollY mogą stosować następujący kod :

+ +
// Zamiast scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
+// Zamiast scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
+
+ +

Przykład

+ +
// rect jest obiektem DOMRect z sześcioma własnościami: left, top, right, bottom, width, height
+var rect = obj.getBoundingClientRect();
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName("CSSOM View", "#the-getclientrects()-and-getboundingclientrect()-methods", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}definicja początkowa
+ +

Uwagi

+ +

Metoda getBoundingClientRect() została wprowadzona po raz pierwszy w  modelu MS IE DHTML.

+ +

Wynik metody getBoundingClientRect() jest  obiektem zamrożonym.

+ +

Zgodność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłaściwośćChromeFirefox (Gecko)Internet ExplorerOperaSafari
Postawowe wsparcie1.0[1]{{CompatGeckoDesktop(1.9)}}4.0[2]{{CompatVersionUnknown}}4.0
width/height{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9.1)}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
WłaściwośćAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Postawowe wsparcie2.01.0{{CompatGeckoMobile(1.9)}}6.0{{CompatVersionUnknown}}4.0
+
+ +

[1] specyfikacja CSS dla elementu 'use'  wskazującego na element  'symbol' wymaga aby domyślne wartości atrybutów  width oraz height elementu 'use' ustawione były na 100%. Również,  specyfikacja CSS dla atrybutów width oraz height elementu 'svg' wymaga 100%  jako wartości domyślne. Google Chrome nie przestrzega tych wymagań dla elementów  'use'. Chrome nie uwzględnia również  'stroke-width'. Zatem metoda   getBoundingClientRect() może zwrócić inny prostokąt w  Chrome  niż w Firefox.

+ +

[2] W IE8, oraz we wcześniejszych wersjach, obiekt  DOMRect zwrócony przez getBoundingClientRect() nie zawiera właściwości height ani width. Żadne dodatkowe właściwości (w tym height oraz width) nie mogą być dodane do tych obiektów DOMRect.

+ +

Począwszy od Gecko 12.0 {{geckoRelease("12.0")}}, efekt  transformacji CSS jest uwzględniany w algorytmie wyznaczania otaczającego pudełka (bounding rectangle).

+ +

Patrz również

+ + diff --git a/files/pl/web/api/element/getelementsbytagnamens/index.html b/files/pl/web/api/element/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..81b82173d2 --- /dev/null +++ b/files/pl/web/api/element/getelementsbytagnamens/index.html @@ -0,0 +1,49 @@ +--- +title: element.getElementsByTagNameNS +slug: Web/API/Element/getElementsByTagNameNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Element/getElementsByTagNameNS +--- +

{{ ApiRef("DOM") }}

+ +

Podsumowanie

+ +

Zwraca listę elementów o danej nazwie znacznika należącej do danej przestrzeni nazw.

+ +

Składnia

+ +
elements =element.getElementsByTagNameNS(namespace,localName)
+
+ + + +

Przykład

+ +
// check the alignment on a number of cells in a table.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("www.mozilla.org/ns/specialspace/", "td");
+for (var i = 0; i < cells.length; i++) {
+    status = cells[i].getAttribute("status");
+    if ( status == "open") {
+        // grab the data
+    }
+}
+
+ +

Uwagi

+ +

element.getElementsByTagNameNS is similar to document.getElementsByTagNameNS, except that its search is restricted to those elements which are descendants of the specified element.

+ +

Specyfikacja

+ +

DOM Level 2 Core: Element.getElementsByTagNameNS

diff --git a/files/pl/web/api/element/hasattribute/index.html b/files/pl/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..e06d1f1fa2 --- /dev/null +++ b/files/pl/web/api/element/hasattribute/index.html @@ -0,0 +1,34 @@ +--- +title: element.hasAttribute +slug: Web/API/Element/hasAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasAttribute zwraca wartość logiczną oznaczającą, czy element posiada określony atrybut czy nie.

+

Składnia

+
wynik = element.hasAttribute(nazwaAtrybutu)
+
+ +

Przykład

+
// przed ustawieniem wartości sprawdź, czy atrybut istnieje
+d = document.getElementById("div1");
+if(d.hasAttribute("align")){
+  d.setAttribute("align", "center");
+}
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: hasAttribute

+
+  
+

{{ languages( { "en": "en/DOM/element.hasAttribute", "fr": "fr/DOM/element.hasAttribute", "ja": "ja/DOM/element.hasAttribute" } ) }}

diff --git a/files/pl/web/api/element/hasattributens/index.html b/files/pl/web/api/element/hasattributens/index.html new file mode 100644 index 0000000000..13cc715dac --- /dev/null +++ b/files/pl/web/api/element/hasattributens/index.html @@ -0,0 +1,39 @@ +--- +title: element.hasAttributeNS +slug: Web/API/Element/hasAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasAttributeNS zwraca wartość logiczną oznaczającą, czy bieżący element ma określony atrybut.

+

Składnia

+
wynik =element.hasAttributeNS(przestrzeńNazw,nazwaLokalna)
+
+ +

Przykład

+
// sprawdza czy jest taki atrybut
+// przed nadaniem mu wartości
+var d = document.getElementById("div1");
+if (d.hasAttributeNS(
+        "http://www.mozilla.org/ns/specialspace/",
+        "special-align")) {
+   d.setAttribute("align", "center");
+}
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: hasAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.hasAttributeNS", "fr": "fr/DOM/element.hasAttributeNS", "ja": "ja/DOM/element.hasAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/hasattributes/index.html b/files/pl/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..2e1c7aea73 --- /dev/null +++ b/files/pl/web/api/element/hasattributes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttributes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasAttributes zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.

+

Składnia

+
[ true | false ] = element.hasAttributes
+
+

Przykład

+
t1 = document.getElementById("table-data");
+if ( t1.hasAttributes ) {
+    // zrób coś z
+    // t1.attributes
+}
+
+

Specyfikacja

+

hasAttributes

+
+  
+

{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "it": "it/DOM/element.hasAttributes" } ) }}

diff --git a/files/pl/web/api/element/haschildnodes/index.html b/files/pl/web/api/element/haschildnodes/index.html new file mode 100644 index 0000000000..e21f22dedf --- /dev/null +++ b/files/pl/web/api/element/haschildnodes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasChildNodes +slug: Web/API/Element/hasChildNodes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/hasChildNodes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasChildNodes zwraca wartość logiczną określającą, czy element posiada dzieci czy nie.

+

Składnia

+
[ true | false ] = element.hasChildNodes()
+
+

Przykład

+
t1 = document.getElementById("table-data");
+if ( t1.hasChildNodes() ) {
+    // tabela ma dzieci }
+
+

Uwagi

+

Zauważ, że składnia element.hasChildNodes - bez nawiasów () - jest nieprawidłowa. Takie użycie zawsze zwraca true, oznaczające, że metoda o tej nazwie jest dostępna w obiekcie. Nie daj się nabrać.

+

Specyfikacja

+

hasChildNodes

+
+  
+

{{ languages( { "en": "en/DOM/element.hasChildNodes", "fr": "fr/DOM/element.hasChildNodes", "ja": "ja/DOM/element.hasChildNodes" } ) }}

diff --git a/files/pl/web/api/element/id/index.html b/files/pl/web/api/element/id/index.html new file mode 100644 index 0000000000..53ba49d3b0 --- /dev/null +++ b/files/pl/web/api/element/id/index.html @@ -0,0 +1,38 @@ +--- +title: element.id +slug: Web/API/Element/id +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/id +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność id jednoznacznie identyfikuje bieżący element.

+

Składnia i wartości

+
id_str = element.id
+element.id =id_str
+
+ +

Przykład

+
if (element.id != "main_loop")
+     goBack();
+
+

Uwagi

+

Nie ma ważniejszej własności w dziedzinie konstruowania stron niż + + id + . ID elementu jest tym, czego najczęściej używa się by go wydobyć (np. za pomocą getElementById) i pozwala ono manipulować węzłami niezależnie od innych węzłów. W HTML-u i w XUL-u id definiowane jest jako atrybut tak:

+
<td id="table-cell2" />
+
+

Jeśli zamierzasz używać DOM na swoich stronach dobrze jest przypisać tyle atrybutów id ile tylko będzie potrzebne. Zauważ też, że + + id + używa się również by powiązać reguły stylów CSS z poszczególnymi elementami.

+

Specyfikacja

+

id

+

{{ languages( { "en": "en/DOM/element.id", "fr": "fr/DOM/element.id", "ja": "ja/DOM/element.id", "zh-cn": "cn/DOM/element.id" } ) }}

diff --git a/files/pl/web/api/element/index.html b/files/pl/web/api/element/index.html new file mode 100644 index 0000000000..5a7c6be166 --- /dev/null +++ b/files/pl/web/api/element/index.html @@ -0,0 +1,677 @@ +--- +title: Element +slug: Web/API/Element +tags: + - DOM + - Gecko +translation_of: Web/API/Element +--- +

{{ ApiRef}}

+ +

Ten rozdział dostarcza zwięzłych informacji dla wszystkich metod, własności i zdarzeń dostępnych dla większości elementów HTML i XML w Gecko DOM.

+ +

Różne specyfikacje W3C mają zastosowanie do elementów:

+ + + +

Niniejsze interfejsy DOM łączą różne specyfikacje, jednak staramy się skoncentrować na rekomendacji DOM Level 2 HTML. Każda podstrona zawiera odnośnik do odpowiedniego fragmentu specyfikacji W3C DOM.

+ +

W tym miejscu "elementy" oznaczają ten interfejs, jaki mają wszystkie elementy HTML i XML. Istnieją również bardziej specjalizowane interfejsy dla poszczególnych elementów - np. BODY posiada dodatkowe funkcje i własności, podobnie tabele. W tym rozdziale omówiony jest tylko ten interfejs, jak współdzielą wszystkie elementy.

+ +

Własności

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NazwaOpisTypDostępność
attributesZwraca tablicę atrybutów elementu.NamedNodeMapWszystkie
childNodesZwraca tablicę węzłów potomnych elementu.NodeListWszystkie
classNamePobiera/ustawia klasę elementu.StringHTML, XUL
clientHeightZwraca wewnętrzną wysokość elementu.NumberHTML
clientWidthZwraca wewnętrzną szerokość elementu.NumberHTML
dirUstawia lub pobiera kierunek elementu.StringHTML, XUL
firstChildZwraca pierwsze dziecko bieżącego węzła lub null, jeśli ten element nie posiada węzła potomnego.NodeWszystkie
idPobiera/ustawia id elementu.StringHTML, XUL
innerHTMLPobiera/ustawia znacznik zawartości elementu.StringHTML
langOkreśla język bazowy dla wartość atrybutów i tekstowej zawartości elementu.StringHTML
lastChildZwraca ostatnie dziecko bieżącego węzła elementu lub null jeśli ten element nie posiada węzłów potomnych.NodeWszystkie
localNameZwraca lokalną część uściślonej nazwy węzła.StringWszystkie
NazwaOpisTypDostępność
namePobiera lub ustawia atrybut name - dostępne nie dla wszystkich elementów.StringHTML
namespaceURIURI przestrzeni nazw węzła lub null, jeśli jest bliżej nieokreślony.StringWszystkie
nextSiblingWęzeł bezpośrednio następny w drzewie dokumentu lub null jeżeli takiego nie ma.NodeWszystkie
nodeNameNazwa węzła.StringWszystkie
nodeTypeCyfra reprezentująca typ węzła. 1 oznacza element DOM.NumberWszystkie
nodeValueWartość węzła atrybutu, zawartość węzła tekstowego lub null dla elementu DOM.StringWszystkie
offsetHeightWysokość elementu, odnosząca się do układu strony.NumberHTML
offsetLeftOdległość pomiędzy lewą krawędzią elementu, a jego offsetParent lewej krawędzi.NumberHTML
offsetParentElement, od którego obliczane są wszystkie przesunięcia.ElementHTML
offsetTopOdległość pomiędzy górną krawędzią elementu, a jego offsetParent górnej krawędzi.NumberHTML
offsetWidthSzerokość elementu, odnosząca się do układu strony.NumberHTML
ownerDocumentDokument, którego węzeł jest w lub null jeśli węzeł nie znajduje się wewnątrz.DocumentWszystkie
NazwaOpisTypDostępność
parentNodeElement nadrzędny bieżącego węzła lub null jeżeli węzeł nie znajduje się wewnątrz dokumentu DOM.NodeWszystkie
prefixPrefiks przestrzeni nazw węzła lub null jeżeli nie określono prefiksa.StringWszystkie
previousSiblingWęzeł bezpośrednio poprzedni w drzewie dokumentu lub null jeżeli takiego nie ma.NodeWszystkie
scrollHeightThe scroll view height of an element.NumberHTML
scrollLeftPobiera/Ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu.NumberHTML
scrollTopPobiera/Ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.NumberHTML
scrollWidthZwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu.NumberHTML
styleObiekt reprezentujący deklaracje stylów elementu.CSSStyleHTML, XUL
tabIndexPobiera lub ustawia pozycję elementu w kolejności przechodzenia tabulatorem.NumberHTML
tagNameNazwa znacznika HTML danego elementu.StringWszystkie
textContentPobiera bądź ustawia tekstową treść elementu i jego potomków.StringWszystkie
+ +

 

+ +
+
attributes
+
Zwraca tablicę atrybutów elementu.
+
+ +
+
childNodes
+
Zwraca tablicę węzłów potomnych elementu
+
+ +
+
className
+
Pobiera/ustawia klasę elementu.
+
+ +
+
clientHeight
+
Własność DHTML-a, reprezentuje wewnętrzną wysokość elementu.
+
+ +
+
clientLeft
+
Długość od lewego obramowania elementu wyrażona w pikselach. Aktualnie nie obsługiwana.
+
+ +
+
clientTop
+
Długość od górnego obramowania elementu wyrażona w pikselach. Aktualnie nie obsługiwana.
+
+ +
+
clientWidth
+
Własność DHTML-a, reprezentuje wewnętrzną szerokość elementu.
+
+ +
+
dir
+
Pobiera/ustawia kierunkowość (ang. directionality) elementu.
+
+ +
+
firstChild
+
Zwraca pierwsze dziecko bieżącego węzła.
+
+ +
+
id
+
Pobiera/ustawia id elementu.
+
+ +
+
innerHTML
+
innerHTML zwraca całą zawartość elementu wraz ze znacznikami.
+
+ +
+
lang
+
Określa język bazowy dla wartość atrybutów i tekstowej zawartości elementu.
+
+ +
+
lastChild
+
Zwraca ostatnie dziecko bieżącego węzła.
+
+ +
+
length
+
Zwraca ilość elementów listy (np. childNodes).
+
+ +
+
localName
+
Zwraca lokalną część uściślonej nazwy węzła.
+
+ +
+
name
+
Pobiera lub ustawia atrybut name - dostępne nie dla wszystkich elementów.
+
+ +
+
namespaceURI
+
URI przestrzeni nazw węzła lub NULL, jeśli nie określono przestrzeni nazw.
+
+ +
+
nextSibling
+
Zwraca węzeł bezpośrednio następny w drzewie dokumentu.
+
+ +
+
nodeName
+
Zwraca nazwę biężącego węzła.
+
+ +
+
nodeType
+
Zwraca typ bieżącego węzła.
+
+ +
+
nodeValue
+
Zwraca wartość bieżącego węzła.
+
+ +
+
offsetHeight
+
offsetHeight jest własnością DHTML-a, zwracającą wysokość elementu względem układu.
+
+ +
+
offsetLeft
+
offsetLeft pobiera/ustawia ilość pikseli, jaka dzieli element od lewej strony wewnątrz węzła offsetParent.
+
+ +
+
offsetParent
+
offsetParent zwraca referencję do obiektu, w którym obecny element się znajduje (tj. rodzica).
+
+ +
+
offsetTop
+
offsetTop zwraca pozycję obecnego elementu względem góry węzła offsetParent.
+
+ +
+
offsetWidth
+
offsetWidth jest własnością DHTML-a, zwracającą szerokość elementu względem układu.
+
+ +
+
ownerDocument
+
Zwraca dokument, w którym znajduje się bieżący węzeł.
+
+ +
+
parentNode
+
Zwraca rodzica bieżącego węzła.
+
+ +
+
prefix
+
Zwraca prefiks przestrzeni nazw obecnego węzła bądź NULL, jeśli nie określono przestrzeni nazw.
+
+ +
+
previousSibling
+
Zwraca węzeł bezpośrednio poprzedni w drzewie dokumentu.
+
+ +
+
scrollHeight
+
Własność DHTML-a, zwraca wysokość zawartości elementu z paskiem przewijania.
+
+ +
+
scrollLeft
+
pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.
+
+ +
+
scrollTop
+
Własność DHTML-a, która ustawia bądź pobiera odległość między górą elementu a najwyższym punktem zawartości elementu z paskiem przewijania.
+
+ +
+
scrollWidth
+
Zwraca the width of the scroll view of an element.
+
+ +
+
style
+
Zwraca blok reguł stylów dla elementu.
+
+ +
+
tabIndex
+
Pobiera/ustawia pozycję elementu w porządku tabulacji.
+
+ +
+
tagName
+
Zwraca nazwę elementu.
+
+ +
+
textContent
+
Pobiera/ustawia zawartość tekstu elementu włączając jego potomków.
+
+ +

Metody

+ +
+
addEventListener
+
Pozwala zarejestrować obserwatora zdarzeń dla celu zdarzenia.
+
+ +
+
appendChild
+
Wstawia określony węzeł do listy węzłów dokumentu.
+
+ +
+
blur
+
Dezaktywuje bieżący element.
+
+ +
+
click
+
Wywołuje kliknięcie na elemencie.
+
+ +
+
cloneNode
+
Zwraca kopię bieżącego węzła.
+
+ +
+
dispatchEvent
+
Pozwala przekazać wywołania zdarzeń do modelu zdarzeń w implementacji DOM.
+
+ +
+
focus
+
Aktywuje bieżący element.
+
+ +
+
getAttribute
+
Zwraca wartość atrybutu o podanej nazwie.
+
+ +
+
getAttributeNS
+
Zwraca wartość atrybutu o podanej nazwie i przestrzeni nazw.
+
+ +
+
getAttributeNode
+
Zwraca atrybut elementu jako osobny węzeł.
+
+ +
+
getElementsByTagName
+
Zwraca elementy o podanej nazwie będące potomkami bieżącego elementu.
+
+ +
+
hasAttribute
+
Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie.
+
+ +
+
hasAttributeNS
+
Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie i przestrzeni nazw.
+
+ +
+
hasAttributes
+
Zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.
+
+ +
+
hasChildNodes
+
Zwraca wartość logiczną zależnie od tego, czy element posiada dzieci.
+
+ +
+
insertBefore
+
Metoda pozwala wstawić węzeł przed bieżącym elementem w DOM.
+
+ +
+
item
+
Zwraca węzeł z drzewa wg podanego indeksu.
+
+ +
+
normalize
+
Metoda zapisuje bieżący węzeł i całe drzewo znajdujące się wewnątrz w "znormalizowanej" formie.
+
+ +
+
removeAttribute
+
Usuwa atrybut elementu.
+
+ +
+
removeAttributeNode
+
Usuwa określony atrybut elementu.
+
+ +
+
removeChild
+
Usuwa węzeł potomny bieżącego elementu.
+
+ +
+
removeEventListener
+
Pozwala usunąć obserwatora zdarzeń z celu zdarzenia.
+
+ +
+
replaceChild
+
Metoda replaceChild() zastępuje węzeł potomny bieżącego elementu innym węzłem.
+
+ +
+
setAttribute
+
Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu.
+
+ +
+
setAttributeNS
+
Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu, wg podanej nazwy i przestrzeni nazw.
+
+ +
+
setAttributeNode
+
Dodaje nowy węzeł atrybutu do bieżącego elementu.
+
+ +
+
setAttributeNodeNS
+
Dodaje nowy węzeł atrybutu do bieżącego elementu wg podanej nazwy i przestrzeni nazw.
+
+ +
+
supports
+
Sprawdza, czy implementacja DOM pozwala na wykorzystanie konkretnej możliwości.
+
+ +

Uchwyty zdarzeń

+ +

Poniższe właściwości nie mogą być przypisane, tak jak uchwyty zdarzeń obiektów document czy window. Wszystkie poniższe własności służą tylko do odczytu - zwracają kod obsługi zdarzeń, jeżeli został on nadany elementowi w samym HTML-u bądź XML-u.

+ +

Są to właściwości odnoszące się do HTML dla atrybutów zdarzeń 'on'.

+ +

W przeciwieństwie do odpowiadających atrybutów, wartości tych właściwość są funkcjami lub jakimkolwiek innym obiektem implementowanym przez EventListener interfejs. Przypisanie atrybutu zdarzenia w HTML powoduje utworzenie funkcji opakowującej funkcji dla określonego kodu. Np. podając następujący HTML:

+ +
<div onclick="foo();">click me!</div>
+
+ +

Jeżeli element jest referencją do <div>, wartość element.onclick wynosi faktycznie:

+ +
function onclick(event) {
+   foo();
+}
+
+ +

Note how the event object is passed as parameter event to this wrapper function.

+ +
+
onblur
+
Zwraca kod obsługi zdarzenia blur.
+
+ +
+
onclick
+
Zwraca kod obsługi zdarzenia onclick.
+
+ +
+
ondblclick
+
Zwraca kod obsługi zdarzenia dblclick.
+
+ +
+
onfocus
+
Zwraca kod obsługi zdarzenia focus.
+
+ +
+
onkeydown
+
Zwraca kod obsługi zdarzenia keydown.
+
+ +
+
onkeypress
+
Zwraca kod obsługi zdarzenia keypress.
+
+ +
+
onkeyup
+
Zwraca kod obsługi zdarzenia keyup.
+
+ +
+
onmousedown
+
Zwraca kod obsługi zdarzenia mousedown.
+
+ +
+
onmousemove
+
Zwraca kod obsługi zdarzenia mousemove.
+
+ +
+
onmouseout
+
Zwraca kod obsługi zdarzenia mouseout.
+
+ +
+
onmouseover
+
Zwraca kod obsługi zdarzenia mouseover.
+
+ +
+
onmouseup
+
Zwraca kod obsługi zdarzenia mouseup.
+
+ +
+
onresize
+
Zwraca kod obsługi zdarzenia resize.
+
diff --git a/files/pl/web/api/element/innerhtml/index.html b/files/pl/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..dafe31adf1 --- /dev/null +++ b/files/pl/web/api/element/innerhtml/index.html @@ -0,0 +1,67 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/innerHTML +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

innerHTML ustawia lub pobiera zbiór zawartych w danym elemencie znaczników razem z ich treścią.

+ +

Składnia

+ +
var markup = element.innerHTML;
+element.innerHTML = markup;
+
+ + + +

Przykład

+ +
// HTML:
+// <div id="d"><p>Treść</p>
+// <p>Bardziej skomplikowane</p>
+// </div>
+
+d = document.getElementById("d");
+dump(d.innerHTML);
+
+// ciąg "<p>Treść</p><p>Bardziej skomplikowane</p>"
+// zostanie wyświetlony w oknie konsoli
+
+ +

Uwagi

+ +

Własność ta, nie będąca częścią specyfikacji W3C DOM, zapewnia możliwość łatwego zastąpienia całej zawartości elementu. Na przykład można wyczyścić wszystko co jest w body:

+ +
document.body.innerHTML = "";  // Zawartość body zostaje zastąpiona pustym ciągiem
+
+ +

Własność innerHTML różnych elementów, w tym BODY i HTML może zostać pobrana czy zastąpiona. Można jej użyć, by wyświetlić źródło zmodyfikowanej dynamicznie strony:

+ +
// Skopiuj jako pojedynczą linię i wklej do paska adresu
+javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;
+
+ +

Ponieważ nie ma publicznej specyfikacji dla tej własności, jej implementacje różnią się. Na przykład po wprowadzeniu tekstu do pola tekstowego, IE zmieni zawartość atrybutu value elementu INPUT w innerHTML, a przeglądarki oparte o Gecko - nie.

+ +

Własności tej nigdy nie powinno się używać do zapisu części tabeli - zamiast niej należy skorzystać z metod W3C DOM. innerHTML można jednak użyć, by zapisać całą tabelę lub zmodyfikować zawartość pojedynczych komórek.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +

Zobacz także

+ +

MSDN innerHTML

+ +

{{ languages( { "en": "en/DOM/element.innerHTML", "fr": "fr/DOM/element.innerHTML", "ja": "ja/DOM/element.innerHTML" } ) }}

diff --git a/files/pl/web/api/element/insertadjacenthtml/index.html b/files/pl/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..c3332ed337 --- /dev/null +++ b/files/pl/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,91 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

insertAdjacentHTML() metoda z {{domxref("Element")}} interfejsu analizuje specyficzny tekst jak HTML albo XML, wstawia wynik w drzewo DOM w określonej pozycji. to nie naprawia elementu jest użyty na a zatem nie jest zepsuty istniejący element w środku elementu. To unika ekstra kroków z serializacją, zrobienie tego jest wiele szybsze niż bezpośredni {{domxref("Element.innerHTML", "innerHTML")}} manipulation.

+ +

Syntax

+ +
element.insertAdjacentHTML(position, text);
+ +

Parametry

+ +
+
position
+
A {{domxref("DOMString")}} reprezentuje pozycję relatywną element-u musi być must be jeden z następujących ciągów: +
    +
  • 'beforebegin': przed element -em.
    • +
  • 'afterbegin': W środku element-u przed jego pierwszym dzieckiem.
    • +
  • 'beforeend': W środku elementu po jego ostatnim dziecku.
    • +
  • 'afterend': Po element-cie 
    • +
+
+
text
+
string analizuje HTML albo XML i włącza w drzewo.
+
+ +

Visualization of position names

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Note: beforebegin i afterend pozycja działa tylko jeśli node jest w drzewie DOM i ma rodzica elementu.
+ +

Przykład:

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// At this point, the new structure is:
+// <div id="one">one</div><div id="two">two</div>
+ +

Notes

+ +

Security considerations

+ +

When inserting HTML into a page by using insertAdjacentHTML(), be careful not to use user input that hasn't been escaped.

+ +

It is not recommended you use insertAdjacentHTML() when inserting plain text; instead, use the {{domxref("Node.textContent")}} property or the {{domxref("Element.insertAdjacentText()")}} method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.

+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

See also

+ + diff --git a/files/pl/web/api/element/insertbefore/index.html b/files/pl/web/api/element/insertbefore/index.html new file mode 100644 index 0000000000..27c40ad945 --- /dev/null +++ b/files/pl/web/api/element/insertbefore/index.html @@ -0,0 +1,86 @@ +--- +title: element.insertBefore +slug: Web/API/Element/insertBefore +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/insertBefore +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wstawia określony węzeł przed danym elementem jako dziecko aktualnego węzła.

+ +

Składnia

+ +
var wstawionyElement =elementRodzic.insertBefore(nowyElement,danyElement)
+
+ +

Jeżeli danyElement ma wartość null, nowyElement jest wstawiany na końcu listy węzłów potomnych.

+ + + +

Przykład

+ +
 <html>
+
+ <head>
+ <title>Gecko DOM insertBefore test</title>
+ </head>
+
+ <body>
+ <div>
+   <span id="childSpan">foo bar</span>
+ </div>
+
+ <script type="text/javascript">
+ // tworzy pusty węzeł elementu
+ // bez ID, jakichkolwiek atrybutów lub jakiejkolwiek zawartości
+ var sp1 = document.createElement("span");
+
+ // daje to atrybut id nazwany 'newSpan'
+ sp1.setAttribute("id", "newSpan");
+
+ // tworzy jakąś zawartość dla nowo powstałego elementu.
+ var sp1_content = document.createTextNode("Jest to nowy element span. ");
+
+ // zwraca się, która treść ma być do nowego elementu.
+ sp1.appendChild(sp1_content);
+
+ var sp2 = document.getElementById("childSpan");
+ var parentDiv = sp2.parentNode;
+
+ // wstawia nowy element do DOM przed sp2
+ parentDiv.insertBefore(sp1, sp2);
+ </script>
+
+ </body>
+ </html>
+
+ +

Nie istnieje metoda insertAfter, jednak można ją emulować poprzez kombinację insertBefore oraz nextSibling.

+ +

W powyższym przykładzie, sp1 może zostać wstawiona za sp2 przy użyciu:

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+
+ +

Jeżeli sp2 nie posiada następnego rodzeństwa i musi być ostatnim potomnym —sp2.nextSibling to zwróci null więc sp1 będzie wstawione na końcu listy węzłów potomnych (np. natychmiast po sp2).

+ +

Specyfikacja

+ +

insertBefore

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore", "ja": "ja/DOM/element.insertBefore", "pt": "pt/DOM/element.insertBefore" } ) }}

diff --git a/files/pl/web/api/element/lang/index.html b/files/pl/web/api/element/lang/index.html new file mode 100644 index 0000000000..446c0817b9 --- /dev/null +++ b/files/pl/web/api/element/lang/index.html @@ -0,0 +1,40 @@ +--- +title: element.lang +slug: Web/API/Element/lang +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/lang +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność ta pozwala pobrać lub ustawić język bazowy wartości atrybutów i treści elementu.

+

Składnia i wartości

+
var languageUsed = elementNodeReference.lang;
+elementNodeReference.lang = NewLanguage;
+
+ +

Przykład

+
// poniższy fragment kodu porównuje język bazowy i odsyła
+// do innych URL na podstawie odczytanego kodu języka
+if (document.documentElement.lang == "en")
+   {
+    window.location.href = "Some_document.html.en";
+   }
+else if(document.documentElement.lang == "ru")
+   {
+    window.location.href = "Some_document.html.ru";
+   };
+
+

Uwagi

+

Kod języka zwracany przez w/w właściwość zgodny jest z kodami zdefiniowanymi w dokumencie RFC 1766. Przykładowo: "en" dla języka angielskiego, "ja" dla japońskiego, "es" dla hiszpańskiego itd. Domyślna wartość atrybutu to unknown. Wartość tego atrybutu ustawiana jest zwykle dla podstawowego (najwyższego) elementu dokumentu.

+

Specyfikacja

+

W3C DOM Level 2 HTML: lang

+
+  
+

{{ languages( { "en": "en/DOM/element.lang", "fr": "fr/DOM/element.lang", "ja": "ja/DOM/element.lang" } ) }}

diff --git a/files/pl/web/api/element/lastchild/index.html b/files/pl/web/api/element/lastchild/index.html new file mode 100644 index 0000000000..34475c02d7 --- /dev/null +++ b/files/pl/web/api/element/lastchild/index.html @@ -0,0 +1,28 @@ +--- +title: element.lastChild +slug: Web/API/Element/lastChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/lastChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

lastChild zwraca ostatnie dziecko węzła.

+

Składnia i wartości

+
ostatnieDziecko = element.lastChild
+
+

ostatnieDziecko to węzeł. Jeśli jego rodzicem jest element, dzieckiem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.

+

Przykład

+
tr = document.getElementById("row1");
+td_róg = tr.lastChild;
+
+

Uwagi

+

Jeżeli nie ma węzłów potomnych, zwracane jest null.

+

Specyfikacja

+

lastChild

+
+  
+

{{ languages( { "en": "en/DOM/element.lastChild", "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild" } ) }}

diff --git a/files/pl/web/api/element/length/index.html b/files/pl/web/api/element/length/index.html new file mode 100644 index 0000000000..ce5e1345ef --- /dev/null +++ b/files/pl/web/api/element/length/index.html @@ -0,0 +1,37 @@ +--- +title: element.length +slug: Web/API/Element/length +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NodeList/length +--- +

{{ ApiRef() }}

+

Podsumowanie

+

length zwraca liczbę elementów listy.

+

Składnia

+
liczbaElementów = nodeList.length
+
+

Parametry

+ +

Przykład

+
// wszystkie paragrafy z dokumentu
+items = document.getElementsByTagName("p");
+// są jakieś?
+if ( items.length ) {
+     // dodaj HTML z każdego elemntu listy
+     for (var i = 0; i < items.length; i++) {
+         gross += items[0].innerHTML;
+         // gross zawiera teraz cały HTML z paragrafów
+     }
+}
+
+

Uwagi

+

Właściwość length jest bardzo częsta w programowaniu z użyciem DOM. Używa się jej by sprawdzić, czy lista zawiera elementy oraz w pętli for, jak w powyższym przykładzie.

+

Specyfikacja

+

length

+

{{ languages( { "en": "en/DOM/element.length", "ja": "ja/DOM/element.length" } ) }}

diff --git a/files/pl/web/api/element/localname/index.html b/files/pl/web/api/element/localname/index.html new file mode 100644 index 0000000000..55b5649e31 --- /dev/null +++ b/files/pl/web/api/element/localname/index.html @@ -0,0 +1,64 @@ +--- +title: element.localName +slug: Web/API/Element/localName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/localName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

localName zwraca lokalną część uściślonej nazwy węzła.

+

Składnia

+
nazwa = element.localName
+
+

Parametry

+ +

Przykład

+

(Musi obsługiwać treść XML typu, jak <tt>text/xml</tt> lub <tt>application/xhtml+xml</tt>.)

+
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script><![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "<svg:circle> has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]></script>
+</head>
+<body onload="test()">
+  <textarea id="text" rows="4" cols="55"/>
+  <svg:svg version="1.1"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:0;"
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+</body>
+</html>
+
+

Uwagi

+

Dla węzłów typu innego niż ELEMENT_NODE i ATTRIBUTE_NODE oraz dla węzłów utworzonych za pomocą metod DOM Level 1, jak na przykład document.createElement, własność ta ma zawsze wartość NULL.

+

localname węzła to ta część uściślonej nazwy węzła, która znajduje się po dwukropku. Uściślone nazwy są zwykle używane w XML jako część przestrzeni nazw w poszczególnych dokumentach XML. Na przykład w uściślonej nazwie "ecomm:partners" nazwa lokalna to "partners", a "ecomm" to prefiks.

+
<ecomm:business id="soda_shop" type="brick_n_mortar">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+
+

Prefiks - w tym wypadku "ecomm" - określa przestrzeń nazw, w której można użyć nazwy lokalnej.

+

Zobacz także

+

element.namespaceURI

+

Specyfikacja

+

localName

+
+  
+

{{ languages( { "en": "en/DOM/element.localName", "fr": "fr/DOM/element.localName", "ja": "ja/DOM/element.localName" } ) }}

diff --git a/files/pl/web/api/element/name/index.html b/files/pl/web/api/element/name/index.html new file mode 100644 index 0000000000..e1a9fa7f41 --- /dev/null +++ b/files/pl/web/api/element/name/index.html @@ -0,0 +1,60 @@ +--- +title: element.name +slug: Web/API/Element/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API +--- +

{{ ApiRef() }}

+

Podsumowanie

+

name pobiera lub ustawia atrybut name 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.

+

name można wykorzystać w metodzie getElementsByName, w obiekcie form i w kolekcji elements. Jeśli zostanie użyta dla formularza lub kolekcji elementów, właściwość tak może zwrócić jeden element lub ich kolekcję.

+

Składnia

+
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var kontrolka = HTMLFormElement.nazwaElementu;
+var kolekcjaKontrolek = HTMLFormElement.elements.nazwaElementu;
+
+

Przykład

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

uwagi

+

W przeglądarce Internet Explorer (IE) nie można modyfikować właściwości name obiektów DOM utworzonych za pomocą createElement.

+

Specyfikacja

+

Specyfikacja W3C DOM 2 HTML:

+ +

{{ languages( { "en": "en/DOM/element.name", "ja": "ja/DOM/element.name", "fr": "fr/DOM/element.name" } ) }}

diff --git a/files/pl/web/api/element/namespaceuri/index.html b/files/pl/web/api/element/namespaceuri/index.html new file mode 100644 index 0000000000..9f252ba570 --- /dev/null +++ b/files/pl/web/api/element/namespaceuri/index.html @@ -0,0 +1,39 @@ +--- +title: element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/namespaceURI +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca URI przestrzeni nazw tego węzła lub NULL, jeśli jej nie określono.

+

Składnia

+
przestrzeńNazw = element.namespaceURI
+
+

Parametry

+ +

Przykład

+

W poniższym wycinku kodu sprawdzane są localName i namespaceURI węzła. Jeśli namespaceURI jest zgodny ze zmienną zawierającą przestrzeń nazw dla XUL, węzeł jest uznawany za widget <browser /> w języku XUL.

+
if (node.localName == "browser"
+    && node.namespaceURI == kXULNSURI) {
+// xul browser
+this.viewee = node.webNavigation.document;
+//...
+}
+
+

Uwagi

+

Nie jest to wyznaczona wartość, będąca rezultatem przeszukiwania w oparciu o deklaracje przestrzeni nazw w zakresie, w jakim znajduje się element. Jest to jedynie URI takiej przestrzeni nazw, jaką nadano w momencie tworzenia elementu.

+

Dla węzłow typów innych niż ELEMENT_NODE i ATTRIBUTE_NODE oraz węzłów utworzonych metodami DOM Level 1, jak document.createElement, wartość tej właściwości to zawsze NULL.

+

Zgodnie ze specyfikacją Namespaces in XML atrybut nie dziedziczy przestrzeni nazw po elemencie, do którego jest przypisany. Jeśli atrybut nie ma bezpośrednio nadanej przestrzeni nazw, po prostu nie należy do żadnej przestrzeni.

+

Specyfikacja

+

namespaceURI

+

Przestrzenie nazw XML

+
+  
+

{{ languages( { "en": "en/DOM/element.namespaceURI", "fr": "fr/DOM/element.namespaceURI", "ja": "ja/DOM/element.namespaceURI" } ) }}

diff --git a/files/pl/web/api/element/nextsibling/index.html b/files/pl/web/api/element/nextsibling/index.html new file mode 100644 index 0000000000..17f1822a56 --- /dev/null +++ b/files/pl/web/api/element/nextsibling/index.html @@ -0,0 +1,63 @@ +--- +title: element.nextSibling +slug: Web/API/Element/nextSibling +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nextSibling +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca węzeł znajdujący się w drzewie bezpośrednio za węzłem bieżącym.

+

Składnia i wartości

+
następnyElement = element.nextSibling
+
+

następnyElement to węzeł bezpośrednio następny w liście rodzeństwa (np. liście dzieci węzła parentNode). Następnym węzłem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.

+

Przykład

+
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+  var el = document.getElementById('div-01').nextSibling;
+  document.write('<p>Rodzeństwo div-01</p><ol>');
+  while (el) {
+    document.write('<li>' + el.nodeName + '</li>');
+    el = el.nextSibling;
+  }
+  document.write('</ol>');
+</script>
+
+/**************************************************
+  Po załadowaniu zostanie dopisane do strony:
+
+     Rodzeństwo div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+      5. P
+      6. OL
+**************************************************/
+
+

Węzły tekstowe - #text - są w powyższym przykładzie wstawiane do modelu dokumentu w miejsce białych znaków między elementami (np. po znaczniku zamykającym jeden element, ale przed znacznikiem otwierającym następny element). Białe znaki nie są wstawiane przy wywołaniu document.write.

+

Poniższy przykład pokazuje, jak białe znaki wpływają na sąsiednie węzły komórek tabeli:

+
<table>
+  <tr>
+    <td id="cell1">cell1</td>
+    <td id="cell2">cell2</td>
+  </tr>
+  <tr>
+    <td id="cell3">cell3</td><td id="cell4">cell4</td></tr>
+</table>
+
+

nextSibling cell1 to węzeł tekstowy. Między komórkami drugiego rzędu tabeli nie ma białych znaków, dlatego rodzeństwo cell3 to tylko cell4. Podczas przechodzenia przez model dokumentu za pomocą nextSibling należy liczyć się z możliwością wystąpienia węzłów tekstowych.

+

Uwagi

+

Zwraca null, kiedy nie ma już więcej węzłów.

+

Specyfikacja

+

nextSibling

+
+  
+

{{ languages( { "en": "en/DOM/element.nextSibling", "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling" } ) }}

diff --git a/files/pl/web/api/element/nodename/index.html b/files/pl/web/api/element/nodename/index.html new file mode 100644 index 0000000000..93a54424a6 --- /dev/null +++ b/files/pl/web/api/element/nodename/index.html @@ -0,0 +1,98 @@ +--- +title: element.nodeName +slug: Web/API/Element/nodeName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca nazwę węzła jako ciąg znaków.

+

Składnia

+
nazwa = element.nodeName
+
+

+ + nazwa + to ciąg znaków reprezentujący nazwę bieżącego elementu. nodeName to atrybut tylko do odczytu.

+

Uwagi

+

Poniżej przedstawione są wartości zwracane dla różnych typów węzłów:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterfejsnodeName
Attrtak samo jak Attr.name
CDATASection"#cdata-section"
Comment"#comment"
Document"#document"
DocumentFragment"#document-fragment"
DocumentTypetak samo jak DocumentType.name
Elementtak samo jak Element.tagName
Entitynazwa encji
EntityReferencenazwa refernecji do encji
Notationnazwa notacji
ProcessingInstructiontak samo jak ProcessingInstruction.target
Text"#text"
+

Przykład

+

Dane są poniższe znaczniki

+
<div id="d1">hello world</div>
+<input type="text" id="t"/>
+
+

i taki skrypt:

+
var div1 = document.getElementById("d1");
+var poleTekstowe = document.getElementById("t");
+poleTekstowe.value = div1.nodeName;
+
+

W XHTML-u (lub innym formacie XML) wartość pola tekstowego to "div". W HTML wartość ta to "DIV".

+

Zauważ, że można było użyć właściwości tagName, ponieważ dla elementów nodeName ma taką samą wartość jak tagName.

+

Specyfikacja

+

W3C DOM Level 2 Core: nodeName

+

W3C DOM Level 3 Core: nodeName

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.nodeName", "es": "es/DOM/element.nodeName", "fr": "fr/DOM/element.nodeName", "it": "it/DOM/element.nodeName", "ja": "ja/DOM/element.nodeName" } ) }}

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

Podsumowanie

+

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

+

Składnia

+
typ = document.nodeType
+
+

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

+ +

Przykład

+

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

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

Specyfikacja

+ diff --git a/files/pl/web/api/element/nodevalue/index.html b/files/pl/web/api/element/nodevalue/index.html new file mode 100644 index 0000000000..205871bba3 --- /dev/null +++ b/files/pl/web/api/element/nodevalue/index.html @@ -0,0 +1,85 @@ +--- +title: Node.nodeValue +slug: Web/API/Element/nodeValue +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeValue +--- +
+ {{APIRef}}
+
+  
+
+ Podsumowanie
+

Zwraca wartość bieżącego węzła.

+

Składnia

+
wartość = document.nodeValue
+
+

wartość to ciąg znaków reprezentujący wartość elementu, jeśli taka istnieje.

+

Uwagi

+

Dla dokumentu nodeValue zwraca null. Dla węzłów tekstowych, komentarzy i CDATA nodeValue zwraca zawartość węzła. Dla węzłów atrybutów, zwracana jest wartość atrybutu.

+

Poniższa tabela przedstawia wartości zwracane dla różnych interfejsów:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterfejsnodeValue
Attrwartość atrybutu
CDATASectiontreść sekcji CDATA
Commenttreść komentarza
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructioncała treść, wyłączając cel
Texttreść węzła tekstowego
+

Jeśli nodeValue z definicji ma wartość null, ustawianie tej właściwości nie będzie mieć efektu.

+

Specyfikacja

+ diff --git a/files/pl/web/api/element/normalize/index.html b/files/pl/web/api/element/normalize/index.html new file mode 100644 index 0000000000..4dac3822cc --- /dev/null +++ b/files/pl/web/api/element/normalize/index.html @@ -0,0 +1,22 @@ +--- +title: element.normalize +slug: Web/API/Element/normalize +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/normalize +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda zapisuje określony węzeł i całe jego poddrzewo w "znormalizowanej" formie. W znormalizowanym poddrzewie żaden węzeł tekstowy nie jest pusty, nie ma również sąsiednich węzłów tekstowych.

+

Składnia

+
element.normalize()
+
+

Uwagi

+

Specyfikacja

+

DOM Level 2 Core: Node.normalize

+
+  
+

{{ languages( { "en": "en/DOM/element.normalize", "fr": "fr/DOM/element.normalize" } ) }}

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

{{ ApiRef() }}

+ +

offsetHeight

+ +

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

+ +

Składnia i wartości

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

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

+ +

Opis

+ +

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

+ +

Przykład

+ +
+
+

padding-top

+ +

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

+ +

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

+ +

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

+ +

padding-bottom

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

grafika:offsetHeight.png

+ +

Specyfikacja

+ +

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

+ +

Uwagi

+ +

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

+ +

Dokumentacja

+ + diff --git a/files/pl/web/api/element/offsetleft/index.html b/files/pl/web/api/element/offsetleft/index.html new file mode 100644 index 0000000000..b0252f3363 --- /dev/null +++ b/files/pl/web/api/element/offsetleft/index.html @@ -0,0 +1,73 @@ +--- +title: element.offsetLeft +slug: Web/API/Element/offsetLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetLeft +--- +

{{ ApiRef("HTML DOM") }}

+ +

Podsumowanie

+ +

Zwraca ilość pikseli, jaką dzieligórny lewy róg bieżącego elementu od lewej strony wewnątrz węzła offsetParent.

+ +

Składnia

+ +
left =element.offsetLeft;
+
+ +

left jest liczbą całkowitą reprezentująca przesunięcie od lewej strony podane w pikselach.

+ +

Uwaga

+ +

offsetLeft returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for inline elements (such as span) in flowed text that wraps from one line to the next. The span may start in the middle of the line and wrap around to the beginning of the next line. The offsetLeft will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)

+ +

Przykład

+ +
var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft > 5) {
+  // duże lewe przesunięcie: zrób coś tutaj
+}
+
+ +

Przykład

+ +

Per the note above, this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.

+ +

Image:offsetLeft.jpg

+ +

Note: This is an image of the example, not a live rendering in the browser. This was done because script elements can't be included in the wiki page.

+ +
<div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;">
+  <span>Short span. </span>
+  <span id="long">Long span that wraps withing this div.</span>
+</div>
+
+<div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10">
+</div>
+
+<script>
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft;
+  box.style.top = long.offsetTop + document.body.scrollTop;
+  box.style.width = long.offsetWidth;
+  box.style.height = long.offsetHeight;
+</script>
+
+ +

Zobacz także

+ +

offsetParent, offsetTop, offsetWidth, offsetHeight

+ +

Specyfikacja

+ +

Niestandardowa własność.

diff --git a/files/pl/web/api/element/offsetparent/index.html b/files/pl/web/api/element/offsetparent/index.html new file mode 100644 index 0000000000..c33d32b38c --- /dev/null +++ b/files/pl/web/api/element/offsetparent/index.html @@ -0,0 +1,28 @@ +--- +title: element.offsetParent +slug: Web/API/Element/offsetParent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetParent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

offsetParent zwraca referencję do obiektu, który jest najbliższym (w hierarchii zawierania się elementów) pozycjonowanym elementem. Jeżeli element nie jest pozycjonowany, offsetParent jest wówczas korzeń dokumentu (html w trybie zgodności ze standardami; body w trybie przybliżonym).

+

Składnia

+
parentObj = element.offsetParent
+
+

Parametry

+ +

Specyfikacja

+

DOM Level 0. + + Nie jest częścią specyfikacji. +

+
+  
+

{{ languages( { "en": "en/DOM/element.offsetParent", "fr": "fr/DOM/element.offsetParent" } ) }}

diff --git a/files/pl/web/api/element/offsetwidth/index.html b/files/pl/web/api/element/offsetwidth/index.html new file mode 100644 index 0000000000..b78d7b4136 --- /dev/null +++ b/files/pl/web/api/element/offsetwidth/index.html @@ -0,0 +1,70 @@ +--- +title: element.offsetWidth +slug: Web/API/Element/offsetWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetWidth +--- +

{{ APIRef("HTML DOM") }}

+ +

offsetWidth

+ +

właściwość DHTML, która podaje szerokość elementu, odnosząca się do układu strony.

+ +

Składnia i wartości

+ +
var intElemOffsetWidth = document.getElementById(id_attribute_value).offsetWidth;
+
+ +

intElemOffsetWidth jest zmienną przechowującą liczbę całkowitą odpowiadającą wartości offsetWidth elementu i wyrażoną w pikselach. offsetWidth jest właściwością tylko do odczytu.

+ +

Opis

+ +

Zazwyczaj offsetWidth elementu obejmuje jego obramowanie, wewnętrzny margines (padding), pionowy pasek przewijania (jeśli jest obecny lub renderowany) i szerokość CSS elementu.

+ +

Przykład

+ +
+
+

padding-top

+ +

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

+ +

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

+ +

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

+ +

padding-bottom

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

Image:offsetWidth.png

+ +

Specyfikacja

+ +

offsetWidth jest częścią modelu obiektowego MSIE DHTML. offsetWidth nie jest częścią żadnej specyfikacji W3C ani rekomendacji technicznej.

+ +

Uwagi

+ +

offsetWidth jest własnością modelu obiektowego DHTML, który został wprowadzony przez MSIE. Czasem określany jest jako fizyczny/graficzny wymiar elementu lub jako szerokość pudełka elementu.

+ +

Dokumentacja

+ + + +
+

Zobacz również

+
+ + diff --git a/files/pl/web/api/element/onclick/index.html b/files/pl/web/api/element/onclick/index.html new file mode 100644 index 0000000000..b6215b4c00 --- /dev/null +++ b/files/pl/web/api/element/onclick/index.html @@ -0,0 +1,66 @@ +--- +title: element.onclick +slug: Web/API/Element/onclick +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onclick +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Właściwość onclick zwraca kod obsługi zdarzenia onClick w bieżącym elemencie.

+

Składnia

+
element.onclick = refDoFunkcji;
+
+

gdzie refDoFunkcji to nazwa funkcji zadeklarowanej gdzie indziej bądź wyrażenie funkcyjne. Zob. Funkcje. - tego rodzialu jeszcze nie ma, a pod nazwa Funkcje jest cos innego

+

Przykład

+
<html>
+
+<head>
+<title>przykład zdarzenia onclick</title>
+
+<script type="text/javascript">
+
+function initElement()
+ {
+ var p = document.getElementById("foo");
+
+ // Uwaga: ani showAlert();, ani showAlert(param); tu NIE zadziałają
+ // potrzebna jest referencja do funkcji, a nie wywołanie funkcji
+ p.onclick = showAlert;
+ };
+
+function showAlert()
+ {
+ alert("wykryto zdarzenie onclick!")
+ }
+</script>
+
+<style type="text/css">
+<!--
+#foo {
+border: solid blue 2px;
+}
+-->
+</style>
+</head>
+
+<body onload="initElement()";>
+<span id="foo">Mój Element</span>
+<p>Kliknij na powyższy element.</p>
+</body>
+</html>
+
+

Można również użyć funkcji bezimiennej jak poniżej:

+
p.onclick = function() { alert("moot!"); };
+
+

Not going to confuse poor readers with this. You could also use a the Function constructor: <pre> p.onclick = Function( "alert('moot!')" ); </pre>

+

Uwagi

+

Zdarzenie click jest wywoływane, kiedy użytkownik kliknie na element. Zdarzenie to występuje po mousedown i mouseup.

+

Tylko jedna funkcja obsługi zdarzenia może zostać przypisana za jednym razem za pomocą tej właściwości. Możesz zamiast niej użyć metody addEventListener - jest bardziej elastyczna i stanowi część specyfikacji DOM Events.

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/element.onclick", "fr": "fr/DOM/element.onclick" } ) }}

diff --git a/files/pl/web/api/element/onkeypress/index.html b/files/pl/web/api/element/onkeypress/index.html new file mode 100644 index 0000000000..eb57c1936c --- /dev/null +++ b/files/pl/web/api/element/onkeypress/index.html @@ -0,0 +1,21 @@ +--- +title: element.onkeypress +slug: Web/API/Element/onkeypress +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeypress +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Właściwość onkeypress zawiera kod obsługi zdarzenia onKeyPress dla bieżącego elementu.

+

Składnia

+
element.onkeypress = kod obsługi zdarzenia
+
+

Uwagi

+

Zdarzenie keydown wywoływane jest, gdy użytkownik naciska klawisz na klawiaturze.

+

Specyfikacja

+

{{ DOM0() }}

diff --git a/files/pl/web/api/element/onkeyup/index.html b/files/pl/web/api/element/onkeyup/index.html new file mode 100644 index 0000000000..ad411b0e1a --- /dev/null +++ b/files/pl/web/api/element/onkeyup/index.html @@ -0,0 +1,24 @@ +--- +title: element.onkeyup +slug: Web/API/Element/onkeyup +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Właściwość onkeyup zawiera kod obsługi zdarzenia keyup dla bieżącego elementu.

+

Składnia

+
kod obsługi zdarzenia = element.onkeyup
+
+

Uwagi

+

Zdarzenie keyup wywoływane jest, gdy użytkownik zwalnia naciśnięty klawisz na klawiaturze.

+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/element.onkeyup", "fr": "fr/DOM/element.onkeyup" } ) }}

diff --git a/files/pl/web/api/element/onmousedown/index.html b/files/pl/web/api/element/onmousedown/index.html new file mode 100644 index 0000000000..e616906126 --- /dev/null +++ b/files/pl/web/api/element/onmousedown/index.html @@ -0,0 +1,23 @@ +--- +title: element.onmousedown +slug: Web/API/Element/onmousedown +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność onmousedown zwraca kod obsługi zdarzenia onMouseDown w bieżącym elemencie.

+

Składnia

+
event handling code = element.onMouseDown
+
+

Uwagi

+

Zdarzenie mousedown jest wywołane kiedy użytkownik naciśnie lewy przycisk.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/element.onmousedown", "fr": "fr/DOM/element.onmousedown" } ) }}

diff --git a/files/pl/web/api/element/onmousemove/index.html b/files/pl/web/api/element/onmousemove/index.html new file mode 100644 index 0000000000..f54256c9f7 --- /dev/null +++ b/files/pl/web/api/element/onmousemove/index.html @@ -0,0 +1,29 @@ +--- +title: element.onmousemove +slug: Web/API/Element/onmousemove +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onmousemove +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Właściwość onmousemove zwraca kod obsługi zdarzenia mousemove w bieżącym elemencie.

+ +

Składnia

+ +
event handling code = element.onMouseMove
+
+ +

Uwagi

+ +

Zdarzenie mousemove jest wywoływane, kiedy użytkownik przesunie kursor myszy.

+ +

Specyfikacja

+ +

DOM Level 0. Nie jest częścią specyfikacji.

diff --git a/files/pl/web/api/element/ownerdocument/index.html b/files/pl/web/api/element/ownerdocument/index.html new file mode 100644 index 0000000000..0ecbed4869 --- /dev/null +++ b/files/pl/web/api/element/ownerdocument/index.html @@ -0,0 +1,30 @@ +--- +title: element.ownerDocument +slug: Web/API/Element/ownerDocument +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/ownerDocument +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność ownerDocument zwraca obiekt najwyższego poziomu - dokument, w którym znajduje się bieżący węzeł.

+

Składnia

+
dokument = element.ownerDocument
+
+

dokument to obiekt document, będący rodzicem bieżącego elementu.

+

Przykład

+
// dla danego elementu "p" znajdź element HTML najwyższego poziomu
+d = p.ownerDocument;
+html = d.documentElement;
+
+

Uwagi

+

Obiekt document zwracany przez tę własność jest głównym obiektem, w którym tworzone są wszystkie węzły-dzieci właściwego dokumentu HTML. Własność ta użyta na węźle, który sam jest dokumentem, zwraca NULL

+

Specyfikacja

+

ownerDocument

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.ownerDocument", "fr": "fr/DOM/element.ownerDocument", "ja": "ja/DOM/element.ownerDocument" } ) }}

diff --git a/files/pl/web/api/element/parentnode/index.html b/files/pl/web/api/element/parentnode/index.html new file mode 100644 index 0000000000..ec9bbceda0 --- /dev/null +++ b/files/pl/web/api/element/parentnode/index.html @@ -0,0 +1,34 @@ +--- +title: element.parentNode +slug: Web/API/Element/parentNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/parentNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność parentNode zwraca rodzica bieżącego elementu.

+

Składnia i wartości

+
rodzic = element.parentNode
+
+

rodzic jest rodzicem bieżącego węzła. Rodzicem elementu jest węzeł typu Element, Document lub DocumentFragment.

+

Przykład

+
text_field = document.getElementById("t");
+if ( div1.parentNode == document ){
+    text_field.setAttribute("value", "top-level");
+    // pole tekstowe wyświetli tekst "top-level" }
+
+

Uwagi

+

parentNode zwraca null dla poniższych typów węzłów: Attr, Document, DocumentFragment, Entity i Notation.

+

null zwracane jest także, gdy węzeł został utworzony, ale nie przypisano go jeszcze do drzewa.

+

Zobacz także

+

{{ Domxref("element.firstChild") }}, {{ Domxref("element.lastChild") }}, {{ Domxref("element.childNodes") }}, {{ Domxref("element.nextSibling") }}, {{ Domxref("element.previousSibling") }}.

+

Specyfikacja

+

DOM Level 2 Core: Node.parentNode

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode" } ) }}

diff --git a/files/pl/web/api/element/prefix/index.html b/files/pl/web/api/element/prefix/index.html new file mode 100644 index 0000000000..c5ecdac392 --- /dev/null +++ b/files/pl/web/api/element/prefix/index.html @@ -0,0 +1,28 @@ +--- +title: element.prefix +slug: Web/API/Element/prefix +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/prefix +--- +

{{ ApiRef() }}

+

Podsumowanie

+

prefix zwraca prefiks przestrzeni nazw węzła lub null, jeśli nie określono prefiksu.

+

Składnia

+
string = element.prefix
+element.prefix =string
+
+

Przykłady

+
<x:div onclick="alert(this.prefix)"/>
+
+

Wyświetlone zostanie "x".

+

Uwagi

+

Własność ta działa tylko wtedy, gdy używany jest parser przetwarzający przestrzenie nazw, tj. gdy dokument serwowany jest z typem MIME XML. Własność nie działa dla dokumentów HTML.

+

Specyfikacja

+

Node.prefix (wprowadzona w DOM2)

+
+  
+

{{ languages( { "en": "en/DOM/element.prefix", "fr": "fr/DOM/element.prefix", "it": "it/DOM/element.prefix", "ja": "ja/DOM/element.prefix" } ) }}

diff --git a/files/pl/web/api/element/previoussibling/index.html b/files/pl/web/api/element/previoussibling/index.html new file mode 100644 index 0000000000..0199cfb1a7 --- /dev/null +++ b/files/pl/web/api/element/previoussibling/index.html @@ -0,0 +1,28 @@ +--- +title: element.previousSibling +slug: Web/API/Element/previousSibling +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/previousSibling +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca węzeł bezpośrednio poprzedzający bieżący węzeł w drzewie.

+

Składnia i wartości

+
pNode = elementNode.previousSibling
+
+

pNode to węzeł przed bieżącym na liście rodzeństwa (czyli liście dzieci rodzica). Węzeł poprzedzający element jest zwykle węzłem elementu, komentarza lub tekstowym.

+

Przykład

+
var n1 = n2.previousSibling;
+
+

Uwagi

+

Zwraca null, jeśli nie ma poprzedzających węzłów.

+

Specyfikacja

+

DOM Level 1 Core: previousSibling

+

DOM Level 2 Core: previousSibling

+
+  
+

{{ languages( { "en": "en/DOM/element.previousSibling", "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling" } ) }}

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

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

+ +

Syntax

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

Parameters

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

Return value

+ +

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

+ +

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

+ +

Exceptions

+ +
+
SyntaxError
+
The specified selectors are invalid.
+
+ +

Examples

+ +

Let's consider a few examples.

+ +

Find a specific element with specific values of an attribute

+ +

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

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

The entire hierarchy counts

+ +

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

+ +

HTML

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

JavaScript

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

Result

+ +

The result looks like this:

+ +

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

+ +

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

+ +

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

+ +

More examples

+ +

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

+ +

Specifications

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

Browser compatibility

+ +

{{ CompatibilityTable}}

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

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

+ +

See also

+ + diff --git a/files/pl/web/api/element/removeattribute/index.html b/files/pl/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..9f3c2c4892 --- /dev/null +++ b/files/pl/web/api/element/removeattribute/index.html @@ -0,0 +1,36 @@ +--- +title: element.removeAttribute +slug: Web/API/Element/removeAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

removeAttribute usuwa atrybut bieżącego elementu.

+

Składnia

+
element.removeAttribute(nazwaAtrybutu)
+
+ +

Przykład

+
// <div align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// teraz: <div width="200px">
+
+

Uwagi

+

Aby usunąć atrybut, powinieneś używać metody removeAttribute, a nie ustawiać wartość atrybutu na null za pomocą setAttribute.

+

Próba usunięcia nieistniejącego atrybutu elementu nie wyrzuca wyjątku.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: removeAttribute (wprowadzono w DOM Level 1 Core)

+
+  
+

{{ languages( { "en": "en/DOM/element.removeAttribute", "fr": "fr/DOM/element.removeAttribute", "ja": "ja/DOM/element.removeAttribute" } ) }}

diff --git a/files/pl/web/api/element/removeattributenode/index.html b/files/pl/web/api/element/removeattributenode/index.html new file mode 100644 index 0000000000..82872fa822 --- /dev/null +++ b/files/pl/web/api/element/removeattributenode/index.html @@ -0,0 +1,37 @@ +--- +title: element.removeAttributeNode +slug: Web/API/Element/removeAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttributeNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

removeAttributeNode usuwa określony atrybut z bieżącego elementu.

+

Składnia

+
usuniętyAtr =element.removeAttributeNode(węzełAtrybutu)
+
+ +

Przykład

+
// <div id="top" align="center" />
+var d = document.getElementById("top");
+var d_align = d.getAttributeNode("align");
+d.removeAttributeNode(d_align);
+// align ma wartość domyślną - center,
+// więc usunięty atrybut jest od razu zastępowany:
+// <div id="top" align="center" />
+
+

Uwagi

+

Jeśli usuwany atrybut ma wartość domyślną, od razu zostanie nią zastąpiony. Zastępujący atrybut ma - jeśli mają tu one zastosowanie - taki sam URI przestrzeni nazw, nazwę lokalną oraz prefiks jak oryginalny węzeł.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: removeAttributeNode (wprowadzono w DOM Level 1 Core)

+
+  
+

{{ languages( { "en": "en/DOM/element.removeAttributeNode", "fr": "fr/DOM/element.removeAttributeNode", "ja": "ja/DOM/element.removeAttributeNode" } ) }}

diff --git a/files/pl/web/api/element/removeattributens/index.html b/files/pl/web/api/element/removeattributens/index.html new file mode 100644 index 0000000000..88df27e6ca --- /dev/null +++ b/files/pl/web/api/element/removeattributens/index.html @@ -0,0 +1,35 @@ +--- +title: element.removeAttributeNS +slug: Web/API/Element/removeAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

removeAttributeNS usuwa określony atrybut elementu.

+

Składnia

+
element.removeAttributeNS(przestrzeńNazw,nazwaAtrybutu);
+
+ +

Przykład

+
// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
+//      special:specialAlign="utterleft" width="200px" />
+d = document.getElementById("div1");
+d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
+// teraz: <div id="div1" width="200px" />
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: removeAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.removeAttributeNS", "fr": "fr/DOM/element.removeAttributeNS", "ja": "ja/DOM/element.removeAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/removechild/index.html b/files/pl/web/api/element/removechild/index.html new file mode 100644 index 0000000000..c07c36ab3b --- /dev/null +++ b/files/pl/web/api/element/removechild/index.html @@ -0,0 +1,36 @@ +--- +title: element.removeChild +slug: Web/API/Element/removeChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/removeChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda removeChild usuwa węzeł potomny elementu.

+

Składnia

+
stareDziecko =element.removeChild(dziecko)
+
+

Parametry

+ +

Przykład

+
// <div id="nadrzedny" align="center">
+//   <div id="zagniezdzony"></div>
+// </div>
+d = document.getElementById("nadrzedny");
+d_zagniezdzony = document.getElementById("zagniezdzony");
+usuwany_wezel = d.removeChild(d_zagniezdzony);
+
+

 

+

Specyfikacja

+

removeChild

+
+  
+

{{ languages( { "en": "en/DOM/element.removeChild", "fr": "fr/DOM/element.removeChild", "ja": "ja/DOM/element.removeChild" } ) }}

diff --git a/files/pl/web/api/element/replacechild/index.html b/files/pl/web/api/element/replacechild/index.html new file mode 100644 index 0000000000..dcb5686d44 --- /dev/null +++ b/files/pl/web/api/element/replacechild/index.html @@ -0,0 +1,53 @@ +--- +title: element.replaceChild +slug: Web/API/Element/replaceChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/replaceChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zastępuje dziecko węzła innym węzłem.

+

Składnia

+
węzełZastąpiony =węzełRodzic.replaceChild(noweDziecko,stareDziecko);
+
+ +

Przykład

+
// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// utwórz węzeł pustego elementu
+// bez ID, atrybutów i zawartości
+var sp1 = document.createElement("span");
+
+// nadaj mu ID 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// utwórz jakąś zawartość dla nowego elementu
+var sp1_content = document.createTextNode("Nowy element span.");
+
+// wstaw tę zawartość
+sp1.appendChild(sp1_content);
+
+// stwórz referencję do istniejącego węzła, który ma zostać zastąpiony
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// zastąp istniejący węzeł sp2 elementem span sp1
+parentDiv.replaceChild(sp1, sp2);
+
+
+

Specyfikacja

+

DOM Level 1 Core: replaceChild

+

DOM Level 2 Core: replaceChild

+
+  
+

{{ languages( { "en": "en/DOM/element.replaceChild", "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild" } ) }}

diff --git a/files/pl/web/api/element/scrollleft/index.html b/files/pl/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..e6c526c23b --- /dev/null +++ b/files/pl/web/api/element/scrollleft/index.html @@ -0,0 +1,58 @@ +--- +title: element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/scrollLeft +--- +

{{ ApiRef() }}

+

Podsumowanie

+

scrollLeft pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.

+

Składnia i wartości

+
// Pobierz wartość przewinięcia w pikselach
+var sLeft = element.scrollLeft;
+
+

sLeft jest wartością liczbową reprezentującą ilość pikseli, o które element został przewinięty w lewo.

+
// Ustaw wartość przewinięcia w pikselach
+element.scrollLeft = 10;
+
+

scrollLeft może przyjąć dowolną wartość liczbową, jednakże:

+ +

Przykład

+
<script type="text/javascript">
+
+function doScrollLeft(el, p)
+{
+  el.scrollLeft = p;
+}
+
+</script>
+
+<div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+>
+<script type="text/javascript">
+for (var i=0; i<100; ++i){
+  document.write(i + '-FooBar-FooBar-FooBar<br>');
+}
+</script>
+</div>
+<br>
+<input type="button" value="Scroll left 50"
+       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
+>
+
+

Specyfikacja

+

To nie jest żadna część specyfikacji W3C.

+

Powiązania

+

MSDN scrollLeft

+
+  
+

{{ languages( { "en": "en/DOM/element.scrollLeft", "fr": "fr/DOM/element.scrollLeft" } ) }}

diff --git a/files/pl/web/api/element/scrolltop/index.html b/files/pl/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..a79c23d9ff --- /dev/null +++ b/files/pl/web/api/element/scrolltop/index.html @@ -0,0 +1,70 @@ +--- +title: element.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +

{{APIRef}}

+ +

scrollTop pobiera bądź ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.

+ +

Składnia i wartości

+ +
// Pobierz wartość przewinięcia w pikselach
+var  intElemScrollTop = element.scrollTop;
+
+ +

intElemScrollTop jest liczbą całkowitą reprezentującą ilość pikseli, o które element został przewinięty w górę.

+ +
// Ustaw wartość przewinięcia w pikselach
+element.scrollTop = intValue;
+
+ +

scrollTop może przyjąć dowolną wartość liczbową, jednakże:

+ + + +

Opis

+ +

Element scrollTop jest miarą odległości od góry elementu do najwyższej krawędzi jego widzialnej zawartości.

+ +

Kiedy zawartość elementu nie powoduje powstania pionowego paska przewijania, wartość scrollTop jest domyślnie ustawiona na 0.

+ +

Przykład

+ +
+
+

padding-top

+ +

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

+ +

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

+ +

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

+ +

padding-bottom

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

Image:scrollTop.png

+ +

Nie mamy interaktywnej demonstracji jak ma to miejsce w dokumentacji Gecko DOM.

+ +

Specyfikacja

+ +

scrollTop jest częścią obiektowego modelu MSIE. scrollTop nie jest częścią żadnej specyfikacji W3C lub rekomendacji technicznej.

+ +

Uwagi

+ +

scrollTop jest własnością obiektowego modelu DHTML (Dynamic HyperText Markup Language), który po raz pierwszy został wprowadzony przez MSIE. Własność ta jest zdefiniowana jako odległość do górnej krawędzi widoku elementu przewijanego.

+ +

Dokumentacja

+ + diff --git a/files/pl/web/api/element/scrollwidth/index.html b/files/pl/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..42cb1a96f1 --- /dev/null +++ b/files/pl/web/api/element/scrollwidth/index.html @@ -0,0 +1,32 @@ +--- +title: element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/scrollWidth +--- +

{{ ApiRef() }}

+

Podsumowanie

+

scrollWidth jest własnością tylko do odczytu, która zwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu - w zależności od tego, która z tych wartości jest większa.

+

Składnia i wartości

+
var xScrollWidth = element.scrollWidth;
+
+

xScrollWidth jest szerokością zawartości elementu element w pikselach.

+

Przykład

+
<div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+>-FooBar-FooBar-FooBar</div>
+<br>
+<input type="button" value="Show scrollWidth"
+       onclick="alert(document.getElementById('aDiv').scrollWidth);">
+
+

Specyfikacja

+

Nie ma specyfikacji W3C dla scrollWidth.

+

Dokumentacja

+

MSDN scrollWidth reference

+
+  
+

{{ languages( { "en": "en/DOM/element.scrollWidth", "fr": "fr/DOM/element.scrollWidth" } ) }}

diff --git a/files/pl/web/api/element/setattribute/index.html b/files/pl/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..79f649526e --- /dev/null +++ b/files/pl/web/api/element/setattribute/index.html @@ -0,0 +1,34 @@ +--- +title: element.setAttribute +slug: Web/API/Element/setAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttribute dodaje nowy lub zmienia wartość atrybutu w bieżącym elemencie.

+

Składnia

+
element.setAttribute(nazwa,wartość)
+
+

Parametry

+ +

Przykład

+
d = document.getElementById("d1");
+d.setAttribute("align", "center");
+
+

Uwagi

+

Jeśli istnieje już atrybut o danej nazwie, jego wartość zostaje zmieniona na wartość podaną w wywołaniu setAttribute. Jeśli nie istnieje taki atrybut, zostanie on utworzony.

+

Pomimo, że getAttribute zwraca null jeśli atrybut nie istnieje, do usuwania atrybutów powinieneś używać metody removeAttribute, a nie element.setAttribute(attr, null).

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttribute (wprowadzono w DOM Level 1 Core)

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttribute", "fr": "fr/DOM/element.setAttribute", "ja": "ja/DOM/element.setAttribute" } ) }}

diff --git a/files/pl/web/api/element/setattributenode/index.html b/files/pl/web/api/element/setattributenode/index.html new file mode 100644 index 0000000000..dbf836f80c --- /dev/null +++ b/files/pl/web/api/element/setattributenode/index.html @@ -0,0 +1,40 @@ +--- +title: element.setAttributeNode +slug: Web/API/Element/setAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttributeNode dodaje do elementu nowy węzeł typu Attr.

+

Składnia

+
zastąpionyAtr = element.setAttributeNode(atrybut)
+
+

Parametry

+ +

Przykład

+
// <div id="raz" align="left">raz</div>
+// <div id="dwa">dwa</div>
+d1 = document.getElementById("raz");
+d2 = document.getElementById("dwa");
+a = d1.getAttributeNode("align");
+d2.setAttributeNode(a);
+alert(d2.attributes[1].value)
+// wypisze: "left"
+
+

Uwagi

+

Jeżeli istnieje już atrybut o danej nazwie, zostanie on zastąpiony nowym atrybutem i zwrócony jako wynik funkcji.

+

Tej metody używa się rzadko - do zmiany atrybutów elementu zwykle wykorzystywana jest metoda setAttribute.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttributeNode (wprowadzono w DOM Level 1 Core

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttributeNode", "fr": "fr/DOM/element.setAttributeNode", "ja": "ja/DOM/element.setAttributeNode" } ) }}

diff --git a/files/pl/web/api/element/setattributenodens/index.html b/files/pl/web/api/element/setattributenodens/index.html new file mode 100644 index 0000000000..5633d0367e --- /dev/null +++ b/files/pl/web/api/element/setattributenodens/index.html @@ -0,0 +1,41 @@ +--- +title: element.setAttributeNodeNS +slug: Web/API/Element/setAttributeNodeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNodeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttributeNodeNS dodaje nowy węzeł atrybutu z określoną nazwą i przestrzenią nazw.

+

Składnia

+
replacedAttr = element.setAttributeNodeNS(namespace,attributeNode)
+
+ +

Przykład

+
// <div id="one" special-align="utterleft">one</div>
+// <div id="two">two</div>
+
+var myns = "http://www.mozilla.org/ns/specialspace";
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNodeNS(myns, "special-align");
+var d2.setAttributeNodeNS(myns, a);
+
+alert(d2.attributes[1].value) // zwraca: `utterleft'
+
+

Uwagi

+

Jeśli określony atrybut istnieje dla elementu, to jest on zastępowany nowym i zwracany.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttributeNodeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttributeNodeNS", "fr": "fr/DOM/element.setAttributeNodeNS", "ja": "ja/DOM/element.setAttributeNodeNS" } ) }}

diff --git a/files/pl/web/api/element/setattributens/index.html b/files/pl/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..c721111e36 --- /dev/null +++ b/files/pl/web/api/element/setattributens/index.html @@ -0,0 +1,33 @@ +--- +title: element.setAttributeNS +slug: Web/API/Element/setAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttributeNS dodaje nowy lub zmienia wartość istniejącego atrybutu o podanej nazwie i przestrzeni nazw.

+

Składnia

+
element.setAttributeNS(przestrzeńNazw,nazwa,wartość)
+
+ +

Przykład

+
var d = document.getElementById("d1");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttributeNS", "fr": "fr/DOM/element.setAttributeNS", "ja": "ja/DOM/element.setAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/style/index.html b/files/pl/web/api/element/style/index.html new file mode 100644 index 0000000000..4736774e83 --- /dev/null +++ b/files/pl/web/api/element/style/index.html @@ -0,0 +1,52 @@ +--- +title: element.style +slug: Web/API/Element/style +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/ElementCSSInlineStyle/style +--- +

{{ ApiRef("DOM") }}

+ +

Podsumowanie

+ +

Zwraca obiekt reprezentujący atrybut style elementu.

+ +

Przykład

+ +
var div = document.getElementById("div1");
+div.style.marginTop = ".25in";
+
+ +

Uwagi

+ +

Ponieważ własność style reprezentuje atrybut style, który ma najwyższy priorytet w kaskadzie CSS, własność ta jest użyteczna by ustawić styl określonego elementu. Nie przyda się jednak do sprawdzania stylu elementu, ponieważ zależy ona tylko od atrybutu style, a nie od reguł stylów określonych gdziekolwiek indziej. Możesz użyć window.getComputedStyle, by sprawdzić styl elementu.

+ +

Zobacz listę własności CSS dostępnych w DOM, gdzie znajdziesz też dodatkowe uwagi o zastosowaniu własności style.

+ +

Ogólnie rzecz biorąc, lepiej jest użyć własność style zamiast elt.setAttribute('style', '...'), ponieważ użycie style nie nadpisze innych własności CSS, które mogły być wcześniej określone atrybutem style.

+ +

Styli nie można ustawiać poprzez przekazywania łańcucha znaków do atrybutu style (tylko odczyt), np. elt.style = "color: blue;". Jest to niemożliwe ponieważ atrybut stylu zwraca obiekt CSSStyleDeclaration . Zamiast tego, możesz ustawić poszczególne własności atrybutu style w ten sposób:

+ +
elt.style.color = "blue";  // Directly
+
+var st = elt.style;
+st.color = "blue";  // Indirectly
+
+ +

Poniższy kod wyświetli nazwy wszystkich własności stylu, wartości ustawione dla elementu elt oraz dziedziczone 'przeliczone'' wartości:

+ +
var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(z, null);
+for (x in st)
+  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
+
+ +

Specyfikacja

+ +

DOM Level 2 Style: ElementCSSInlineStyle.style

diff --git a/files/pl/web/api/element/tabindex/index.html b/files/pl/web/api/element/tabindex/index.html new file mode 100644 index 0000000000..d8fdd6ce7d --- /dev/null +++ b/files/pl/web/api/element/tabindex/index.html @@ -0,0 +1,31 @@ +--- +title: element.tabIndex +slug: Web/API/Element/tabIndex +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +
+ {{APIRef}}
+
+  
+
+ Podsumowanie
+

Pobiera/ustawia kolejność tabulacji dla bieżącego elementu.

+

Składnia

+
element.tabIndex = indeks
+
+ +

Przykład

+
var b1 = document.getElementById("button1");
+
+b1.tabIndex = 1;
+

Specyfikacja

+ diff --git a/files/pl/web/api/element/tagname/index.html b/files/pl/web/api/element/tagname/index.html new file mode 100644 index 0000000000..61972df98c --- /dev/null +++ b/files/pl/web/api/element/tagname/index.html @@ -0,0 +1,37 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/tagName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

tagName zwraca nazwę elementu.

+

Składnia

+
nazwaElementu = element.tagName
+
+ +

Przykład

+

Dane są takie znaczniki:

+
<span id="born">Kiedy przyszedłem na świat...</span>
+
+

i taki skrypt:

+
var span = document.getElementById("born");
+alert(span.tagName);
+
+

W XHTML-u (lub innym formacie XML) wyświetlone zostanie "span", a w HTML - "SPAN".

+

Uwagi

+

W XML-u tagName zachowuje wielkość liter. W HTML-u tagName zwraca nazwę elementu w formie kanonicznej - wielkimi literami. Wartość tagName jest taka sama jak wartość nodeName.

+

Specyfikacja

+

tagName

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.tagName", "es": "es/DOM/element.tagName", "fr": "fr/DOM/element.tagName", "ja": "ja/DOM/element.tagName" } ) }}

diff --git a/files/pl/web/api/element/textcontent/index.html b/files/pl/web/api/element/textcontent/index.html new file mode 100644 index 0000000000..f667ea2889 --- /dev/null +++ b/files/pl/web/api/element/textcontent/index.html @@ -0,0 +1,41 @@ +--- +title: element.textContent +slug: Web/API/Element/textContent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/textContent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pobiera lub ustawia zawartość tekstową węzła i jego potomków.

+

Składnia

+
tekst = element.textContent
+element.textContent = "przykładowy tekst"
+
+

Przykład

+
// Dany jest taki fragment w HTML:
+//   <div id="divA">To jest <span>jakiś</span> tekst</div>
+
+// Pobierz zawartość tekstową:
+var tekst = document.getElementById("divA").textContent;
+// |tekst| zawiera: "To jest jakiś tekst".
+
+// Ustaw zawartość:
+document.getElementById("divA").textContent = "To jest jakiś tekst";
+// teraz HTML elementu divA to <div id="divA">To jest jakiś tekst</div>
+
+

Uwagi

+ +

Specyfikacja

+

textContent

+
+  
+

{{ languages( { "en": "en/DOM/element.textContent", "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent" } ) }}

diff --git a/files/pl/web/api/event/altkey/index.html b/files/pl/web/api/event/altkey/index.html new file mode 100644 index 0000000000..2c8c2f6d9f --- /dev/null +++ b/files/pl/web/api/event/altkey/index.html @@ -0,0 +1,31 @@ +--- +title: event.altKey +slug: Web/API/Event/altKey +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/altKey +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy klawisz <alt> był wciśnięty przy wywołaniu zdarzenia.

+

Składnia

+
bool = event.altKey
+
+

Przykład

+
 function goInput(e) {
+ // sprawdza przycisk <alt>
+   if e.altKey {
+      // przekazuje zdarzenie dalej
+      superSizeOutput(e);
+   }
+   else {
+     doOutput(e);
+   }
+ }
+
+
+  
+

{{ languages( { "en": "en/DOM/event.altKey", "ja": "ja/DOM/event.altKey" } ) }}

diff --git a/files/pl/web/api/event/bubbles/index.html b/files/pl/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..2372296028 --- /dev/null +++ b/files/pl/web/api/event/bubbles/index.html @@ -0,0 +1,31 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy zdarzenie bąbelkuje przez model dokumentu czy nie.

+

Składnia

+
bool = event.bubbles
+
+

Przykład

+
 function goInput(e) {
+  // sprawdza czy zdarzenie bąbelkuje
+  if not e.bubbles {
+     // i jeśli nie - przekazuje je dalej
+     passItOn(e);
+  }
+  // jeśli bąbelkuje:
+  doOutput(e)
+}
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/event.bubbles", "es": "es/DOM/event.bubbles", "ja": "ja/DOM/event.bubbles" } ) }}

diff --git a/files/pl/web/api/event/button/index.html b/files/pl/web/api/event/button/index.html new file mode 100644 index 0000000000..5f796093fb --- /dev/null +++ b/files/pl/web/api/event/button/index.html @@ -0,0 +1,66 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/button +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, który przycisk myszy wywołał zdarzenie.

+

Składnia

+
var kodPrzycisku = event.button;
+
+

Zwraca całkowitą wartość liczbową oznaczającą przycisk, który zmienił stan:

+ +

Faktyczna kolejność przycisków może być różna, zależnie od konfiguracji urządzenia wskazującego.

+

Przykład

+
<script type="text/javascript">
+
+function whichButton(e)
+{
+  // obsłuż różne modele obsługi zdarzeń
+  var e = e || window.event;
+  var btnCode;
+
+  if ('object' == typeof e){
+    btnCode = e.button;
+
+    switch (btnCode){
+      case 0  : alert('Kliknięto lewym przyciskiem');
+                break;
+      case 1  : alert('Kliknięto środkowym przyciskiem');
+                break;
+      case 2  : alert('Kliknięto prawym przyciskiem');
+                break;
+      default : alert('Nieoczekiwany kod: ' + btnCode);
+    }
+  }
+}
+
+</script>
+
+<p onclick="whichButton(event);">Kliknij tu myszą...</p>
+
+
+

Uwagi

+

Ponieważ kliknięcia myszy są często przechwytywane przez interfejs uzytkownika, w niektórych okolicznościach może być trudno wykryć przyciski inne niż ten dla standardowego kliknięcia (tj. zazwyczaj lewy).

+

Użytkownicy mogą zmienić konfigurację przycisków swoich urządzeń wskazujących, tak że nawet jeśli własność + + button + wynosi zero, niekoniecznie musiał być naciśnięty przycisk znajdujący się fizycznie po lewej stronie. Jednak zachowanie w takiej sytuacji powinno być takie, jak gdyby kliknięto lewy przycisk w standardowym układzie.

+

Specyfikacja

+

DOM Level 2 Events: button

+
+  
+

{{ languages( { "en": "en/DOM/event.button", "ja": "ja/DOM/event.button" } ) }}

diff --git a/files/pl/web/api/event/cancelable/index.html b/files/pl/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..4a6ed741bb --- /dev/null +++ b/files/pl/web/api/event/cancelable/index.html @@ -0,0 +1,34 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/cancelable +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wskazuje, czy zdarzenie można anulować.

+ +

Składnia

+ +
bool = event.cancelable
+
+ +

Uwagi

+ +

To, czy zdarzenie może być anulowane czy nie jest określane w momencie, kiedy zdarzenie jest tworzone. Aby anulować zdarzenie, użyj metody preventDefault na tym zdarzeniu, dzięki czemu nie zostanie wykonana akcja - domyślny rezultat tego zdarzenia.

+ +

Specyfikacja

+ +

cancelable

+ + + +
+ +

{{ languages( { "en": "en/DOM/event.cancelable", "es": "es/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable" } ) }}

diff --git a/files/pl/web/api/event/cancelbubble/index.html b/files/pl/web/api/event/cancelbubble/index.html new file mode 100644 index 0000000000..64b0a32f88 --- /dev/null +++ b/files/pl/web/api/event/cancelbubble/index.html @@ -0,0 +1,15 @@ +--- +title: event.cancelBubble +slug: Web/API/Event/cancelBubble +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/cancelBubble +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy zostało anulowane bąbelkowanie tego zdarzenia.

+

Składnia

+
bool = event.cancelBubble
+
+

{{ languages( { "en": "en/DOM/event.cancelBubble" } ) }}

diff --git a/files/pl/web/api/event/charcode/index.html b/files/pl/web/api/event/charcode/index.html new file mode 100644 index 0000000000..6600e6c1dd --- /dev/null +++ b/files/pl/web/api/event/charcode/index.html @@ -0,0 +1,27 @@ +--- +title: event.charCode +slug: Web/API/Event/charCode +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/KeyboardEvent/charCode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca kod Unicode dla klawisza znaku, który został wciśnięty, w zdarzeniu keypress.

+

Składnia

+
znak = event.charCode
+
+

Parametry

+ +

Uwagi

+

W zdarzeniu keypress kod Unicode wciśniętego klawisza jest przechowywany albo we własności keyCode albo w charCode, nigdy w obydwu. Jeśli wciśnięcie klawisza skutkowałoby wprowadzeniem znaku (np. 'a'), charCode ustawiany jest dla kodu tego znaku, z uwzględnieniem wielkości (małe lub duże litery) znaku (np. bierze pod uwagę, czy wciśnięto klawisz shift). W przeciwnym przypadku, naciśnięty klawisz przechowywany jest w keyCode.

+

charCode nigdy nie jest ustawiany w zdarzeniach keydown i keyup. W tych przypadkach ustawiany jest keyCode.

+

Aby pobrać kod klawisza niezależnie, czy jest przechowywany w keyCode czy w charCode, sprawdź właściwość which.

+

Znaki wprowadzane poprzez IME nie są rejestrowane poprzez keyCode ani charCode. (IME - program pozwalający wprowadzać skomplikowane znaki, np. japońskie bądź chińskie - przyp. tłum.)

+

Listę wartości charCode związanych z poszczególnymi klawiszami możesz znaleźć uruchamiając Przykład 7: Wyświetlanie stałych obiektu event.

+

Specyfikacja

+

Nie należy do specyfikacji. Zobacz nsIDOMKeyEvent.

+

{{ languages( { "en": "en/DOM/event.charCode" } ) }}

diff --git a/files/pl/web/api/event/clientx/index.html b/files/pl/web/api/event/clientx/index.html new file mode 100644 index 0000000000..dd0dcb3e09 --- /dev/null +++ b/files/pl/web/api/event/clientx/index.html @@ -0,0 +1,25 @@ +--- +title: event.clientX +slug: Web/API/Event/clientX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/clientX +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca poziomą współrzędną zdarzenia w obszarze klienta.

+

Przykład

+
 function checkClientClickMap(e) {
+   if e.clientX < 50 {
+     doRedButton(); }
+   if 50 <= e.clientX < 100 {
+     doYellowButton(); }
+   if e.clientX >= 100 {
+     doRedButton(); } }
+
+

Uwagi

+

Zobacz też clientY.

+

Specyfikacja

+

clientX

+

{{ languages( { "en": "en/DOM/event.clientX" } ) }}

diff --git a/files/pl/web/api/event/clienty/index.html b/files/pl/web/api/event/clienty/index.html new file mode 100644 index 0000000000..1ad6315f89 --- /dev/null +++ b/files/pl/web/api/event/clienty/index.html @@ -0,0 +1,16 @@ +--- +title: event.clientY +slug: Web/API/Event/clientY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/clientY +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pionową współrzędną zdarzenia w obszarze klienta.

+

Uwagi

+

Zobacz też clientX, wraz z przykładem wykorzystania.

+

Specyfikacja

+

clientY

+

{{ languages( { "en": "en/DOM/event.clientY" } ) }}

diff --git a/files/pl/web/api/event/ctrlkey/index.html b/files/pl/web/api/event/ctrlkey/index.html new file mode 100644 index 0000000000..53bda61a1e --- /dev/null +++ b/files/pl/web/api/event/ctrlkey/index.html @@ -0,0 +1,26 @@ +--- +title: event.ctrlKey +slug: Web/API/Event/ctrlKey +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/ctrlKey +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy klawisz <ctrl> był wciśnięty podczas wywołania zdarzenia.

+

Składnia

+
bool = event.ctrlKey
+
+

Przykład

+
 function goInput(e) {
+ // sprawdza ctrlKey
+   if e.ctrlKey
+        // i przekazuje zdarzenie dalej
+     superSizeOutput(e);
+   else
+     doOutput(e)
+
+

Specyfikacja

+

ctrlKey

+

{{ languages( { "en": "en/DOM/event.ctrlKey" } ) }}

diff --git a/files/pl/web/api/event/currenttarget/index.html b/files/pl/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..f6c5c3c752 --- /dev/null +++ b/files/pl/web/api/event/currenttarget/index.html @@ -0,0 +1,25 @@ +--- +title: event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/currentTarget +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pozwala zidentyfikować obecnie zarejestrowany element docelowy zdarzenia.

+

Składnia

+
referencjaDoWęzła = event.currentTarget
+
+

Parametry

+ +

Przykład

+
 if e.currentTarget != t_el
+    resetEventEngine();
+
+

Specyfikacja

+

currentTarget

+

{{ languages( { "en": "en/DOM/event.currentTarget" } ) }}

diff --git a/files/pl/web/api/event/eventphase/index.html b/files/pl/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..c7f0deb5fb --- /dev/null +++ b/files/pl/web/api/event/eventphase/index.html @@ -0,0 +1,40 @@ +--- +title: event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/eventPhase +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje która faza przepływu zdarzenia jest aktualnie przetwarzana.

+

Składnia

+
faza = event.eventPhase
+
+

Parametry

+ + + + + + + + + + + + + + + + + + + +
1CAPTURING_PHASEfaza przechwytywania
2AT_TARGETzdarzenie przy elemencie docelowym
3BUBBLING_PHASEfaza bąbelkowania
+

Specyfikacja

+

eventPhase

+

{{ languages( { "en": "en/DOM/event.eventPhase" } ) }}

diff --git a/files/pl/web/api/event/index.html b/files/pl/web/api/event/index.html new file mode 100644 index 0000000000..8b5dd22105 --- /dev/null +++ b/files/pl/web/api/event/index.html @@ -0,0 +1,179 @@ +--- +title: Event +slug: Web/API/Event +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event +--- +

{{ ApiRef() }}

+ +

Wprowadzenie

+ +

W tym rozdziale opiszemy model zdarzeń DOM Level 2 jaki implementuje Gecko. Opisany zostanie obiekt event, a także interfejsy do rejestrowania zdarzeń dla węzłów DOM, uchwyty i obserwatorzy zdarzeń; przedstawione zostanie też kilka dłuższych przykładów pokazujących relacje między różnymi interfejsami.

+ +

Dostępny jest też doskonały diagram, który jasno przedstawia trzy fazy przepływu zdarzeń w DOM.

+ +

Interfejs DOM event

+ +

Interfejs DOM event reprezentowany jest przez obiekty event przekazywane do uchwytów zdarzeń różnych elementów DOM. Poniższy, prosty przykład pokazuje, jak przekazać i manipulować obiektem event w funkcji obsługi zdarzenia.

+ +
function foo(e) {
+  //funkcje obsługi zdarzeń - takie jak ta
+  //otrzymują referencję do zdarzenia, jakie
+  //obsługują (w tym przypadku "e")
+  alert(e);
+}
+table_el.onclick = foo;
+
+ +

Powyższy przykład jest skrajnie prosty, przedstawia jednak ważną cechę obsługi zdarzeń w Gecko DOM - obiekty event wykorzystywane są zwykle w funkcjach obsługi zdarzeń. Kiedy masz już referencję do obiektu event, możesz korzystać z wszystkich metod i własności opisanych w tym rozdziale.

+ +

Zob. także Przykład 5: Propagowanie zdarzeń w rozdziale Przykłady użycia DOM, by zobaczyć bardziej szczegółowo, jak zdarzenia przechodzą przez DOM.

+ +

Uchwyty zdarzeń

+ +

Oprócz opisanego tutaj obiektu event, Gecko DOM dostarcza również metod do rejestrowania obserwatorów zdarzeń (ang.event listener ) na węzłach DOM, usuwania zdarzeń z obserwatorów oraz wywoływania zdarzeń z poziomu DOM. Te trzy metody opisano w rozdziale Elementy w DOM. Razem z uchwytami zdarzeń elementów HTML i XML stanowią one główny punkt wyjścia dla zdarzeń w DOM.

+ +

Możesz także przekazać do funkcji obsługi zdarzenia referencję do obiektu event poprzez predefiniowany parametr o nazwie event. Jest to bardzo podobne do sposobu, w jaki działa this, ale tyczy się obiektów zdarzeń, a nie elementów.

+ +
<html>
+<head>
+<title>Przykład użycia parametru z obiektem event</title>
+
+<script type="text/javascript">
+
+function showCoords(evt){
+  alert(
+    "clientX value: " + evt.clientX + "\n"
+    + "clientY value: " + evt.clientY + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="showCoords(event)">
+<p>Kliknij gdziekolwiek na tej stronie, aby wyświetlić współrzędne położenia myszy.</p>
+</body>
+</html>
+
+ +

Używanie predefiniowanego parametru event pozostawia dalej możliwość przekazywania innych parametrów do funkcji obsługującej zdarzenie, jeśli jest taka potrzeba.

+ +
<html>
+<head>
+<title>Przykład użycia parametru z obiektem event wraz z dodatkowymi parametrami</title>
+
+<script type="text/javascript">
+
+var par2 = 'hello';
+var par3 = 'world!';
+
+function showCoords(evt, p2, p3){
+  alert(
+    "clientX value: " + evt.clientX + "\n"
+    + "clientY value: " + evt.clientY + "\n"
+    + "p2: " + p2 + "\n"
+    + "p3: " + p3 + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="showCoords(event, par2, par3)">
+<p>Kliknij gdziekolwiek na tej stronie, aby wyświetlić współrzędne położenia myszy.</p>
+</body>
+</html>
+
+ +

Własności

+ +
+
event.altKey
+
Zwraca wartość logiczną wskazującą, czy klawisz <alt> był wciśnięty podczas zdarzenia.
+
event.bubbles
+
Zwraca wartość logiczną wskazującą, czy zdarzenie bąbelkuje przez model dokumentu czy nie.
+
event.button
+
Zwraca przycisk myszy.
+
event.cancelBubble
+
{{ Deprecated_inline() }} Zwraca wartość logiczną wskazującą, czy bąbelkowanie zdarzenia zostało anulowane czy nie.
+
event.cancelable
+
Zwraca wartość logiczną wskazującą, czy zdarzenie można anulować.
+
event.charCode
+
Zwraca kod Unicode klawisza znaku, który został wciśnięty podczas zdarzenia keypress.
+
event.clientX
+
Zwraca poziomą pozycję zdarzenia w obszarze klienta.
+
event.clientY
+
Zwraca pionową pozycję zdarzenia w obszarze klienta.
+
event.ctrlKey
+
Zwraca wartość logiczną wskazującą, czy klawisz <ctrl> był wciśnięty podczas zdarzenia.
+
event.currentTarget
+
Zwraca referencję do obecnie zarejestrowanego celu zdarzenia.
+
event.detail
+
Zwraca szczegółową informację o zdarzeniu zależnie od jego typu.
+
event.eventPhase
+
Wskazuje która faza przepływu zdarzenia jest aktualnie przetwarzana.
+
event.isChar
+
Zwraca wartość logiczną oznaczającą, czy w zdarzeniu pojawił się klawisz znaku czy nie.
+
event.keyCode
+
Zwraca kod Unicode dla klawisza nie będącego znakiem w zdarzeniu keypress lub dowolnego klawisza w każdym innym zdarzeniu związanym z klawiaturą.
+
event.layerX
+
Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.
+
event.layerY
+
Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.
+
event.metaKey
+
Zwraca wartość logiczną wskazującą, czy klawisz meta był wciśnięty podczas zdarzenia.
+
event.pageX
+
Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.
+
event.pageY
+
Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.
+
event.relatedTarget
+
Wskazuje na drugi cel zdarzenia.
+
event.screenX
+
Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem ekranu.
+
event.screenY
+
Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.
+
event.shiftKey
+
Zwraca wartość logiczną wskazującą, czy klawisz <shift> był wciśnięty podczas zdarzenia.
+
event.target
+
Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.
+
event.timeStamp
+
Zwraca czas, kiedy o którym zdarzenie zostało utworzone.
+
event.type
+
Zwraca nazwę zdarzenia.
+
event.view
+
Wskazuje widok (AbstractView), w którym wygenerowane zostało zdarzenie.
+
event.which
+
Zwraca kod Unicode klawisza w zdarzeniu związanym z klawiaturą, niezależnie od tego, czy klawisz jest znakiem.
+
+ +

Metody

+ +
+
event.initEvent
+
Metoda używana do zainicjalizowania wartości dla zdarzenia utworzonego przez interfejs DocumentEvent.
+
event.initKeyEvent
+
Inicjalizuje zdarzenie klawiatury. Gecko-specific.
+
event.initMouseEvent
+
Inicjalizuje zdarzenie myszy po jego utworzeniu.
+
event.initUIEvent
+
Inicjalizuje zdarzenie interfejsu użytkownika po jego utworzeniu.
+
event.preventBubble
+
{{ Obsolete_inline() }} Zabezpiecza zdarzenie przed bąbelkowaniem. Ta metoda jest przestarzała ze względu na standard stopPropagation i jest usunięta w Gecko 1.9.
+
event.preventCapture
+
{{ Obsolete_inline() }} Ta metoda jest przestarzała ze względu na standard stopPropagation i jest usunięta w Gecko 1.9.
+
event.preventDefault
+
Anuluje zdarzenie (jeśli można je anulować).
+
event.stopPropagation
+
Zatrzymuje dalsze propagowanie bieżącego zdarzenia w DOM.
+
+ + + +
+ +

{{ languages( { "en": "en/DOM/event", "es": "es/DOM/event", "fr": "fr/DOM/event", "ja": "ja/DOM/event" } ) }}

diff --git a/files/pl/web/api/event/initevent/index.html b/files/pl/web/api/event/initevent/index.html new file mode 100644 index 0000000000..47af034ed8 --- /dev/null +++ b/files/pl/web/api/event/initevent/index.html @@ -0,0 +1,45 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/initEvent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda służy do zainicjalizowania zdarzenia utworzonego za pomocą interfejsu DocumentEvent

+

Składnia

+
event.initKeyEvent(type,bubbles,cancelable)
+
+

Parametry

+
+
+ type
+
+ Typ zdarzenia.
+
+ bubbles
+
+ Wartość logiczna wskazująca, czy zdarzenie ma bąbelkować czy nie (zob. bubbles).
+
+ cancelable
+
+ Wartość logiczna wskazująca, czy zdarzenie może zostać anulowane (zob. cancelable).
+
+

Przykład

+
// utwórz zdarzenie kliknięcia, które bąbelkuje
+// i nie może być anulowane
+event.initEvent("click", true, false);
+
+

Uwagi

+

Zdarzenia inicjalizowane w ten sposób muszą zostać utworzone za pomocą metody createEvent interfejsu DocumentEvent. Metoda initEvent musi być wywołana by ustawić zdarzenie przed jego wywołaniem (za pomocą dispatchEvent).

+

Specyfikacja

+

initEvent

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/event.initEvent", "es": "es/DOM/event.initEvent", "fr": "fr/DOM/event.initEvent", "ja": "ja/DOM/event.initEvent" } ) }}

diff --git a/files/pl/web/api/event/initmouseevent/index.html b/files/pl/web/api/event/initmouseevent/index.html new file mode 100644 index 0000000000..e9de804697 --- /dev/null +++ b/files/pl/web/api/event/initmouseevent/index.html @@ -0,0 +1,86 @@ +--- +title: event.initMouseEvent +slug: Web/API/Event/initMouseEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/initMouseEvent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Inicjuje zdarzenie myszy po jego utworzeniu (za pomocą metody createEvent interfejsu DocumentEvent).

+

Składnia

+
event.initMouseEvent(type,canBubble,cancelable,view,detail,screenX,screenY,clientX,clientY,ctrlKey,altKey,shiftKey,metaKey,button,relatedTarget);
+
+
+
+ type
+
+ łańcuch znaków do ustawienia typu zdarzeń. Możliwe typy dla zdarzeń myszy: click, mousedown, mouseup, mouseover, mousemove, mouseout.
+
+ canBubble
+
+ czy zdarzenie bąbelkuje. Ustawia wartość event.bubbles.
+
+ cancelable
+
+ czy domyślna akcja zdarzenia może być anulowana. Ustawia Ustawia wartość event.cancelable.
+
+ view
+
+ AbstractView zdarzenia. You should pass the window object here. Ustawia wartość event.view.
+
+ detail
+
+ wartość licznika kliknięć myszą. Ustawia wartość event.detail.
+
+ screenX
+
+ współrzędna x względem ekranu. Ustawia wartość event.screenX.
+
+ screenY
+
+ współrzędna y względem ekranu. Ustawia wartość event.screenY.
+
+ clientX
+
+ współrzędna x w obszarze klienta. Ustawia wartość event.clientX.
+
+ clientY
+
+ współrzędna y w obszarze klienta. Ustawia wartość event.clientY.
+
+ ctrlKey
+
+ czy klawisz control był wciśnięty podczas zdarzenia. Ustawia wartość event.ctrlKey.
+
+ altKey
+
+ czy klawisz alt był wciśnięty podczas zdarzenia. Ustawia wartość event.altKey.
+
+ shiftKey
+
+ czy klawisz shift był wciśnięty podczas zdarzenia. Ustawia wartość event.shiftKey.
+
+ metaKey
+
+ czy klawisz meta był wciśnięty podczas zdarzenia. Ustawia wartość event.metaKey.
+
+ button
+
+ zdarzenie myszy event.button.
+
+ relatedTarget
+
+ zdarzenie related EventTarget. Stosowane tylko z kilkoma typami zdarzeń (np. mouseover i mouseout). W innych przypadkach, zwraca null.
+
+

Przykład

+

 

+

Specyfikacja

+

DOM Level 2 Events: initMouseEvent

+

 

+
+  
+

{{ languages( { "en": "en/DOM/event.initMouseEvent", "es": "es/DOM/event.initMouseEvent" } ) }}

diff --git a/files/pl/web/api/event/inituievent/index.html b/files/pl/web/api/event/inituievent/index.html new file mode 100644 index 0000000000..3a20fef39d --- /dev/null +++ b/files/pl/web/api/event/inituievent/index.html @@ -0,0 +1,49 @@ +--- +title: event.initUIEvent +slug: Web/API/Event/initUIEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/initUIEvent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Inicjalizuje utworzone wcześniej zdarzenie interfejsu użytkownika.

+

Składnia

+
event.initUIEvent(type,canBubble,cancelable,view,detail)
+
+

Parametry

+
+
+ type
+
+ typ zdarzenia
+
+ canBubble
+
+ Wartość logiczna wskazująca, czy zdarzenie ma bąbelkować czy nie (zob. bubbles).
+
+ cancelable
+
+ Wartość logiczna wskazująca, czy zdarzenie może zostać anulowane (zob. cancelable).
+
+ view
+
+ widok (AbstractView) powiązany z tym zdarzeniem
+
+ detail
+
+ liczba określająca szczegółową informację dla tego zdarzenia; dla zdarzeń myszy jest to liczba kliknięć w danym miejscu ekranu (zwykle 1).
+
+

Przykład

+
e = document.createEvent("UIEvents");
+// tworzy zdarzenie kliknięcia, które bąbelkuje, może być
+// anulowane i którego widok i szczegółowa informacja
+// to odpowiednio window i 1
+e.initUIEvent("click", true, true, window, 1);
+
+

Specyfikacja

+

initUIEvent

+

{{ languages( { "en": "en/DOM/event.initUIEvent" } ) }}

diff --git a/files/pl/web/api/event/ischar/index.html b/files/pl/web/api/event/ischar/index.html new file mode 100644 index 0000000000..fc7a7dfec9 --- /dev/null +++ b/files/pl/web/api/event/ischar/index.html @@ -0,0 +1,24 @@ +--- +title: event.isChar +slug: Web/API/Event/isChar +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/isChar +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wartość logiczną oznaczającą, czy w zdarzeniu pojawił się klawisz znaku czy nie.

+

Składnia

+
bool = event.isChar
+
+

Example

+
 if e.isChar
+   echoInput(e.type);
+ }
+
+

Notes

+

Niektórze kombinacje klawiszy mogą wywyoływać zdarzenia bez wystąpienia znaku (np. ctrl + alt). Wtedy isChar zwraca fałsz. isChar może być użyty, kiedy funkcje obsługujące zdarzenie potrzebują np. wyświetlić wprowadzony znak na ekranie.

+

Specyfikacja

+

Nie należy do specyfikacji.

+

{{ languages( { "en": "en/DOM/event.isChar" } ) }}

diff --git a/files/pl/web/api/event/keycode/index.html b/files/pl/web/api/event/keycode/index.html new file mode 100644 index 0000000000..a11c37d4b0 --- /dev/null +++ b/files/pl/web/api/event/keycode/index.html @@ -0,0 +1,23 @@ +--- +title: event.keyCode +slug: Web/API/Event/keyCode +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/KeyboardEvent/keyCode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca kod Unicode dla klawisza nie będącego znakiem w zdarzeniu keypress lub dowolnego klawisza w każdym innym zdarzeniu związanym z klawiaturą.

+

Składnia

+
klawisz = event.keyCode
+
+

Parametry

+ +

Uwagi

+

Zobacz opis właściwości charCode.

+

Specyfikacja

+

Nie należy do specyfikacji. Zobacz nsIDOMKeyEvent.

+

{{ languages( { "en": "en/DOM/event.keyCode" } ) }}

diff --git a/files/pl/web/api/event/layerx/index.html b/files/pl/web/api/event/layerx/index.html new file mode 100644 index 0000000000..5a69b4c864 --- /dev/null +++ b/files/pl/web/api/event/layerx/index.html @@ -0,0 +1,15 @@ +--- +title: event.layerX +slug: Web/API/Event/layerX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/layerX +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.

+

Składnia

+
liczba = event.layerX
+
+

{{ languages( { "en": "en/DOM/event.layerX" } ) }}

diff --git a/files/pl/web/api/event/layery/index.html b/files/pl/web/api/event/layery/index.html new file mode 100644 index 0000000000..f610d08357 --- /dev/null +++ b/files/pl/web/api/event/layery/index.html @@ -0,0 +1,17 @@ +--- +title: event.layerY +slug: Web/API/Event/layerY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/layerY +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem bieżącej warstwy.

+

Składnia

+
liczba = event.layerY
+
+

Specyfikacja

+

Nie należy do specyfikacji.

+

{{ languages( { "en": "en/DOM/event.layerY" } ) }}

diff --git a/files/pl/web/api/event/metakey/index.html b/files/pl/web/api/event/metakey/index.html new file mode 100644 index 0000000000..a2c2758fb3 --- /dev/null +++ b/files/pl/web/api/event/metakey/index.html @@ -0,0 +1,30 @@ +--- +title: event.metaKey +slug: Web/API/Event/metaKey +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/metaKey +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wartość logiczną wskazującą, czy klawisz <meta> był wciśnięty podczas wywołania zdarzenia.

+

Przykład

+
 function goInput(e) {
+ // sprawdza metaKey
+   if (e.metaKey) {
+        // i przekazuje zdarzenie dalej
+     superSizeOutput(e);
+
+    } else {
+     doOutput(e);
+    }
+ }
+
+

Uwagi

+

Na niekótrych platformach metaKey może obsługiwać klawisz o innej nazwie.

+

Specyfikacja

+

metaKey

+

{{ languages( { "en": "en/DOM/event.metaKey" } ) }}

diff --git a/files/pl/web/api/event/pagex/index.html b/files/pl/web/api/event/pagex/index.html new file mode 100644 index 0000000000..98c3c3e1ed --- /dev/null +++ b/files/pl/web/api/event/pagex/index.html @@ -0,0 +1,17 @@ +--- +title: event.pageX +slug: Web/API/Event/pageX +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/pageX +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.

+

Składnia

+
liczba = event.pageX
+
+

{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX" } ) }}

diff --git a/files/pl/web/api/event/pagey/index.html b/files/pl/web/api/event/pagey/index.html new file mode 100644 index 0000000000..d82e2237df --- /dev/null +++ b/files/pl/web/api/event/pagey/index.html @@ -0,0 +1,15 @@ +--- +title: event.pageY +slug: Web/API/Event/pageY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/pageY +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całej strony.

+

Składnia

+
liczba = event.pageY
+
+

{{ languages( { "en": "en/DOM/event.pageY" } ) }}

diff --git a/files/pl/web/api/event/relatedtarget/index.html b/files/pl/web/api/event/relatedtarget/index.html new file mode 100644 index 0000000000..c67389532a --- /dev/null +++ b/files/pl/web/api/event/relatedtarget/index.html @@ -0,0 +1,56 @@ +--- +title: event.relatedTarget +slug: Web/API/Event/relatedTarget +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/relatedTarget +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje na drugi cel zdarzenia.

+

Składnia

+
eventTarget = event.relatedTarget
+
+

Parametry

+ +

Przykład

+
var rel = event.relatedTarget;
+// dump("LEAVING " + (rel ? rel.localName : "null") + "\n");
+// relatedTarget is null when the titletip is first shown:
+// a mouseout event fires because the mouse is exiting
+// the main window and entering the titletip "window".
+// relatedTarget is also null when the mouse exits the main
+// window completely, so count how many times relatedTarget
+// was null after titletip is first shown and hide popup
+// the 2nd time
+if (!rel) {
+  ++this._mouseOutCount;
+  if (this._mouseOutCount > 1)
+    this.hidePopup();
+  return;
+}
+// find out if the node we are entering is one of our
+// anonymous children
+while (rel) {
+  if (rel == this)
+    break;
+  rel.parentNode;
+}
+// if the entered node is not a descendant of ours, hide
+// the tooltip
+if (rel != this && this._isMouseOver) {
+  this.hidePopup();
+}
+
+

Uwagi

+

Za specyfikacją W3C: "Obecnie ten atrybuty używany jest przy zdarzeniu mouseover, gdzie kieruje do EventTarget, jaki opuściło urządzenie wskazujące oraz przy zdarzeniu mouseout, gdzie kieruje do EventTarget, w który weszło urządzenie wskazujące."

+

Powyzszy przykład jest typowy - właściwość relatedTarget używana jest by znaleźć, jeśli jest związany z tym zdarzeniem, kolejny element. Zdarzenia takie jak najechanie myszą ( + + mouseover + ) są powiązane z konkretnym elementem docelowym, ale mogą też angażować drugi cel, jak np. element opuszczany przez mysz w momencie, gdy najechania na główny cel.

+

Specyfikacja

+

relatedTarget

+

{{ languages( { "en": "en/DOM/event.relatedTarget" } ) }}

diff --git a/files/pl/web/api/event/screenx/index.html b/files/pl/web/api/event/screenx/index.html new file mode 100644 index 0000000000..5bafc490da --- /dev/null +++ b/files/pl/web/api/event/screenx/index.html @@ -0,0 +1,33 @@ +--- +title: event.screenX +slug: Web/API/Event/screenX +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/screenX +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca poziomą współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.

+

Składnia

+
liczbaPikseli = event.screenX
+
+

Parametry

+ +

Przykład

+
 function checkClickMap(e) {
+   if e.screenX < 50
+     doRedButton();
+   if 50 <= e.screenX < 100
+     doYellowButton();
+   if e.screenX >= 100
+     doRedButton();
+ }
+
+

Uwagi

+

Kiedy złapiesz zdarzenie w oknie, dokumencie czy innym obszernym elemencie możesz pobrać współrzędne tego zdarzenia (np. kliknięcia) i obsłużyć je prawidłowo, tak jak pokazuje powyższy przykład.

+

Specyfikacja

+

screenX

+

{{ languages( { "en": "en/DOM/event.screenX" } ) }}

diff --git a/files/pl/web/api/event/screeny/index.html b/files/pl/web/api/event/screeny/index.html new file mode 100644 index 0000000000..8b59c5a5e6 --- /dev/null +++ b/files/pl/web/api/event/screeny/index.html @@ -0,0 +1,23 @@ +--- +title: event.screenY +slug: Web/API/Event/screenY +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/screenY +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pionową współrzędną miejsca, gdzie wystąpiło zdarzenie, względem całego ekranu.

+

Składnia

+
liczbaPikseli = event.screenY
+
+

Parametry

+ +

Uwagi

+

Kiedy złapiesz zdarzenie w oknie, dokumencie czy innym obszernym elemencie możesz pobrać współrzędne tego zdarzenia (np. kliknięcia) i obsłużyć je prawidłowo. Zobacz przykład do screenX.

+

Specyfikacja

+

screenY

+

{{ languages( { "en": "en/DOM/event.screenY" } ) }}

diff --git a/files/pl/web/api/event/shiftkey/index.html b/files/pl/web/api/event/shiftkey/index.html new file mode 100644 index 0000000000..1c09a012ce --- /dev/null +++ b/files/pl/web/api/event/shiftkey/index.html @@ -0,0 +1,26 @@ +--- +title: event.shiftKey +slug: Web/API/Event/shiftKey +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/MouseEvent/shiftKey +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wskazuje, czy klawisz <shift> był wciśnięty przy wywołaniu zdarzenia.

+

Składnia

+
bool = event.shiftKey
+
+

Przykład

+
 function goInput(e) {
+ // sprawdza shiftKey
+   if e.shiftKey
+       // i przekazuje zdarzenie dalej
+     superSizeOutput(e);
+   else
+     doOutput(e)
+
+

Specyfikacja

+

shiftKey

+

{{ languages( { "en": "en/DOM/event.shiftKey" } ) }}

diff --git a/files/pl/web/api/event/stoppropagation/index.html b/files/pl/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..3026d761b3 --- /dev/null +++ b/files/pl/web/api/event/stoppropagation/index.html @@ -0,0 +1,26 @@ +--- +title: event.stopPropagation +slug: Web/API/Event/stopPropagation +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/stopPropagation +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przerywa dalsze propagowanie bieżącego zdarzenia.

+

Składnia

+
event.stopPropagation()
+
+

Przykład

+
e.stopPropagation();
+
+

Uwagi

+

Przykład 5: Propagowanie zdarzeń w rozdziale Przykłady użycia DOM dokładniej obrazuje użycie tej metody i propagowanie zdarzeń w DOM.

+

Specyfikacja

+

DOM Level 2 Events: stopPropagation

+
+  
+

{{ languages( { "en": "en/DOM/event.stopPropagation", "ja": "ja/DOM/event.stopPropagation" } ) }}

diff --git a/files/pl/web/api/event/target/index.html b/files/pl/web/api/event/target/index.html new file mode 100644 index 0000000000..b9df9f7b4f --- /dev/null +++ b/files/pl/web/api/event/target/index.html @@ -0,0 +1,27 @@ +--- +title: event.target +slug: Web/API/Event/target +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/target +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca referencję do elementu, do którego zdarzenie zostało pierwotnie wysłane.

+

Składnia

+
referencjaDoEventTarget = event.target
+
+

Parametry

+ +

Przykład

+
 d = document.getElementById("d1");
+ if e.target != d
+    resetGame();
+ // nie nasze zdarzenie
+
+

Specyfikacja

+

target

+

{{ languages( { "en": "en/DOM/event.target" } ) }}

diff --git a/files/pl/web/api/event/timestamp/index.html b/files/pl/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..daead28251 --- /dev/null +++ b/files/pl/web/api/event/timestamp/index.html @@ -0,0 +1,47 @@ +--- +title: event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Event/timeStamp +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca czas (w milisekundach od momentu Epoch), kiedy zdarzenie zostało utworzone.

+

Składnia

+
number = event.timeStamp
+
+

Przykład

+
<html>
+<head>
+
+<title>Przykład timeStamp</title>
+
+<script type="text/javascript">
+var curr_time = null;
+
+function getTime(evt) {
+  curr_time = evt.timeStamp;
+  document.getElementById("time").firstChild.nodeValue = curr_time;
+}
+</script>
+</head>
+
+<body onkeypress="getTime(event)">
+
+<p>Naciśnij jakikolwiek klawisz, aby pobrać aktualny timestamp
+dla zdarzenia onkeypress.</p>
+<p>timeStamp: <span id="time">-</span></p>
+
+</body>
+</html>
+
+

 

+

Uwagi

+

Ta własność działa tylko wtedy, gdy system obsługuje ją dla danego zdarzenia.

+

Specyfikacja

+

timestamp

+

{{ languages( { "en": "en/DOM/event.timeStamp" } ) }}

diff --git a/files/pl/web/api/event/type/index.html b/files/pl/web/api/event/type/index.html new file mode 100644 index 0000000000..dfc2875af1 --- /dev/null +++ b/files/pl/web/api/event/type/index.html @@ -0,0 +1,19 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - DOM + - Wszystkie_kategorie +translation_of: Web/API/Event/type +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca nazwę zdarzenia (niewrażliwe na wielkość znaków).

+

Składnia

+
string = event.type
+
+

Uwagi

+

type jest nazwą XML-ową.

+

Specyfikacja

+

type

+

{{ languages( { "en": "en/DOM/event.type" } ) }}

diff --git a/files/pl/web/api/event/view/index.html b/files/pl/web/api/event/view/index.html new file mode 100644 index 0000000000..57af70a587 --- /dev/null +++ b/files/pl/web/api/event/view/index.html @@ -0,0 +1,23 @@ +--- +title: event.view +slug: Web/API/Event/view +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/UIEvent/view +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Atrybut view identyfikuje widok (interfejs AbstractView), w którym wygenerowane zostało zdarzenie.

+

Składnia

+
referencjaDoAbstractView = event.view
+
+

Parametry

+ +

Specyfikacja

+

view

+

{{ languages( { "en": "en/DOM/event.view" } ) }}

diff --git a/files/pl/web/api/file/file/index.html b/files/pl/web/api/file/file/index.html new file mode 100644 index 0000000000..0a1525bdc8 --- /dev/null +++ b/files/pl/web/api/file/file/index.html @@ -0,0 +1,68 @@ +--- +title: File.File() +slug: Web/API/File/File +tags: + - API +translation_of: Web/API/File/File +--- +

{{APIRef("File")}}

+ +

Konstruktor File() tworzy nową instancję obiektu {{domxref("File")}}.

+ +

Składnia

+ +
File(bity, nazwa [, opcje]);
+ +

Parameters

+ +
+
bity
+
{{jsxref("Array")}} (Tablica) obiektów {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}} lub {{domxref("DOMString")}} — albo miks takich obiektów. Zawartość pliku jest zakodowana w UTF-8.
+
nazwa
+
Obiekt {domxref("USVString")}} reprezentujący nazwę pliku albo ścieżkę do niego.
+
opcje {{optional_inline}}
+
Obiekt opcji, który zawiera opcjonalne atrybuty pliku. Dostępne są następujące możliwości: +
    +
  • type: (typ) - Obiekt {{domxref("DOMString")}} reprezentujący typ MIME zawartości pliku. Domyślnie "".
    • +
  • lastModified: (ostatnio modyfikowany) Liczba reprezentująca liczbę milisekund pomiędzy Unix time epoch i datą ostatniej modyfikacji pliku. Domyślnie - wartość {{jsxref("Date.now()")}}.
    • +
+
+
+ +

Przykład

+ +
var plik = new File(["foo"], "foo.txt", {
+  type: "text/plain",
+});
+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecificationStatusKomentarz
{{SpecName('File API')}}{{Spec2('File API')}}Podstawowa definicja
+ +

Kompatybilność między przeglądarkami

+ +
+ + +

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

+
+ +

Zobacz także

+ + diff --git a/files/pl/web/api/file/index.html b/files/pl/web/api/file/index.html new file mode 100644 index 0000000000..50caf5366b --- /dev/null +++ b/files/pl/web/api/file/index.html @@ -0,0 +1,112 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - File API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/API/File +--- +
{{APIRef}}
+ +

The File interface provides information about files and allows JavaScript in a web page to access their content.

+ +

File objects are generally retrieved from a {{domxref("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{domxref("DataTransfer")}} object, or from the mozGetAsFile() API on an {{domxref("HTMLCanvasElement")}}. In Gecko, privileged code can create File objects representing any local file without user interaction (see {{anch("Implementation notes")}} for more information.)

+ +

A File object is a specific kind of a {{domxref("Blob")}}, and can be used in any context that a Blob can. In particular, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{domxref("XMLHttpRequest", "", "send()")}} accept both Blobs and Files.

+ +

See Using files from web applications for more information and examples.

+ +

{{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{domxref("File.File", "File()")}}
+
Returns a newly constructed File.
+
+ +

Properties

+ +
+
{{domxref("File.lastModified")}} {{readonlyinline}}
+
Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).
+
{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}
+
Returns the last modified Date of the file referenced by the File object.
+
{{domxref("File.name")}} {{readonlyinline}}
+
Returns the name of the file referenced by the File object.
+
{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}
+
Returns the path the URL of the {{domxref("File")}} is relative to.
+
+ +

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

+ +
+
{{domxref("File.size")}} {{readonlyinline}}
+
Returns the size of the file in bytes.
+
{{domxref("File.type")}} {{readonlyinline}}
+
Returns the MIME type of the file.
+
+ +

Methods

+ +

The File interface doesn't define any methods, but inherits methods from the {{domxref("Blob")}} interface:

+ +
+
{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
Returns a new Blob object containing the data in the specified range of bytes of the source Blob.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API')}}{{Spec2('File API')}}Initial definition
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

 

+ +

Implementation notes

+ + + +

See also

+ + diff --git a/files/pl/web/api/geolocation_api/index.html b/files/pl/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..5b53252074 --- /dev/null +++ b/files/pl/web/api/geolocation_api/index.html @@ -0,0 +1,92 @@ +--- +title: Geolocation API +slug: Web/API/Geolocation_API +translation_of: Web/API/Geolocation_API +--- +
{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
+ +

Geolokalizacja API umożliwia użytkownikowi zapewnić ich lokalizację do aplikacji internetowych, jeśli zechcą. Ze względów prywatności użytkownik jest proszony o zgodę na zgłoszenie informacji o lokalizacji.

+ +

Rozszerzenia Web, które chcą korzystać z obiektu Geolokalizacja, muszą dodać "geolocation"uprawnienie do swojego manifestu. System operacyjny użytkownika poprosi użytkownika o zezwolenie na dostęp do lokalizacji przy pierwszym żądaniu.

+ +

Pojęcia i użycie

+ +

Często będziesz chciał odzyskać informacje o lokalizacji użytkownika w swojej aplikacji internetowej, na przykład wykreślić jego lokalizację na mapie lub wyświetlić spersonalizowane informacje dotyczące ich lokalizacji.

+ +

The Geolocation API is accessed via a call to {{domxref("Navigator.geolocation", "navigator.geolocation")}}; this will cause the user's browser to ask them for permission to access their location data. If they accept, then the browser will use the best available functionality on the device to access this information (for example, GPS).

+ +

The developer can now access this location information in a couple of different ways:

+ + + +

In both cases, the method call takes up to three arguments:

+ + + +

For further information on Geolocation usage, read Using the Geolocation API.

+ +

Interfaces

+ +
+
{{domxref("Geolocation")}}
+
The main class of this API — contains methods to retrieve the user's current position, watch for changes in their position, and clear a previously-set watch.
+
{{domxref("GeolocationPosition")}}
+
Represents the position of a user. A GeolocationPosition instance is returned by a successful call to one of the methods contained inside {{domxref("Geolocation")}}, inside a success callback, and contains a timestamp plus a {{domxref("GeolocationCoordinates")}} object instance.
+
{{domxref("GeolocationCoordinates")}}
+
Represents the coordinates of a user's position; a GeolocationCoordinates instance contains latitude, longitude, and other important related information.
+
{{domxref("GeolocationPositionError")}}
+
A GeolocationPositionError is returned by an unsuccessful call to one of the methods contained inside {{domxref("Geolocation")}}, inside an error callback, and contains an error code and message.
+
{{domxref("Navigator.geolocation")}}
+
The entry point into the API. Returns a {{domxref("Geolocation")}} object instance, from which all other functionality can be accessed.
+
+ +

Dictionaries

+ +
+
{{domxref("PositionOptions")}}
+
Represents an object containing options to pass in as a parameter of {{domxref("Geolocation.getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()")}}.
+
+ +

Examples

+ +

{{page("/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API","Examples")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Geolocation")}}{{Spec2("Geolocation")}}
+ +

Kompatybilność z przeglądarkami

+ +

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

+ +

Dostępność

+ +

Ponieważ Google często zapewnia lokalizację w oparciu o Wi-Fi, waniliowy interfejs API geolokalizacji może być niedostępny w Chinach. Możesz korzystać z usług lokalnych dostawców zewnętrznych, takich jak Baidu , Autonavi lub Tencent . Usługi te wykorzystują adres IP użytkownika i / lub lokalną aplikację do zapewnienia lepszego pozycjonowania.

+ +

Zobacz też

+ + diff --git a/files/pl/web/api/globaleventhandlers/index.html b/files/pl/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..9238474923 --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/index.html @@ -0,0 +1,714 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - GlobalEventHandlers + - HTML DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub + - events +translation_of: Web/API/GlobalEventHandlers +--- +
{{ApiRef("HTML DOM")}}
+ +

The GlobalEventHandlers mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}. Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.

+ +
+

Note: GlobalEventHandlers is a mixin and not an interface; you can't actually create an object of type GlobalEventHandlers.

+
+ +

Properties

+ +

This interface doesn't include any properties except for the event handlers listed below.

+ +

Event handlers

+ +

These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running CSS animation has been canceled.
+
{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a CSS animation has stopped playing.
+
{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a CSS animation has begun playing a new iteration of the animation sequence.
+
{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a CSS animation has started playing.
+
{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
+
An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.
+
{{domxref("GlobalEventHandlers.onended")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.
+
{{domxref("GlobalEventHandlers.ongotpointercapture")}}
+
+

Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type is raised.

+
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)
+
{{domxref("GlobalEventHandlers.onlostpointercapture")}}
+
+

Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type is raised.

+
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousewheel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.
+
{{ domxref("GlobalEventHandlers.onwheel") }}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpause")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselectstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.
+
{{domxref("GlobalEventHandlers.onshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchcancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchmove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontransitioncancel")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a CSS transition has been cancelled.
+
{{domxref("GlobalEventHandlers.ontransitionend")}}
+
An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a CSS transition has finished playing.
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.
+
+
+ +

Methods

+ +

This interface defines no methods.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectionchange.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Adds onpointerlockchange and onpointerlockerror on {{domxref("Document")}}. It is experimentally implemented on GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onsort since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of GlobalEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatGeckoDesktop(1.9.1)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsuspend{{CompatGeckoDesktop(1.9.2)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatGeckoDesktop(1.9.1)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmouseenter, onmouseleave{{CompatGeckoDesktop(10)}}{{CompatChrome(30.0)}}{{CompatUnknown}}5.517{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncancel{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onclose{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncuechange{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmousewheel{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsort {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onpointerlockchange, onpointerlockerror{{CompatGeckoDesktop(10)}}[1]{{CompatVersionUnknown}}[2] {{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatVersionUnknown}}[3]{{CompatChrome(55.0)}}{{CompatVersionUnknown}}10{{CompatUnknown}}{{CompatUnknown}}
onselectionchange{{CompatGeckoDesktop(43)}}[4]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
animationstart, animationend, animationcancel, animationiteration{{CompatGeckoDesktop(51)}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ongotpointercapture, onlostpointercapture{{CompatUnknown}}{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
onauxclick{{CompatGeckoDesktop(53)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onwheel{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onmouseenter, onmouseleave{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(10)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onsuspend{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
oncancel{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onclose{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
oncuechange{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onmousewheel{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onsort{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
onpointerlockchange, onpointerlockerror{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(10)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatChrome(55.0)}}{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatNo}}10{{CompatNo}}{{CompatNo}}{{CompatChrome(55.0)}}
onselectionchange{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(43)}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
animationstart, animationend, animationcancel, animationiteration{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatUnknown}}{{CompatGeckoMobile(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
ongotpointercapture, onlostpointercapture{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(57.0)}}
onauxclick{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
onwheel{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] In Gecko this is implemented as onmozpointerlockchange, onmozpointerlockerror.

+ +

[2] In Blink this is implemented as onwebkitpointerlockchange, onwebkitpointerlockerror.

+ +

[3] This is implemented behind the dom.w3c_pointer_events.enabled preference, defaulting to false.

+ +

[4] This is implemented behind the dom.select_events.enabled preference, that default to false, except on Nightly.

+ +

See also

+ + diff --git a/files/pl/web/api/globaleventhandlers/onblur/index.html b/files/pl/web/api/globaleventhandlers/onblur/index.html new file mode 100644 index 0000000000..1a1779b37f --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/onblur/index.html @@ -0,0 +1,85 @@ +--- +title: GlobalEventHandlers.onblur +slug: Web/API/GlobalEventHandlers/onblur +translation_of: Web/API/GlobalEventHandlers/onblur +--- +
{{ApiRef("HTML DOM")}}
+ +

Właściwość onblur należy do Globalnych Uchwytów Zdarzeń ({{domxref("GlobalEventHandlers")}}) i jest Uchwytem Zdarzenia ({{domxref("EventHandler")}}), który służy do obsługi zdarzenia {{event("blur")}}. Jest on dostępny dla następujących elementów: {{domxref("Element")}}, {{domxref("Document")}}, oraz {{domxref("Window")}}.

+ +

Zdarzenie blur zachodzi, gdy dany element traci "focus" (np. podczas opuszczenia inputa tekstowego).

+ +
+

Notatka: Przeciwieństwem onblur jest {{domxref("GlobalEventHandlers.onfocus", "onfocus")}}.

+
+ +

Składnia

+ +
cel.onblur = jakasFunkcja();
+
+ +

Wartość

+ +

jakasFunkcja jest nazwą funkcji albo wyrażeniem funkcji. Jeżeli nie podano argumentu, celowi zostanie przypisana odpowiednia wartość obiektu {{domxref("FocusEvent")}}.

+ +

Przykład

+ +

Przykład użycia onblur oraz {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} do zmiany tekstu w elemencie {{HtmlElement("input")}}.

+ +

HTML

+ +
<input type="text" value="CLICK HERE">
+
+ +

JavaScript

+ +
let input = document.querySelector('input');
+
+input.onblur = inputBlur;
+input.onfocus = inputFocus;
+
+function inputBlur() {
+  input.value = 'Focus has been lost';
+}
+
+function inputFocus() {
+  input.value = 'Focus is here';
+}
+ +

Rezultat

+ +

Kliknij na pole, a następnie obok niego i obserwuj jak zmienia się jego zawartość.

+ +

{{EmbedLiveSample('Przykład')}}

+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}{{Spec2('HTML WHATWG')}}
+ +

Kompatybilność przeglądarek

+ + + +

{{Compat("api.GlobalEventHandlers.onblur")}}

+ +

W przeciwieństwie do IE, w którym prawie każdy element może otrzymać efekt zdarzenia blur, tylko kilka elementów z tym zdarzeniem, działa na przeglądarkach opartych o silnik Gecko.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/globaleventhandlers/onfocus/index.html b/files/pl/web/api/globaleventhandlers/onfocus/index.html new file mode 100644 index 0000000000..bd4a30d6b5 --- /dev/null +++ b/files/pl/web/api/globaleventhandlers/onfocus/index.html @@ -0,0 +1,87 @@ +--- +title: GlobalEventHandlers.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +
{{ApiRef("HTML DOM")}}
+ +

Właściwość onfocus należy do Globalnych Uchwytów Zdarzeń ({{domxref("GlobalEventHandlers")}}) i jest Uchwytem Zdarzenia ({{domxref("EventHandler")}}), który służy do obsługi zdarzenia {{event("focus")}}.

+ +

Zdarzenie focus zachodzi, gdy użytkownik aktywuje element (np. wejdzie w pole tekstowe {{HtmlElement("input")}}).

+ +

Dla elementów onfocus, które nie są inputem, należy dodać atrybut {{htmlattrxref("tabindex")}} (przeczytaj Tworzenie dostępności klawiatury z powrotem po więcej informacji).

+ +
+

Notatka: Przeciwieństwem onfocus jest {{domxref("GlobalEventHandlers.onblur", "onblur")}}.

+
+ +

Składnia

+ +
cel.onfocus = jakasFunkcja;
+
+ +

Wartość

+ +

jakasFunkcja jest nazwą funkcji lub wyrażeniem funkcji. Jeżeli nie podano argumentu, celowi zostanie przypisana odpowiednia wartość obiektu {{domxref("FocusEvent")}}.

+ +

Przykład

+ +

Przykład użycia {{domxref("GlobalEventHandlers.onblur", "onblur")}} oraz onfocus do zmiany tekstu w elemencie {{HtmlElement("input")}}.

+ +

HTML

+ +
<input type="text" value="CLICK HERE">
+
+ +

JavaScript

+ +
let input = document.querySelector('input');
+
+input.onblur = inputBlur;
+input.onfocus = inputFocus;
+
+function inputBlur() {
+  input.value = 'Focus has been lost';
+}
+
+function inputFocus() {
+  input.value = 'Focus is here';
+}
+ +

Result

+ +

Kliknij na pole, a następnie obok niego i obserwuj jak zmienia się jego zawartość.

+ +

{{EmbedLiveSample('Example')}}

+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}{{Spec2('HTML WHATWG')}} 
+ +

Kompatybilność przeglądarek

+ + + +

{{Compat("api.GlobalEventHandlers.onfocus")}}

+ +

W przeciwieństwie do IE, w którym prawie każdy element może otrzymać efekt zdarzenia focus , prawie wszystkie elementy z tym zdarzeniem nie działają na przeglądarkach opartych o silnik Gecko.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/htmlcanvaselement/capturestream/index.html b/files/pl/web/api/htmlcanvaselement/capturestream/index.html new file mode 100644 index 0000000000..19b796017e --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/capturestream/index.html @@ -0,0 +1,73 @@ +--- +title: HTMLCanvasElement.captureStream() +slug: Web/API/HTMLCanvasElement/captureStream +translation_of: Web/API/HTMLCanvasElement/captureStream +--- +
{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}
+ +
 
+ +
Metoda HTMLCanvasElement.captureStream() zwraca {{domxref("CanvasCaptureMediaStream")}} który jest wideo w czasie rzeczywistym z powierzchni elementu <canvas>.
+ +

Składnia

+ +
MediaStream = canvas.captureStream(frameRate);
+
+ +

Parametry

+ +
+
frameRate {{optional_inline}}
+
Liczba zmiennoprzecinkowa podójnej precyzji wskazuje na częstotliwość przechwytywania każdej klatki. W przypadku braku parametru nowa klatka będzie przechwytywana przy każdej zmianie {{HTMLElement("canvas")}}; jeśli ustawiona na 0, przechwycona zostanie pojedyńcza klatka.
+
+ +

Wartość zwrtona

+ +

Odniesienie do obiektu {{domxref("MediaStream")}}. 

+ +

Przykład

+ +
// Zlokalizuj element canvas do przechwycenia
+var canvasElt = document.querySelector('canvas');
+
+// Rozpocznij stream
+var stream = canvasElt.captureStream(25); // 25 FPS
+
+// Wykonuj na nim czynności
+// Np. Prześlij stream na inny komputer używając RTCPeerConnection
+innyKomputer.addStream(stream);
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture DOM Elements', '#widl-HTMLCanvasElement-captureStream-CanvasCaptureMediaStream-double-frameRate', 'HTMLCanvasElement.captureStream()')}}{{Spec2('Media Capture DOM Elements')}}Definicja początkowa
+ +

Zgodność przeglądarek

+ + + +

{{Compat("api.HTMLCanvasElement.captureStream")}}

+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlcanvaselement/getcontext/index.html b/files/pl/web/api/htmlcanvaselement/getcontext/index.html new file mode 100644 index 0000000000..e60fddc51e --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/getcontext/index.html @@ -0,0 +1,129 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +translation_of: Web/API/HTMLCanvasElement/getContext +--- +
{{APIRef("Canvas API")}}
+ +

Metoda HTMLCanvasElement.getContext() zwraca kontekst pola roboczego {{HTMLElement("canvas")}}, lub {{jsxref("null")}} jeśli  identyfikator kontekstu nie jest wspierany.

+ +

Składnia

+ +
var ctx = canvas.getContext(contextType);
+var ctx = canvas.getContext(contextType, contextAttributes);
+
+ +

Parametry

+ +
+
contextType
+
Jest nim {{domxref("DOMString")}} zawierający identyfikator kontekstu pola roboczego powiązanego z {{HTMLElement("canvas")}}. Możliwe wartości to: +
    +
  • "2d",  tworzy obiekt {{domxref("CanvasRenderingContext2D")}} reprezentujący dwuwymiarowy kontekst renderowania.
    • +
  • "webgl" (lub "experimental-webgl"), tworzy obiekt {{domxref("WebGLRenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 1 WebGL (OpenGL ES 2.0).
    • +
  • "webgl2" tworzy obiekt {{domxref("WebGL2RenderingContext")}} reprezentujący trójwymiarowy kontekst renderowania. Ten kontekst dostępny jest tylko w przeglądarkach w których zaimplementowana jest wersja 2 WebGL (OpenGL ES 3.0). {{experimental_inline}}
    • +
  • "bitmaprenderer" tworzy {{domxref("ImageBitmapRenderingContext")}}, który zapewnia możliwość zastąpenia treści {{HTMLElement("canvas")}}  na podaną {{domxref("ImageBitmap")}}.
    • +
+ +
+

Nota: Identyfikator "experimental-webgl" jest używany przy nowych wdrożeniach WebGL. Wdrożenia te nie uzyskały zgodności z pakietem testowym lub sterowniki graficzne platformy nie są jeszcze stabilne. Grupa Khronos certyfikuje wdrożenia WebGL zgodnie z regułami zgodności.

+
+
+
contextAttributes
+
+

Można użyć kilku własności kontekstu przy tworzeniu kontekstu renderowania, dla przykładu: 

+ + 
const gl = canvas.getContext('webgl', {
+  antialias: false,
+  depth: false
+});
+
+
Własności kontekstu 2d: +
    +
  • alpha: Boolean wskazujacy czy canvas zawiera kanał alpha. Jeśli ustawione na false, przeglądarka wie, że tło zawsze jest nieprzeźroczyste, co może przyspieszyć rysowanie przeźroczystych treści i obrazków.  
    • +
  • {{non-standard_inline}} (Gecko only) willReadFrequently: Boolean wskazujący czy wiele operacji read-back zostało zaplanowanych. Spowoduje wymuszenie użycia oprogramowania (zamiast przyśpieszenia sprzętowego) 2D canvas i może pomóc w oszczędności pamięci przy częstym wywoływaniu {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Opcja ta jest dostepna tylko jeśli flaga gfx.canvas.willReadFrequently.enable jest ustawiona na true (która, domyślnie, dotyczy tylko B2G/Firefox OS).
    • +
  • {{non-standard_inline}} (Blink only) storage: String wskazujacy jaka pamięć jest używana (domyślnie jest to "stała" ).
    • +
+ Własności kontekstu WebGL: + +
    +
  • alpha: Boolean wskazujacy czy canvas zawiera bufor alpha.
    • +
  • depth: Boolean wskazujący czy bufor rysunku posiada bufor głębi o wartości co przynajmniej 16 bitów.
    • +
  • stencil: Boolean wskazujący czy bufor rysunku posiada bufor matrycy o wartości przynajmniej 8 bitów. 
    • +
  • antialias: Boolean wskazujący czy używany ma być anti-aliasing.
    • +
  • premultipliedAlpha: Boolean wskazujący czy projektant strony założył, że  bufor rysunku zawiera kolory ze wstepnie pomnożoną alfą.
    • +
  • preserveDrawingBuffer: Jeśli ustawiona na true, bufory nie zostaną wyczyszczone i zachowają swoje wartości, dopóki nie zostaną wyczyszczone lub nadpisane przez autora.
    • +
  • failIfMajorPerformanceCaveat: Boolean wskazujący czy kontekst będzie tworzony, jeśli wydajność systemu jest niska.
    • +
+
+
+ +

Wartości zwrotne

+ +

{{domxref("RenderingContext")}} jest też

+ + + +

Jeśli contextType nie może dopasować możliwych kontekstów rysowania, null zostanie zwrócony.

+ +

Przykłady

+ +

Wykorzystując element {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas" width="300" height="300"></canvas>
+
+ +

Kontekst 2d uzyskać można za pomocą kodu: 

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+
+ +

Tworzy to kontekst renderowania 2D, po którym można rysować.

+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML WHATWG')}}Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5 W3C')}}Snapshot {{SpecName('HTML WHATWG')}} zawiera początkową definicje.
+ +

Zgodność przeglądarek

+ + + +

{{Compat("api.HTMLCanvasElement.getContext")}}

+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlcanvaselement/height/index.html b/files/pl/web/api/htmlcanvaselement/height/index.html new file mode 100644 index 0000000000..0ff266ff84 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/height/index.html @@ -0,0 +1,79 @@ +--- +title: HTMLCanvasElement.height +slug: Web/API/HTMLCanvasElement/height +translation_of: Web/API/HTMLCanvasElement/height +--- +
+
+
{{APIRef("Canvas API")}}
+ +
 
+ +
Własność HTMLCanvasElement.height wyrażana jest w dodatniej liczbie całkowitej odpowiada za atrybut height elemetu HTML <canvas> i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość 150.
+ +
 
+ +
To jedna z dwóch własności kontrolujących wielkość {{HTMLElement("canvas")}}, druga z nich to {{domxref("HTMLCanvasElement.width")}}.
+
+
+ +

Składnia

+ +
var pxl = canvas.height;
+canvas.height = pxl;
+
+ +

Przykłady

+ +

Biorąc pod uwagę element {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas" width="300" height="300"></canvas>
+
+ +

Można sprawdzić jego wysokość za pomocą kodu:

+ +
var canvas = document.getElementById('canvas');
+console.log(canvas.height); // 300
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML WHATWG')}} +

Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}

+
{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5 W3C')}}Snapshot {{SpecName('HTML WHATWG')}} zawierający początkową definicje.
+ +

Zgodność przeglądarek

+ + + +

{{Compat("api.HTMLCanvasElement.height")}}

+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlcanvaselement/index.html b/files/pl/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..21deee3bf0 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/index.html @@ -0,0 +1,97 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+
+ +

Interfejs HTMLCanvasElement zapewnia własności i metody pozwalające na manipulację wygladem i prezentacją elementów canvas. Dodatkowo HTMLCanvasElement dziedziczy własności i metody interfejsu HTMLElement.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Własności

+ +

Własności dziedziczone są od rodzica, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Wyrażany w dodatniej liczbie całkowitej odpowiada za atrybut {{htmlattrxref("height", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość 150.
+
{{domxref("HTMLCanvasElement.width")}}
+
Wyrażany w dodatniej liczbie całkowitej odpowiada za atrybut {{htmlattrxref("width", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowany w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość 300.
+
+ +

Metody

+ +

Metody dziedziczone są od rodzica, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Zwraca {{domxref("CanvasCaptureMediaStream")}}, który jest wideo w czasie rzeczywistym z powierzchni elementu {{HTMLElement("canvas")}}.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Zwraca pole robocze elementu {{HTMLElement("canvas")}}, lub null jeśli kontekst nie jest wspierany. Pole robocze pozwala na rysowanie na {{HTMLElement("canvas")}}. Wywołanie getContext z atrybutem "2d" zwraca obiekt {{domxref("CanvasRenderingContext2D")}}, natomiast wywołanie z "webgl" (lub "experimental-webgl") zwróci obiekt {{domxref("WebGLRenderingContext")}}. Ten kontekst jest dostepny tylko w przeglądarkach obsługujących WebGL.
+
+ +
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Zwraca data-URL reprezentujacy obraz w formacie określonym przez parametr type (domyślnie png). Zwracany obraz jest w rozdzielczości 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Tworzy obiekt {{domxref("Blob")}} reprezentujący obraz zawierający się w {{HTMLElement("canvas")}}; ten plik może być buforowany z dysku lub przechowywany w pamięci wedle uznania user agent.
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
Przenosi kontrolę do obiektu {{domxref ("OffscreenCanvas")}}, w głównym wątku lub w module roboczym.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Zwraca obiekt {{domxref("File")}} reprezentujący obraz zawarty w {{HTMLElement("canvas")}}; plik oparty jest na pamięci, posiada określoną nazwę. Jeśli typ nie został okreslony, domyslnie jest to image/png.
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}} +

Dodano metodę captureStream().

+
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}} +

Metoda getContext() zwraca teraz {{domxref("RenderingContext")}} zamiast obiektu nieprzeźroczystego

+ +

Dodano metodę transferControlToOffscreen()

+
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Definicja początkowa.
+ +

Zgodność przegladarek

+ +
+ + +

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

+
+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlcanvaselement/width/index.html b/files/pl/web/api/htmlcanvaselement/width/index.html new file mode 100644 index 0000000000..3be0eabbf8 --- /dev/null +++ b/files/pl/web/api/htmlcanvaselement/width/index.html @@ -0,0 +1,79 @@ +--- +title: HTMLCanvasElement.width +slug: Web/API/HTMLCanvasElement/width +translation_of: Web/API/HTMLCanvasElement/width +--- +
+
+
{{APIRef("Canvas API")}}
+ +
 
+ +
+

Własność HTMLCanvasElement.width wyrażana jest w dodatniej liczbie całkowitej odpowiada za atrybut {{htmlattrxref("width", "canvas")}} elemetu HTML {{HTMLElement("canvas")}} i jest interpretowana w pikselach CSS. Jeśli atrybut nie został określony, lub została przypisana do niego nieprawidłowa wartość, np. negatywna, zostanie użyta domyślna wartość 300.

+ +

To jedna z dwóch własności kontrolujących wielkość {{HTMLElement("canvas")}}, druga z nich to {{domxref("HTMLCanvasElement.height")}}.

+
+
+
+ +

Składnia

+ +
var pxl = canvas.width;
+canvas.width = pxl;
+
+ +

Przykłady

+ +

Wykorzystując element {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas" width="300" height="300"></canvas>
+
+ +

You can get the width of the canvas with the following code:

+ +

Informacje o szerokości {{HTMLElement("canvas")}} można uzyskać za pomocą kodu:

+ +
var canvas = document.getElementById('canvas');
+console.log(canvas.width); // 300
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML WHATWG')}}Brak zmian od ostatniego snapshota, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML5 W3C')}}Snapshot {{SpecName('HTML WHATWG')}} zawierający początkową definicje.
+ +

Zgodność przegladarek

+ + + +

{{Compat("api.HTMLCanvasElement.width")}}

+ +

Zobacz też

+ + diff --git a/files/pl/web/api/htmlelement/dataset/index.html b/files/pl/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..fac7ec119f --- /dev/null +++ b/files/pl/web/api/htmlelement/dataset/index.html @@ -0,0 +1,134 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +
{{ APIRef("HTML DOM") }}
+ +

Właściwość dataset interfejsu {{domxref("HTMLElement")}} pozwala na odczyt/zapis niestandardowcyh atrybutów (data-*) elementu. Dostęp ten jest możliwy w HTMLu jak i w DOMie.  It is a map of DOMString, one entry for each custom data attribute. Zauważ że właściwość dataset można odczytać, ale nie zmieniać bezpośrednio. Zamiast tego, wszystkie zapisy muszą być wykonywane na pojedynczych polach dataset, które odpowiadają atrybutom danych. Note also that an HTML data-attribute and its corresponding DOM dataset.property do not share the same name, but they are always similar:

+ + + +

In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article Using data attributes.

+ +

Zmiana nazw

+ +

dash-style to camelCase: A custom data attribute name is transformed to a key for the {{ domxref("DOMStringMap") }} entry with the following rules

+ + + +

camelCase to dash-style: The opposite transformation, that maps a key to an attribute name, uses the following rules:

+ + + +

The restriction in the rules above ensures that the two transformations are the inverse one of the other.

+ +

For example, the attribute named data-abc-def corresponds to the key abcDef.

+ + + +

Dostęp do wartości

+ + + + + +

Ustawianie wartości

+ + + +

Składnia

+ + + +

Przykłady

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
const el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// set the data attribute
+el.dataset.dateOfBirth = '1960-10-03';
+// Result: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Result: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Result: 'someDataAttr' in el.dataset === true
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.dataset")}}

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/htmlelement/index.html b/files/pl/web/api/htmlelement/index.html new file mode 100644 index 0000000000..d27d11fd7b --- /dev/null +++ b/files/pl/web/api/htmlelement/index.html @@ -0,0 +1,409 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - NeedsMobileBrowserCompatibility + - NeedsNewLayout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +
 
+ +

The HTMLElement interface represents any HTML element. Some elements directly implement this interface, others implement it via an interface that inherits it.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.

+ +
+
{{domxref("HTMLElement.accessKey")}}
+
Is a {{domxref("DOMString")}} representing the access key assigned to the element.
+
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the element's assigned access key.
+
{{domxref("HTMLElement.contentEditable")}}
+
Is a {{domxref("DOMString")}}, where a value of "true" means the element is editable and a value of "false" means it isn't.
+
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.
+
{{domxref("HTMLElement.contextMenu")}}
+
Is an {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be null
+
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
+
Returns a {{domxref("DOMStringMap")}} that allows access to read and write the element custom data attributes (data-*) .
+
{{domxref("HTMLElement.dir")}}
+
Is a {{domxref("DOMString")}}, reflecting the dir global attribute, representing the directionality of the element. Possible values are "ltr", "rtl", and "auto".
+
{{domxref("HTMLElement.draggable")}}
+
Is a {{jsxref("Boolean")}} indicating if the element can be dragged.
+
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
+
Returns a {{domxref("DOMSettableTokenList")}} reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation.
+
{{domxref("HTMLElement.hidden")}}
+
Is a {{jsxref("Boolean")}} indicating if the element is hidden or not.
+
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}}…
+
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}}…
+
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
+
Returns an {{jsxref("Object")}}…
+
{{domxref("HTMLElement.lang")}}
+
Is a {{domxref("DOMString")}} representing the language of an element's attributes, text, and element contents.
+
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the height of an element, relative to the layout.
+
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's left border to its offsetParent's left border.
+
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
+
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's top border to its offsetParent's top border.
+
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the width of an element, relative to the layout.
+
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("HTMLPropertiesCollection")}}…
+
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
+
Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it hasn't an effect on all of them.
+
{{domxref("HTMLElement.style")}}
+
Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
+
{{domxref("HTMLElement.tabIndex")}}
+
Is a long representing the position of the element in the tabbing order.
+
{{domxref("HTMLElement.title")}}
+
Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
+
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}}
+
+ +

Event handlers

+ +

Most events properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implemented by HTMLElement. A few more are specific to HTMLElement.

+ +
+
{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}
+
Returns the event handling code for the copy event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}
+
Returns the event handling code for the cut event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
+
Returns the event handling code for the paste event ({{bug("280959")}}).
+
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchstart")}} event.
+
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchend")}} event.
+
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchmove")}} event.
+
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchenter")}} event.
+
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchleave")}} event.
+
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchcancel")}} event.
+
+ +

Methods

+ +

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

+ +
+
{{domxref("HTMLElement.blur()")}}
+
Removes keyboard focus from the currently focused element.
+
{{domxref("HTMLElement.click()")}}
+
Sends a mouse click event to the element.
+
{{domxref("HTMLElement.focus()")}}
+
Makes the element the current keyboard focus.
+
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
+
Makes the spell checker runs on the element.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
+ Added the following method: forceSpellcheck().
+ Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
+ Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}17.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.10)
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.24)
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}9.0{{CompatUnknown}}11.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.style", "style")}}{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}8.01111.106
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}12.0{{CompatNo}}
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatNo}}11.60
+ (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoDesktop("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support +

{{CompatGeckoMobile("1.0")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoMobile("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/htmlformelement/acceptcharset/index.html b/files/pl/web/api/htmlformelement/acceptcharset/index.html new file mode 100644 index 0000000000..c71b52269f --- /dev/null +++ b/files/pl/web/api/htmlformelement/acceptcharset/index.html @@ -0,0 +1,33 @@ +--- +title: HTMLFormElement.acceptCharset +slug: Web/API/HTMLFormElement/acceptCharset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/acceptCharset +--- +

 

+ +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

acceptCharset Zwraca listę obsługiwanych przez formularz zestawów znaków dla danego elementu FORM. Lista ta będzie oddzielona przecinkiem lub spacją.

+ +

Składnia

+ +
string = form.acceptCharset;
+
+ +

Przykład

+ +
inputs = document.forms["myform"].acceptCharset
+
+ +

Specyfikacja

+ +

DOM Level 2 HTML: acceptCharset

+ +

{{ languages( { "en": "en/DOM/form.acceptCharset" } ) }}

diff --git a/files/pl/web/api/htmlformelement/action/index.html b/files/pl/web/api/htmlformelement/action/index.html new file mode 100644 index 0000000000..ba03220cd0 --- /dev/null +++ b/files/pl/web/api/htmlformelement/action/index.html @@ -0,0 +1,36 @@ +--- +title: HTMLFormElement.action +slug: Web/API/HTMLFormElement/action +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/action +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

action pobiera/ustawia akcję dla elementu FORM.

+ +

Składnia

+ +
string = form.action
+form.action =
+string
+
+ +

Przykład

+ +

form.action = "/cgi-bin/publish";

+ +

Uwagi

+ +

Akcja w formularzu jest programem, który jest wykonywany na serwerze kiedy formularz zostanie wysłany. Ta własność może być odzyskiwana lub ustawiana.

+ +

Specyfikacja

+ +

DOM Level 2 HTML: action

+ +

{{ languages( { "ja": "ja/DOM/form.action", "en": "en/DOM/form.action" } ) }}

diff --git a/files/pl/web/api/htmlformelement/elements/index.html b/files/pl/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..929f7c7640 --- /dev/null +++ b/files/pl/web/api/htmlformelement/elements/index.html @@ -0,0 +1,36 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/elements +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

elements zwraca kolekcję HTMLCollection wszystkich kontrolek zawartych w elemencie FORM.

+ +

Do konkretnego elementu możesz odnosić się poprzez indeks lub za pomocą nazwy (name) bądź id tego elementu.

+ +

Składnia

+ +
listaWęzłów =
+HTMLFormElement.elements
+
+ +

Przykłady

+ +
var inputs = document.getElementById("form1").elements;
+var inputByIndex = inputs[2];
+var inputByName = inputs["login"];
+
+ +

Specyfikacja

+ +

Specyfikacja W3C DOM 2 HTML: elements

+ +

{{ languages( { "en": "en/DOM/form.elements", "ja": "ja/DOM/form.elements" } ) }}

diff --git a/files/pl/web/api/htmlformelement/encoding/index.html b/files/pl/web/api/htmlformelement/encoding/index.html new file mode 100644 index 0000000000..aabd43e66f --- /dev/null +++ b/files/pl/web/api/htmlformelement/encoding/index.html @@ -0,0 +1,15 @@ +--- +title: HTMLFormElement.encoding +slug: Web/API/HTMLFormElement/encoding +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/encoding +--- +

 

+ +

{{ ApiRef() }} encoding jest alternatywną nazwą dla elementu enctype w obiekcie DOM FormElement.

+ +

{{ languages( { "en": "en/DOM/form.encoding" } ) }}

diff --git a/files/pl/web/api/htmlformelement/enctype/index.html b/files/pl/web/api/htmlformelement/enctype/index.html new file mode 100644 index 0000000000..2a90fe13a9 --- /dev/null +++ b/files/pl/web/api/htmlformelement/enctype/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLFormElement.enctype +slug: Web/API/HTMLFormElement/enctype +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/enctype +--- +

 

+ +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

enctype pobiera/ustawia typ zawartości elementu FORM.

+ +

Składnia

+ +
string = form.enctype
+form.enctype =
+string
+
+ +

Przykład

+ +
form.enctype = "application/x-www-form-urlencoded";
+
+ +

Uwagi

+ +

Typem kodowania jest ogólnie "application/x-www-form-urlencoded".

+ +

Specyfikacja

+ +

DOM Level 2 HTML: enctype

+ +

{{ languages( { "en": "en/DOM/form.enctype" } ) }}

diff --git a/files/pl/web/api/htmlformelement/index.html b/files/pl/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..3c0d1ade95 --- /dev/null +++ b/files/pl/web/api/htmlformelement/index.html @@ -0,0 +1,143 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement +--- +

{{ ApiRef() }}

+ +

Interfejs elementu HTML FORM

+ +

Elementy FORM mają wszystkie właściwości i metody innych elementów HTML, tak jak opisano w rozdziale o elementach. Jednocześnie mają one bardziej wyspecjalizowany interfejs HTMLFormElement.

+ +

Interfejs ten dostarcza metod do tworzenia i modyfikacji elementów FORM przy użyciu DOM. Poniższy przykład przedstawia, jak utworzyć nowy formularz, zmienić jego atrybuty i wysłać go.

+ +
// Utwórz formularz
+var f = document.createElement("form");
+
+// Dodaj do zawartości dokumentu
+document.body.appendChild(f);
+
+// Ustaw atrybuty oznaczające akcję i metodę wysyłania
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Wyślij formularz
+f.submit();
+
+ +

Z kolei poniższy dokument HTML przedstawia jak wydobyć informacje z formularza i nadać mu pewne atrybuty.

+ +
<title>Przykład formularza</title>
+<script type="text/javascript">
+  function getFormInfo() {
+    var info;
+
+    // Znajdź referencję do formularza poprzez kolekcję forms
+    var f = document.forms["formA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.elements + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+
+  // Referencja do formularza jest przekazywana z atrybutu
+  // onclick przycisku za pomocą 'this.form'
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+
+<h1>Przykład formularza</h1>
+
+<form name="formA" id="formA"
+ action="/cgi-bin/test" method="POST">
+ <p>Kliknij "info" by zobaczyć informację o formularzu,
+ "zmień" by zmienić ustawienia, a następnie ponownie "info"
+ by zobaczyć efekt zmian.</p>
+ <p>
+  <input type="button" value="info"
+   onclick="getFormInfo();">
+  <input type="button" value="zmień"
+   onclick="setFormInfo(this.form);">
+  <input type="reset" value="zresetuj">
+  <br>
+  <textarea id="tex" style="height:15em; width:20em">
+ </p>
+</form>
+
+ +

Własności

+ +
+
form.elements
+
Zwraca kolekcję wszystkich kontrolek zawartych w elemencie FORM.
+
+ +
+
form.length
+
Zwraca ilość kontrolek w elemencie FORM.
+
+ +
+
form.name
+
Zwraca ciąg z nazwą bieżącego elementu FORM.
+
+ +
+
form.acceptCharset
+
Zwraca listę obsługiwanych przez formularz zestawów znaków.
+
+ +
+
form.action
+
Pobiera/ustawia akcję dla elementu FORM.
+
+ +
+
form.enctype
+
Pobiera/ustawia typ zawartości wysyłanej przez formularz.
+
+ +
+
form.encoding
+
Pobiera/ustawia typ zawartości wysyłanej przez formularz.
+
+ +
+
form.method
+
Pobiera/ustawia metodę HTTP używaną do wysłania formularza.
+
+ +
+
form.target
+
Pobiera/ustawia okno docelowe akcji formularza (np. ramka, w której zostanie wyrenderowana zwrócona strona).
+
+ +

Metody

+ +
+
form.submit
+
Wysyła formularz
+
+ +
+
form.reset
+
Przywraca formularz do jego stanu początkowego
+
+ +
 
+ +

{{ languages( { "en": "en/DOM/form", "es": "es/DOM/form", "fr": "fr/DOM/form", "ja": "ja/DOM/form" } ) }}

diff --git a/files/pl/web/api/htmlformelement/length/index.html b/files/pl/web/api/htmlformelement/length/index.html new file mode 100644 index 0000000000..36c5c63349 --- /dev/null +++ b/files/pl/web/api/htmlformelement/length/index.html @@ -0,0 +1,33 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/length +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

length zwraca liczbę kontrolek w elemencie FORM.

+ +

Składnia

+ +
integer = form.length
+
+ +

Przykład

+ +
if (document.getElementById("form1").length > 1) {
+  // więcej niż jedena kontrolka formularza jest tu
+}
+
+ +

Specyfikacja

+ +

DOM Level 2: length

+ +

{{ languages( { "ja": "ja/DOM/form.length", "en": "en/DOM/form.length" } ) }}

diff --git a/files/pl/web/api/htmlformelement/method/index.html b/files/pl/web/api/htmlformelement/method/index.html new file mode 100644 index 0000000000..d1829b02c6 --- /dev/null +++ b/files/pl/web/api/htmlformelement/method/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.method +slug: Web/API/HTMLFormElement/method +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/method +--- +

 

+ +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

method pobiera/ustawia metodę HTTP używaną do wysłania formularza.

+ +

Składnia

+ +
string = form.method
+form.method =
+string
+
+ +

Przykład

+ +
document.forms["myform"].method = "post";
+
+ +

Specyfikacja

+ +

DOM Level 2 HTML: method

+ +

{{ languages( { "ja": "ja/DOM/form.method", "en": "en/DOM/form.method" } ) }}

diff --git a/files/pl/web/api/htmlformelement/name/index.html b/files/pl/web/api/htmlformelement/name/index.html new file mode 100644 index 0000000000..673ab8f847 --- /dev/null +++ b/files/pl/web/api/htmlformelement/name/index.html @@ -0,0 +1,44 @@ +--- +title: HTMLFormElement.name +slug: Web/API/HTMLFormElement/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/name +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

name zwraca nazwą bieżącego elementu FORM jako łańcuch znaków.

+ +

Składnia

+ +
string = form.name
+form.name =
+string
+
+ +

Przykład

+ +
form1 = document.getElementById("form1").name;
+if (form1 != document.form.form1) {
+   // przeglądarka nie obsługuje tego odniesienia do formularza
+}
+
+ +

Uwagi

+ +

Uwaga, ta własność jest do odczytu/zapisu, która znaczy, że możemy zmienić lub ustawić nazwę formularza.

+ +

Jeśli Twój FORM zawiera element nazwany "nazwany_element", następnie ten element przesłania własność form.name, więc nie możesz uzyskać do niego dostępu.

+ +

Internet Explorer (IE) nie pozwala nazwie tworzonego elementu używać createElement() będącej ustawieniem lub modyfikacją używającą własność name property.

+ +

Specyfikacja

+ +

DOM Level 2 HTML: name

+ +

{{ languages( { "en": "en/DOM/form.name" } ) }}

diff --git a/files/pl/web/api/htmlformelement/reset/index.html b/files/pl/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..919b982cae --- /dev/null +++ b/files/pl/web/api/htmlformelement/reset/index.html @@ -0,0 +1,37 @@ +--- +title: HTMLFormElement.reset +slug: Web/API/HTMLFormElement/reset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/reset +--- +

{{ APIRef }}

+ +

Podsumowanie

+ +

reset przywraca formularz do jego stanu początkowego.

+ +

Składnia

+ +
HTMLFormElement.reset()
+
+ +

Przykład

+ +
document.forms["myform"].reset();
+
+ +

Uwagi

+ +

Metoda ta robi to samo, co kliknięcie przycisku Wyczyść w formularzu.

+ +

Jeśli kontrolka formularza (jak np. przycisk Wyczyść) posiada nazwę lub id to przycisk Wyczyść będzie krył czyszczenie formularza.

+ +

Specyfikacja

+ +

DOM Level 2 HTML: reset

+ +

{{ languages( { "en": "en/DOM/form.reset" } ) }}

diff --git a/files/pl/web/api/htmlformelement/submit/index.html b/files/pl/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..078d02d4f5 --- /dev/null +++ b/files/pl/web/api/htmlformelement/submit/index.html @@ -0,0 +1,37 @@ +--- +title: HTMLFormElement.submit +slug: Web/API/HTMLFormElement/submit +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/submit +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

submit wysyła formularz.

+ +

Składnia

+ +
HTMLFormElement.submit()
+
+ +

Przykład

+ +
document.forms["myform"].submit()
+
+ +

Uwagi

+ +

Ta metoda działa tak samo jak naciśnięcie przycisku 'Wyślij' w formularzu.

+ +

Jeśli kontrolka formularza (taka jak przycisk Wyślij) posiada nazwę lub id zmiennej submit to będzie ona maskowała metodę submit formularza.

+ +

Specyfikacja

+ +

DOM Level 2 HTML: submit

+ +

{{ languages( { "ja": "ja/DOM/form.submit", "en": "en/DOM/form.submit" } ) }}

diff --git a/files/pl/web/api/htmlformelement/target/index.html b/files/pl/web/api/htmlformelement/target/index.html new file mode 100644 index 0000000000..f52fbe974b --- /dev/null +++ b/files/pl/web/api/htmlformelement/target/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.target +slug: Web/API/HTMLFormElement/target +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLFormElement/target +--- +

 

+ +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

target pobiera/ustawia element docelowy działania (np., w której ramce ma być wczytana zawartość strony).

+ +

Składnia

+ +
string = form.target
+form.target =
+string
+
+ +

Przykład

+ +
myForm.target = document.frames[1].name;
+
+ +

Specyfikacja

+ +

DOM Level 2 HTML: target

+ +

{{ languages( { "en": "en/DOM/form.target" } ) }}

diff --git a/files/pl/web/api/htmliframeelement/index.html b/files/pl/web/api/htmliframeelement/index.html new file mode 100644 index 0000000000..eaf5bb4fcb --- /dev/null +++ b/files/pl/web/api/htmliframeelement/index.html @@ -0,0 +1,288 @@ +--- +title: HTMLIFrameElement +slug: Web/API/HTMLIFrameElement +tags: + - API + - HTML DOM + - Interfejs + - Potrzebny przegląd + - Referencja +translation_of: Web/API/HTMLIFrameElement +--- +
{{APIRef("HTML DOM")}}
+ +

Interfejs HTMLIFrameElement dostarcza specjalne właściwości i metody (oprócz tych dziedziczonych po {{domxref("HTMLElement")}}) do manipulowania rozkładem i prezentacją wewnętrznych elementów ramki.

+ +

Właściwości

+ +

Dziedziczy właściwości od rodzica, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}
+
{{domxref("DOMString")}} określający zawijanie ramki w stosunku do otaczającego kontekstu.
+
{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}
+
{{domxref("Boolean")}} określa, czy ramka ma zostać umieszczona w trybie pełnoekranowym. Zobacz Używanie trybu pełnoekranowego dla szczegółów.
+
{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}
+
Zwraca obiekt {{domxref("Document")}}, reprezentujący aktualny kontekst przeglądania w ramce.
+
{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}
+
Zwraca obiekt {{domxref("WindowProxy")}}, referencję do okna przeglądarki w ramce.
+
{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}
+
{{domxref("DOMString")}} określający, czy tworzyć obramowania między ramkami.
+
{{domxref("HTMLIFrameElement.height")}}
+
{{domxref("DOMString")}} reprezentujący atrybut {{htmlattrxref("height", "iframe")}} oznaczający wysokość ramki.
+
{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}
+
{{domxref("DOMString")}} zawierający URI długiego opisu ramki.
+
{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}
+
{{domxref("DOMString")}} oznaczający wysokość marginesu.
+
{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}
+
{{domxref("DOMString")}} oznaczający szerokość marginesu.
+
{{domxref("HTMLIFrameElement.name")}}
+
{{domxref("DOMString")}} oznaczający atrybut {{htmlattrxref("name", "iframe")}}, zawierający nazwę ramki.
+
{{domxref("HTMLIFrameElement.sandbox")}}
+
{{domxref("DOMSettableTokenList")}} oznaczający atrybut {{htmlattrxref("sandbox", "iframe")}}, oznaczając dodatkowe ograniczenia na zachowanie zagnieżdżonej zawartości.
+
{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}
+
{{domxref("DOMString")}}, od którego zależy, czy przeglądarka ma dostarczyć paski przewijania.
+
{{domxref("HTMLIFrameElement.seamless")}} {{experimental_inline}}
+
{{domxref("Boolean")}}, odzwierciedlający atrybut {{htmlattrxref("seamless", "iframe")}} , oznaczający, że ramkę należy wyświetlać bezszwowo wewnątrz dokumentu rodzica.
+
{{domxref("HTMLIFrameElement.src")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "iframe")}} HTML attribute, containing the address of the content to be embedded.
+
{{domxref("HTMLIFrameElement.srcdoc")}}
+
Is a {{domxref("DOMString")}} that represents the content to display in the frame.
+
{{domxref("HTMLIFrameElement.width")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("width", "iframe")}} HTML attribute, indicating the width of the frame.
+
+ +

Metody

+ +

Dziedziczy właściwości od rodzica, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLIFrameElement.setNfcFocus")}}
+
Część Browser API systemu Firefox OS, ustala, czy element {{htmlelement("iframe")}} może otrzymać zdarzenie NFC.
+
+ +

Historia specyfikacji

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusOpis
{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML WHATWG')}}Dodano właściwość allowFullscreen.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML5 W3C')}}Następujące właściwości uznano za przestarzałe: scrolling, marginWidth, marginHeight, longDesc, frameBorder, and align.
+ Te zostały dodane: srcdoc, sandbox, seamless, and contentWindow.
{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM2 HTML')}}Dodano właściwość contentDocument.
{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM1')}}Początkowa definicja.
+ +

Kompatybliność przeglądarek

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłaściwośćChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support(Tak)1.0 (1.7 lub wcześniejsza)(Tak)(Tak)(Tak)
srcdoc4{{CompatGeckoDesktop(25)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
sandbox4{{CompatGeckoDesktop(17)}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
seamless {{experimental_inline}}4Nieobsługiwane{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contentDocument(Tak)(Tak)8.0 (dla wcześniejszych wersji używaj HTMLIFrameElement.contentWindow.document)(Tak)(Tak)
contentWindow{{CompatUnknown}}{{CompatUnknown}}(Tak){{CompatUnknown}}{{CompatUnknown}}
allowFullScreen {{experimental_inline}}17 {{property_prefix("-webkit")}}
+ Tylko codzienne wydania testowe		{{compatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}
+ {{compatGeckoDesktop(18.0)}}		NieobsługiwaneNieobsługiwaneNieobsługiwane
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support(Tak){{CompatGeckoMobile(1.0)}}(Tak)(Tak)(Tak)
srcdoc4{{CompatGeckoMobile(25)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
sandbox4{{CompatGeckoMobile(17)}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
seamless {{experimental_inline}}4{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contentDocument(Tak)(Tak){{CompatUnknown}}(Tak)(Tak)
contentWindow{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
allowFullScreen {{experimental_inline}}17 {{property_prefix("-webkit")}}
+ Tylko codzienne wydania testowe		{{compatGeckoMobile(9.0)}} {{property_prefix("-moz")}}
+ {{compatGeckoMobile(18.0)}}		NieobsługiwaneNieobsługiwaneNieobsługiwane
+
+ +

[1] Wcześniej, sandbox był obiektem {{domxref("DOMString")}} a nie {{domxref("DOMSettableTokenList")}}. Naprawiono to w Gecko 29.0 {{geckoRelease(29)}}) ({{bug(845067)}}). Inne przeglądarki mogą wciąż implementować to jako DOMString ponieważ  to późna zmiana w speyfikacji.

+ +

Uwagi do Firefox OS

+ +

Firefox OS rozszerza HTMLIFrameElement o obsługę elementów iframe przeglądarki. Te metody stworzono dla uprzywilejowanych aplikacji które chcą zaimplementować przeglądarkę jak aplikację na urządzenia z Firefox OS.Wtedy HTMLIFrameElement dziedziczy też od interfejsu {{domxref("EventTarget")}}. To learn how to implement such applications, see the Używanie API przeglądarki article.

+ +
+
{{domxref("HTMLIFrameElement.setVisible()","HTMLIFrameElement.setVisible(visible)")}}
+
Pozwala bezpośrednio zmienić widoczność ramek.
+
{{domxref("HTMLIFrameElement.getVisible()","HTMLIFrameElement.getVisible()")}}
+
Zwraca obecny stan widoczności ramki obiektem {{domxref("DOMRequest")}}.
+
{{domxref("HTMLIFrameElement.sendMouseEvent()","HTMLIFrameElement.sendMouseEvent(type, x, y, button, clickCount, modifiers)")}}
+
Wysyła zdarzenie myszy do przeglądarki.
+
{{domxref("HTMLIFrameElement.sendTouchEvent()","HTMLIFrameElement.sendTouchEvent(type, identifiers, touchesX, touchesY,radiisX, radiisY, rotationAngles, forces,count, modifiers)")}}
+
Wysyła zdarzenie dotknięcia do przeglądarki.
+
{{domxref("HTMLIFrameElement.goBack()","HTMLIFrameElement.goBack()")}}
+
Cofa przeglądarkę o 1 stronę w historii.
+
{{domxref("HTMLIFrameElement.goForward()","HTMLIFrameElement.goForward()")}}
+
Przechodzi dalej o 1 stronę w historii.
+
{{domxref("HTMLIFrameElement.reload()","HTMLIFrameElement.reload()")}}
+
Odświeża (ładuje ponownie) stronę internetową w przeglądarce.
+
{{domxref("HTMLIFrameElement.stop()","HTMLIFrameElement.stop()")}}
+
Zatrzymuje ładowanie zawartości ramki.
+
{{domxref("HTMLIFrameElement.purgeHistory()","HTMLIFrameElement.purgeHistory()")}}
+
Pozwala wyczyścić historię przeglądania.
+
{{domxref("HTMLIFrameElement.getScreenshot()","HTMLIFrameElement.getScreenshot(maxWidth, maxHeight)")}}
+
Robi zrzut ekranu, skalując do go rozmiaru maxWidth na maxHeight pikseli. Zwraca obiekt {{domxref("DOMRequest")}}.
+
{{domxref("HTMLIFrameElement.addNextPaintListener()","HTMLIFrameElement.addNextPaintListener()")}}
+
Dodaje odbiorcę zdarzenia powiadomianego, gdy ramka jest gotowa do odmalowania po raz pierwszy (Powiadamia się go, gdy pierwsze zdarzenie {{event("MozAfterPaint")}} jest odbierane z ramki.)
+
{{domxref("HTMLIFrameElement.removeNextPaintListener()","HTMLIFrameElement.removeNextPaintListener()")}}
+
Usuwa odbiorcę dodanego przez poprzednią funkcję.
+
{{domxref("HTMLIFrameElement.getCanGoBack()","HTMLIFrameElement.getCanGoBack()")}}
+
Zwraca obiekt {{domxref("DOMRequest")}} którego składowa result oznacza możliwość powrotu.
+
{{domxref("HTMLIFrameElement.getCanGoForward()","HTMLIFrameElement.getCanGoForward()")}}
+
Zwraca obiekt {{domxref("DOMRequest")}} którego składowa result oznacza możliwość powrotu.
+
+ +

Zobacz też

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

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

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

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

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

Methods

+ +

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

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

Events

+ +

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

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

Example

+ +

Get information about the selected option

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

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

+ +

Specifications

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

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/pl/web/api/htmltableelement/caption/index.html b/files/pl/web/api/htmltableelement/caption/index.html new file mode 100644 index 0000000000..971efe057b --- /dev/null +++ b/files/pl/web/api/htmltableelement/caption/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLTableElement.caption +slug: Web/API/HTMLTableElement/caption +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/caption +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

caption zwraca podpis tabeli.

+ +

Składnia

+ +
string = table.caption
+
+ +

Przykład

+ +
if (table.caption) {
+  // zrób coś z podpisem
+}
+
+ +

Uwagi

+ +

Własność ta zwraca void dla tabel bez elementu caption.

+ +

Specyfikacja

+ +

caption

+ +

Interface HTMLTableCaptionElement

+ +

{{ languages( { "en": "en/DOM/table.caption", "fr": "fr/DOM/table.caption" } ) }}

diff --git a/files/pl/web/api/htmltableelement/index.html b/files/pl/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..d5d5a838ca --- /dev/null +++ b/files/pl/web/api/htmltableelement/index.html @@ -0,0 +1,72 @@ +--- +title: HTMLTableElement +slug: Web/API/HTMLTableElement +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement +--- +
{{ ApiRef() }}
+ +

Interfejs elementu HTML Table

+ +

Obiekt table pozwala na dostęp do interfejsu HTMLTableElement, który udostępnia specjalne własności i metody (będące poza zwykłym interfejsem obiektu element; własności i metody elementu dostępne są poprzez dziedziczenie) do ustawiania układu i wyglądu tabel w języku HTML.

+ +

Własności

+ +
+
{{domxref("HTMLTableElement.caption")}}
+
opis tabeli.
+
{{domxref("HTMLTableElement.tHead")}}
+
nagłówek tabeli.
+
{{domxref("HTMLTableElement.tFoot")}}
+
stopka tabeli.
+
{{domxref("HTMLTableElement.rows")}} {{readonlyInline}}
+
rows - liczba wierszy tabeli.
+
{{domxref("HTMLTableElement.tBodies")}} {{readonlyInline}}
+
'ciała' tabeli (tbody).
+
+ +
+
{{domxref("HTMLTableElement.align")}} {{obsolete_inline}}
+
ustawia/pobiera wyrównanie tabeli.
+
{{domxref("HTMLTableElement.bgColor")}} {{obsolete_inline}}
+
ustawia/pobiera kolor tła tabeli.
+
{{domxref("HTMLTableElement.border")}} {{obsolete_inline}}
+
ustawia/pobiera obramowanie tabeli.
+
{{domxref("HTMLTableElement.cellPadding")}} {{obsolete_inline}}
+
ustawia/pobiera dopełnienie komórki.
+
{{domxref("HTMLTableElement.cellSpacing")}} {{obsolete_inline}}
+
ustawia/pobiera odstępy pomiędzy komórkami.
+
{{domxref("HTMLTableElement.frame")}} {{obsolete_inline}}
+
określa które krawędzie tabeli mają obramowanie.
+
{{domxref("HTMLTableElement.rules")}} {{obsolete_inline}}
+
określa które wewnętrzne krawędzie są widoczne.
+
{{domxref("HTMLTableElement.summary")}} {{obsolete_inline}}
+
ustawia/pobiera podsumowanie tabeli.
+
{{domxref("HTMLTableElement.width")}} {{obsolete_inline}}
+
ustawia/pobiera szerokość tabeli.
+
+ +

Metody

+ +
+
{{domxref("HTMLTableElement.createTHead()")}}
+
tworzy nagłówek tabeli.
+
{{domxref("HTMLTableElement.deleteTHead()")}}
+
usuwa nagłówek tabeli.
+
{{domxref("HTMLTableElement.createTFoot()")}}
+
tworzy stopkę tabeli.
+
{{domxref("HTMLTableElement.deleteTFoot()")}}
+
usuwa stopkę tabeli.
+
{{domxref("HTMLTableElement.createCaption()")}}
+
tworzy nowy opis tabeli.
+
{{domxref("HTMLTableElement.deleteCaption()")}}
+
usuwa opis tabeli.
+
{{domxref("HTMLTableElement.insertRow()")}}
+
wstawia nowy wiersz.
+
{{domxref("HTMLTableElement.deleteRow()")}}
+
usuwa wiersz.
+
diff --git a/files/pl/web/api/htmltableelement/tfoot/index.html b/files/pl/web/api/htmltableelement/tfoot/index.html new file mode 100644 index 0000000000..2d7467db81 --- /dev/null +++ b/files/pl/web/api/htmltableelement/tfoot/index.html @@ -0,0 +1,39 @@ +--- +title: HTMLTableElement.tFoot +slug: Web/API/HTMLTableElement/tFoot +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/tFoot +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

tFoot zwraca element TFOOT tabeli.

+ +

Składnia

+ +
HTMLTableSectionElementObject = table.tFoot
+
+ +

Przykład

+ +
if (table.tFoot == my_foot) {
+ ...
+}
+
+ +

Uwagi

+ +

Ta własność zwraca VOID, jeśli nie istnieje element TFOOT.

+ +

Specyfikacja

+ +

tfoot

+ +

Interface HTMLTableSectionElement

+ +

{{ languages( { "en": "en/DOM/table.tFoot" } ) }}

diff --git a/files/pl/web/api/htmltableelement/thead/index.html b/files/pl/web/api/htmltableelement/thead/index.html new file mode 100644 index 0000000000..413fe6fde1 --- /dev/null +++ b/files/pl/web/api/htmltableelement/thead/index.html @@ -0,0 +1,45 @@ +--- +title: HTMLTableElement.tHead +slug: Web/API/HTMLTableElement/tHead +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLTableElement/tHead +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

tHead zwraca THEAD (nagłówek) tabeli.

+ +

Składnia

+ +
th_el = table.tHead
+
+ +

Parametry

+ + + +

Przykład

+ +
if (table.tHead == my_head_el) {
+   ...
+}
+
+ +

Uwagi

+ +

Ta własność zwraca VOID, jeśli nie istnieje element THEAD.

+ +

Specyfikacje

+ +

thead

+ +

Interface HTMLTableSectionElement

+ +

{{ languages( { "en": "en/DOM/table.tHead" } ) }}

diff --git a/files/pl/web/api/index.html b/files/pl/web/api/index.html new file mode 100644 index 0000000000..2a13d2b016 --- /dev/null +++ b/files/pl/web/api/index.html @@ -0,0 +1,11 @@ +--- +title: Lista Web API +slug: Web/API +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API +--- +

Kiedy piszemy kod w JavaScript dla sieci Web, możemy użyć wielu przydatnych API. Poniżej znajduje się lista dostępnych interfejsów (dokładnie, typów obiektów), które możesz wykorzystać podczas budowy swojej strony czy aplikacji internetowej.

+ +
{{APIListAlpha}}
diff --git a/files/pl/web/api/location/index.html b/files/pl/web/api/location/index.html new file mode 100644 index 0000000000..537d3bc90a --- /dev/null +++ b/files/pl/web/api/location/index.html @@ -0,0 +1,114 @@ +--- +title: Location +slug: Web/API/Location +tags: + - API + - HTML DOM + - Interface + - Location + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Location +--- +

{{APIRef("HTML DOM")}}

+ +

The Location interface represents the location (URL) of the object it is linked to. Changes done on it are reflected on the object it relates to. Both the {{domxref("Document")}} and {{domxref("Window")}} interface have such a linked Location, accessible via {{domxref("Document.location")}} and {{domxref("Window.location")}} respectively.

+ +

Properties

+ +

The Location interface doesn't inherit any property, but implements those from {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.href")}}
+
Is a {{domxref("DOMString")}} containing the entire URL. If changed, the associated document navigates to the new page. It can be set from a different origin than the associated document.
+
{{domxref("Location.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("Location.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, a ':', and the port of the URL.
+
{{domxref("Location.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("Location.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("Location.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("Location.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters or "querystring" of the URL. Modern browsers provide URLSearchParams and URL.searchParams to make it easy to parse out the parameters from the querystring.
+
{{domxref("Location.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("Location.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("Location.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("Location.origin")}} {{readOnlyInline}}
+
Returns a {{domxref("DOMString")}} containing the canonical form of the origin of the specific location.
+
+ +

Methods

+ +

The Location interface doesn't inherit any method, but implements those from {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.assign()")}}
+
Loads the resource at the URL provided in parameter.
+
{{domxref("Location.reload()")}}
+
Reloads the resource from the current URL. Its optional unique parameter is a {{domxref("Boolean")}}, which, when it is true, causes the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.
+
{{domxref("Location.replace()")}}
+
Replaces the current resource with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session {{domxref("History")}}, meaning the user won't be able to use the back button to navigate to it.
+
{{domxref("Location.toString()")}}
+
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.
+
+ +

Examples

+ +
// Create anchor element and use href property for the purpose of this example
+// A more correct alternative is to browse to the URL and use document.location or window.location
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org:8080
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // 8080
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/pl/web/api/location/reload/index.html b/files/pl/web/api/location/reload/index.html new file mode 100644 index 0000000000..fc859dbfd3 --- /dev/null +++ b/files/pl/web/api/location/reload/index.html @@ -0,0 +1,67 @@ +--- +title: Location.reload() +slug: Web/API/Location/reload +tags: + - API + - HTML-DOM + - Location + - Metodă +translation_of: Web/API/Location/reload +--- +

{{ APIRef("HTML DOM") }}

+ +

Metoda Location.reload() ponownie ładuje zasób z bieżącego adresu URL. Jej opcjonalnym i jednocześnie unikalnym parametrem jest parametr {{domxref("Boolean")}}. Jeśli przyjmie on wartość true, powoduje zawsze ponownie ładowanie strony z serwera. Jeśli jego wartość wynosi false lub nie jest zdefiniowana, przeglądarka może ponownie załadować stronę z pamięci podręcznej. Poza domyślnym zachowaniem pamięci cache, flaga forcedReload wpływa również na to, jak niektóre przeglądarki obsługują pozycję przewijania strony: zwykłe przeładowanie próbuje przywrócić pozycję przewijania po ponownym załadowaniu strony, natomiast w trybie wymuszonym (gdy parametr jest ustawiony na wartość true) nowy DOM zostaje wczytany ze scrollTop == 0.

+ +

Jeśli przypisanie nie może się wydarzyć z powodu naruszenia bezpieczeństwa, zostanie zgłoszony wyjątek {{domxref("DOMException")}} typu SECURITY_ERROR. Dzieje się tak, gdy pochodzenie skryptu wywołującego metodę różni się od pochodzenia strony opisanej przez obiekt {{domxref("Location")}} (zazwyczaj kiedy skrypt jest hostowany na innej domenie).

+ +

Składnia

+ +
object.reload(forcedReload);
+
+ +

Parametry

+ +
+
forcedReload {{optional_inline}}
+
Jest flagą {{domxref("Boolean")}}, która przyjmując wartość true, zawsze powoduje przeładowanie strony z serwera. Jeśli jej wartość to false lub nie została ona zdefiniowana, przeglądarka może wczytać stronę z pamięci podręczniej (pamięci cache).
+
+ +

Przykłady

+ +
// Przeładuj bieżącą stronę bez cache
+window.location.reload(true);
+ +

Lista specyfikacji

+ + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}{{Spec2('HTML WHATWG')}}Bez zmian od {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}{{Spec2('HTML5 W3C')}}Początkowa definicja.
+ +

Zgodność przeglądarek

+ + + +

{{Compat("api.Location.reload")}}

+ +

Zobacz także

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

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

+ +
+

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

+
+ +

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

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

Constructor

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

Properties

+ +

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

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

Methods

+ +

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

+ +

Example

+ +

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

+ +

Specification

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

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/pl/web/api/midiaccess/index.html b/files/pl/web/api/midiaccess/index.html new file mode 100644 index 0000000000..6155b26b02 --- /dev/null +++ b/files/pl/web/api/midiaccess/index.html @@ -0,0 +1,70 @@ +--- +title: MIDIAccess +slug: Web/API/MIDIAccess +tags: + - API + - Interfejs +translation_of: Web/API/MIDIAccess +--- +

{{SeeCompatTable}}{{APIRef("Web MIDI API")}} 

+ +

Interfejs MIDIAccess pochodzący z Web MIDI API, dostarcza metod wyliczania urządzeń wejściowych i wyjściowych MIDI oraz dostępu do tych urządzeń.

+ +

Właściwości

+ +
+
{{domxref("MIDIAccess.inputs")}} {{readonlyinline}}
+
Zwraca instancję {{domxref("MIDIInputMap")}} dostarczając metod dostępu do wszystkich dostępnych portów wejśiowych MIDI.
+
{{domxref("MIDIAccess.outputs")}} {{readonlyinline}}
+
Zwraca instancję {{domxref("MIDIOutputMap")}} dostarczając metod dostępu do wszystkich dostępnych portów wyjśiowych MIDI.
+
{{domxref("MIDIAccess.sysexEnabled")}} {{readonlyinline}}
+
Parametr zerojedynkowy, wskazujący na wsparcie system exclusive dla obecnej instancji MIDIAccess.
+
+ +

Procedury obsługi zdarzeń

+ +
+
{{domxref("MIDIAccess.onstatechange")}}
+
Jest wywoływana za każdym razem, gdy nowy port MIDI zostaniedodany lub nastąpi zmiana stanu istniejącego portu.
+
+ +

Przykłady

+ +
navigator.requestMIDIAccess()
+  .then(function(access) {
+
+     // Get lists of available MIDI controllers
+     const inputs = access.inputs.values();
+     const outputs = access.outputs.values();
+
+     access.onstatechange = function(e) {
+
+       // Print information about the (dis)connected MIDI controller
+       console.log(e.port.name, e.port.manufacturer, e.port.state);
+     };
+  });
+ +

Specyfikacje

+ + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('WebMIDI API','#midiaccess-interface')}}{{Spec2('WebMIDI API')}}Definicja wstępna.
+ +

Kompatybilność przeglądarek

+ +

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

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

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

+ +

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

+ +

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

+ +

Method overview

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

Attributes

+ + + + + + + + + + + + + + +
AttributeTypeDescription
axislongIndicates scroll direction. Read only.
+ +

Constants

+ +

Delta modes

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

Methods

+ +

initMouseScrollEvent()

+ +

See nsIDOMMouseScrollEvent::initMouseScrollEvent().

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

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

See also

+ + diff --git a/files/pl/web/api/navigator/appcodename/index.html b/files/pl/web/api/navigator/appcodename/index.html new file mode 100644 index 0000000000..ec0da7157c --- /dev/null +++ b/files/pl/web/api/navigator/appcodename/index.html @@ -0,0 +1,30 @@ +--- +title: window.navigator.appCodeName +slug: Web/API/Navigator/appCodeName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appCodeName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wewnętrzną nazwę "kodową" aktualnej przeglądarki.

+

Składnia

+
codeName = window.navigator.appCodeName
+
+

Parametry

+ +

Przykład

+
dump(window.navigator.appCodeName);
+
+

Uwagi

+

Mozilla, Netscape 6 i IE5 używają wewnętrznej nazwy "Mozilla".

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.appCodeName", "ja": "ja/DOM/window.navigator.appCodeName" } ) }}

diff --git a/files/pl/web/api/navigator/appname/index.html b/files/pl/web/api/navigator/appname/index.html new file mode 100644 index 0000000000..d651ac3682 --- /dev/null +++ b/files/pl/web/api/navigator/appname/index.html @@ -0,0 +1,29 @@ +--- +title: window.navigator.appName +slug: Web/API/Navigator/appName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca oficjalną nazwę przeglądarki.

+

Składnia

+
appName = window.navigator.appName
+
+

Parametry

+ +

Przykład

+
dump(window.navigator.appName);
+// dla NS6 wypisuje w konsoli "Navigator"
+
+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.appName", "ja": "ja/DOM/window.navigator.appName" } ) }}

diff --git a/files/pl/web/api/navigator/appversion/index.html b/files/pl/web/api/navigator/appversion/index.html new file mode 100644 index 0000000000..3d08f23cee --- /dev/null +++ b/files/pl/web/api/navigator/appversion/index.html @@ -0,0 +1,32 @@ +--- +title: window.navigator.appVersion +slug: Web/API/Navigator/appVersion +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/appVersion +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wersję przeglądarki jako łańcuch znaków.

+

Składnia

+
ver = window.navigator.appVersion
+
+

Parametry

+ +

Przykład

+
if ( navigator.appVersion.charAt(0) == "5" ) {
+    // prawdopodobnie jest to piąta wersja przeglądarki
+ }
+
+

Uwagi

+

Własność window.navigator.userAgent również zawiera numer wersji przeglądarki (przykładowo: "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1"), lecz powinniśmy mieć świadomość jak łatwo jest zmienić ciąg user-agent i "naśladować" inne przeglądarki, platformy lub pośredników użytkownika oraz jak bezmyślni są sami producenci przeglądarek w ustawianiu tej wartości. Własności window.navigator.appVersion i window.navigator.userAgent są dość często stosowane w kodzie "szpiegującym przeglądarki": skryptach, które próbują dowiedzieć się jakiej używasz przeglądarki i wyświetlić stosowną do niej stronę.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.appVersion", "ja": "ja/DOM/window.navigator.appVersion" } ) }}

diff --git a/files/pl/web/api/navigator/buildid/index.html b/files/pl/web/api/navigator/buildid/index.html new file mode 100644 index 0000000000..2f35af6f92 --- /dev/null +++ b/files/pl/web/api/navigator/buildid/index.html @@ -0,0 +1,41 @@ +--- +title: Navigator.buildID +slug: Web/API/Navigator/buildID +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/buildID +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca identyfikator kompilacji przeglądarki.

+ +

Składnia

+ +
buildID =
+navigator.buildID;
+
+ +

buildID jest identyfikatorem kompilacji aplikacji, zwracanym jako łańcuch znakówi. ID kompilacji jest w formie <tt>YYYYMMDDHH</tt> (gdzie: Y - rok, M - miesiąc, D - dzień, H - godzina).

+ +

Przykład

+ +
dump(window.navigator.buildID);
+// wyświetla w konsoli "2006090803"
+
+ +

Uwaga

+ +

Dostępne w Firefoksie 2 (Gecko 1.8.1) i późniejszych. Zaimplementowane w {{ Bug(345993) }}.

+ +

Specyfikacja

+ +

Nie jest częścią żadnego publicznego standardu.

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.buildID", "ja": "ja/DOM/window.navigator.buildID" } ) }}

diff --git a/files/pl/web/api/navigator/cookieenabled/index.html b/files/pl/web/api/navigator/cookieenabled/index.html new file mode 100644 index 0000000000..43c12ee2de --- /dev/null +++ b/files/pl/web/api/navigator/cookieenabled/index.html @@ -0,0 +1,45 @@ +--- +title: Navigator.cookieEnabled +slug: Web/API/Navigator/cookieEnabled +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/cookieEnabled +--- +

{{ ApiRef() }}

+ +

Posumowanie

+ +

Zwraca wartość logiczną tylko do odczytu, wskazującą czy obsługa ciasteczek jest włączona, czy nie.

+ +

Składnia

+ +
var cookieEnabled = navigator.cookieEnabled;
+
+ + + +

Przykład

+ +
if (!navigator.cookieEnabled) {
+  // poinformuj użytkownika, że przy włączonych ciasteczkach
+  // strona jest bardziej użyteczna
+}
+
+ +

Uwagi

+ +

W związku z {{ Bug(230350) }}, cookieEnabled może zwracać błędny wynik w aplikacjach opartych o Gecko.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.cookieEnabled", "ja": "ja/DOM/window.navigator.cookieEnabled" } ) }}

diff --git a/files/pl/web/api/navigator/index.html b/files/pl/web/api/navigator/index.html new file mode 100644 index 0000000000..6ef2055b7a --- /dev/null +++ b/files/pl/web/api/navigator/index.html @@ -0,0 +1,119 @@ +--- +title: Navigator +slug: Web/API/Navigator +translation_of: Web/API/Navigator +--- +

{{ apiref() }}

+ +

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

+ +

A Navigator object can be retrieved using the read-only {{domxref("Window.navigator")}} property.

+ +

Properties

+ +

Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.
+
{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Provides a {{domxref("Connection")}} with information about the network connection of a device.
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
{{domxref("Navigator.oscpu")}}
+
Returns a string that represents the current operating system.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Always returns 'Gecko', on any browser. This property is kept only for compatibility purpose.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Returns the user agent string for the current browser.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
+ +

Non-standard

+ +
+
{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}
+
Returns the build identifier of the browser (e.g., "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}
+
Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.
+
{{domxref("navigator.id")}} {{non-standard_inline}}
+
Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for BrowserID to your web site.
+
{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}
+
Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control Open Web apps.
+
{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}
+
The navigator.mozAudioChannelManager object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.
+
{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}
+
Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.
+
{{domxref("navigator.mozSocial")}} {{non-standard_inline}}
+
The Object, returned by the navigator.mozSocial property, is available within the social media provider's panel to provide functionality it may need.
+
{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}
+
Returns the build number of the current browser (e.g., "20060909").
+
{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}
+
Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".
+
{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}
+
Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.
+
{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}
+
Returns the vendor name of the current browser (e.g., "Netscape6").
+
{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}
+
Returns the vendor version number (e.g. "6.1").
+
navigator.webkitPointer {{non-standard_inline}}
+
Returns a PointerLock object for the Mouse Lock API.
+
+ +

Methods

+ +

Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NavigatorStorageUtils")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorUserMedia.getUserMedia()")}}
+
After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.
+
{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}
+
Allows web sites to register themselves as a possible handler for a given MIME type.
+
{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}
+
Allows web sites to register themselves as a possible handler for a given protocol.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Causes vibration on devices with support for it. Does nothing if vibration support isn't available.
+
+ +

Non standard

+ +
+
{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}
+
Lets code check to see if the document at a given URI is available without using the network.
+
{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}
+
Allows in-app payment.
+
{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}
+
Sets a user preference. This method is only available to privileged code and is obsolete; you should use the XPCOM Preferences API instead.
+
{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}
+
Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.
+
diff --git a/files/pl/web/api/navigator/javaenabled/index.html b/files/pl/web/api/navigator/javaenabled/index.html new file mode 100644 index 0000000000..291d27782e --- /dev/null +++ b/files/pl/web/api/navigator/javaenabled/index.html @@ -0,0 +1,39 @@ +--- +title: NavigatorPlugins.javaEnabled +slug: Web/API/Navigator/javaEnabled +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/javaEnabled +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Ta metoda wskazuje czy w aktualnej przeglądarce została włączona obsługa Javy.

+ +

Składnia

+ +
result = window.navigator.javaEnabled()
+
+ +

Przykład

+ +
if (window.navigator.javaEnabled()) {
+   // przeglądarka posiada Javę
+}
+
+ +

Uwagi

+ +

Zwracana przez tę metodę wartość wskazuje czy Java jest włączona czy też nie - a nie czy przeglądarka w ogóle obsługuje Javę.

+ +

Specyfikacja

+ +

DOM Level 0. Nie jest częścią specyfikacji.

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.javaEnabled", "ja": "ja/DOM/window.navigator.javaEnabled" } ) }}

diff --git a/files/pl/web/api/navigator/language/index.html b/files/pl/web/api/navigator/language/index.html new file mode 100644 index 0000000000..1dcc4daabc --- /dev/null +++ b/files/pl/web/api/navigator/language/index.html @@ -0,0 +1,45 @@ +--- +title: NavigatorLanguage.language +slug: Web/API/Navigator/language +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorLanguage/language +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca łańcuch znaków reprezentujący wersję językową przeglądarki.

+ +

Składnia

+ +
lang = window.navigator.language
+
+ +

Parametry

+ + + +

Przykład

+ +
if ( window.navigator.language != "pl" ) {
+ doLangSelect(window.navigator.language);
+}
+
+ +

Uwagi

+ +

Ta własność pojawia się również jako część łańcucha znaków navigator.userAgent.

+ +

Specyfikacja

+ +

DOM Level 0. Nie jest częścią specyfikacji.

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.language", "ja": "ja/DOM/window.navigator.language" } ) }}

diff --git a/files/pl/web/api/navigator/mimetypes/index.html b/files/pl/web/api/navigator/mimetypes/index.html new file mode 100644 index 0000000000..371e75eff2 --- /dev/null +++ b/files/pl/web/api/navigator/mimetypes/index.html @@ -0,0 +1,40 @@ +--- +title: NavigatorPlugins.mimeTypes +slug: Web/API/Navigator/mimeTypes +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/mimeTypes +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca obiekt MimeTypeArray, który zawiera listę obiektów MimeType reprezentujących typy MIME rozpoznawane przez przeglądarkę.

+ +

Składnia

+ +
mimeTypes = navigator.mimeTypes;
+
+ +

mimeTypes jest obiektem MimeTypeArray, który posiada zarówno własność length jak i metody item(index) oraz namedItem(name).

+ +

Przykład

+ +
  alert(window.navigator.mimeTypes.item(0).description); // wyświetli ostrzeżenie "Mozilla Default Plug-in"
+
+ +

Uwagi

+ +

Wartością własności type w zerowym elemencie (obiekt MimeType "Mozilla Default Plug-in") jest * zamiast typowego formatu MIME jak np. "image/x-macpaint"

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.mimeTypes", "ja": "ja/DOM/window.navigator.mimeTypes" } ) }}

diff --git a/files/pl/web/api/navigator/mozpermissionsettings/index.html b/files/pl/web/api/navigator/mozpermissionsettings/index.html new file mode 100644 index 0000000000..df0966e04e --- /dev/null +++ b/files/pl/web/api/navigator/mozpermissionsettings/index.html @@ -0,0 +1,33 @@ +--- +title: Navigator.mozPermissionSettings +slug: Web/API/Navigator/mozPermissionSettings +translation_of: Archive/B2G_OS/API/Navigator/mozPermissionSettings +--- +

{{APIRef("Firefox OS")}}{{ non-standard_header() }}

+ +

{{ B2GOnlyHeader2('certified') }}

+ +

Summary

+ +

Returns a {{ domxref("PermissionSettings") }} object you can use to get and set permissions of apps on the Firefox OS platform.

+ +

Syntax

+ +
var permissions = window.navigator.mozPermissionSettings;
+
+ +

Value

+ +

navigator.mozPermissionSettings is a {{domxref("PermissionSettings")}} object.

+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/pl/web/api/navigator/online/index.html b/files/pl/web/api/navigator/online/index.html new file mode 100644 index 0000000000..20bbd73fb0 --- /dev/null +++ b/files/pl/web/api/navigator/online/index.html @@ -0,0 +1,47 @@ +--- +title: NavigatorOnLine.onLine +slug: Web/API/Navigator/onLine +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorOnLine/onLine +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca wartość logiczną wskazującą czy przeglądarka jest w trybie online, czy nie.

+ +

Składnia

+ +
online =
+window.navigator.onLine;
+
+ + + +

Przykład

+ +
alert(navigator.onLine ? "Jesteś online" : "Jesteś offline");
+
+ +

Uwagi

+ +

Zobacz Zdarzenia Online/Offline‎, aby uzyskać bardziej szczegółowy opis tej własności, jak również nowych funkcji związanych z trybem offline, wprowadzonych w Firefoksie 3.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +

Opisana w szkicu roboczym HTML 5

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.onLine", "fr": "fr/DOM/window.navigator.onLine", "ja": "ja/DOM/window.navigator.onLine" } ) }}

diff --git a/files/pl/web/api/navigator/oscpu/index.html b/files/pl/web/api/navigator/oscpu/index.html new file mode 100644 index 0000000000..69a9f9deb4 --- /dev/null +++ b/files/pl/web/api/navigator/oscpu/index.html @@ -0,0 +1,41 @@ +--- +title: Navigator.oscpu +slug: Web/API/Navigator/oscpu +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/oscpu +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca łańcuch znaków reprezentujący bieżący system operacyjny.

+ +

Składnia

+ +
oscpuInfo = window.navigator.oscpu
+
+ + + +

Przykład

+ +
function osInfo() {
+alert(window.navigator.oscpu);
+}
+// zwraca: Windows NT 6.0
+
+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.oscpu", "ja": "ja/DOM/window.navigator.oscpu" } ) }}

diff --git a/files/pl/web/api/navigator/platform/index.html b/files/pl/web/api/navigator/platform/index.html new file mode 100644 index 0000000000..3a73ee3c2e --- /dev/null +++ b/files/pl/web/api/navigator/platform/index.html @@ -0,0 +1,28 @@ +--- +title: window.navigator.platform +slug: Web/API/Navigator/platform +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/platform +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca łańcuch znaków reprezentujący platformę przeglądarki.

+

Składnia

+
platform =navigator.platform
+
+

platform jest łańcuchem znaków z jedną z następujących wartości: "Win32", "Linux i686", "MacPPC", "MacIntel" lub inną.

+

Przykład

+
alert(navigator.platform);
+
+

Uwagi

+

Jeśli Twój kod nie jest uprzywilejowany (chrome lub przynajmniej kod z uprawnieniem UniversalBrowserRead), może on otrzymać wartość opcji <tt>general.platform.override</tt> zamiast prawdziwej platformy.

+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.platform", "ja": "ja/DOM/window.navigator.platform" } ) }}

diff --git a/files/pl/web/api/navigator/plugins/index.html b/files/pl/web/api/navigator/plugins/index.html new file mode 100644 index 0000000000..c60d9f6614 --- /dev/null +++ b/files/pl/web/api/navigator/plugins/index.html @@ -0,0 +1,58 @@ +--- +title: NavigatorPlugins.plugins +slug: Web/API/Navigator/plugins +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorPlugins/plugins +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca obiekt PluginArray będący listą wszystkich wtyczek zainstalowanych w aplikacji.

+ +

Składnia

+ +
plugins = navigator.plugins;
+
+ +

plugins jest tabelą PluginArray zawierającą obiekty Plugin reprezentujące zainstalowane wtyczki.

+ +

Zwrócona wartość nie jest jest tablicą JavaScript, ale posiada własność length i obsługuje dostęp do poszczególnych elementów za pomocą notacji nawiasowej (plugins{{ mediawiki.external(2) }}) jak również poprzez metody item(index ) i namedItem("name" ).

+ +

Przykład

+ +

Poniższy przykład wyświetla wewnątrz zaawansowanego dokumentu informacje o zainstalowanych wtyczkach. Zauważ własności dostępne w obiekcie Plugin: name, filename i description.

+ +
<script type="text/javascript">
+   var L = navigator.plugins.length;
+   document.write(L.toString().bold() + " Plugin(s)".bold());
+   document.write("<br>");
+   document.write("Nazwa wtyczki | Nazwa pliku | Opis".bold());
+   document.write("<br>");
+   for(var i=0; i<L; i++) {
+     document.write(navigator.plugins[i].name);
+     document.write(" | ");
+     document.write(navigator.plugins[i].filename);
+     document.write(" | ");
+     document.write(navigator.plugins[i].description);
+     document.write("<br>");
+   }
+</script>
+
+ +

Uwagi

+ +

Obiekt Plugin wyświetla skromny interfejs w celu uzyskania informacji o różnych wtyczkach zainstalowanych w przeglądarce. Lista wtyczek jest również dostępna poprzez wprowadzenie about:plugins w pasku adresu.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.plugins", "ja": "ja/DOM/window.navigator.plugins" } ) }}

diff --git a/files/pl/web/api/navigator/product/index.html b/files/pl/web/api/navigator/product/index.html new file mode 100644 index 0000000000..50d34a4a66 --- /dev/null +++ b/files/pl/web/api/navigator/product/index.html @@ -0,0 +1,38 @@ +--- +title: window.navigator.product +slug: Web/API/Navigator/product +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NavigatorID/product +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność ta zwraca nazwę produktu bieżącej przeglądarki.

+

Składnia

+
productName = window.navigator.product
+
+

Parametry

+ +

Przykład

+
<script>
+function prod() {
+  dt = document.getElementById("d");
+  dt.innerHTML = window.navigator.product;
+}
+</script>
+<button onclick="prod();">produkt</button>
+<div id="d"> </div>
+// zwraca "Gecko"
+
+

Uwagi

+

Produkt jest tą częścią pełnego łańcucha identyfikatora przeglądarki, która następuje bezpośrednio po platformie. Na przykład, w identyfikatorze przeglądarki dla Netscape 6.1 produktem jest "Gecko", a pełny ciąg identyfikatora przeglądarki jest następujący: Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.product", "ja": "ja/DOM/window.navigator.product" } ) }}

diff --git a/files/pl/web/api/navigator/productsub/index.html b/files/pl/web/api/navigator/productsub/index.html new file mode 100644 index 0000000000..e5e580cbe9 --- /dev/null +++ b/files/pl/web/api/navigator/productsub/index.html @@ -0,0 +1,52 @@ +--- +title: Navigator.productSub +slug: Web/API/Navigator/productSub +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/productSub +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

productSub zwraca numer kompilacji bieżącej przeglądarki.

+ +

Składnia

+ +
prodSub = window.navigator.productSub
+
+ +

Parameters

+ + + +

Przykład

+ +
<script>
+function prodsub() {
+  dt = document.getElementById("d").childNodes[0];
+  dt.data = window.navigator.productSub;
+}
+</script>
+<button onclick="prodsub();">productSub</button>
+// zwraca: 20010725
+
+ +

Uwagi

+ +

W IE własność ta zwraca wartość nieokreśloną.

+ +

W Apple Safari własność zawsze zwraca 20030107.

+ +

Specyfikacja

+ +

DOM Level 0. Nie jest częścią specyfikacji.

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.productSub", "ja": "ja/DOM/window.navigator.productSub" } ) }}

diff --git a/files/pl/web/api/navigator/registercontenthandler/index.html b/files/pl/web/api/navigator/registercontenthandler/index.html new file mode 100644 index 0000000000..58f6f5dd39 --- /dev/null +++ b/files/pl/web/api/navigator/registercontenthandler/index.html @@ -0,0 +1,49 @@ +--- +title: Navigator.registerContentHandler +slug: Web/API/Navigator/registerContentHandler +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/registerContentHandler +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące zawartości konkretnego typu MIME.

+ +

{{ Note("Strony internetowe mogą zarejestrować tylko siebie jako serwisy obsługujące zawartość. Ze względów bezpieczeństwa nie jest możliwe, aby rozszerzenie lub strona internetowa zarejestrowały inną stronę do obsługi zawartości.") }}

+ +

Składnia

+ +
window.navigator.registerContentHandler(mimeType,
+uri,
+title);
+
+ + + +

Przykład

+ +
navigator.registerContentHandler("application/vnd.mozilla.maybe.feed",
+                                 "http://www.przyklad.tld/?foo=%s",
+                                 "Mój Czytnik Kanałów");
+
+ +

Uwagi

+ +

W Firefoksie 2 obsługiwane są tylko typy MIME application/vnd.mozilla.maybe.feed, application/atom+xml oraz application/rss+xml. Wszystkie wartości mają ten sam efekt, a zarejestrowane strony obsługujące otrzymają kanały we wszystkich wersjach Atom i RSS.

+ +

Specyfikacja

+ +

Określona przez szkic roboczy Web Applications 1.0 organizacji WHATWG.

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.registerContentHandler", "ja": "ja/DOM/window.navigator.registerContentHandler" } ) }}

diff --git a/files/pl/web/api/navigator/registerprotocolhandler/index.html b/files/pl/web/api/navigator/registerprotocolhandler/index.html new file mode 100644 index 0000000000..b5b040b91d --- /dev/null +++ b/files/pl/web/api/navigator/registerprotocolhandler/index.html @@ -0,0 +1,66 @@ +--- +title: Navigator.registerProtocolHandler +slug: Web/API/Navigator/registerProtocolHandler +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Firefox 3 + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Navigator/registerProtocolHandler +--- +

{{ ApiRef() }} {{ Fx_minversion_header(3) }}

+ +

Podsumowanie

+ +

Umożliwia zarejestrowanie witryny internetowej jako mechanizmu obsługi danego protokołu.

+ +

Składnia

+ +
window.navigator.registerProtocolHandler(protokół,
+uri,
+nazwa);
+
+ + + +

Przykład

+ +

Poniżej podano sposób rejestracji mechanizmu obsługi protokołu + mailto + przez przykładową aplikację internetową znajdującą się pod adresem http://www.example.com:

+ +
navigator.registerProtocolHandler("mailto",
+                                 "https://www.example.com/?uri=%s",
+                                 "Poczta internetowa");
+
+ +

W powyższym kodzie tworzona jest funkcja obsługi odnośników + mailto + , która powoduje przejście do przykładowej strony. Adres e-mail określony w odnośniku jest wstawiany do adresu URL.

+ +

Specyfikacja

+ +

Określone w specyfikacji WHATWG Web Applications 1.0, wersja robocza.

+ +

Zobacz także

+ + + +

 

+ +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "es": "es/DOM/window.navigator.registerProtocolHandler", "fr": "fr/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler" } ) }}

diff --git a/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html new file mode 100644 index 0000000000..2a9863088c --- /dev/null +++ b/files/pl/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html @@ -0,0 +1,107 @@ +--- +title: Obsługa protokołów przez aplikacje WWW +slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- +

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU {{ Fx_minversion_header(3) }} +

+

Wprowadzenie

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +Często na stronach internetowych znaleźć można odnośniki do zasobów korzystających z protokołów innych niż http. Przykładem jednego z nich jest protokół mailto: +

+
<a href="mailto:webmaster@example.com">Napisz do webmastera</a>
+
+

Twórcy witryn internetowych używają odnośników mailto:, kiedy chcą zapewnić użytkownikom wygodny sposób na wysłanie wiadomości e-mail z poziomu strony WWW. Kiedy użytkownik aktywuje odnośnik, przeglądarka zwykle uruchamia domyślny program pocztowy określony w ustawieniach systemu operacyjnego. Można to określić jako desktopowy sposób obsługi protokołów. +

Aplikacje WWW również mogą zapewnić obsługę takich protokołów. Od kiedy coraz więcej rodzajów aplikacji przenoszonych jest do środowiska WWW, potrzeba takiej integracji jest coraz bardziej wyraźna. W istocie, istnieje szereg aplikacji WWW do obsługi poczty elektronicznej, które mogłyby przetwarzać odnośniki mailto. +

+

Rejestracja

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +

Ustawienie aplikacji jako mechanizmu obsługującego protokół nie jest skomplikowane. W zasadzie wystarczy, by witryna skorzystała z metody registerProtocolHandler(), by zarejestrować się w przeglądarce jako potencjalny mechanizm obsługi danego protokołu. Na przykład: +

+
navigator.registerProtocolHandler("mailto",
+                                  "https://www.example.com/?uri=%s",
+                                  "Przykładowa poczta");
+
+

gdzie parametrami są: +

+ +

Przeglądarka wykonując tę metodę wyświetli okno, w którym użytkownik będzie mógł wyrazić zgodę na zarejestrowanie aplikacji WWW jako mechanizmu obsługi protokołu. Firefox wyświetla następujące pytanie w obszarze powiadomień: +

Image:wph-notification.png +

{{ Note() }} +

+

Przykład

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="pl">
+<head>
+  <title>Przykład rejestracji obsługi protokołów</title>
+  <script type="text/javascript">
+    navigator.registerProtocolHandler("fikcyjny", "http://starkravingfinkle.org/projects/wph/handler.php?value=%s", "Fikcyjny protokół");
+  </script>
+</head>
+<body>
+  <h1>Przykład rejestracji obsługi protokołów</h1>
+  <p>Strona ta zainstaluje mechanizm obsługi protokołów dla protokołu <code>fikcyjny:</code>.</p>
+</body>
+</html>
+
+

Aktywacja

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +Od tej pory kiedykolwiek użytkownik aktywuje odnośnik do zasobu o zarejestrowanym protokole, przeglądarka przekieruje żądanie do adresu URL dostarczonego podczas rejestracji. Firefox domyślnie poprosi uprzednio użytkownika o potwierdzenie tej czynności. +

Image:wph-launch.png +

+

Przykład

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="pl">
+<head>
+  <title>Test obsługi protokołów</title>
+</head>
+<body>
+  <p>Widzieliście już kiedyś <a href="fikcyjny:to%20nie%20istnieje">coś takiego</a>?</p>
+</body>
+</html>
+
+

Obsługa protokołu

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +Kolejnym etapem jest obsłużenie żądania. Przeglądarka pobiera atrybut href odnośnika, łączy go z szablonem adresów URL podanym podczas rejestracji mechanizmu obsługi i wysyła do serwera żądanie HTTP GET z wynikowym adresem. Dla powyższego przykładu przeglądarka wyśle żądanie GET o następującym adresie: +

+
http://starkravingfinkle.org/projects/wph/handler.php?value=fikcyjny:to%20nie%20istnieje
+
+

Po stronie serwera można odebrać przekazany adres URL i wykonać żądane akcje. +

{{ Note("Kod po stronie serwera dostanie całą zawartość atrybutu href. Oznacza to, że serwer będzie musiał podczas przetworzyć otrzymany adres URL i oddzielić protokół od danych.") }} +

+

Przykład

+

UWAGA: PROSZE NIE UZYWAC EDYTOWANIA FRAGMENTOW, PSUJE ONO TRESC ARTYKULU +

+
<?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?>
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="pl">
+<head>
+    <title>Obsługa protokołów - przykład</title>
+</head>
+<body>
+  <h1>Obsługa protokołów - przykład</h1>
+  <p>Strona ta otwierana jest po aktywowaniu odnośnika do zasobu o protokole <code>fikcyjny:</code>. Otrzymane dane:</p>
+  <textarea>
+<?php echo(urldecode($value)) ?>
+  </textarea>
+</body>
+</html>
+
+


+

+
+
+{{ languages( { "en": "en/Web-based_protocol_handlers", "fr": "fr/Gestionnaires_de_protocoles_web", "ja": "ja/Web-based_protocol_handlers" } ) }} diff --git a/files/pl/web/api/navigatorlanguage/index.html b/files/pl/web/api/navigatorlanguage/index.html new file mode 100644 index 0000000000..7d6b0751e7 --- /dev/null +++ b/files/pl/web/api/navigatorlanguage/index.html @@ -0,0 +1,148 @@ +--- +title: NavigatorLanguage +slug: Web/API/NavigatorLanguage +tags: + - API + - HTML-DOM + - NeedsTranslation + - No Interface + - Reference + - TopicStub +translation_of: Web/API/NavigatorLanguage +--- +

{{APIRef("HTML DOM")}}

+ +

NavigatorLanguage contains methods and properties related to the language of the navigator.

+ +

There is no object of type NavigatorLanguage, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.

+ +

Properties

+ +

The NavigatorLanguage interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
+ +

Methods

+ +

The NavigatorLanguage interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}{{Spec2('HTML WHATWG')}}Since the {{SpecName('HTML5 W3C')}} snapshot, the languages property has been added.
{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}{{Spec2('HTML5 W3C')}}Initial specification; snapshot of  an early version{{SpecName('HTML WHATWG')}}.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
languages37{{CompatGeckoDesktop("32")}}{{CompatNo}}24{{CompatNo}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
languages{{CompatUnknown}}{{CompatUnknown}} {{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/navigatoronline/index.html b/files/pl/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..11f6707c43 --- /dev/null +++ b/files/pl/web/api/navigatoronline/index.html @@ -0,0 +1,127 @@ +--- +title: NavigatorOnLine +slug: Web/API/NavigatorOnLine +tags: + - API + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorOnLine +--- +

{{APIRef("HTML DOM")}}

+ +

The NavigatorOnLine interface contains methods and properties related to the connectivity status of the browser.

+ +

There is no object of type NavigatorOnLine, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.

+ +

Properties

+ +

The NavigatorOnLine interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
+ +

Methods

+ +

The NavigatorOnLine interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML WHATWG')}}No change from the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html b/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html new file mode 100644 index 0000000000..d286acc4b0 --- /dev/null +++ b/files/pl/web/api/navigatoronline/zdarzenia_online_i_offline/index.html @@ -0,0 +1,84 @@ +--- +title: Zdarzenia online i offline +slug: Web/API/NavigatorOnLine/Zdarzenia_online_i_offline +tags: + - AJAX + - DOM + - Programowanie_WWW + - Wszystkie_kategorie +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +

{{ Fx_minversion_header(3) }} W programie Firefox 3 zaimplementowano obsługę zdarzeń online i offline zdefiniowanych w specyfikacji WHATWG Web Applications 1.0. +

+

Omówienie

+

Do stworzenia dobrej aplikacji internetowej działającej w trybie offline konieczne jest istnienie sposobu na sprawdzenie, kiedy aplikacja faktycznie znajduje się w trybie offline. W niektórych przypadkach potrzebna jest także możliwość stwierdzenia, czy aplikacja powróciła do stanu „online”. W praktyce sprowadza się to do dwóch wymagań: +

+
  1. Konieczne jest stwierdzenie, kiedy użytkownik przełącza przeglądarkę w tryb online, aby można było przeprowadzić ponowną synchronizację z serwerem.
  2. Konieczne jest stwierdzenie, kiedy użytkownik przełącza przeglądarkę w tryb offline, aby można było odłożyć wysłanie żądania do serwera na później.
+

Zdarzenia online i offline pozwalają na uproszczenie powyższych procedur.

W aplikacji internetowej może także być konieczne wymuszenie przechowywania określonych dokumentów w pamięci podręcznej zasobów offline. W tym celu w kodzie sekcji HEAD należy wstawić znacznik LINK przedstawiony poniżej: +

+
<link rel="offline-resource" href="mój_zasób">
+
+

Przy przetwarzaniu kodu HTML przez program Firefox w wersji 3 lub nowszej dokumenty wymienione w znaczniku zostaną zapisane w specjalnej pamięci podręcznej zasobów offline. +

+

Interfejs API

+ +

navigator.onLine to własność, która zwraca wartość true lub false (true dla trybu online, false dla trybu offline). Własność ta jest aktualizowana za każdym razem, gdy użytkownik przełącza przeglądarkę w tryb offline, wybierając odpowiednie polecenie menu (w programie Firefox: Plik -> Pracuj w trybie offline). +

Ponadto ta własność powinna być aktualizowana zawsze, gdy w przeglądarce nie można nawiązać połączenia z siecią. Zgodnie ze specyfikacją: +

+
+Atrybut navigator.onLine musi zwracać wartość false, jeżeli w programie po kliknięciu odsyłacza przez użytkownika lub po wysłaniu przez skrypt żądania do zdalnej witryny nie można połączyć się z siecią (lub wiadomo, że taka próba nie powiedzie się)... +
+

W programie Firefox 2 ta własność jest aktualizowana przy przełączaniu przeglądarki między trybami online i offline oraz przy utracie lub ponownym nawiązaniu połączenia z siecią (dotyczy systemów Windows i Linux). +

Własność istnieje w starszych wersjach przeglądarek Firefox i Internet Explorer (obecna specyfikacja została oparta na tych właśnie wcześniejszych implementacjach), można zatem korzystać z niej już teraz. Automatyczne wykrywanie stanu połączenia sieciowego zostało wprowadzone w programie Firefox 2.

+

Zdarzenia "online" i "offline"

+

W programie Firefox 3 wprowadzono dwa nowe zdarzenia: "online" i "offline". Są one wywoływane w elemencie <body> każdej otwartej strony, gdy przeglądarka jest przełączana między trybem online i offline. Ponadto zdarzenie bąbelkuje od elementu document.body, poprzez element document, aż do elementu window. Żadnego ze zdarzeń nie można anulować (niemożliwe jest zablokowanie możliwości przełączania przeglądarki między trybami online i offline). +

Obserwatory (ang. event listeners) tych zdarzeń można zarejestrować na kilka sposobów: +

+ +

Przykład

+

Dostępny jest prosty przykład zastosowania, który pozwala na sprawdzenie działania zdarzeń. +XXX When mochitests for this are created, point to those instead and update this example -nickolay +

+
 <!doctype html>
+ <html>
+ <head>
+   <script>
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Zdarzenie: " + msg + "; stan=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   </script>
+   <style>...</style>
+ </head>
+ <body onload="loaded()">
+   <div id="status"><p id="state"></p></div>
+   <div id="log"></div>
+ </body>
+ </html>
+
+

Odsyłacze

+ +
+
+{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pt": "pt/Eventos_online_e_offline" } ) }} diff --git a/files/pl/web/api/navigatorplugins/index.html b/files/pl/web/api/navigatorplugins/index.html new file mode 100644 index 0000000000..c009a19a07 --- /dev/null +++ b/files/pl/web/api/navigatorplugins/index.html @@ -0,0 +1,111 @@ +--- +title: NavigatorPlugins +slug: Web/API/NavigatorPlugins +tags: + - API + - Experimental + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorPlugins +--- +

{{APIRef("HTML DOM")}}{{SeeCompatTable}}

+ +

The NavigatorPlugins interface contains methods and properties related to the plugins installed in the browser.

+ +

There is no object of type NavigatorPlugins, but other interfaces, like {{domxref("Navigator")}}, implement it.

+ +

Properties

+ +
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.
+
+ +

Methods

+ +

The NavigatorPlugins interface doesn't inherit any method.

+ +
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatorplugins', 'NavigatorPlugins')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

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

See also

+ + diff --git a/files/pl/web/api/parentnode/childelementcount/index.html b/files/pl/web/api/parentnode/childelementcount/index.html new file mode 100644 index 0000000000..f3bbff6554 --- /dev/null +++ b/files/pl/web/api/parentnode/childelementcount/index.html @@ -0,0 +1,93 @@ +--- +title: ParentNode.childElementCount +slug: Web/API/ParentNode/childElementCount +translation_of: Web/API/ParentNode/childElementCount +--- +
{{ APIRef("DOM") }}
+ +

ParentNode.childElementCount jest właściwością tylko do odczytu zwraca ona liczbę o typie unsigned long, która zwraca ilość elementów dzieci w elemencie rodzicu.

+ +
+

Ta właściwość została początkowo zdefiniowana w interfejsie  {{domxref("ElementTraversal")}}. Interfejs ten {{domxref("Node")}}, posiadał 2 różne zestawy właściwości - te, które mają elementy dzieci i te elementy, które są dziećmi. Dzieci zostały przeniesione do interfejsu {{domxref("ChildNode")}}, a rodzice do {{domxref("ParentNode")}}. Jest to zmiana techniczna, która nie powinna mieć wpływu na kompatybilność.

+
+ +

Składnia

+ +
var liczbaDzieci = node.childElementCount;
+
+ +
+
liczbaDzieci
+
Wartość która zostanie zwrócona o typie unsigned long (maksymalnie 64 bitowa liczba całkowita dodatnia).
+
node
+
Objekt reprezentowany przez {{domxref("Document")}}, {{domxref("DocumentFragment")}}, lub {{domxref("Element")}}.
+
+ +

Przykład

+ +
var elementRodzic = document.getElementById('tata');
+if (elementRodzic.childElementCount > 0) {
+  // Zrób coś
+}
+
+ +

Łatka dla IE8 & IE9 & Safari

+ +

Ta właściwość jest niewspierana na przeglądarkach IE9 i poniżej oraz Safari, jest niewspierana dla obiektów Document i DocumentFragment.

+ +
;(function(constructor) {
+  if (constructor &&
+      constructor.prototype &&
+      constructor.prototype.childElementCount == null) {
+    Object.defineProperty(constructor.prototype, 'childElementCount', {
+      get: function() {
+        var i = 0, dzieci = 0, wezel, iloscElementow = this.childNodes;
+        while (wezel = iloscElementow[i++]) {
+          if (wezel.nodeType === 1) dzieci++;
+        }
+        return dzieci;
+      }
+    });
+  }
+})(window.Node || window.Element);
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}Dzieli interfejs ElementTraversal na {{domxref("ChildNode")}} i ParentNode. Obecna właściwość jest zdefinionawa w tym drugim.
+ {{domxref("Document")}} i {{domxref("DocumentFragment")}} zaimlementowały już nowe interfejsy.
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}} +

Na chwilę obecną dodano wstępną definicje do interfejsu ElementTraversal i wykorzystywana jest ona w klasie {{domxref("Element")}}.

+
+ +

Kompatybilność z przeglądarkami

+ + + +

{{Compat("api.ParentNode.childElementCount")}}

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/parentnode/children/index.html b/files/pl/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..1d8576d64b --- /dev/null +++ b/files/pl/web/api/parentnode/children/index.html @@ -0,0 +1,96 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - Dzieci + - Dziecko + - Kolekcja HTML + - Potomek + - Potomkowie + - Właściwość + - węzeł +translation_of: Web/API/ParentNode/children +--- +
{{ APIRef("DOM") }}
+ +

The {{domxref("ParentNode")}} właściwość children jest właściwością tylko do odczytu (read-only) która zwraca aktualną kolekcję {{domxref("HTMLCollection")}} zawierającą wszystkie elementy podrzędne {{domxref("Element", "elements")}} węzła, na którym został wywołany.

+ +

Składnia

+ +
let children = node.children;
+ +

Value

+ +

{{ domxref("HTMLCollection") }} aktualna, uporządkowana kolekcja elementów DOM które są potomkami node. Możesz otrzymać pojedynczych potomków kolekcji używając albo {{domxref("HTMLCollection.item()", "item()")}} metody na kolekcji, albo używając notacji w stylu tablicowym języka JavaScript.

+ +

Jeżeli element node nie ma potomków, wtedy children jest pustą listą o długości 0 (length of 0).

+ +

Przykład

+ +
const foo = document.getElementById('foo');
+for (let i = 0; i < foo.children.length; i++) {
+  console.log(foo.children[i].tagName);
+}
+
+ +

Uzupełnienie

+ +
// Nadpisuje natywny prototyp 'children'.
+// Dodaje Document & DocumentFragment wsparcie dla IE9 & Safari.
+// Zwraca tablicę zamiast HTMLCollection.
+;(function(constructor) {
+  if (constructor &&
+    constructor.prototype &&
+    constructor.prototype.children == null) {
+    Object.defineProperty(constructor.prototype, 'children', {
+      get: function() {
+        let i = 0, node, nodes = this.childNodes, children = [];
+        while (node = nodes[i++]) {
+          if (node.nodeType === 1) {
+            children.push(node);
+          }
+        }
+        return children;
+      }
+    });
+  }
+})(window.Node || window.Element);
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Wstępna definicja
+ +

Zgodność z przeglądarkami

+ + + +

{{Compat("api.ParentNode.children")}}

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/parentnode/index.html b/files/pl/web/api/parentnode/index.html new file mode 100644 index 0000000000..2cbf79f11c --- /dev/null +++ b/files/pl/web/api/parentnode/index.html @@ -0,0 +1,90 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API + - DOM + - Finding Elements + - Finding Nodes + - Interface + - Locating Elements + - Locating Nodes + - Managing Elements + - Managing Nodes + - Mixin + - NeedsTranslation + - Node + - ParentNode + - Reference + - Selectors + - TopicStub +translation_of: Web/API/ParentNode +--- +
{{APIRef("DOM")}}
+ +

The ParentNode mixin contains methods and properties that are common to all types of {{domxref("Node")}} objects that can have children. It's implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.

+ +

See Locating DOM elements using selectors to learn how to use CSS selectors to find nodes or elements of interest.

+ +

Properties

+ +
+
{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}
+
Returns the number of children of this ParentNode which are elements.
+
{{domxref("ParentNode.children")}} {{readonlyInline}}
+
Returns a live {{domxref("HTMLCollection")}} containing all of the {{domxref("Element")}} objects that are children of this ParentNode, omitting all of its non-element nodes.
+
{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}
+
Returns the first node which is both a child of this ParentNode and is also an Element, or null if there is none.
+
{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}
+
Returns the last node which is both a child of this ParentNode and is an Element, or null if there is none.
+
+ +

Methods

+ +
+
{{domxref("ParentNode.append()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the ParentNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the ParentNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ParentNode.querySelector()")}}
+
Returns the first {{domxref("Element")}} with the current element as root that matches the specified group of selectors.
+
{{domxref("ParentNode.querySelectorAll()")}}
+
Returns a {{domxref("NodeList")}} representing a list of elements with the current element as root that matches the specified group of selectors.
+
+ +

Specification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and used it on {{domxref("Element")}}.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/pl/web/api/powiadomienie/index.html b/files/pl/web/api/powiadomienie/index.html new file mode 100644 index 0000000000..e314c36a3a --- /dev/null +++ b/files/pl/web/api/powiadomienie/index.html @@ -0,0 +1,348 @@ +--- +title: Powiadomienie +slug: Web/API/powiadomienie +tags: + - API + - JS Powiadomienia + - Powiadomienia + - Powiadomienie +translation_of: Web/API/Notification +--- +

{{APIRef("Web Notifications")}}

+ +

Interfejs Powiadomień {{domxref('Notifications_API','Notifications API')}}  jest używany do konfigurowania i wyświetlania powiadomień komputerowych do użytkownika .

+ +

{{AvailableInWorkers}}

+ +

Konstruktor

+ +
+
{{domxref("Notification.Notification()")}}
+
Tworzy nową instancję obiektu {{domxref('Notification')}} .
+
+ +

Cechy

+ +

Statyczne Cechy

+ +

Te Cechy są dostępne tylko dla obiektu powiadomienia.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
Linia reprezentująca obecne uprawnienia do wyświetlania powiadomień.Możliwe Wartośći to:denied(Użytkownik odmawia do wyświetlania powiadomień), granted(Użytkownik zaakceptował wyświetlanie powiadomień),albo default(Wybór użytkownika jest nieznany i dlatego przeglądarka zachowuje się jak przy odmowie).
+
+ +

Cechy Instancji

+ +

Te Cechy są dostępne tylko dla obiektu powiadomień.

+ +
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Tytuł powiadomienia jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
Kierunek tekstu powiadomienia jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
Język kodu powiadomienia jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
Tekst powiadomienia jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
ID powiadomienia (jeżeli jakiekolwiek) jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
Url obrazku użytego w powiadomieniu jak określone w opcjach parametru konstruktora.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Zwraca klon struktury daty powiadomienia.
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
Opisuje czy powiadomienie powinno być ciche,takie jak bez dźwięku czy wbiracji bez względu na ustawienia urządzenia.
+
+ +

Nie wspierane cechy

+ +

Pokazane Cechy są najbardziej aktualną ze specyfikacją, ale nie są wspierane narazie przez żadną przeglądarkę.Wskazane jest aby sprawdzać regularnie czy status się zaktualizował , i daj nam znać jeżeli znajdziesz nie aktualne informacje.

+ +
+
{{domxref("Notification.noscreen")}} {{readonlyinline}}
+
Określa, czy należy włączyć powiadomienia na ekranie urządzenia, czy też nie.
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
Określa, czy użytkownik powinien być powiadamiany po nowym powiadomieniu i zastąpić stare powiadomienie.
+
{{domxref("Notification.sound")}} {{readonlyinline}}
+
Określa dźwięk do odtworzenia wraz z powiadomieniem,za miejscę podstawowego powiadomienia systemowego.
+
{{domxref("Notification.sticky")}} {{readonlyinline}}
+
Określa czy powiadomienie powinno być trudniejsze do usunięcia przez użytkownika, klejące 'sticky'.
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Określa wibrację urządzenia do emisji przez urządzenie.
+
+ +

Obsługa zdarzeń

+ +
+
{{domxref("Notification.onclick")}}
+
Obsługa dla zdarzenia {{event("click")}}.Odpalane przy każdym kliknięciu powiadomienia.
+
{{domxref("Notification.onerror")}}
+
Obsługa dla zdarzenia {{event("error")}}.Odpalane przy każdym razie kiedy powiadomienie będzie napotykało błąd.
+
+ +

Przestarzała obsługa

+ +

Pokazana obsługa zdarzeń jest nadal wspierana w  sekcji poniższej {{anch("browser compatibility")}},ale nie pokazane w obecnej specyfikacji. I w związku z tym, aby bezpiecznie założyć, że są przestarzałe mogą przestać działać w przyszłych wersjach przeglądarek.

+ +
+
{{domxref("Notification.onclose")}}
+
Obsługa zdażenia {{event("close")}}. Zamyka powiadomienie.
+
{{domxref("Notification.onshow")}}
+
Obsługa zdażenia {{event("show")}}.Pokazuje gdy powiadomienie jest pokazywane.
+
+ +

Metoda

+ +

Statyczna metoda

+ +

Te metody są dostępne tylko dla obiektu powiadomień.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
Requests permission from the user to display notifications.
+
+ +

Metoda instacji

+ +

Te cechy są dostępne tylko dla obiektu powiadomień albo to prototype. Obiekt powiadomień pobiera to z interfejsu {{domxref("EventTarget")}}.

+ +
+
{{domxref("Notification.close()")}}
+
Programowo zamyka powiadomienie.
+
+ +

Przykład

+ +

W podstawowtym HTMLu:

+ +
<button onclick="notifyMe()">Pokaż Powiadomienie!</button>
+ +

Jest to możliwe aby wysłać powiadomienie - tutaj pokazujemy jak łatwo i w kompletnym składzie kodu zobaczyć czy powiadomienia są wspierane,potem sprawdzić uprawnienia czy zostały nadane dla obecnego dźwięku powiadomień, potem sprawdź uprawnienia jeżeli potrzebne,przed wysłaniem powiadomienia. 

+ +
function notifyMe() {
+  // Sprawdzamy czy przeglądarka obsługuje powiadomienia.
+  if (!("Notification" in window)) {
+    alert("Ta przeglądarka nie obsługuje powiadomień");
+  }
+
+  // Sprawdźmy czy uprawnienia dla powiadomienia zostały nadane
+  else if (Notification.permission === "granted") {
+    // jeżeli są tworzymy powiadomienie
+    var notification = new Notification("Hi there!");
+  }
+
+  // W innym przypadku tworzymy zapytanie o uprawnienia
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      //Jeżeli użytkownik zaakceptuje tworzymy powiadomienie
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // Na koniec, jeżeli użytkownik odmówił powiadomień i chcesz szanować go
+  // nie ma potrzeby dręczyć go zapytaniami
+}
+ +

{{EmbedLiveSample('Przyk%C5%82ad', '100%', 30)}}

+ +

W wielu przypadkach, nie potrzebujesz tworzyć nowych form. Dla przykładu, w naszym Emogotchi demo (see source code), Prosto odpalamy {{domxref("Notification.requestPermission")}} aby sprawdzać czy możemy dostać uprawnienia do wysyłania powiadomień: 

+ +
Notification.requestPermission();
+ +

Potem odpalamy funkcje spawnNotification() kiedy chcemy odpalić powiadomienie — to jest przekazywane do argumentu opisanego tekstu,ikony i tytułu który chcemy, potem tworzy konieczne opcje obiektu i odpala powiadomienie używając konstruktora {{domxref("Notification.Notification","Notification()")}}.

+ +
function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+}
+ +

Specifikacja

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Kompatybilność Przeglądarek

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Podstawowa usługa5{{property_prefix("webkit")}}[1]
+ 22		4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}256[3]
ikona5{{property_prefix("webkit")}}[1]
+ 22		4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}25{{CompatNo}}
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatChrome(43.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
noscreen, renotify, sound, sticky{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
icon{{CompatUnknown}}{{CompatVersionUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatNo}}{{CompatChrome(43.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
noscreen, renotify, sound, sticky{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.

+ +

Before Chrome 32, {{domxref("Notification.permission")}} was not supported.

+ +

Before Chrome 42, service worker additions were not supported.

+ +

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification method.

+ +

Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and supported only the click and close events.

+ +

Nick Desaulniers wrote a Notification shim to cover both newer and older implementations.

+ +

One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.

+ +

When using notifications  in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above: "permissions": { "desktop-notification": {} }

+ +

[3] Safari zaczeło wspierać powiadomienia z wersją Safari 6,ale tylko od Mac OSX 10.8+(Mountain Lion).

+ +

Zobacz Także

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

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

+ +

Pojęcia i stosowanie

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +
+

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

+
+ +

Interfejsy

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

Wzbogacenia Service worker

+ +

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

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

Przykłady

+ +

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

+ +

Specyfikacje

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

Zgodność przeglądarek

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

Zobacz również

+ + diff --git a/files/pl/web/api/range/index.html b/files/pl/web/api/range/index.html new file mode 100644 index 0000000000..cabb00df2c --- /dev/null +++ b/files/pl/web/api/range/index.html @@ -0,0 +1,105 @@ +--- +title: range +slug: Web/API/Range +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Range +--- +

{{ ApiRef("DOM") }}Obiekt Range reprezentuje fragment dokumentu, który stanowi węzeł oraz część węzła tekstowego w danym dokumencie.

+ +

A range can be created using the createRange method of the Document object. Range objects can also be retrieved by using the getRangeAt method of the selection object.

+ +

Własności

+ +
+
collapsed
+
Returns a boolean indicating whether the range's start and end points are at the same position.
+
commonAncestorContainer
+
Returns the deepest Node that contains the startContainer and endContainer Nodes.
+
endContainer
+
Returns the Node within which the Range ends.
+
endOffset
+
Returns a number representing where in the endContainer the Range ends.
+
startContainer
+
Returns the Node within which the Range starts.
+
startOffset
+
Returns a number representing where in the startContainer the Range starts.
+
+ +

Metody

+ +

Metody pozycjonowania

+ +

Te metody ustawiają punkt początkowy i końcowy obiektu range.

+ +
+
setStart
+
Ustawia pozycję początkową obiektu range.
+
setEnd
+
Ustawia pozycję końcową obiektu range.
+
setStartBefore
+
Ustawia pozycję początkowa dla obiektu range w odniesieniu do innego węzła.
+
setStartAfter
+
Ustawia pozycję początkowa dla obiektu range w odniesieniu do innego węzła.
+
setEndBefore
+
Ustawia pozycję końcową dla obiektu range w odniesieniu do innego węzła.
+
setEndAfter
+
Ustawia pozycję końcową dla obiektu range w odniesieniu do innego węzła.
+
selectNode
+
Ustawia obiekt range, aby zawierał węzeł wraz z jego zawartością.
+
selectNodeContents
+
Ustawia obiekt range, aby zawierał zawartość węzła.
+
collapse
+
Zawija obiekt range do jednego z jego punktów granicznych.
+
+ +

Metody edytujące

+ +

These methods retrieve Nodes from a range and modify the contents of a range.

+ +
+
cloneContents
+
Returns a document fragment copying the nodes of a Range.
+
deleteContents
+
Removes the contents of a Range from the document.
+
extractContents
+
Moves contents of a Range from the document tree into a document fragment
+
insertNode
+
Insert a node at the start of a Range.
+
surroundContents
+
Moves content of a Range into a new node.
+
+ +

Inne metody

+ +
+
compareBoundaryPoints
+
Porównuje punkty graniczne dwóch obiektów range.
+
cloneRange
+
Zwraca obiekt range z punktami granicznymi identycznymi z klonowanym obiektem range.
+
detach
+
Releases Range from use to improve performance.
+
toString
+
Zwraca tekst z obiektu range.
+
+ +

Metody Gecko

+ +

Ta sekcja opisuje szczególne metody Range Mozilli nie będące częścią specyfikacji W3C DOM.

+ +
+
compareNode {{ Obsolete_inline() }}
+
Zwraca stałą opisującą czy węzeł znajduje się przed, za, wewnątrz lub otacza obiekt range .
+
comparePoint
+
Zwraca -1, 0 lub 1 wskazując czy punkt porównania występuje przed, wewnątrz lub za obiektem range.
+
createContextualFragment
+
Zwraca fragment dokumentu utworzony z danego łańcucha kodu.
+
intersectsNode {{ Obsolete_inline() }}
+
Zwraca wartość Boolean określającą czy dany węzeł przecina obiekt range.
+
isPointInRange
+
Zwraca wartość Boolean określającą czy dany punkt jest zawarty w obiekcie range.
+
diff --git a/files/pl/web/api/response/index.html b/files/pl/web/api/response/index.html new file mode 100644 index 0000000000..394a5a4a4d --- /dev/null +++ b/files/pl/web/api/response/index.html @@ -0,0 +1,132 @@ +--- +title: Response +slug: Web/API/Response +tags: + - API + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - Response + - TopicStub +translation_of: Web/API/Response +--- +
{{APIRef("Fetch API")}}
+ +

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

+ +

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

+ +

Constructor

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

Properties

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

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

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

Methods

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

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

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

Examples

+ +

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

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

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

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

Specifications

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

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/pl/web/api/screen/colordepth/index.html b/files/pl/web/api/screen/colordepth/index.html new file mode 100644 index 0000000000..89c06c4b8c --- /dev/null +++ b/files/pl/web/api/screen/colordepth/index.html @@ -0,0 +1,43 @@ +--- +title: Screen.colorDepth +slug: Web/API/Screen/colorDepth +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Screen/colorDepth +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca głębię koloru ekranu.

+ +

Składnia

+ +
bitDepth = window.screen.colorDepth
+
+ +

Przykład

+ +
// Sprawdzenie głębi koloru ekranu
+if ( window.screen.colorDepth < 8) {
+    // Użycie wersji strony z małą ilością kolorów
+} else {
+    // Użycie prawidłowej wersji strony, o pełnej głębi kolorów
+}
+
+ +

Uwagi

+ +

Zobacz także window.screen.pixelDepth.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.screen.colorDepth", "ja": "ja/DOM/window.screen.colorDepth" } ) }}

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

The Screen interface represents a screen, usually the one on which the current window is being rendered.

+ +

Usually it is the one on which the current window is being rendered, obtained using window.screen.

+ +

Properties

+ +
+
{{domxref("Screen.availTop")}}
+
Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.
+
{{domxref("Screen.availLeft")}}
+
Returns the first available pixel available from the left side of the screen.
+
{{domxref("Screen.availHeight")}}
+
Specifies the height of the screen, in pixels, minus permanent or semipermanent user interface features displayed by the operating system, such as the Taskbar on Windows.
+
{{domxref("Screen.availWidth")}}
+
Returns the amount of horizontal space in pixels available to the window.
+
{{domxref("Screen.colorDepth")}}
+
Returns the color depth of the screen.
+
{{domxref("Screen.height")}}
+
Returns the height of the screen in pixels.
+
{{domxref("Screen.left")}}
+
Returns the distance in pixels from the left side of the main screen to the left side of the current screen.
+
{{domxref("Screen.orientation")}}
+
Returns the current orientation of the screen.
+
{{domxref("Screen.pixelDepth")}}
+
Gets the bit depth of the screen.
+
{{domxref("Screen.top")}}
+
Returns the distance in pixels from the top side of the current screen.
+
{{domxref("Screen.width")}}
+
Returns the width of the screen.
+
{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}
+
Boolean. Setting to false will turn off the device's screen.
+
{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}
+
Controls the brightness of a device's screen. A double between 0 and 1.0 is expected.
+
+ +

Events handler

+ +
+
{{domxref("Screen.onorientationchange")}}
+
A handler for the {{event("orientationchange")}} events.
+
+ +

Methods

+ +
+
{{domxref("Screen.lockOrientation")}}
+
Lock the screen orientation (only works in fullscreen or for installed apps)
+
{{domxref("Screen.unlockOrientation")}}
+
Unlock the screen orientation (only works in fullscreen or for installed apps)
+
+ +

Methods inherit from {{domxref("EventTarget")}}

+ +

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+ +

Example

+ +
if (screen.pixelDepth < 8) {
+  // use low-color version of page
+} else {
+  // use regular, colorful page
+}
+
+ +

Specification

+ +

CSSOM View

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

Zwraca szerokość ekranu.

+ +

Składnia

+ +
lWidth = window.screen.width
+
+ +

Przykład

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

Notes

+ +

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

+ +

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

+ +

Specyfikacja

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

Kompatybilność przeglądarek

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}6{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/pl/web/api/selection/addrange/index.html b/files/pl/web/api/selection/addrange/index.html new file mode 100644 index 0000000000..7827743f8e --- /dev/null +++ b/files/pl/web/api/selection/addrange/index.html @@ -0,0 +1,40 @@ +--- +title: addRange +slug: Web/API/Selection/addRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/addRange +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Dodaje zakres do zaznaczenia.

+

Składnia

+
sel.addRange(range)
+
+

Parametry

+
+
+ + range +
+
+ Obiekt zakresu, który będzie dodany do zaznaczenia.
+
+

Przykłady

+
 /* Wybiera wszystkie znaczniki STRONG w dokumencie HTML */
+ var strongs = document.getElementsByTagName("strong");
+ var s = window.getSelection();
+ if(s.rangeCount > 0) s.removeAllRanges();
+ for(var i = 0; i < strongs.length; i++) {
+  var range = document.createRange();
+  range.selectNode(strongs[i]);
+  s.addRange(range);
+ }
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/addRange", "es": "es/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange" } ) }}

diff --git a/files/pl/web/api/selection/anchornode/index.html b/files/pl/web/api/selection/anchornode/index.html new file mode 100644 index 0000000000..200bccb3fa --- /dev/null +++ b/files/pl/web/api/selection/anchornode/index.html @@ -0,0 +1,22 @@ +--- +title: anchorNode +slug: Web/API/Selection/anchorNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/anchorNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca węzeł, w którym się zaczyna zaznaczenie.

+

Skladnia

+
sel.anchorNode
+
+

Notatki

+

Użytkownik może wykonać zaznaczenie od lewej do prawej (w bieg dokumentu) lub od prawej do lewej (odwrotnie od biegu dokumentu). Kotwica znajduje się tam, gdzie użytkownik zaczyna selekcję. Może to być widoczne, kiedy zostanie przytrzymany klawisz Shift i naciśnięte strzałki na klawiaturze. Kotwica selekcji nie zmienia swojego położenia, ale skupienie selekcji, drugi koniec selekcji, porusza się.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/anchorNode", "es": "es/DOM/Selection/anchorNode", "it": "it/DOM/Selection/anchorNode" } ) }}

diff --git a/files/pl/web/api/selection/anchoroffset/index.html b/files/pl/web/api/selection/anchoroffset/index.html new file mode 100644 index 0000000000..35a0148f6a --- /dev/null +++ b/files/pl/web/api/selection/anchoroffset/index.html @@ -0,0 +1,23 @@ +--- +title: anchorOffset +slug: Web/API/Selection/anchorOffset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/anchorOffset +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pozycję, na której kotwica selekcji znajduje się w węźle anchorNode.

+

Składnia

+
sel.anchorOffset
+
+

Uwagi

+

Liczenie się tej zmiennej zaczyna się od 0. Jeżeli selekcja zaczyna się w pierwszym znaku anchorNode, zwracane jest 0.

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/anchorOffset", "es": "es/DOM/Selection/anchorOffset", "it": "it/DOM/Selection/anchorOffset" } ) }}

diff --git a/files/pl/web/api/selection/collapse/index.html b/files/pl/web/api/selection/collapse/index.html new file mode 100644 index 0000000000..fec80daf7e --- /dev/null +++ b/files/pl/web/api/selection/collapse/index.html @@ -0,0 +1,45 @@ +--- +title: collapse +slug: Web/API/Selection/collapse +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapse +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zawęża aktualne zaznaczenie w pojedynczy punkt. Dokument nie jest modyfikowany. Jeżeli treść jest edytowalna i aktywna, przeniesie się tam kursor.

+

Składnia

+
sel.collapse(parentNode,offset);
+
+

Parametry

+
+
+ + parentNode +
+
+ Kursor znajdzie się w tym węźle.
+
+
+
+ + offset +
+
+ Kursor zostanie umieszczony w tej odległości od początku węzła tekstowego + + parentNode + .
+
+

Przykłady

+
/* Umieszcza kursor na początku ciała dokumentu HTML. */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapse", "es": "es/DOM/Selection/collapse", "it": "it/DOM/Selection/collapse" } ) }}

diff --git a/files/pl/web/api/selection/collapsetoend/index.html b/files/pl/web/api/selection/collapsetoend/index.html new file mode 100644 index 0000000000..e7897ea59a --- /dev/null +++ b/files/pl/web/api/selection/collapsetoend/index.html @@ -0,0 +1,22 @@ +--- +title: collapseToEnd +slug: Web/API/Selection/collapseToEnd +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapseToEnd +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przesuwa kotwicę zaznaczenia do pozycji, w której znajduje się skupienie. Samo skupienie nie zmienia swojego położenia. Jeżeli treść jest aktywna i edytowalna, pojawi się tam kursor.

+

Składnia

+
sel.collapseToEnd()
+
+

Parametry

+

Brak.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "es": "es/DOM/Selection/collapseToEnd", "it": "it/DOM/Selection/collapseToEnd" } ) }}

diff --git a/files/pl/web/api/selection/collapsetostart/index.html b/files/pl/web/api/selection/collapsetostart/index.html new file mode 100644 index 0000000000..0dfdc92468 --- /dev/null +++ b/files/pl/web/api/selection/collapsetostart/index.html @@ -0,0 +1,22 @@ +--- +title: collapseToStart +slug: Web/API/Selection/collapseToStart +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/collapseToStart +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przesuwa skupienie zaznaczenia do położenia kotwicy. Sama kotwica nie zmienia swojego położenia. Jeżeli treść jest aktywna i edytowalna, przeniesie się tam kursor.

+

Składnia

+
sel.collapseToStart()
+
+

Parametry

+

Brak.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapseToStart", "es": "es/DOM/Selection/collapseToStart", "it": "it/DOM/Selection/collapseToStart" } ) }}

diff --git a/files/pl/web/api/selection/containsnode/index.html b/files/pl/web/api/selection/containsnode/index.html new file mode 100644 index 0000000000..c73f0ae763 --- /dev/null +++ b/files/pl/web/api/selection/containsnode/index.html @@ -0,0 +1,47 @@ +--- +title: containsNode +slug: Web/API/Selection/containsNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/containsNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Sprawdza czy węzeł jest częścią zaznaczenia.

+

Składania

+
sel.containsNode(aNode,aPartlyContained)
+
+

Parametry

+
+
+ + aNode +
+
+ Węzeł, którego obecność sprawdzamy.
+
+ + aPartlyContained +
+
+ Kiedy jej wartością jest + + true + , containsNode zwraca wartość true kiedy część węzła jest częścią zaznaczenia.
+
+ Kiedy jej wartością jest + + false + , containsNode zwraca wartość true tylko i wyłącznie, gdy cały węzeł jest częścią zaznaczenia.
+
+

Przykłady

+
 /* Sprawdza czy cokolwiek wewnątrz elementu body jest zaznaczone */
+ alert(window.getSelection().containsNode(document.body, true));
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/containsNode", "es": "es/DOM/Selection/containsNode", "it": "it/DOM/Selection/containsNode" } ) }}

diff --git a/files/pl/web/api/selection/deletefromdocument/index.html b/files/pl/web/api/selection/deletefromdocument/index.html new file mode 100644 index 0000000000..7cc9727ebc --- /dev/null +++ b/files/pl/web/api/selection/deletefromdocument/index.html @@ -0,0 +1,24 @@ +--- +title: deleteFromDocument +slug: Web/API/Selection/deleteFromDocument +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/deleteFromDocument +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Usuwa rzeczywisty tekst będący reprezentacją zaznaczenia z DOM dokumentu.

+

Składnia

+
sel.deleteFromDocument()
+
+

Parametry

+

Brak.

+

Przykłady

+

Użytkownik na stronie internetowej zaznacza tekst "mają dwoje" ze zdania "Króliki mają dwoje uszu". Następnie klika na przycisk, który wywołuje kod JavaScript window.getSelection().deleteFromDocument(). Tekst dokumentu staje się zdaniem "Króliki uszu".

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "es": "es/DOM/Selection/deleteFromDocument", "it": "it/DOM/Selection/deleteFromDocument" } ) }}

diff --git a/files/pl/web/api/selection/extend/index.html b/files/pl/web/api/selection/extend/index.html new file mode 100644 index 0000000000..fbec1f5eb5 --- /dev/null +++ b/files/pl/web/api/selection/extend/index.html @@ -0,0 +1,40 @@ +--- +title: extend +slug: Web/API/Selection/extend +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/extend +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przemieszcza skupienie zaznaczenia do podanego miejsca. Kotwica zaznaczenia nie zmienia swojego położenia. Zaznaczenie będzie miało koniec w nowym miejscu skupienia bez względu na kierunek zaznaczania.

+

Składnia

+
sel.extend(parentNode,offset)
+
+

Parametry

+
+
+ + parentNode +
+
+ Węzeł, w którym skupienie zmieni swoje położenie.
+
+
+
+ + offset +
+
+ Pozycja od początku węzła tekstowego + + parentNode + , gdzie zostanie umieszczone skupienie.
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/extend", "es": "es/DOM/Selection/extend", "it": "it/DOM/Selection/extend" } ) }}

diff --git a/files/pl/web/api/selection/focusnode/index.html b/files/pl/web/api/selection/focusnode/index.html new file mode 100644 index 0000000000..e59310d0f1 --- /dev/null +++ b/files/pl/web/api/selection/focusnode/index.html @@ -0,0 +1,21 @@ +--- +title: focusNode +slug: Web/API/Selection/focusNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/focusNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca węzeł, w którym selekcja się kończy.

+

Składnia

+
sel.focusNode
+
+

Uwagi

+

Użytkownik może wykonać zaznaczenie od lewej do prawej (w bieg dokumentu) lub od prawej do lewej (odwrotnie od biegu dokumentu). Skupienie znajduje się tam, gdzie użytkownik kończy selekcję. Może to być widoczne, kiedy zostanie przytrzymany klawisz Shift i naciśnięte strzałki na klawiaturze. Skupienie selekcji zmienia swoje położenie, a skupienie selekcji, drugi koniec selekcji, nie.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/focusNode", "es": "es/DOM/Selection/focusNode", "it": "it/DOM/Selection/focusNode" } ) }}

diff --git a/files/pl/web/api/selection/focusoffset/index.html b/files/pl/web/api/selection/focusoffset/index.html new file mode 100644 index 0000000000..cba7b76783 --- /dev/null +++ b/files/pl/web/api/selection/focusoffset/index.html @@ -0,0 +1,22 @@ +--- +title: focusOffset +slug: Web/API/Selection/focusOffset +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/focusOffset +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca pozycję, na której skupienie selekcji znajduje się w węźle focusNode.

+

Składnia

+
sel.focusOffset
+
+

Uwagi

+

Liczenie się tej zmiennej zaczyna się od 0. Jeżeli selekcja kończy się z pierwszym znakiem anchorNode, zwracane jest 0.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/focusOffset", "es": "es/DOM/Selection/focusOffset", "it": "it/DOM/Selection/focusOffset" } ) }}

diff --git a/files/pl/web/api/selection/getrangeat/index.html b/files/pl/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..ff4b2c962b --- /dev/null +++ b/files/pl/web/api/selection/getrangeat/index.html @@ -0,0 +1,44 @@ +--- +title: getRangeAt +slug: Web/API/Selection/getRangeAt +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/getRangeAt +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt zakresu reprezentujący jeden z obecnie zaznaczonych zakresów.

+

Składnia

+
range =sel.getRangeAt(index)
+
+

Parametry

+
+
+ + range +
+
+ Obiekt zakresu, który zostanie zwrócony.
+
+
+
+ + index +
+
+ Wartość liczbowa liczona od zera. Wartość ujemna, równa albo większa od rangeCount spowoduje wystąpienie błędu.
+
+

Przykłady

+
ranges = [];
+sel = window.getSelection();
+for(var i = 0; i < sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Każdy element w tablicy zakresów jest teraz
+ * obiektem zakresu reprezentującym jeden z
+ * zakresów w aktualnym zaznaczeniu */
+
+

{{ languages( { "en": "en/DOM/Selection/getRangeAt", "es": "es/DOM/Selection/getRangeAt" } ) }}

diff --git a/files/pl/web/api/selection/index.html b/files/pl/web/api/selection/index.html new file mode 100644 index 0000000000..83e76ccfa9 --- /dev/null +++ b/files/pl/web/api/selection/index.html @@ -0,0 +1,100 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Selection +--- +

{{ ApiRef("DOM") }}{{SeeCompatTable}}

+ +

Podsumowanie

+ +

Klasa obiektu zwracanego przez window.getSelection() i inne metody.

+ +

Opis

+ +

Obiekt reprezentujący zakresy, które zaznaczył użytkownik. Zazwyczaj przechowuje tylko jeden zakres, który pobieramy następująco:

+ +
range = sel.getRangeAt(0);
+
+ +

Wywołanie metody toString() zwróci tekst znajdujący się wewnątrz zaznaczenia, na przykład:

+ +
selObj = window.getSelection();
+window.alert(selObj);
+
+ +

Słownik

+ +

Inne kluczowe pojęcia używane w tym dziale.

+ +
+
kotwica (anchor)
+
Kotwicą zaznaczenia jest jego właściwy początek. Kiedy tworzymy zaznaczenie przy użyciu myszki, kotwica w dokumencie znajduje się dokładnie tam, gdzie początkowo został wciśnięty przycisk myszki. Gdy użytkownik zmienia zaznaczenie używając myszki lub klawiatury, kotwica nie zmienia swego położenia.
+
skupienie (focus)
+
Skupieniem zaznaczenia jest jego właściwy koniec. Kiedy tworzymy zaznaczenie przy użyciu myszki, jej skupienie jest dokładnie tam, gdzie przycisk myszki zostaje zwolniony. Gdy użytkownik zmienia zaznaczenie używając myszki lub klawiatury, skupienie zmienia swe położenie na koniec tego zaznaczenia.
+
zakres (range)
+
Zakres to przyległa część dokumentu. Zakres może zawierać zarówno całe węzły, jak i ich części, jak np. wycinek węzła tekstowego. Użytkownik zazwyczaj wybiera tylko jedno zaznaczenie w danej chwili, jednak możliwe jest zaznaczenie kilku fragmentów na raz (na przykład używając klawisza Control). Zakres może być pobrany z zaznaczenia jako obiekt zakresu. Obiekty zakresów mogą być również utworzone poprzez DOM i programowo dodane lub usunięte z zaznaczenia.
+
+ +

Własności

+ +
+
anchorNode
+
Zwraca węzeł, w którym rozpoczyna się zaznaczenie.
+
anchorOffset
+
Zwraca pozycję, gdzie kotwica zaznaczenia znajduje się w węźle anchorNode.
+
focusNode
+
Zwraca węzeł, w którym kończy się zaznaczenie.
+
focusOffset
+
Zwraca pozycję, gdzie skupienie zaznaczenia znajduje się w węźle focusNode
+
isCollapsed
+
Zwraca wartość logiczną wskazującą czy początek zaznaczenia znajduje się w tym samym miejscu, co jego koniec.
+
rangeCount
+
Zwraca liczbę zakresów znajdujących się w zaznaczeniu.
+
+ +

Metody

+ +
+
getRangeAt
+
Zwraca obiekt zakresu reprezentujący jeden z obecnie zaznaczonych zakresów.
+
collapse
+
Zawęża aktualne zaznaczenie do pojedynczego punktu.
+
extend
+
Przesuwa koniec zaznaczenia do podanego punktu.
+
collapseToStart
+
Przesuwa koniec zaznaczenia do tego samego miejsca, w którym znajduje się początek.
+
collapseToEnd
+
Przesuwa początek zaznaczenia do tego samego miejsca, w którym znajduje się koniec. Sam koniec zaznaczenia nie zmienia swojego położenia.
+
selectAllChildren
+
Dodaje wszystkie dzieci podanego węzła do zaznaczenia.
+
addRange
+
Obiekt zakresu, który zostanie dodany do zaznaczenia.
+
removeRange
+
Usuwa zakres z zaznaczenia
+
removeAllRanges
+
Usuwa wszystkie zakresy z zaznaczenia.
+
deleteFromDocument
+
Usuwa zawartość zaznaczenia z dokumentu.
+
selectionLanguageChange
+
 
+
toString
+
Zwraca ciąg znaków, który jest obecnie reprezentowany przez obiekt zaznaczenia, tj. aktualnie zaznaczony tekst.
+
containsNode
+
Wskazuje czy konkretny węzeł jest częścią zaznaczenia.
+
+ +

Zobacz także

+ +

window.getSelection, Range

+ +

Odnośniki zewnętrzne

+ + diff --git a/files/pl/web/api/selection/iscollapsed/index.html b/files/pl/web/api/selection/iscollapsed/index.html new file mode 100644 index 0000000000..84b01c648c --- /dev/null +++ b/files/pl/web/api/selection/iscollapsed/index.html @@ -0,0 +1,21 @@ +--- +title: isCollapsed +slug: Web/API/Selection/isCollapsed +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/isCollapsed +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wartość logiczną, która określa czy początek selekcji znajduje się w tym samym miejscu, co jej koniec.

+

Składnia

+
sel.isCollapsed
+
+

Uwagi

+

Nawet załamana selekcja może mieć rangeCount większe niż 0. sel.getRangeAt(0) może zwrócić zakres, który również jest załamany.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/isCollapsed", "es": "es/DOM/Selection/isCollapsed", "it": "it/DOM/Selection/isCollapsed" } ) }}

diff --git a/files/pl/web/api/selection/rangecount/index.html b/files/pl/web/api/selection/rangecount/index.html new file mode 100644 index 0000000000..f966cff941 --- /dev/null +++ b/files/pl/web/api/selection/rangecount/index.html @@ -0,0 +1,19 @@ +--- +title: rangeCount +slug: Web/API/Selection/rangeCount +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/rangeCount +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca liczbę zakresów, które znajdują się w zaznaczeniu.

+

Składnia

+
sel.rangeCount
+
+

Uwagi

+

Zaraz po załadowaniu strony, wartość rangeCount wynosi 0. Użytkownik może zazwyczaj wykonać tylko jedno zaznaczenie na raz, dlatego wartość rangeCount z reguły będzie wynosiła 1. Za pomocą skryptu możliwe jest stworzenie zaznaczenia, które zawiera więcej niż jeden zakres.

+

{{ languages( { "en": "en/DOM/Selection/rangeCount", "es": "es/DOM/Selection/rangeCount", "it": "it/DOM/Selection/rangeCount" } ) }}

diff --git a/files/pl/web/api/selection/removeallranges/index.html b/files/pl/web/api/selection/removeallranges/index.html new file mode 100644 index 0000000000..3ba0519f45 --- /dev/null +++ b/files/pl/web/api/selection/removeallranges/index.html @@ -0,0 +1,22 @@ +--- +title: removeAllRanges +slug: Web/API/Selection/removeAllRanges +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/removeAllRanges +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Usuwa wszystkie zakresy, ustawiając własności anchorNode i focusNode na null oraz usuwając samo zaznaczenie.

+

Składnia

+
sel.removeAllRanges();
+
+

Parametry

+

Brak.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/removeAllRanges", "es": "es/DOM/Selection/removeAllRanges", "it": "it/DOM/Selection/removeAllRanges" } ) }}

diff --git a/files/pl/web/api/selection/removerange/index.html b/files/pl/web/api/selection/removerange/index.html new file mode 100644 index 0000000000..24fa532b22 --- /dev/null +++ b/files/pl/web/api/selection/removerange/index.html @@ -0,0 +1,40 @@ +--- +title: removeRange +slug: Web/API/Selection/removeRange +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/removeRange +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Usuwa zakres z zaznaczenia.

+

Składnia

+
sel.removeRange(range)
+
+

Parametry

+
+
+ + range +
+
+ Obiekt zakresu, który będzie usunięty z zaznaczenia.
+
+

Przykłady

+
/* Programowo, można wybrać więcej niż jeden zakres.
+ * Ten przykład usunie wszystkie zakresy oprócz pierwszego.*/
+s = window.getSelection();
+if(s.rangeCount > 1) {
+ for(var i = 1; i < s.rangeCount; i++) {
+  s.removeRange(s.getRangeAt(i));
+ }
+}
+
+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/removeRange", "es": "es/DOM/Selection/removeRange", "it": "it/DOM/Selection/removeRange" } ) }}

diff --git a/files/pl/web/api/selection/selectallchildren/index.html b/files/pl/web/api/selection/selectallchildren/index.html new file mode 100644 index 0000000000..df659530c6 --- /dev/null +++ b/files/pl/web/api/selection/selectallchildren/index.html @@ -0,0 +1,40 @@ +--- +title: selectAllChildren +slug: Web/API/Selection/selectAllChildren +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/selectAllChildren +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Dodaje wszystkie dzieci podanego węzła do zaznaczenia. Poprzednie zaznaczenie jest usuwane.

+

Składnia

+
sel.selectAllChildren(parentNode)
+
+

Parametry

+
+
+ + parentNode +
+
+ Wszystkie dzieci węzła + + parentNode + będą wybrane. Samo + + parentNode + nie będzie częścią zaznaczenia.
+
+

Przykłady

+
footer = document.getElementById("footer");
+window.getSelection().selectAllChildren(footer);
+/* Wszystko wewnątrz footer jest teraz wybrane */
+
+

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/selectAllChildren", "es": "es/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren" } ) }}

diff --git a/files/pl/web/api/selection/tostring/index.html b/files/pl/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..588c81ec26 --- /dev/null +++ b/files/pl/web/api/selection/tostring/index.html @@ -0,0 +1,35 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Selection/toString +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca ciąg znakowy, który jest obecnie reprezentowany przez obiekt selekcji, tj. aktualnie zaznaczony tekst.

+

Składnia

+
string =sel.toString()
+
+ +

Własności

+

Brak.

+

Opis

+

Ta metoda zwraca obecnie zaznaczony tekst.

+

W JavaScript, ta metoda jest wywoływana automatycznie, kiedy funkcja, do której przesyłany jest obiekt, oczekuje ciągu znakowego:

+
alert(window.getSelection()) // Co jest wywoływane
+alert(window.getSelection().toString())  // Co jest w wywoływane w rzeczywistości
+
+

Zobacz również

+ +

 

+
+  
+

{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "fr": "fr/DOM/Selection/toString", "it": "it/DOM/Selection/toString" } ) }}

diff --git a/files/pl/web/api/speechrecognition/index.html b/files/pl/web/api/speechrecognition/index.html new file mode 100644 index 0000000000..8f41dfb239 --- /dev/null +++ b/files/pl/web/api/speechrecognition/index.html @@ -0,0 +1,153 @@ +--- +title: SpeechRecognition +slug: Web/API/SpeechRecognition +translation_of: Web/API/SpeechRecognition +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

Interfejs SpeechRecognition jest częścią Web Speech API i kontroluje usługę rozpoznawania mowy. Obsługuje również {{domxref("SpeechRecognitionEvent")}} zwracany przez usługę rozpoznawania mowy.

+ +
+

Uwaga: Na Chrome użycie Speech Recognition wymaga zastosowania serwera. Dźwięk jest przesyłany do usługi web, więc nie działa offline.

+
+ +

Konstruktor

+ +
+
{{domxref("SpeechRecognition.SpeechRecognition()")}}
+
Tworzy nowy obiekt SpeechRecognition.
+
+ +

Właściwości

+ +

SpeechRecognition dziedziczy równiez właściwości z interfejsu rodzica, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechRecognition.grammars")}}
+
Tworzy i zwraca kolekcję obiektów {{domxref("SpeechGrammar")}}, które reprezentują zasady gramatyczne akceptowane przez SpeechRecognition.
+
{{domxref("SpeechRecognition.lang")}}
+
Tworzy i zwraca język bieżącej instacji SpeechRecognition. Jeśli nie zostanie sprecyzowany domyślnie przyjmie wartość z atrybutu {{htmlattrxref("lang","html")}}, a jeśli i on nie został zdefiniowany - z ustawień językowych przeglądarki.
+
{{domxref("SpeechRecognition.continuous")}}
+
Ustawienie przyjęcia ciągłego strumienia mowy lub pojedynczego zwrotu. Domyslnie ustawiony na przyjęcie pojedynczego zwrotu (false.)
+
{{domxref("SpeechRecognition.interimResults")}}
+
Ustawienie kontrolujące zwracanie rezultatów pośrednich. Przyjmuje wartości (true) lub (false.) Rezultat pośredni rozpoznawania mowy to rezultat niepełny, uzyskiwany w trakcie rozpoznawania wypowiedzi (np. kiedy metoda {{domxref("SpeechRecognitionResult.isFinal")}} zwraca  false.) 
+
{{domxref("SpeechRecognition.maxAlternatives")}}
+
Ustawienie maksymalnej liczby alternatywnych wyników rozpoznawania mowy. Domyślnie - 1.
+
{{domxref("SpeechRecognition.serviceURI")}}
+
Specifies the location of the speech recognition service used by the current SpeechRecognition to handle the actual recognition. The default is the user agent's default speech service.
+
+ +
+
+ +

Methods

+ +

SpeechRecognition also inherits methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechRecognition.abort()")}}
+
Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.
+
{{domxref("SpeechRecognition.start()")}}
+
Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
+
{{domxref("SpeechRecognition.stop()")}}
+
Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
audiostart
+
Fired when the user agent has started to capture audio.
+ Also available via the onaudiostart property.
+
audioend
+
Fired when the user agent has finished capturing audio.
+ Also available via the onaudioend property.
+
end
+
Fired when the speech recognition service has disconnected.
+ Also available via the onend property.
+
error
+
Fired when a speech recognition error occurs.
+ Also available via the onerror property.
+
nomatch
+
Fired when the speech recognition service returns a final result with no significant recognition. This may involve some degree of recognition, which doesn't meet or exceed the {{domxref("SpeechRecognitionAlternative.confidence","confidence")}} threshold.
+ Also available via the onnomatch property.
+
result
+
Fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
+ Also available via the onresult property.
+
soundstart
+
Fired when any sound — recognisable speech or not — has been detected.
+ Also available via the onsoundstart property.
+
soundend
+
Fired when any sound — recognisable speech or not — has stopped being detected.
+ Also available via the onsoundend property.
+
speechstart
+
Fired when sound that is recognised by the speech recognition service as speech has been detected.
+ Also available via the onspeechstart property.
+
speechend
+
Fired when speech recognised by the speech recognition service has stopped being detected.
+ Also available via the onspeechend property.
+
start
+
Fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
+ Also available via the onstart property.
+
+ +

Examples

+ +

In our simple Speech color changer example, we create a new SpeechRecognition object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the SpeechRecognition instance using the {{domxref("SpeechRecognition.grammars")}} property.

+ +

After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires,  we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.

+ +
var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+speechRecognitionList.addFromString(grammar, 1);
+recognition.grammars = speechRecognitionList;
+//recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+
+var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+
+recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color;
+  bg.style.backgroundColor = color;
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}{{Spec2('Web Speech API')}}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/pl/web/api/storage/index.html b/files/pl/web/api/storage/index.html new file mode 100644 index 0000000000..22f478e9ff --- /dev/null +++ b/files/pl/web/api/storage/index.html @@ -0,0 +1,154 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - JavaScript + - Wszystkie_kategorie +translation_of: Web/API/Web_Storage_API +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Magazyn DOM (DOM Storage) jest nazwą określającą zestaw aspektów magazynowania danych wprowadzonych w specyfikacji Web Applications 1.0. Magazyn DOM jest zaprojektowany, by dostarczyć większą, bezpieczniejszą i prostszą do użycia, alternatywę przechowywania informacji w ciasteczkach. Jest obecnie dostępny tylko w przeglądarkach bazujących na Mozilli, zwłaszcza zaczynając od Firefoksa 2.

+ +
Uwaga: Magazyn DOM nie jest tym samym co mozStorage (interfejsy XPCOM Mozilli do SQLite) czy API przechowywania sesji (użyteczność magazynu XPCOM do użycia przez rozszerzenia).
+ +

Opis

+ +

Mechanizm Magazynu DOM w głównej mierze polega na bezpiecznym przechowywaniu par kluczy i wartości możliwych do późniejszego odtworzenia. Celem tego dodatku jest dostarczenie wszechstronnego środka, dzięki któremu mogą być budowane w pełni interaktywne aplikacje (włączając w to zaawansowane cechy, takie jak możliwość pracowania bez dostępu do sieci nawet przez dłuższe okresy czasu).

+ +

Obecnie tylko przeglądarki bazujące na Mozilli dostarczają działającą implementację specyfikacji Magazynu DOM. Jednakże, Internet Explorer posiada podobną funkcję nazwaną "zachowaniem danych użytkownika" (userData behavior), które pozwala na przechowanie danych pomiędzy wieloma sesjami przeglądarki.

+ +

Magazyn DOM jest użyteczny, ponieważ nie istnieje żadna dobra metoda przechowywania przez przeglądarkę sensownej pojemności danych przez dowolny okres czasu. Ciasteczka HTTP mają ograniczoną pojemność i nie dostarczają żadnego wsparcia dla organizowania przechowywanych danych oraz innych metod (takich jak Lokalny magazyn Flash (Flash Local Storage)), które do działania wymagają dodatkowych wtyczek.

+ +

Jedną z pierwszych aplikacji, które zaczęły używać nowej funkcjonalności Magazynu DOM (w dodatku do "zachowania danych użytkownika" Internet Explorer) było halfnote (aplikacja zarządzająca notatkami) napisana przez Aarona Boodmana. W swoim programie, Aaron jednocześnie zapisywał swoje notatki na serwer (kiedy jego połączenie Internetowe było aktywne) i dysk lokalny. To pozwala użytkownikowi na bezpieczne zapisywanie notatek, nawet ze sporadyczną aktywnością połączenia z Internetem.

+ +

Pomimo, że koncept oraz implementacja zaprezentowana w programie halfnote była stosunkowo prosta, jego powstanie wskazuje na możliwość tworzenia nowego typu aplikacji internetowych, użytecznych i działających zarówno z aktywnym połączeniem Internetowym, jak i bez niego.

+ +

Odnośniki

+ +

Poniższe elementy są obiektami globalnymi, które istnieją jako własności każdego okna DOM. Znaczy to, że są one dostępne jako własności sessionStorage lub window.sessionStorage (jest to ważne, ponieważ możliwe dzięki temu jest użycie ramek do przechowania i dostępu do dodatkowych danych, po za tym, co automatycznie jest dostępne na stronie).

+ +

sessionStorage

+ +

Jest to globalny obiekt, który zajmuje się przechowywaniem danych, które mają być dostępne na czas trwania sesji strony. Trwa ona tak długo, dopóki otwarte jest okno przeglądarki, które można przeładowywać i odświeżać. Otwarcie strony w nowej karcie bądź oknie, powoduje stworzenie nowej sesji.

+ +
// Zapisywanie danych do pamięci aktualnej sesji
+sessionStorage.username = "John";
+
+// Odtwarzanie wcześniej zapisanych danych
+alert( "username = " + sessionStorage.username );
+
+ +

Obiekt sessionStorage jest najbardziej pomocny przy przechowywaniu tymczasowych danych, które powinny być zapisane i chronione przez utraceniem w razie przypadkowego przeładowania strony.

+ +
Uwaga: Obiekt sessionStorage powinien również być w stanie przechowywać i odtwarzać dane po przypadkowym zawieszeniu się przeglądarki, jednak przez {{ Bug(339445) }} ta funkcjonalność w Firefox jeszcze nie działa.
+ +

Przykłady:

+ +

Automatycznie zapisuje treści pól tekstowych, by w razie przypadkowego odświeżenia strony, odtworzyć treści tych pól, by nie stracić danych już wprowadzonych.

+ +
 // Pobranie pola tekstowego, który zamierzamy śledzić.
+ var field = document.getElementById("field");
+
+ // Sprawdzenie, czy mamy zapisaną już wcześniej wartość
+ // (stanie się to tylko wtedy, gdy strona została przeładowana)
+ if ( sessionStorage.autosave ) {
+     // Odtworzenie wartości pola tekstowego
+     field.value = sessionStorage.autosave;
+ }
+
+ // Sprawdzanie wartości pola tekstowego co 1 sekundę
+ setInterval(function(){
+     // Oraz zapisanie jej do obiektu sesji
+     sessionStorage.autosave = field.value;
+ }, 1000);
+
+ +

Więcej informacji:

+ + + +

globalStorage

+ +

Jest to globalny obiekt, który utrzymuje wiele przestrzeni publicznych oraz prywatnych, które mogą być użyte do przechowywania danych przez dłuższy okres czasu (np. przez kilka stron czy sesji przeglądarki).

+ +
// Zapisanie danych, które będzie można odtworzyć tylko z domeny mozilla.org
+globalStorage['mozilla.org'].snippet = "<b>Cześć</b>, jak się masz?";
+
+// Zapisanie danych, które możliwe będą do otworzenia przez dowolną stronę czy domenę
+globalStorage[''].favBrowser = "Firefox";
+
+ +

Dokładniej mówiąc, obiekt globalStorage daje nam dostęp do wielu różnych magazynów obiektów, do których można przypisywać dane. Dla przykładu, jeśli chcielibyśmy stworzyć stronę internetową, która używałaby obiektu globalStorage w tej domenie (developer.mozilla.org) mielibyśmy takie obiekty magazynów nam dostępne:

+ + + +

Przykłady:

+ +

Wszystkie te przykłady wymagają dołączenia kodu na wszystkich stronach, na których chcemy zaobserwować efekt.

+ +

Zapamiętywanie nazwy użytkownika dla konkretnej subdomeny, która została odwiedzona:

+ +
 globalStorage['developer.mozilla.org'].username = "John";
+
+ +

Zliczenie każdej wizyty użytkownika na każdej ze stron w danej domenie:

+ +
 // musi zostać użyte parseInt, ponieważ wszystkie przechowywane dane są jako ciągi znakowe
+ globalStorage['mozilla.org'].visits =
+     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
+
+ +

Zapamiętywanie adresów wszystkich stron, które odwiedzasz:

+ +
 globalStorage[''].sites += "," + location.hostname;
+
+ +

Więcej informacji:

+ + + +

Więcej informacji:

+ + + +

Przykłady

+ + + +

Tematy powiązane

+ + + +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}

diff --git a/files/pl/web/api/stylesheet/cssrules/index.html b/files/pl/web/api/stylesheet/cssrules/index.html new file mode 100644 index 0000000000..d3fabad79a --- /dev/null +++ b/files/pl/web/api/stylesheet/cssrules/index.html @@ -0,0 +1,46 @@ +--- +title: stylesheet.cssRules +slug: Web/API/Stylesheet/cssRules +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSRuleList +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca wszystkie reguły/zasady CSS w arkuszu stylów jako {{domxref("CSSRuleList")}}, tablico-podobny obiekt.

+ +

Składnia

+ +
rules = stylesheet.cssRules
+
+ +

rules jest tablicą {{domxref("CSSRuleList")}} indywidualnych obiektów cssRule. Pojedynczy obiekt cssRule może odwołać się do jednego z następujących obiektów:

+ + + +

Przykład

+ +
// pobiera pierwszą zasadę
+first_rule = document.styleSheets[0].cssRules[0];
+
+ +

Uwagi

+ +

Zobacz obiekt DOM {{domxref("cssRule")}}.

+ +

Specyfikacja

+ +

DOM Level 2 Style: CSSStyleSheet.cssRules

diff --git a/files/pl/web/api/stylesheet/deleterule/index.html b/files/pl/web/api/stylesheet/deleterule/index.html new file mode 100644 index 0000000000..bda06f24b4 --- /dev/null +++ b/files/pl/web/api/stylesheet/deleterule/index.html @@ -0,0 +1,26 @@ +--- +title: stylesheet.deleteRule +slug: Web/API/Stylesheet/deleteRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet/deleteRule +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda deleteRule usuwa regułę stylu bieżącego obiektu arkusza stylów.

+

Składnia

+
stylesheet.deleteRule(index)
+
+

Parametry

+ +

Przykład

+
 myStyles.deleteRule(0);
+
+

Specyfikacja

+

deleteRule

+

{{ languages( { "en": "en/DOM/stylesheet.deleteRule" } ) }}

diff --git a/files/pl/web/api/stylesheet/disabled/index.html b/files/pl/web/api/stylesheet/disabled/index.html new file mode 100644 index 0000000000..74e1e5401a --- /dev/null +++ b/files/pl/web/api/stylesheet/disabled/index.html @@ -0,0 +1,25 @@ +--- +title: stylesheet.disabled +slug: Web/API/Stylesheet/disabled +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/disabled +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Ta własność sygnalizuje, gdzie bieżący arkusz stylów jest używany lub nie.

+

Składnia

+
bool = stylesheet.disabled
+
+

Przykład

+
// jeśli arkusz stylów jest wyłączony...
+if (stylesheet.disabled) {
+   // zachowuje style in-line
+}
+
+

Specyfikacja

+

disabled

+

{{ languages( { "en": "en/DOM/stylesheet.disabled" } ) }}

diff --git a/files/pl/web/api/stylesheet/href/index.html b/files/pl/web/api/stylesheet/href/index.html new file mode 100644 index 0000000000..e0d7661c24 --- /dev/null +++ b/files/pl/web/api/stylesheet/href/index.html @@ -0,0 +1,42 @@ +--- +title: stylesheet.href +slug: Web/API/Stylesheet/href +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/href +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca położenie zewnetrznego arkusza stylów.

+

Składnia

+
uri = stylesheet.href
+
+

Parametry

+ +

Przykład

+
 // W lokalnej maszynie:
+ <html>
+  <head>
+   <link rel="StyleSheet" href="example.css" type="text/css" />
+   <script>
+    function sref() {
+     alert(document.styleSheets[0].href);
+    }
+   </script>
+  </head>
+  <body>
+   <div class="thunder">Thunder</div>
+   <button onclick="sref()">ss</button>
+  </body>
+ </html>
+// Zwraca "file:////C:/Windows/Desktop/example.css
+
+

Notatki

+

Jeżeli arkusz stylów jest zewnętrznym arkuszem stylów, wartością tego atrybutu jest jego lokalizacja. Dla wewnętrznego arkusza stylów, wartość tego atrybutu wynosi null.

+

Specyfikacja

+

href

diff --git a/files/pl/web/api/stylesheet/index.html b/files/pl/web/api/stylesheet/index.html new file mode 100644 index 0000000000..dca62c79ee --- /dev/null +++ b/files/pl/web/api/stylesheet/index.html @@ -0,0 +1,57 @@ +--- +title: Stylesheet +slug: Web/API/Stylesheet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet +--- +

{{ ApiRef() }}

+ +

Ten dział opisuje obiekt CSSStyleSheet, który opisuje pojedynczy arkusz stylów css.

+ +

Arkusz stylów CSS składa się z reguł CSS, każda z nich może być manipulowana bezpośrednio przez obiekt CSSRule. Obiekt arkusza stylów pozwala ci kontrolować i modyfikować arkusze stylów,włączając jego listę reguł.

+ +

Możesz pobrać listę arkuszy stylów dla bieżącego dokumentu używając własności document.styleSheets.

+ +

Własności

+ +
+
stylesheet.cssRules
+
Zwraca wszystkie reguły/zasady CSS w arkuszu stylów jako tablicę.
+
stylesheet.disabled
+
Ta własność sygnalizuje, czy bieżący arkusz stylów jest używany lub nie.
+
stylesheet.href
+
Zwraca położenie zewnętrznego arkusza stylów.
+
stylesheet.media
+
SpeObiekt media określa zamierzony nośnik docelowy dla stylu informacji.
+
stylesheet.ownerNode
+
Zwraca węzeł łączący arkusz stylów z dokumentem.
+
stylesheet.ownerRule
+
Jeżeli arkusz stylów pochodzi z reguły @import, własność ownerRule będzie zawierać CSSImportRule.
+
stylesheet.parentStyleSheet
+
Zwraca arkusz stylów, który włącza obecny arkusz (jeśli istnieje).
+
stylesheet.title
+
Zwraca doradczy tytuł bieżącego arkusza stylów.
+
stylesheet.type
+
Określa język arkusza stylów dla tego arkusza stylów.
+
+ +

Metody

+ +
+
stylesheet.deleteRule
+
Usuwa reguły z arkusza stylów.
+
stylesheet.insertRule
+
Umieszcza nową regułę stylu dla bieżącego arkusza stylów.
+
+ +

Specyfikacja

+ +

DOM Level 2 Style Sheets: StyleSheet

+ +

DOM Level 2 CSS: CSSStyleSheet

+ +

{{ languages( { "en": "en/DOM/stylesheet" } ) }}

diff --git a/files/pl/web/api/stylesheet/insertrule/index.html b/files/pl/web/api/stylesheet/insertrule/index.html new file mode 100644 index 0000000000..eeabdc8a31 --- /dev/null +++ b/files/pl/web/api/stylesheet/insertrule/index.html @@ -0,0 +1,42 @@ +--- +title: stylesheet.insertRule +slug: Web/API/Stylesheet/insertRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/CSSStyleSheet/insertRule +--- +

{{APIRef("CSSOM")}}

+ +

Podsumowanie

+ +

Metoda insertRule dodaje nową regułę stylu do aktualnego arkuszu stylu.

+ +

Składnia

+ +
stylesheet.insertRule(rule, index)
+
+ +

Parametry

+ + + +

Przykład

+ +
 // push a new rule onto the top of my stylesheet
+ myStyle.insertRule("#blanc { color: white }", 0);
+
+ +

Uwagi

+ +

For rule sets this contains both the selector and the style declaration. For at-rules, this specifies both the at-identifier and the rule content.

+ +

Specyfikacja

+ +

insertRule 

diff --git a/files/pl/web/api/stylesheet/media/index.html b/files/pl/web/api/stylesheet/media/index.html new file mode 100644 index 0000000000..8264cd5cb1 --- /dev/null +++ b/files/pl/web/api/stylesheet/media/index.html @@ -0,0 +1,29 @@ +--- +title: stylesheet.media +slug: Web/API/Stylesheet/media +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/media +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Obiekt media określa zamierzony nośnik docelowy dla stylu informacji.

+

Składnia

+
medium = stylesheet.media
+stylesheet.media =medium
+
+

Parametry

+ +

Przykład

+
<link rel="StyleSheet" href="document.css" type="text/css" media="screen" />
+
+

Uwagi

+

Domyślną wartością dla media jest "screen".

+

Specyfikacja

+

DOM Level 2 Styles - STYLESHEET

+

{{ languages( { "en": "en/DOM/stylesheet.media" } ) }}

diff --git a/files/pl/web/api/stylesheet/ownerrule/index.html b/files/pl/web/api/stylesheet/ownerrule/index.html new file mode 100644 index 0000000000..93d73c35c5 --- /dev/null +++ b/files/pl/web/api/stylesheet/ownerrule/index.html @@ -0,0 +1,24 @@ +--- +title: stylesheet.ownerRule +slug: Web/API/Stylesheet/ownerRule +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Jeżeli arkusz stylów pochodzi z reguły @import, własność ownerRule będzie zawierać regułę CSSImportRule.

+

Składnia

+
rule = stylesheet.ownerRule
+
+

Parametry

+ +

Uwagi

+

Zauważ, że jeżeli wartość własności ownerNode bieżącego elementu STYLE wynosi NULL, wówczas reguła ownerRule zwróci !!TODO!!. I odwrotnie.

+

Specyfikacja

+

ownerRule

+

{{ languages( { "en": "en/DOM/stylesheet.ownerRule" } ) }}

diff --git a/files/pl/web/api/stylesheet/parentstylesheet/index.html b/files/pl/web/api/stylesheet/parentstylesheet/index.html new file mode 100644 index 0000000000..9d79c0197a --- /dev/null +++ b/files/pl/web/api/stylesheet/parentstylesheet/index.html @@ -0,0 +1,29 @@ +--- +title: stylesheet.parentStyleSheet +slug: Web/API/Stylesheet/parentStyleSheet +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/parentStyleSheet +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca arkusz stylów, który włącza obecny arkusz (jeśli istnieje).

+

Składnia

+
objRef = stylesheet.parentStyleSheet
+
+

Przykład

+
// znajdź arkusz stylów najwyższego poziomu
+if (stylesheet.parentStyleSheet) {
+  sheet = stylesheet.parentStyleSheet;
+}
+else
+{ sheet = stylesheet; }
+
+

Uwagi

+

Ta własność zwraca wartość NULL, jeśli obecny arkusz stylów jest arkuszem najwyższego poziomu lub jeśli włączanie arkuszy stylów nie jest obsługiwane.

+

Specyfikacja

+

parentStyleSheet

+

{{ languages( { "en": "en/DOM/stylesheet.parentStyleSheet" } ) }}

diff --git a/files/pl/web/api/stylesheet/title/index.html b/files/pl/web/api/stylesheet/title/index.html new file mode 100644 index 0000000000..48353f2667 --- /dev/null +++ b/files/pl/web/api/stylesheet/title/index.html @@ -0,0 +1,18 @@ +--- +title: stylesheet.title +slug: Web/API/Stylesheet/title +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/title +--- +

{{ ApiRef() }}

+

Podsumowanie

+

title zwraca doradczy tytuł bieżącego arkusza stylów.

+

Uwagi

+

Tytuł jest często określany w ownerNode.

+

Specyfikacja

+

title

+

{{ languages( { "en": "en/DOM/stylesheet.title" } ) }}

diff --git a/files/pl/web/api/stylesheet/type/index.html b/files/pl/web/api/stylesheet/type/index.html new file mode 100644 index 0000000000..ea1892faa4 --- /dev/null +++ b/files/pl/web/api/stylesheet/type/index.html @@ -0,0 +1,22 @@ +--- +title: stylesheet.type +slug: Web/API/Stylesheet/type +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/StyleSheet/type +--- +

{{ ApiRef() }}

+

Podsumowanie

+

type określa język arkusza stylów dla tego arkusza stylów.

+

Składnia

+
string = stylesheet.type
+
+

Przykład

+
 ss.type = "text/css";
+
+

Specyfikacja

+

type

+

{{ languages( { "en": "en/DOM/stylesheet.type" } ) }}

diff --git a/files/pl/web/api/web_audio_api/index.html b/files/pl/web/api/web_audio_api/index.html new file mode 100644 index 0000000000..e67cec2fd6 --- /dev/null +++ b/files/pl/web/api/web_audio_api/index.html @@ -0,0 +1,503 @@ +--- +title: Web Audio API +slug: Web/API/Web_Audio_API +translation_of: Web/API/Web_Audio_API +--- +
+

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

+
+ +

Założenia Web Audio i jego zastosowanie

+ +

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

+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +

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

+ +
+

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

+
+ +

Web Audio API Interfaces

+ +

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

+ +

General audio graph definition

+ +

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

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

Defining audio sources

+ +

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

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

Defining audio effects filters

+ +

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

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

Defining audio destinations

+ +

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

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

Data analysis and visualization

+ +

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

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

Splitting and merging audio channels

+ +

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

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

Audio spatialization

+ +

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

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

Audio processing in JavaScript

+ +

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

+ +
+

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

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

Offline/background audio processing

+ +

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

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

Audio Workers

+ +

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

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

Obsolete interfaces

+ +

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

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

Example

+ +

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

+ +

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

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

Specifications

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

Browser compatibility

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

See also

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

WebGL (Web Graphics Library) to API języka JavaScript służące do renderowania (rysowania) interaktywnej grafiki 3D i 2D poprzez kompatybilną przeglądarkę bez używania pluginów. WebGL został oparty na API OpenGL ES 2.0 i może zostać wykorzystany do pracy z elementem {{HTMLElement("canvas")}}.

+ +

Aktualnie Jest wspierany przez Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ i Internet Explorer 11+; ponad to urządzenie użytkownika musi także spełniać odpowiednie warunki sprzętowe, aby móc obsłużyć WebGL (przede wszystkim obsługiwać OpenGL co najmniej w wersji 2.0).

+ +
+
+

Tematy

+ +
+
Rozpocznij pracę z WebGL
+
Czyli jak stworzyć pierwszy kontekst WebGL.
+
Dodawanie grafiki 2D do kontekstu WebGL
+
Czyli jak wyświetlić proste kształty używając WebGL.
+
Nakładamy kolory używając shaderów w WebGL
+
Czyli jak dodać nieco koloru naszym figurom w WebGL
+
Animacja obiektów w WebGL
+
Pokażemy jak zmieniać i przekształcać obiekty na potrzeby prostej animacji.
+
Tworzenie obiektów 3D używając WebGL
+
Pokażemy jak tworzyć i animować obiekty 3D (w tym przykładzie, sześcian).
+
Tworzenie tekstur w WebGL
+
Zademonstrowanie tworzenia map tekstur, na obiektach.
+
Światła w WebGL
+
Jak zasymulować efekty świetlne w twoim kontekście WebGL.
+
Animacja tekstur w WebGL
+
Pokaz, jak animować tekstury, w tym przypadku mapowanie strumienia Ogg na obracającym się sześcianie.
+
WebGL - najlepsze praktyki
+
Porady i sugestie na wdrożenie zawartości WebGL.
+
Cross-domain textures
+
Informacje na temat załadowania tekstur dla domen innych niż aktualne informacje, które są przetwarzane.
+
Używanie rozszerzeń
+
Jak używać rozszerzeń aby włączyć je w WebGL.
+
+
+ +
+ + +
+
Raw WebGL: An introduction to WebGL
+
Rozmowa z Nick Desaulniers o wprowadzająca do podstaw WebGL. To jest idealne miejsce aby zacząć jeśli nigdy nie programowałeś grafiki niskopoziomowej.
+
WebGL - Specyfikacje
+
Specyfikacja WebGL.
+
Strona Khronos WebGL
+
Strona domowa WebGL w Khronos Group.
+
Learning WebGL
+
Strona z tutorialami na temat jak używać WebGL.
+
WebGL Fundamentals
+
Tutorial z podstawami WebGL.
+
WebGL Matrices
+
Wprowadzenie metryk używając 2D WebGL. Ta seria wyjaśnia także matematyczne zależności perspektyw 3D.
+
The WebGL Cookbook
+
Strona z poręcznymi przykładami kodu WebGL.
+
Planet WebGL
+
Agregat dla ludzi zaangażowanych w społeczność WebGL.
+
ewgl-matrices
+
Biblioteka 'blazing fast matrix' dla WebGL
+
glMatrix
+
Biblioteka JavaScript Matrix and Vector dla wysoko wydajnych app WebGL.
+
mjs
+
A JavaScript vector and matrix math library, optimized for WebGL usage.
+
Sylvester
+
Biblioteka Open Source do manipulowania wektorami i metrykami. Nie zoptymalizowana pod WebGl (eksperymentalna).
+
WebGL playground
+
Narzędzia online do twoarzenia i dzielenia się projektami WebGL. Dobra dla szybkich prototypów i eksperymenotwania.
+
WebGL Academy
+
HTML/Javascript edytor z tutorialami do nauki podstaw programowania WebGL.
+
 
+
+
+
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("2.0")}}91112 (experiment)5.1 (experiment)
OES_texture_float{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_standard_derivatives{{CompatGeckoDesktop("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_texture_filter_anisotropic{{CompatGeckoDesktop("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_s3tc{{CompatGeckoDesktop("15.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
drawingBufferWidth and drawingBufferHeight attributes{{CompatGeckoDesktop("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Chrome for AndroidIE MobileOpera MobileSafari Mobile
Basic support425 (experiment){{CompatNo}}12 (experiment)8.1
drawingBufferWidth and drawingBufferHeight attributes{{CompatGeckoMobile("9.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_texture_float{{CompatGeckoMobile("6.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_standard_derivatives{{CompatGeckoMobile("10.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
EXT_texture_filter_anisotropic{{CompatGeckoMobile("13.0")}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_element_index_uint{{CompatUnknown}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OES_vertex_array_object{{CompatUnknown}}25{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBGL_compressed_texture_s3tc{{CompatGeckoMobile("15.0")}}25
+ prefixed with WEBKIT_		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WEBKIT_EXT_texture_filter_nisotropic{{CompatNo}}25{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Compatibility notes

+ +

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name experimental-webgl2 in the future for testing.

+ +

Gecko notes

+ +

WebGL debugging and testing

+ +

Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:

+ +
+
webgl.min_capability_mode
+
Boolean-owska stała, oznaczająca tryb w którym włączenie jej na true, przyczynia się do włączenia minimum kompatybilności. Kiedy ten tryb jest włączony, WebGL jest skonfigurowany w taki sposób, aby wspomagał w minimalnym zakresie jego możliwości, wymagane przez specyfikacje. Tryb ten zapewnia możliwość pracy kodu WebGL na urządzeniach i przeglądarkach niezależnie od ich kompatybilności. Opcja false jest ustawiona domyślnie.
+
 
+
webgl.disable_extensions
+
Boolean-owska stała, oznaczająca tryb w którym ustawienie jej na true, powoduje zamknięcie wszystkich rozszerzeń WebGL. Wartość false jest ustawiona domyślnie.
+
diff --git a/files/pl/web/api/webgl_api/tutorial/index.html b/files/pl/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..cecc84cbfe --- /dev/null +++ b/files/pl/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,40 @@ +--- +title: WebGL tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

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

+
+ +

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

+ +

Before you start

+ +

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

+ +

In this tutorial

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

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wyświetla okno ostrzegawcze z podanym tekstem.

+ +

Składnia

+ +
window.alert(wiadomość);
+
+ + + +

Przykład

+ +
window.alert("Hello world!");
+// "window." prefix jest opcjonalny, więc
+// alert("Hello world!"); będzie miało taki sam efekt
+
+ +

Wyświetli:

+ +

Grafika:AlertHelloWorld.png

+ +

Uwagi

+ +

Okno ostrzegawcze powinno być używane do przekazania wiadomości, które nie wymagają żadnej odpowiedzi ze strony użytkownika, poza potwierdzeniem komunikatu.

+ +

The following text is shared between this article, DOM:window.prompt and DOM:window.confirm Okna dialogowe to okna modalne - uniemożliwiają użytkownikowi dostęp do reszty interfejsu programu dopóki okno nie zostanie zamknięte. Z tego powodu nie powinieneś nadużywać funkcji, które otwierają okna dialogowe.

+ +

Przy pracy z chrome (np. przy tworzeniu rozszerzenie) zaleca się korzystanie z nsIPromptService.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +

Zobacz też

+ +

confirm, prompt

+ +

Dla chrome zobacz alert() i alertCheck()

+ +
 
+ +

{{ languages( { "en": "en/DOM/window.alert", "fr": "fr/DOM/window.alert", "ja": "ja/DOM/window.alert" } ) }}

diff --git a/files/pl/web/api/window/applicationcache/index.html b/files/pl/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..5f176fa81e --- /dev/null +++ b/files/pl/web/api/window/applicationcache/index.html @@ -0,0 +1,33 @@ +--- +title: Window.applicationCache +slug: Web/API/Window/applicationCache +translation_of: Web/API/Window/applicationCache +--- +

{{APIRef}}

+ +

Podsumowanie

+ +

Zwraca referencję do obiektu przetrzymującego cache aplikacji.

+ +

Składnia

+ +
cache = window.applicationCache
+
+ +

Parametry

+ + + +

Specyfikacja

+ + + +

Zobacz także

+ + diff --git a/files/pl/web/api/window/clearinterval/index.html b/files/pl/web/api/window/clearinterval/index.html new file mode 100644 index 0000000000..e763be1f4a --- /dev/null +++ b/files/pl/web/api/window/clearinterval/index.html @@ -0,0 +1,28 @@ +--- +title: window.clearInterval +slug: Web/API/Window/clearInterval +tags: + - Window +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
+ {{ApiRef}}
+

Podsumowanie

+

Anuluje powtarzającą się akcję, która została utworzona korzystając z setInterval().

+

Składnia

+
window.clearInterval(idInterwalu)
+
+

idInterwalu to identyfikator powtarzającej się akcji, która ma zostać anulowana. Ten identyfikator został zwrócony z {{domxref("window.setInterval","setInterval()")}}.

+

Przykład

+

Zobacz przykład z setInterval().

+

Specification

+

{{DOM0}}

+

Zobacz także

+ diff --git a/files/pl/web/api/window/cleartimeout/index.html b/files/pl/web/api/window/cleartimeout/index.html new file mode 100644 index 0000000000..64604dc479 --- /dev/null +++ b/files/pl/web/api/window/cleartimeout/index.html @@ -0,0 +1,40 @@ +--- +title: window.clearTimeout +slug: Web/API/Window/clearTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Usuwa opóźnienie ustanione przez window.setTimeout().

+

Składnia

+
window.clearTimeout(id)
+
+

gdzie id jest identyfikatorem opóźnienia do usunięcia, który został zwrócony podczas wywołania window.setTimeout().

+

Przykład

+

Uruchomienie poniższego skryptu w kontekscie strony i pojedyncze kliknięcie spowoduje wyświetlenie wiadomości po jednej sekundzie. Jeżeli użytkownik będzie klikał na stronie przynajmniej raz na sekundę wiadomość nigdy nie zostanie wyświetlona.

+
var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    this.cancel();
+    var self = this;
+    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+  },
+
+  cancel: function() {
+    if(typeof this.timeoutID == "number") {
+      window.clearTimeout(this.timeoutID);
+      delete this.timeoutID;
+    }
+  }
+};
+window.onclick = function() { alarm.setup() };
+
+

Uwagi

+

Przekazanie niepoprawnego ID do clearTimeout nie powoduje żadnej akcji (żaden błąd nie jest wyrzucany).

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/window.clearTimeout", "fr": "fr/DOM/window.clearTimeout", "ja": "ja/DOM/window.clearTimeout", "pl": "pl/DOM/window.clearTimeout" } ) }}

diff --git a/files/pl/web/api/window/closed/index.html b/files/pl/web/api/window/closed/index.html new file mode 100644 index 0000000000..bdffbcd94d --- /dev/null +++ b/files/pl/web/api/window/closed/index.html @@ -0,0 +1,59 @@ +--- +title: window.closed +slug: Web/API/Window/closed +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/closed +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Ta własność oznacza czy dane okno jest zamknięte lub nie.

+

Składnia

+
var isClosed = windowRef.closed;
+
+


+ Ta własność jest tylko do odczytu.

+

Zwracane wartości

+
+
+ isClosed
+
+ Wartość logiczna. Możliwe wartości:
+
+ +

Przykłady

+

Zmiana adresu URL okna pierwotnego z okna otworzonego

+

Ten przykład demonstruje w jaki sposób okno otworzone może zmienić adres URL okna, które je otwarło. Przed próbą zmiany adresu URL, sprawdza czy obecne okno posiada okno-rodzica stosując własność window.opener oraz czy nie zostało ono zamknięte.

+
// Sprawdza czy okno otwierające istnieje i nie zostało zamknięte
+if (window.opener && !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}
+
+

Zauważ, że okno otwierane ma dostęp tylko do okna, które je otworzyło.

+

Odświeżanie uprzednio otwartego okna

+

W tym przykładzie funkcja refreshPopupWindow() wywołuje metodę reload obiektu location otwartego okna, by odświeżyć jego dane. Jeżeli okno nie zostało jeszcze otwarte, bądź użytkownik zamknął je, zostaje utworzone nowe okno.

+
var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow && !popupWindow.closed) {
+    // popupWindow jest otwarte, przeładujmy je
+    popupWindow.location.reload(true);
+  } else {
+    // Otwieramy nowe okno
+    popupWindow = window.open("popup.html","dataWindow");
+  }
+}
+
+

Specyfikacja

+

DOM Level 0. window.closed nie jest częścią żadnej specyfikacji W3C, ani technicznej rekomendacji.

+

Dodatkowe źródła

+

MSDN window.closed

+
+  
+

{{ languages( { "en": "en/DOM/window.closed", "fr": "fr/DOM/window.closed", "ja": "ja/DOM/window.closed" } ) }}

diff --git a/files/pl/web/api/window/content/index.html b/files/pl/web/api/window/content/index.html new file mode 100644 index 0000000000..66eed370a9 --- /dev/null +++ b/files/pl/web/api/window/content/index.html @@ -0,0 +1,43 @@ +--- +title: window.content +slug: Web/API/Window/content +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/content +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

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

+ +

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

+ +

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

+ +

Składnia

+ +
var windowObject = window.content;
+
+ +

Przykład

+ +

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

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

Specyfikacja

+ +

Nie jest częścią żadnej specyfikacji.

+ +

Zobacz także

+ + diff --git a/files/pl/web/api/window/controllers/index.html b/files/pl/web/api/window/controllers/index.html new file mode 100644 index 0000000000..cdb67298bf --- /dev/null +++ b/files/pl/web/api/window/controllers/index.html @@ -0,0 +1,24 @@ +--- +title: window.controllers +slug: Web/API/Window/controllers +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/controllers +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca kontrolery XUL okna chrome.

+

Składnia

+
controllers = window.controllers
+
+ +

Specyfikacja

+

XUL-specific. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.controllers", "ja": "ja/DOM/window.controllers" } ) }}

diff --git a/files/pl/web/api/window/crypto/index.html b/files/pl/web/api/window/crypto/index.html new file mode 100644 index 0000000000..5d7bac8666 --- /dev/null +++ b/files/pl/web/api/window/crypto/index.html @@ -0,0 +1,19 @@ +--- +title: window.crypto +slug: Web/API/Window/crypto +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/crypto +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt crypto przeglądarki, który może być wtedy użyty do manipulacji różnymi własnościami zabezpieczeń przeglądarki.

+

Zobacz więcej szczegółów o JavaScript crypto.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.crypto", "ja": "ja/DOM/window.crypto" } ) }}

diff --git a/files/pl/web/api/window/defaultstatus/index.html b/files/pl/web/api/window/defaultstatus/index.html new file mode 100644 index 0000000000..f352835233 --- /dev/null +++ b/files/pl/web/api/window/defaultstatus/index.html @@ -0,0 +1,35 @@ +--- +title: window.defaultStatus +slug: Web/API/Window/defaultStatus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/defaultStatus +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pobiera/ustawia tekst paska stanu dla danego okna.

+

Składnia

+
sMsg = window.defaultStatus
+window.defaultStatus =sMsg
+
+

Parametry

+ +

Przykład

+
<html>
+ <body onload="window.defaultStatus='hello!';"/>
+  <button onclick="window.confirm('Czy jesteś pewien, że chcesz wyjść?');">confirm</button>
+ </body>
+</htm>
+
+

Uwagi

+

Aby ustawić zawartość paska stanu, gdy okno zostało już otwarte, możemy użyć window.status.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.defaultStatus", "ja": "ja/DOM/window.defaultStatus" } ) }}

diff --git a/files/pl/web/api/window/directories/index.html b/files/pl/web/api/window/directories/index.html new file mode 100644 index 0000000000..7c4e113760 --- /dev/null +++ b/files/pl/web/api/window/directories/index.html @@ -0,0 +1,33 @@ +--- +title: window.directories +slug: Web/API/Window/directories +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/directories +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt paska adresu okna.

+

Składnia

+
dirBar = window.directories
+
+

Parametry

+

+ + dirBar + jest obiektem typu barProp.

+

Przykład

+
<script>
+ function dirs() {
+  alert(window.directories);
+ }
+</script>
+
+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.directories", "ja": "ja/DOM/window.directories" } ) }}

diff --git a/files/pl/web/api/window/document/index.html b/files/pl/web/api/window/document/index.html new file mode 100644 index 0000000000..296c81af50 --- /dev/null +++ b/files/pl/web/api/window/document/index.html @@ -0,0 +1,40 @@ +--- +title: window.document +slug: Web/API/Window/document +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/document +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca referencję do dokumentu zawartego w oknie.

+

Składnia

+
doc = window.document
+
+

Parametry

+ +

Przykład

+
<html>
+<head>
+   <title>Witaj, Świecie!</title>
+</head>
+<body>
+
+<script type="text/javascript">
+   var doc = window.document;
+   alert( doc.title);    // wyświetli: Witaj, Świecie!
+</script>
+
+</body>
+</html>
+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/window.document", "fr": "fr/DOM/window.document", "ja": "ja/DOM/window.document" } ) }}

diff --git a/files/pl/web/api/window/dump/index.html b/files/pl/web/api/window/dump/index.html new file mode 100644 index 0000000000..f0ddb923c3 --- /dev/null +++ b/files/pl/web/api/window/dump/index.html @@ -0,0 +1,30 @@ +--- +title: window.dump +slug: Web/API/Window/dump +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/dump +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wypisuje wiadomość w konsoli.

+

Składnia

+
dump(wiadomość);
+
+ +

Uwagi

+

dump jest często używany do debugowania JavaScriptu. W uprzywilejowanym kodzie można użyć także Components.utils.reportError oraz nsIConsoleService do zapisu w konsoli błędów.

+

W Gecko dump jest domyślnie zablokowane - jego użycie nic nie powoduje, nie wywołuje też żadnego błędu. Aby zobaczyć wyjście metody dump, musisz włączyć ją, zmieniając preferencję browser.dom.window.dump.enabled na true. Możesz to zrobić za pomocą about:config lub pliku user.js

+

Żeby cokolwiek zobaczyć, będziesz potrzebował konsoli. Jeśli jeszcze jej nie masz, zamknięcie programu i wywołanie z parametrem <tt>-console</tt> w linii poleceń powinno otworzyć konsolę.

+

dump jest też dostępny dla komponentów XPCOM implementowanych w JavaScript, mimo że w ich kontekście window nie jest obiektem globalnym.

+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/window.dump", "fr": "fr/DOM/window.dump", "ja": "ja/DOM/window.dump" } ) }}

diff --git a/files/pl/web/api/window/focus/index.html b/files/pl/web/api/window/focus/index.html new file mode 100644 index 0000000000..35cb33dbc4 --- /dev/null +++ b/files/pl/web/api/window/focus/index.html @@ -0,0 +1,24 @@ +--- +title: window.focus +slug: Web/API/Window/focus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/focus +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Ustawia okno jako aktywne.

+

Składnia

+
window.focus()
+
+

Przykład

+
if (clicked) { window.focus(); }
+
+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.focus", "ja": "ja/DOM/window.focus" } ) }}

diff --git a/files/pl/web/api/window/frameelement/index.html b/files/pl/web/api/window/frameelement/index.html new file mode 100644 index 0000000000..773e7d37e2 --- /dev/null +++ b/files/pl/web/api/window/frameelement/index.html @@ -0,0 +1,34 @@ +--- +title: window.frameElement +slug: Web/API/Window/frameElement +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/frameElement +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca element (jak np. <iframe> lub <object>), w którym osadzone jest okno lub wartość null, gdy okno jest najwyższego poziomu.

+

Składnia

+
varframeEl = window.frameElement;
+
+ +

Przykład

+
var frameEl = window.frameElement;
+// jeśli jesteśmy wewnątrz ramki, to zmień jej adres URL na 'http://mozilla.org/'
+if (frameEl)
+  frameEl.src = 'http://mozilla.org/';
+
+

Uwagi

+

Zauważ, że pomimo swojej nazwy własność działa również dla dokumentów wewnątrz <object> lub innych elementów osadzających.

+

Zobacz także window.parent, który zwraca okno-rodzica, którym jest okno zawierające frameElement okna-dziecka.

+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/window.frameElement", "ja": "ja/DOM/window.frameElement" } ) }}

diff --git a/files/pl/web/api/window/frames/index.html b/files/pl/web/api/window/frames/index.html new file mode 100644 index 0000000000..1e1e625ca4 --- /dev/null +++ b/files/pl/web/api/window/frames/index.html @@ -0,0 +1,31 @@ +--- +title: window.frames +slug: Web/API/Window/frames +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/frames +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt tablico-podobny, zawierający listę ramek podrzędnych bieżącego okna.

+

Składnia

+
frameList = window.frames;
+
+ +

Przykład

+
var frames = window.frames; // lub // var frames = window.parent.frames;
+for (var i = 0; i < frames.length; i++) {
+  // zrób coś z każdą ramką podrzędną jako frames[i]
+  frames[i].document.body.style.background = "red";
+}
+
+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.frames", "ja": "ja/DOM/window.frames" } ) }}

diff --git a/files/pl/web/api/window/getselection/index.html b/files/pl/web/api/window/getselection/index.html new file mode 100644 index 0000000000..c6768feb45 --- /dev/null +++ b/files/pl/web/api/window/getselection/index.html @@ -0,0 +1,39 @@ +--- +title: window.getSelection +slug: Web/API/Window/getSelection +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/getSelection +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca obiekt zaznaczenia reprezentujący zakres tekstu zaznaczonego przez użytkownika. Zauważ, że nie ma to żadnego powiązania z obiektem listy selekcji DOM!

+

Składnia

+
selection =window.getSelection();
+
+

Parametry

+ +

Przykład

+
function foo() {
+   var selObj = window.getSelection();
+   alert(selObj);
+   var selRange = selObj.getRangeAt(0);
+   // teraz możemy operować na zakresie
+}
+
+

Uwagi

+

W JavaScript, kiedy przesyłany jest obiekt selekcji do funkcji, zamiast jej, przesyłana jest jej reprezentacja w postaci ciągu znaków (tj. zaznaczony tekst). Może to złudnie przypominać, że obiekt selekcji wygląda jak ciąg znaków (obiekt string), kiedy tak naprawdę ma swoje własne właściwości i metody. Dokładniej, zwracana jest wartość wywołania metody toString(). I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian

+

Specyfikacja

+

DOM poziomu 0. Nie jest częścią specyfikacji.

+

Zobacz również

+

Selection, Range

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/window.getSelection", "es": "es/DOM/window.getSelection", "fr": "fr/DOM/window.getSelection", "it": "it/DOM/window.getSelection", "ja": "ja/DOM/window.getSelection" } ) }}

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

{{APIRef}}

+ +

The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.

+ +

This section provides a brief reference for all of the methods, properties, and events available through the DOM window object. The window object implements the Window interface, which in turn inherits from the AbstractView interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the JavaScript Reference and DOM Reference.

+ +

In a tabbed browser, such as Firefox, each tab contains its own window object (and if you're writing an extension, the browser window itself is a separate window too - see Working with windows in chrome code for more information). That is, the window object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the window object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.

+ +

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

+ +
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
This property indicates whether the current window is closed or not.
+
{{domxref("Window.console")}} {{ReadOnlyInline}}
+
Returns a reference to the console object which provides access to the browser's debugging console.
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the XUL controller objects for the current chrome window.
+
{{domxref("Window.customElements")}}{{ReadOnlyInline}}
+
returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new custom elements and get information about previously registered custom elements.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Returns the browser crypto object.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Gets/sets the status bar text for the given window.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the ratio between physical pixels and device independent pixels in the current display.
+
{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}
+
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Synonym of {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Returns a reference to the document that the window contains.
+
{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.
+
{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.
+
{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.
+
{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.
+
{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.
+
{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.
+
{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Returns an array of the subframes in the current window.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
This property indicates whether the window is displayed in full screen or not.
+
{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
+ Was: Multiple storage objects that are used for storing data across multiple pages.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Returns a reference to the history object.
+
{{domxref("Window.innerHeight")}} {{readOnlyInline}}
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
{{domxref("Window.innerWidth")}} {{readOnlyInline}}
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
{{domxref("Window.isSecureContext")}} {{readOnlyInline}}
+
Indicates whether a context is capable of using features that require secure contexts.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
+
{{domxref("Window.location")}}
+
Gets/sets the location, or current URL, of the window object.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Returns the menubar object, whose visibility can be toggled in the window.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Returns the message manager object for this window.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}
+
The time in milliseconds since epoch at which the current animation cycle began.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
+
{{domxref("Window.name")}}
+
Gets/sets the name of the window.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Returns a reference to the navigator object.
+
{{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}
+
Returns a reference to the {{domxref("NetworkInformation")}} interface, which provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes.
+
{{domxref("Window.opener")}}
+
Returns a reference to the window that opened this current window.
+
{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
+
Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Gets the height of the outside of the browser window.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Gets the width of the outside of the browser window.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
An alias for {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}
+
Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Returns a reference to the parent of the current window or subframe.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing performance-related data. See also Using Navigation Timing for additional information and examples.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Formerly provided access to install and remove PKCS11 modules.
+
{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}
+
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Returns a reference to the screen object associated with the window.
+ +
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled vertically.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Returns an object reference to the window object itself.
+
{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}
+
Returns a storage object for storing data within a single page session.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns a reference to the window object of the sidebar.
+
{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
+
Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using Web Speech API speech synthesis functionality.
+
{{domxref("Window.status")}}
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Returns a reference to the topmost window in the window hierarchy. This property is read only.
+
{{domxref("Window.visualViewport")}} {{readOnlyInline}}
+
Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Returns a reference to the current window.
+
window[0], window[1], etc.
+
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
+
+ +

Properties implemented from elsewhere

+ +
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Returns a boolean indicating whether the current context is secure (true) or not (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)
+
+ +

Methods

+ +

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.

+ +
+
{{domxref("Window.alert()")}}
+
Displays an alert dialog.
+ +
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves back one in the window history.
+
{{domxref("Window.blur()")}}
+
Sets focus away from the window.
+
{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.
+
{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+
Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("Window.close()")}}
+
Closes the current window.
+
{{domxref("Window.confirm()")}}
+
Displays a dialog with a message that the user needs to respond to.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Used to trigger an event.
+
{{domxref("Window.dump()")}} {{Non-standard_inline}}
+
Writes a message to the console.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.find()")}}
+
Searches for a given string in a window.
+
{{domxref("Window.focus()")}}
+
Sets focus on the current window.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves the window one document forward in the history.
+
{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Flashes the application icon.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Returns the browser to the home page.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimizes the window.
+
{{domxref("Window.moveBy()")}}
+
Moves the current window by a specified amount.
+
{{domxref("Window.moveTo()")}}
+
Moves the window to the specified coordinates.
+
{{domxref("Window.open()")}}
+
Opens a new window.
+
{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Opens a new dialog window.
+
{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.
+
{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}
+
Enables the scheduling of tasks during a browser's idle periods.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)
+
Changes the cursor for the current window
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("Window.setResizable()")}} {{Non-standard_inline}}
+
Toggles a user's ability to resize a window.
+
{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Methods implemented from elsewhere

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler to a specific event type on the window.
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at (sx, sy) with width sw, and height sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Starts the process of fetching a resource from the network.
+
{{domxref("EventTarget.removeEventListener")}}
+
Removes an event listener from the window.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Schedules a function to execute every time a given number of milliseconds elapses.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Schedules a function to execute in a given amount of time.
+
+ +

Obsolete methods

+ +
+
{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}
+
Displays a modal dialog. This method was removed completely in Chrome 43, and Firefox 55.
+
+ +

Event handlers

+ +

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

+ +

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.

+ +
+

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Called when the print dialog box is closed. See {{event("afterprint")}} event.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Called when the print dialog box is opened. See {{event("beforeprint")}} event.
+
{{domxref("Window.onbeforeinstallprompt")}}
+
An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Called after the window loses focus, such as due to a popup.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Called after the ANY mouse button is pressed & released
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Called when a double click is made with ANY mouse button.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Called after the window is closed
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Called when the RIGHT mouse button is pressed
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
Called if accelerometer detects a change (For mobile devices)
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
Called when the orientation is changed (For mobile devices)
+
{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
+
An event handler property for any device orientation changes.
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Called after the window receives or regains focus. See {{event("focus")}} events.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("Window.onappinstalled")}}
+
Called when the page is installed as a webapp. See {{event('appinstalled')}} event.
+
{{domxref("Window.ongamepadconnected")}}
+
Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).
+
{{domxref("Window.oninput")}}
+
Called when the value of an <input> element changes
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Called when you begin pressing ANY key. See {{event("keydown")}} event.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Called when you finish releasing ANY key. See {{event("keyup")}} event.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Called when ANY mouse button is pressed.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Called continously when the mouse is moved inside the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Called when the pointer leaves the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Called when the pointer enters the window
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Called when ANY mouse button is released
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Called when network connection is lost. See {{event("offline")}} event.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Called when network connection is established. See {{event("online")}} event.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
Called when a back button is pressed.
+
{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
+
An event handler for handled {{jsxref("Promise")}} rejection events.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Called when a form is reset
+
{{domxref("GlobalEventHandlers.onresize")}}
+
Called continuously as you are resizing the window.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked
+
{{domxref("GlobalEventHandlers.onwheel")}}
+
Called when the mouse wheel is rotated around any axis
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Called after text in an input field is selected
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Called when there is a change in session storage or local storage. See {{event("storage")}} event
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Called when a form is submitted
+
{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+
An event handler for unhandled {{jsxref("Promise")}} rejection events.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Called when the user navigates away from the page.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events.
+
{{domxref("Window.onvrdisplayconnect")}}
+
Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).
+
{{domxref("Window.onvrdisplaydisconnect")}}
+
Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).
+
{{domxref("Window.onvrdisplayactivate")}}
+
Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
+
{{domxref("Window.onvrdisplaydeactivate")}}
+
Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
+
{{domxref("Window.onvrdisplayblur")}}
+
Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
+
{{domxref("Window.onvrdisplayfocus")}}
+
Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).
+
{{domxref("Window.onvrdisplaypresentchange")}}
+
represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).
+
+ +

Constructors

+ +

See also the DOM Interfaces.

+ +
+
{{domxref("DOMParser")}}
+
DOMParser can parse XML or HTML source stored in a string into a DOM Document. DOMParser is specified in DOM Parsing and Serialization.
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Used for creating a Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Interfaces

+ +

See DOM Reference

+ +

See also

+ + diff --git a/files/pl/web/api/window/localstorage/index.html b/files/pl/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..e93c5c15e7 --- /dev/null +++ b/files/pl/web/api/window/localstorage/index.html @@ -0,0 +1,125 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Pamięć + - Referencja + - Storage + - Web Storage + - WindowLocalStorage + - Własność + - localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

Własność localStorage pozwala na dostęp do lokalnego obiektu {{domxref("Storage")}}. localStorage jest podobne w swoich założeniach do sessionStorage. Różnica pomiędzy nimi polega na tym, że dane przechowywane w localStorage nie mają daty ważności, a dane przechowywane w sessionStorage usuwane są po zakończeniu danej sesji - czyli przy zamknięciu przeglądarki.

+ +

Składnia

+ +
myStorage = localStorage;
+ +

Wartość

+ +

Obiekt {{domxref("Storage")}}.

+ +

Przykład

+ +

Poniższy kod uzyskuje dostęp do lokalnego obiektu {{domxref("Storage")}}, należącego do obecnej domeny i dodaje do niego własność używająć metody {{domxref("Storage.setItem()")}}.

+ +
localStorage.setItem('myCat', 'Tom');
+ +
+

Notka: Pełny przykład znajdziesz w artykule Using the Web Storage API .

+
+ +

Specyfikajca

+ + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}{{Spec2('Web Storage')}} 
+ +

Wsparcie przeglądarek

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłasnośćChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
WłasnośćAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Podstawowe wspracie2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Sposób wsparcia dla localStorage i {{domxref("sessionStorage")}} różni się w zależności od przeglądarki. Tutaj znajdziesz szczegółowe dane na temat wsparcia poszczególnych przeglądarek dla obiektów Storage.

+ +
+

Notka: Zaczynając od wersji iOS 5.1, Safari przetrzymuje dane localStorage w folderze cache. Folder ten poddawany jest okresowemu czyszczeniu, zazwyczaj, gdy w pamięci urządzenia kończy się miejsce. Tryb prywatny w mobilnej przeglądarce Safari blokuje również całkowicie możliwość zapisu do pamięci localStorage.

+
+ +

Zobacz także

+ + diff --git a/files/pl/web/api/window/name/index.html b/files/pl/web/api/window/name/index.html new file mode 100644 index 0000000000..0b91ec81ec --- /dev/null +++ b/files/pl/web/api/window/name/index.html @@ -0,0 +1,27 @@ +--- +title: window.name +slug: Web/API/Window/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/name +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pobiera/ustawia nazwę okna.

+

Składnia

+
string = window.name
+ window.name =string
+
+

Przykład

+
window.name = "lab_view";
+
+

Uwagi

+

Nazwa okna jest używana pierwotnie dla ustawienia celu dla linków oraz formularzy. Okno nie musi posiadać nazwy.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.name", "ja": "ja/DOM/window.name" } ) }}

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

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca odwołanie do obiektu navigator, który może być zapytany o informację na temat aplikacji uruchamiającej skrypt.

+ +

Przykład

+ +
alert("Używasz " + navigator.appName);
+
+ +

Własności

+ +
+
navigator.appCodeName
+
Zwraca wewnętrzną nazwę "kodową" aktualnej przeglądarki.
+
navigator.appName
+
Zwraca oficjalną nazwę przeglądarki.
+
navigator.appVersion
+
Zwraca wersję przeglądarki jako łańcuch znaków.
+
navigator.buildID
+
Zwraca identyfikator kompilacji przeglądarki (np. "2006090803").
+
navigator.cookieEnabled
+
Zwraca wartość logiczną wskazującą czy obsługa ciasteczek jest włączona, czy nie.
+
navigator.language
+
Zwraca łańcuch znaków reprezentujący wersję językową przeglądarki.
+
navigator.mimeTypes
+
Zwraca listę typów MIME obsługiwanych przez przeglądarkę.
+
navigator.onLine
+
Zwraca wartość logiczną wskazującą czy przeglądarka jest w trybie online.
+
navigator.oscpu
+
Zwraca łańcuch znaków reprezentujący bieżący system operacyjny.
+
navigator.platform
+
Zwraca łańcuch znaków reprezentujący platformę przeglądarki.
+
navigator.plugins
+
Zwraca tablicę z zainstalowanymi wtyczkami przeglądarki.
+
navigator.product
+
Zwraca nazwę produktu bieżącej przeglądarki (np. "Gecko")
+
navigator.productSub
+
Zwraca numer kompilacji bieżącej przeglądarki (np. "20060909").
+
navigator.securityPolicy
+
Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".
+
navigator.userAgent
+
Returns the user agent string for the current browser.
+
navigator.vendor
+
Returns the vendor name of the current browser (e.g. "Netscape6")
+
navigator.vendorSub
+
Returns the vendor version number (e.g. "6.1")
+
+ +

Metody

+ +
+
navigator.javaEnabled
+
Określa czy w przeglądarce jest włączona obsługa Javy.
+
navigator.taintEnabled {{ Obsolete_inline() }} 
+
Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2
+
navigator.preference
+
Sets a user preference. This method is only available to privileged code, and you should use XPCOM API preferencji instead.
+
navigator.registerContentHandler
+
Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące dla zawartości konkretnego typu MIME.
+
navigator.registerProtocolHandler
+
Pozwala stronom na zarejestrowanie się jako możliwe serwisy obsługujące dany protokół.
+
+ +

Zobacz także

+ +

DOM Client Object Cross-Reference:navigator

+ +

Specyfikacja

+ +

 

diff --git a/files/pl/web/api/window/onload/index.html b/files/pl/web/api/window/onload/index.html new file mode 100644 index 0000000000..45e1b97328 --- /dev/null +++ b/files/pl/web/api/window/onload/index.html @@ -0,0 +1,62 @@ +--- +title: window.onload +slug: Web/API/Window/onload +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onload +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Uchwyt zdarzenia dla zdarzenia wczytywania okna (window).

+ +

Składnia

+ +
window.onload = funcRef;
+
+ + + +

Przykład

+ +
window.onload = function() {
+  init();
+  doSomethingElse();
+};
+
+ +
<html>
+<head>
+
+<title>Test onload</title>
+
+<script type="text/javascript">
+
+window.onload = load;
+
+function load()
+{
+ alert("Wykryto zdarzenie load!");
+}
+</script>
+</head>
+
+<body>
+<p>Zdarzenie load występuje w momencie zakończenia ładowania dokumentu!</p>
+</body>
+</html>
+
+ +

Uwagi

+ +

Zdarzenie load wywoływane jest na końcu procesu ładowania dokumentu. W momencie wystąpienia zdarzenia, DOM zawiera już wszystkie obiekty zawarte w dokumencie oraz zakończone zostało wczytywanie obrazków oraz ramek.
+
+ Istnieje także zdarzenie DOMContentLoaded (które można zarejestrować za pomocą addEventListener) występujące w momencie gdy DOM dla danej strony został zbudowany ale bez czekania na zakończenie ładowania pozostałych zasobów.

diff --git a/files/pl/web/api/window/open/index.html b/files/pl/web/api/window/open/index.html new file mode 100644 index 0000000000..de2d422a8b --- /dev/null +++ b/files/pl/web/api/window/open/index.html @@ -0,0 +1,796 @@ +--- +title: window.open +slug: Web/API/Window/open +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Window/open +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Tworzy nowe okno przeglądarki i wczytuje do niego wskazany zasób.

+ +

Składnia

+ +
referencjaDoObiektuOkna = window.open(strUrl, strNazwaOkna [, strCechyOkna]);
+
+ +

Parametry i zwracana wartość

+ +
+
referencjaDoObiektuOkna
+
Referencja wskazująca na obiekt nowoutworzonego okna to wartość zwracana przez metodę open(). Jeżeli z jakichś powodów nie uda się otworzyć okna, zwrócone zostanie null. Referencje taką dobrze jest przechowywać w zmiennej globalnej. Możesz wtedy użyć jej do do pobrania właściwości nowego okna lub wywołania jego metod - pod warunkiem, że zależność między głównym a nowym oknem spełnia Zasadę tego samego pochodzenia - wymaganą ze względów bezpieczeństwa.
+
+ +
+
strUrl
+
Adres URL, który ma zostać wczytany w nowym oknie. Może to być dokument HTML gdzieś w Sieci, może to być obrazek lub dowolny inny plik, który może obsłużyć przeglądarka.
+
+ +
+
strNazwaOkna
+
Ciąg znaków używany jako nazwa okna. Nazwy tej można użyć jako celu dla odnośników i formularzy, określanego za pomocą atrybutu target elementu <a> lub <form>. Nazwa nie powinna zawierać spacji. strNazwaOkna nie określa tytułu nowego okna.
+
+ +
+
strCechyOkna
+
Parametr opcjonalny. Jest to ciąg znaków, w którym wymienione zostają cechy (funkcjonalność, paski narzędzi) nowego okna przeglądarki. Parametr ten nie może zawierać żadnych spacji. Każda żądana cecha okna oddzielana jest od innych za pomocą przecinka.
+
+ +

Opis

+ +

Metoda open() tworzy nowe okno przeglądarki, podobnie jak przy wybraniu polecenia Nowe okno w menu Plik. Parametr strUrl określa URL, który ma zostać pobrany i załadowany w nowym oknie. Jeśli strUrl jest pustym ciągiem, utworzone zostanie puste okno (URL about:blank) z domyślnym zestawem pasków głównego okna.

+ +

Zauważ, że zdalny URL nie zostanie załadowany od razu. Po zakończeniu wykonywania window.open() okno zawsze zawiera about:blank. Faktyczne pobieranie z adresu URL jest opóźniane do momentu zakończenia wykonywania bieżącego bloku skryptu. Tworzenie okna i ładowanie wskazanego zasobu odbywają się asynchronicznie.

+ +

Przykłady

+ +
<script type="text/javascript">
+
+/* Deklaracja zmiennej globalnej, w której będzie
+   przechowywana referencja do nowego okna */
+
+var WindowObjectReference;
+
+function openRequestedPopup()
+{
+  WindowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName",
+        "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes");
+}
+</script>
+
+ +
<script type="text/javascript">
+var WindowObjectReference; // zmienna globalna
+
+function openRequestedPopup()
+{
+ WindowObjectReference = window.open("http://www.domainname.ext/path/ImageFile.png",
+       "DescriptiveWindowName",
+       "resizable=yes,scrollbars=yes,status=yes");
+}
+</script>
+
+ +

Jeśli istnieje już okno o tej samej nazwie strWindowName, to zamiast otwierania nowego okna w istniejącym oknie zostanie załadowany URL strUrl. W takim wypadku wartością zwracaną jest referencja do istniejącego okna, a parametr strWindowFeatures jest ignorowany. Wywołanie metody z pustym ciągiem jako strUrl to sposób uzyskania referencji do otwartego okna jeśli znana jest jego nazwa. Zawartość tego okna nie zostanie zmieniona. Jeśli chcesz otwierać nowe okno przy każdym wywołaniu window.open(), podaj specjalną wartość _blank jako parametr strWindowName.

+ +

strWindowFeatures to opcjonalny ciąg znaków z rozdzieloną przecinkami listą żądanych cech nowego okna. Po otwarciu okna nie możesz zmienić jego funkcjonalności czy pasków za pomocą JavaScriptu. Jeśli strWindowName nie określa istniejącego okna i jeśli nie podasz parametru strWindowFeatures (lub będzie on tylko pustym ciągiem znaków), w nowym oknie znajdize się domyślny zestaw pasków głównego okna.

+ +

Jeżeli zostanie użyty parametr strWindowFeatures, ale nie zostaną podane cechy określające rozmiar, wymiary okna będą takie same, jak wymiary ostatnio wyrenderowanego okna.

+ +

Jeśli zostanie podany parametr strWindowFeatures, ale bez definiowania cech określających pozycję, wtedy współrzędne lewego górnego rogu będą przesunięte o 22 piksele od miejsca, gdzie znajdował się róg ostatnio wyrenderowanego okna. Przesunięcie to jest implementowane przez producentów przeglądarek (w MSIE 6 SP2 wynosi ono 29 pikseli przy domyślnym motywie) - ma ono ułatwiać użytkownikom dostrzeżenie, że otwarto nowe okno. Jeśli ostatnio używane okno było zmaksymalizowane, przesunięcie o 22 piksele nie zostanie użyte - nowe okno także będzie zmaksymalizowane.

+ +

Jeśli podajesz strWindowFeatures, cechy, które nie zostaną określone, będą wyłączone lub usunięte (z wyjątkiem titlebar i close, które domyślnie ustawiane są na yes)>.

+ +
+

Porada: Jeśli podajesz parametr strWindowFeatures, zawrzyj tylko te cechy, które chcesz, by były włączone lub wyświetlane; pozostałe (poza titlebar i close) zostaną wyłączone.

+
+ +

Firefox Chrome Toolbars Illustration

+ +

Pozycja i rozmiar okna

+ + + +
+
left
+
Określa odległość między lewą krawędzią obszaru roboczego aplikacji w systemie operacyjnym użytkownika a najbardziej wysuniętą w lewo częścią obramowania nowego okna przeglądarki. Nowe okno nie możo być zainicjowane w miejscu wychodzącym poza ekran.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
+ +
+
top
+
Określa odległość między górną krawędzią obszaru roboczego aplikacji w systemie operacyjnym użytkownika a najbardziej wysuniętą w górę częścią obramowania nowego okna przeglądarki. Nowe okno nie możo być zainicjowane w miejscu wychodzącym poza ekran.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
+ +
+
height
+
Określa wysokość obszaru zawartości okna wyrażoną w pikselach. Wartość zawiera wysokość poziomego paska przewijania, jeśli jest on wyświetlany. Wymagana minimalna wartość to 100.
+
Note on outerHeight versus height (or innerHeight)
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
+ +
+
width
+
Określa wysokość obszaru zawartości okna wyrażoną w pikselach. Wartość zawiera szerokość pionowego paska przewijania, jeśli jest on wyświetlany. Nie jest włączana szerokość panelu bocznego, jeśli jest on otwarty. Wymagana minimalna wartość to 100.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
+ +
+
screenX
+
Cecha wycofana. Określa to samo co left, ale obsługują ją tylko przeglądarki Netscape i oparte o Mozillę.
+
Obsługiwane przez Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
screenY
+
Cecha wycofana. Określa to samo co top, ale obsługują ją tylko przeglądarki Netscape i oparte o Mozillę.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
outerHeight
+
Określa wysokość całego okna przeglądarki w pikselach. Wartość outerHeight zawiera w sobie wszystkie widoczne paski, poziomy pasek przewijania (jeśli jest widoczny) i obramowanie okna. Minimalna wymana wartość to 100.
+
Uwaga: ponieważ pasek tytułowy jest zawsze widoczny, wywołanie outerHeight=100 zmniejszy innerHeight okna poniżej wymaganych 100 pikseli.
+
Note on outerHeight versus height (or innerHeight)
+
Obsługiwane przez Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
outerWidth
+
Określa szerokość całego okna przeglądarki w pikselach. Wartość outerWidth zawiera w sobie pionowy pasek przewijania (jeśli jest widoczny) i obramowanie okna. Minimalna wymana wartość to 100.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
innerHeight
+
To samo co height, ale obsługiwane tylko przez przeglądarki Netscape i oparte o Mozillę
+
Note on outerHeight versus height (or innerHeight)
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
innerWidth
+
To samo co width, ale obsługiwane tylko przez przeglądarki Netscape i oparte o Mozillę
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

Toolbar and chrome features

+ +
+
menubar 
+
Jeśli ta opcja jest ustawiona na yes, wtedy nowe okno posiada widoczny pasek menu.
+
Użytkownicy Mozilli i Firefoxa mogą wymusić by każde nowo otwarte okno posiadało widoczny masek menu poprzez ustawienie
+ dom.disable_window_open_feature.menubar
+ na true w about:config lub w ich pliku user.js.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
toolbar 
+
Jeśli ta opcja jest ustawiona na yes, wtedy nowe okno posiada widoczny pasek nawigacji (Przyciski: poprzednia strona, następna strona, odśwież, zatrzymaj). In addition to the Navigation Toolbar, Mozilla-based browsers will render the Tab Bar if it is visible, present in the parent window.
+
Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting
+ dom.disable_window_open_feature.toolbar
+ to true in about:config or in their user.js file.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
location 
+
If this feature is set to yes, then the new secondary window renders the Location bar in Mozilla-based browsers. MSIE 5+ and Opera 7.x renders the Address Bar.
+
Mozilla and Firefox users can force new windows to always render the location bar by setting
+ dom.disable_window_open_feature.location
+ to true in about:config or in their user.js file.
+
+ +

Note that MSIE 7 will force the presence of the Address Bar: "We think the address bar is also important for users to see in pop-up windows. A missing address bar creates a chance for a fraudster to forge an address of their own. To help thwart that, IE7 will show the address bar on all internet windows to help users see where they are." coming from Microsoft Internet Explorer Blog, Better Website Identification

+ +
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
+ +
+
directories 
+
If this feature is set to yes, then the new secondary window renders the Personal Toolbar in Netscape 6.x, Netscape 7.x and Mozilla browser. It renders the Bookmarks Toolbar in Firefox 1.x and, in MSIE 5+, it renders the Links bar. In addition to the Personal Toolbar, Mozilla browser will render the Site Navigation Bar if such toolbar is visible, present in the parent window.
+
Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting
+ dom.disable_window_open_feature.directories
+ to true in about:config or in their user.js file.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
personalbar 
+
Same as directories but only supported by Netscape and Mozilla-based browsers.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
status 
+
If this feature is set to yes, then the new secondary window has a status bar. Users can force the rendering of status bar in all Mozilla-based browsers, in MSIE 6 SP2 (Note on status bar in XP SP2) and in Opera 6+. The default preference setting in recent Mozilla-based browser releases and in Firefox 1.0 is to force the presence of the status bar.
+
Note on status bar
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

Window functionality features

+ +
+
resizable 
+
If this feature is set to yes, the new secondary window will be resizable.
+
Note: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar.
+
+ +
+

Tip: For accessibility reasons, it is strongly recommended to set this feature always to yes.

+
+ +
+
Mozilla and Firefox users can force new windows to be easily resizable by setting
+ dom.disable_window_open_feature.resizable
+ to true in about:config or in their user.js file.
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
scrollbars 
+
If this feature is set to yes, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport.
+
+ +
+

Tip: For accessibility reasons, it is strongly encouraged to set this feature always to yes.

+
+ +
+
Mozilla and Firefox users can force this option to be always enabled for new windows by setting
+ dom.disable_window_open_feature.scrollbars
+ to true in about:config or in their user.js file.
+
Note on scrollbars
+
Obsługiwane przez: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
dependent 
+
If set to yes, the new window is said to be dependent of its parent window. A dependent window closes when its parent window closes. A dependent window is minimized on the Windows task bar only when its parent window is minimized. On Windows platforms, a dependent window does not show on the task bar. A dependent window also stays in front of the parent window.
+
Dependent windows are not implemented on MacOS X, this option will be ignored.
+
In MSIE 6, the nearest equivalent to this feature is the showModelessDialog() method.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
chrome 
+
Note: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the UniversalBrowserWrite privilege ({{ Bug(244965) }}). Without this privilege it is ignored.
+
If set to yes, the page is loaded as window's only content, without any of the browser's interface elements. There will be no context menu defined by default and none of the standard keyboard shortcuts will work. The page is supposed to provide a user interface of its own, usually this feature is used to open XUL documents (standard dialogs like the JavaScript Console are opened this way).
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
modal 
+
Note: Starting with Mozilla 1.2.1, this feature requires the UniversalBrowserWrite privilege ({{ Bug(180048) }}). Without this privilege, it is equivalent to dependent.
+
If set to yes, the new window is said to be modal. The user cannot return to the main window until the modal window is closed. A typical modal window is created by the alert() function.
+
The exact behavior of modal windows depends on the platform and on the Mozilla release version.
+
The MSIE 6 equivalent to this feature is the showModalDialog() method.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
dialog 
+
The dialog feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. Firefox and its command system menu under WindowsMozilla 1.2+ and Netscape 7.1 will render the other menu system commands (in FF 1.0 and in NS 7.0x, the command system menu is not identified with the Firefox/NS 7.0x icon on the left end of the titlebar: that's probably a bug. You can access the command system menu with a right-click on the titlebar). Dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. They are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. On Mac systems, dialog windows have a different window border and they may get turned into a sheet.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
minimizable 
+
This setting can only apply to dialog windows; "minimizable" requires dialog=yes. If minimizable is set to yes, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. Any non-dialog window is always minimizable and minimizable=no will be ignored.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
fullscreen 
+
Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.
+
This feature no longer works in MSIE 6 SP2 the way it worked in MSIE 5.x. The Windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when fullscreen is enabled in MSIE 5.x.
+
fullscreen always upsets users with large monitor screen or with dual monitor screen. Forcing fullscreen onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.
+
Note on fullscreen
+
Obsługiwane przez: Internet Explorer 5+
+
fullscreen does not really work work in MSIE 6 SP2.
+
+ +

Features requiring privileges

+ +

The following features require the UniversalBrowserWrite privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the PrivilegeManager.

+ +
+
titlebar 
+
By default, all new secondary windows have a titlebar. If set to no, this feature removes the titlebar from the new secondary window.
+
Mozilla and Firefox users can force new windows to always render the titlebar by setting
+ dom.disable_window_open_feature.titlebar
+ to true in about:config or in their user.js file.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
alwaysRaised 
+
If set to yes, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
alwaysLowered 
+
If set to yes, the new created window floats below, under its own parent when the parent window is not minimized. alwaysLowered windows are often referred as pop-under windows. The alwaysLowered window can not be on top of the parent but the parent window can be minimized. In NS 6.x, the alwaysLowered window has no minimize system command icon and no restore/maximize system command.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +
+
z-lock 
+
Same as alwaysLowered.
+
+ +
+
close 
+
When set to no, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (dialog feature set). close=no will override minimizable=yes.
+
Mozilla and Firefox users can force new windows to always have a close button by setting
+ dom.disable_window_open_feature.close
+ to true in about:config or in their user.js file.
+
Obsługiwane przez: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a yes or no; you can use 1 instead of yes and 0 instead of no. The toolbar and functionality feature elements also accept the shorthand form: you can turn a feature on by simply listing the feature name in the strWindowFeatures string. If you supply the strWindowFeatures parameter, then the titlebar and close are still yes by default, but the other features which have a yes/no choice will be no by default and will be turned off.

+ +

Example:

+ +
<script type="text/javascript">
+var WindowObjectReference; // global variable
+
+function openRequestedPopup()
+{
+  WindowObjectReference = window.open("http://www.domainname.ext/path/ImgFile.png",
+        "DescriptiveWindowName",
+        "width=420,height=230,resizable,scrollbars=yes,status=1");
+}
+</script>
+
+ +

In this example, the window will be resizable, it will render scrollbar(s) if needed, if the content overflows requested window dimensions and it will render the status bar. It will not render the menubar nor the location bar. Since the author knew about the size of the image (400 pixels wide and 200 pixels high), he added the margins applied to the root element in MSIE 6 which is 15 pixels for top margin, 15 pixels for the bottom margin, 10 pixels for the left margin and 10 pixels for the right margin.

+ +

Best practices

+ +
<script type="text/javascript">
+var WindowObjectReference = null; // global variable
+
+function openFFPromotionPopup()
+{
+  if(WindowObjectReference == null || WindowObjectReference.closed)
+  /* if the pointer to the window object in memory does not exist
+     or if such pointer exists but the window was closed */
+
+  {
+    WindowObjectReference = window.open("http://www.spreadfirefox.com/",
+           "PromoteFirefoxWindowName", "resizable=yes,scrollbars=yes,status=yes");
+    /* then create it. The new window will be created and
+       will be brought on top of any other window. */
+  }
+  else
+  {
+    WindowObjectReference.focus();
+    /* else the window reference must exist and the window
+       is not closed; therefore, we can bring it back on top of any other
+       window with the focus() method. There would be no need to re-create
+       the window or to reload the referenced resource. */
+  };
+}
+</script>
+
+(...)
+
+<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName"
+onclick="openFFPromotionPopup(); return false;"
+title="This link will create a new window or will re-use
+an already opened one">Promote Firefox adoption</a></p>
+
+ +

The above code solves a few usability problems related to links opening secondary window. The purpose of the return false in the code is to cancel default action of the link: if the onclick event handler is executed, then there is no need to execute the default action of the link. But if javascript support is disabled or non-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "PromoteFirefoxWindowName". If no frame nor window has the name "PromoteFirefoxWindowName", then the browser will create a new window and will name it "PromoteFirefoxWindowName".

+ +

More reading on the use of the target attribute:

+ +

HTML 4.01 Target attribute specifications

+ +

How do I create a link that opens a new window?

+ +

You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:

+ +
<script type="text/javascript">
+var WindowObjectReference = null; // global variable
+
+function openRequestedPopup(strUrl, strWindowName)
+{
+  if(WindowObjectReference == null || WindowObjectReference.closed)
+  {
+    WindowObjectReference = window.open(strUrl, strWindowName,
+           "resizable=yes,scrollbars=yes,status=yes");
+  }
+  else
+  {
+    WindowObjectReference.focus();
+  };
+}
+</script">
+(...)
+
+<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow"
+onclick="openRequestedPopup(this.href, this.target); return false;"
+title="This link will create a new window or will re-use
+an already opened one">Promote
+Firefox adoption</a></p>
+
+ +

You can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner:

+ +
<script type="text/javascript">
+var WindowObjectReference = null; // global variable
+var PreviousUrl; /* global variable which will store the
+                    url currently in the secondary window */
+
+function openRequestedSinglePopup(strUrl)
+{
+  if(WindowObjectReference == null || WindowObjectReference.closed)
+  {
+    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+           "resizable=yes,scrollbars=yes,status=yes");
+  }
+  else if(previousUrl != strUrl)
+  {
+    WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+        "resizable=yes,scrollbars=yes,status=yes");
+    /* if the resource to load is different,
+       then we load it in the already opened secondary window and then
+       we bring such window back on top/in front of its parent window. */
+    WindowObjectReference.focus();
+  }
+  else
+  {
+    WindowObjectReference.focus();
+  };
+  PreviousUrl = strUrl;
+  /* explanation: we store the current url in order to compare url
+     in the event of another call of this function. */
+}
+</script>
+
+(...)
+
+<p><a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName"
+onclick="openRequestedSinglePopup(this.href); return false;"
+title="This link will create a new window or will re-use
+an already opened one">Promote Firefox
+adoption</a></p>
+<p><a href="http://www.mozilla.org/support/firefox/faq"
+target="SingleSecondaryWindowName"
+onclick="openRequestedSinglePopup(this.href); return false;"
+title="This link will create a new window or will re-use
+an already opened one">Firefox FAQ</a></p>
+
+ +

FAQ

+ +
+
How can I prevent the confirmation message asking the user whether he wants to close the window?
+
You can not. New windows not opened by javascript can not as a rule be closed by JavaScript. The JavaScript Console in Mozilla-based browsers will report the warning message: "Scripts may not close windows that were not opened by script." Otherwise the history of URLs visited during the browser session would be lost.
+
More on the window.close() method
+
+ +
+
How can I bring back the window if it is minimized or behind another window?
+
First check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the focus() method. There is no other reliable way. You can examine an example explaining how to use the focus() method.
+
+ +
+
How do I force a maximized window?
+
You cannot. All browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users.
+
+ +
+
How do I turn off window resizability or remove toolbars?
+
You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in about:config. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.
+
+ +
+
How do I resize a window to fit its content?
+
You can not reliably because the users can prevent the window from being resized by unchecking the
+
+ +

Edit/Preferences/Advanced/Scripts & Plug-ins/Allow Scripts to/ Move or resize existing windows
+ checkbox in Mozilla or
+ Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows
+ checkbox in Firefox or by setting
+ dom.disable_window_move_resize
+ to true in the about:config or by editing accordingly their user.js file.

+ +
+
In general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scripts that do not abuse such feature are often wrong, inaccurate when resizing the window. 99% of all those scripts disable window resizability and disable scrollbars when in fact they should enable both of these features to allow a cautious and sane fallback mechanism if their calculations are wrong.
+
+ +
+
The window method sizeToContent() is also disabled if the user unchecks the preference Move or resize existing windows checkbox. Moving and resizing a window remotely on the user's screen via script will very often annoy the users, will disorient the user, and will be wrong at best. The web author expects to have full control of (and can decide about) every position and size aspects of the users' browser window ... which is simply not true.
+
+ +
+
How do I open a referenced resource of a link in a new tab? or in a specific tab?
+
Currently, you can not. Only the user can set his advanced preferences to do that. K-meleon 1.1, a Mozilla-based browser, gives complete control and power to the user regarding how links are opened. Some advanced extensions also give Mozilla and Firefox a lot of power over how referenced resources are loaded.
+
+ +
+
In a few years, the target property of the CSS3 hyperlink module may be implemented (if CSS3 Hyperlink module as it is right now is approved). And even if and when this happens, you can expect developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages. How to open a link should always be entirely under the control of the user.
+
+ +
+
How do I know whether a window I opened is still open?
+
You can test for the existence of the window object reference which is the returned value in case of success of the window.open() call and then verify that WindowObjectReference.closed return value is false.
+
+ +
+
How can I tell when my window was blocked by a popup blocker?
+
With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of window.open(): it will be null if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.
+
+ +
+
What is the JavaScript relationship between the main window and the secondary window?
+
The return value of the window.open() method and the opener property. The WindowObjectReference links the main (opener) window to the secondary (sub-window) window while the opener keyword will link the secondary window to its main (opener) window.
+
+ +
+
I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error: uncaught exception: Permission denied to get property <property_name or method_name>. Why is that?
+
It is because of the cross-domain script security restriction (also referred as the "Same Origin Policy"). A script loaded in a window (or frame) from a distinct origin (domain name) cannot get nor set properties of another window (or frame) or the properties of any of its HTML objects coming from another distinct origin (domain name). Therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name.
+
More reading on the cross-domain script security restriction: http://www.mozilla.org/projects/secu...me-origin.html
+
+ +

Usability issues

+ +

Avoid resorting to window.open()

+ +

Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:

+ + + + + + + + + + + +

If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:

+ +
Never use this form of code for links:
+ <a href="javascript:window.open(...)" ...>
+ +

"javascript:" links break accessibility and usability of webpages in every browser.

+ + + +

Further reading:

+ + + +
Nigdy nie używaj <a href="#" onclick="window.open(...);">
+ +

Takie pseudo-linki ograniczają dostępność stron. Zawsze używaj rzeczywistych URLi jako wartości atrybutu href tak by w przypadku braku obsługi javascriptu lub gdy przeglądarka nie obsługuje otwierania odrębnych okien (jak w przypadku MS-Web TV, przeglądarek tekstowych, itp.), przeglądarka miała możliwość dostępu do zasobu zgodnie z domyślnym sposobem obsługi zasobów. Tak sformułowane linki kolidują także z dodatkowymi funkcjami przeglądarek obsługujących zakładki, np.: kliknięcie linku środkowym klawiszem myszy, kliknięcie linku z przytrzymanym klawiszem ctrl, naciśnięcie kombinacji ctrl+enter czy gesty myszą.

+ + + +

Identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.

+ +

The purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (Back toolbar button is disabled).

+ +
+

"Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button."
+ quote from The Top Ten New Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, May 1999

+
+ +

When extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not).

+ +

References

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Przykład ikon & kursorów "Nowego okna"
New window icon from yahoo.comNew window icon from microsoft.comNew window icon from webaim.orgNew window icon from sun.com
New window icon from bbc.co.ukNew window icon from Accessible Internet SolutionsNew window icon from accessify.comNew window icon from webstyleguide.com
New window icon from an unknown sourceNew window icon from an unknown sourceNew window icon from an unknown sourceNew window icon from gtalbot.org
New window cursor from draig.deNew window cursor from mithgol.ru
+ +
Always use the target attribute
+ +

If javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g. some user agents which can not create new windows, like MS Web TV, will fetch the referenced resource and append it at the end of the current document. The goal and the idea is to try to provide - not impose - to the user a way to open the referenced resource, a mode of opening the link. Your code should not interfere with the features of the browser at the disposal of the user and your code should not interfere with the final decision resting with the user.

+ +
Do not use target="_blank"
+ +

Always provide a meaningful name to your target attribute and try to reuse such target attribute in your page so that a click on another link may load the referenced resource in an already created and rendered window (therefore speeding up the process for the user) and therefore justifying the reason (and user system resources, time spent) for creating a secondary window in the first place. Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window which is recycled. On the other hand, using "_blank" as the target attribute value will create several new and unnamed windows on the user's desktop which can not be recycled, reused. In any case, if your code is well done, it will not interfere with the user's final choice but will rather merely offer him more choices, more ways to open links and more power to the tool he's using (a browser).

+ +

Glossary

+ +
+
Opener window, parent window, main window, first window 
+
Terms often used to describe or to identify the same window. It is the window from which a new window will be created. It is the window on which the user clicked a link which lead to the creation of another, new window.
+
+ +
+
Sub-window, child window, secondary window, second window 
+
Terms often used to describe or to identify the same window. It is the new window which was created.
+
+ +
+
Unrequested popup windows
+
Script-initiated windows opening automatically without the user's consent.
+
+ +

Specification

+ +

DOM Level 0. window.open() is not part of any W3C (World Wide Web Consortium) specification or technical recommendation.

+ +

Notes

+ +

Note on precedence

+ +

In cases where left and screenX (and/or top and screenY) have conflicting values, then left and top have precedence over screenX and screenY respectively. If left and screenX (and/or top and screenY) are defined in the strWindowFeatures list, then left (and/or top) will be honored and rendered. In the following example the new window will be positioned at 100 pixels from the left side of the work area for applications of the user's operating system, not at 200 pixels.

+ +
<script type="text/javascript">
+WindowObjectReference = window.open("http://news.bbc.co.uk/",
+           "BBCWorldNewsWindowName",
+           "left=100,screenX=200,resizable,scrollbars,status");
+</script>
+
+ +

If left is set but top has no value and screenY has a value, then left and screenY will be the coordinate positioning values of the secondary window.

+ +

outerWidth has precedence over width and width has precedence over innerWidth. outerHeight has precedence over height and height has precedence over innerHeight. In the following example, Mozilla-browsers will create a new window with an outerWidth of 600 pixels wide and will ignore the request of a width of 500 pixels and will also ignore the request of an innerWidth of 400 pixels.

+ +
<script type="text/javascript">
+WindowObjectReference = window.open("http://www.wwf.org/",
+           "WWildlifeOrgWindowName",
+           "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status");
+</script>
+
+ +

Note on position and dimension error correction

+ +

Requested position and requested dimension values in the strWindowFeatures list will not be honored and will be corrected if any of such requested value does not allow the entire browser window to be rendered within the work area for applications of the user's operating system. No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.

+ +

MSIE 6 SP2 has a similar error correction mechanism but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.

+ +

Note on scrollbars

+ +

When content overflows window viewport dimensions, then scrollbar(s) (or some scrolling mechanism) are necessary to ensure that content can be accessed by users. Content can overflow window dimensions for several reasons which are outside the control of web authors:

+ + + +

Note on status bar

+ +

You should assume that a large majority of users' browsers will have the status bar or that a large majority of users will want to force the status bar presence: best is to always set this feature to yes. Also, if you specifically request to remove the status bar, then Firefox users will not be able to view the Site Navigation toolbar if it is installed. In Mozilla and in Firefox, all windows with a status bar have a window resizing grippy at its right-most side. The status bar also provides info on http connection, hypertext resource location, download progress bar, encryption/secure connection info with SSL (Secure Socket Layer) connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.

+ +

Note on security issues of the status bar presence

+ +

In MSIE 6 for XP SP2: For windows opened using window.open():

+ +
+

"For windows opened using window.open():
+ Expect the status bar to be present, and code for it. The status bar will be on by default and is 20-25 pixels in height. (...)"
+ quote from Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2

+
+ +
+

"(...) windows that are created using the window.open() method can be called by scripts and used to spoof a user interface or desktop or to hide malicious information or activity by sizing the window so that the status bar is not visible.
+ Internet Explorer windows provide visible security information to the user to help them ascertain the source of the Web page and the security of the communication with that page. When these elements are not in view, the user might think they are on a more trusted page or interacting with a system process when they are actually interacting with a malicious host. (...)
+ Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar. (...)
+ Script management of Internet Explorer status bar
+ Detailed description
+ Internet Explorer has been modified to not turn off the status bar for any windows. The status bar is always visible for all Internet Explorer windows. (...) Without this change, windows that are created using the window.open() method can be called by scripts and spoof a user interface or desktop or hide malicious information or activity by hiding important elements of the user interface from the user.
+ The status bar is a security feature of Internet Explorer windows that provides Internet Explorer security zone information to the user. This zone cannot be spoofed (...)"
+ quote from Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions

+
+ +

Note on fullscreen

+ +

In MSIE 6 for XP SP2:

+ + + + + +

References:

+ + + + + +

Note on outerHeight versus height

+ +

innerHeight vs outerHeight illustration

+ +

Tutorials

+ +

JavaScript windows (tutorial) by Lasse Reichstein Nielsen

+ +

The perfect pop-up (tutorial) by Ian Lloyd

+ +

Popup windows and Firefox (interactive demos) by Gérard Talbot

+ +

References

+ +

Links Want To Be Links by Jukka K. Korpela

+ +

Links & JavaScript Living Together in Harmony by Jeff Howden

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

{{ ApiRef() }}

+

Podsumowanie

+

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

+

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

+

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

+

Składnia

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

Przykład

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

Uwagi

+

Nowe możliwości

+

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

+

Domyślne zachowanie

+

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

+

Passing extra parameters to the dialog

+

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

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

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

+

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

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

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

+

Zwracanie wartości z okienka dialogowego

+

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

+

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

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

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

+

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

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

Zobacz także .

+

Specyfikacja

+

{{ DOM0() }}

diff --git a/files/pl/web/api/window/opener/index.html b/files/pl/web/api/window/opener/index.html new file mode 100644 index 0000000000..3cd744928e --- /dev/null +++ b/files/pl/web/api/window/opener/index.html @@ -0,0 +1,49 @@ +--- +title: window.opener +slug: Web/API/Window/opener +tags: + - API + - HTML DOM + - Window + - Własność + - odniesienie + - opener +translation_of: Web/API/Window/opener +--- +

{{APIRef("HTML DOM")}}

+ +

Podsumowanie

+ +

Właściwość opener obiektu {{domxref ("Window")}} zwraca odniesienie do okna, które otworzyło okno używając {{domxref ("Window.open", "open()")}}.

+ +

Innymi słowy, jeśli okno A otwiera okno B, B.opener zwraca A.

+ +

Składnia

+ +
openerWindow = window.opener;
+
+ +

Wartość

+ +

{{domxref ("Window")}} odnosi się do okna, które wywołało open(), aby otworzyć bieżące okno, lub null, jeśli to okno nie zostało otwarte przez połączenie z innym lub utworzone przez inne.

+ +

W niektórych przeglądarkach atrybut rel="noopener noreferrer" w początkowym elemencie {{HTMLElement ("a")}} zapobiega ustawianiu referencji window.opener, w którym to przypadku ta właściwość zwróci wartość null.

+ +

Przykład

+ +
 if window.opener != indexWin {
+     referToTop(window.opener);
+ }
+
+ +

Uwagi

+ +

Kiedy okno jest otwarte z innego okna, to utrzymuje referencję do pierwszego okna jako window.opener. Jeśli bieżące okno nie posiada własności opener, te metoda zwróci NULL.

+ +

Wsparcie przeglądarek

+ + + +

{{Compat("api.Window.opener")}}

diff --git a/files/pl/web/api/window/prompt/index.html b/files/pl/web/api/window/prompt/index.html new file mode 100644 index 0000000000..0a90ac5c2e --- /dev/null +++ b/files/pl/web/api/window/prompt/index.html @@ -0,0 +1,33 @@ +--- +title: window.prompt +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Wyświetla okno dialogowe z prośbą do użytkownika o wpisanie jakiegoś tekstu.

+

Składnia

+
result = window.prompt(text,value);
+
+ +

Przykład

+
var sign = prompt("Jaki jest twój znak zodiaku?");
+if (sign.toLowerCase() == "skorpion")
+   alert("Wow! Też jestem Skorpionem!");
+
+

Gdy użytkownik naciśnie przycisk OK, zwracany jest wpisany przez niego tekst. Jeśli użytkownik naciśnie przycisk OK bez wprowadzania tekstu, zwrócony zostanie pusty łańcuch znaków. Jeśli użytkownik naciśnie przycisk Anuluj, ta funkcja zwróci wartość null.

+

Uwagi

+

Okno dialogowe typu prompt zawiera pole tekstowe o wielkości pojedynczej linii, przycisk Anuluj i przycisk OK oraz zwraca tekst (możliwy również pusty), które użytkownik wpisał w to pole tekstowe.

+

The following text is shared between this article, DOM:window.confirm and DOM:window.alert Okna dialogowe to okna modalne - uniemożliwiają użytkownikowi dostęp do reszty interfejsu programu dopóki okno nie zostanie zamknięte. Z tego powodu nie powinieneś nadużywać funkcji, które otwierają okna dialogowe.

+

Zamiast tego użytkownicy Chrome (na przykład rozszerzenia) powinni używać metod nsIPromptService.

+

Specyfikacja

+

{{ DOM0() }}

+

Zobacz także

+

alert, confirm

+
+  
+

{{ languages( { "en": "en/DOM/window.prompt", "fr": "fr/DOM/window.prompt", "ja": "ja/DOM/window.prompt" } ) }}

diff --git a/files/pl/web/api/window/requestanimationframe/index.html b/files/pl/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..703a908e8d --- /dev/null +++ b/files/pl/web/api/window/requestanimationframe/index.html @@ -0,0 +1,170 @@ +--- +title: Window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - DOM + - Metodă +translation_of: Web/API/window/requestAnimationFrame +--- +

{{APIRef}}
+ Metoda Window.requestAnimationFrame() informuje przeglądarkę o zamiarze wykonania animacji i żąda od przeglądarki wywołania określonej funkcji w celu odświeżenia animacji przed następnym odmalowaniem. Argumentem metody jest funkcja (callback) do wywołania przed następnym odmalowaniem (odświeżeniem kanwy).

+ +
Uwaga: Twoja funkcja musi samodzielnie wywołać requestAnimationFrame(), jeżeli chcesz odmalować kolejną ramkę animacji.
+ +

Należy wywołać tą metodą za każdym razem, gdy jesteś gotowy do odświeżenia swojej animacji na ekranie. Spowoduje to żądanie od przeglądarki wykonania twojej funkcji przed następnym odmalowaniem. Częstotliwość wykonywania funkcji wynosi zazwyczaj 60 razy na sekundę, jednakże według rekomendacji W3C w większości przeglądarek odpowiada częstotliwości odświeżania ekranu. Ta częstotliwość może zostać zredukowana do niższej wartości, gdy kod wykonywany jest w zakładce pozostającej w tle lub w ukrytej {{ HTMLElement("iframe") }} w celu poprawienia wydajności lub przedłużenia żywotności baterii.

+ +

Wywoływanej funkcji przekazywany jest pojedynczy argument {{domxref("DOMHighResTimeStamp")}}, który zawiera aktualny czas rozpoczęcia wykonywania tej funkcji, wstawionej do kolejki przez wywołanie requestAnimationFrame. Wiele różnych funkcji wywołanych w jednej ramce otrzyma jednakże tę samą wartość znacznika czasu, niezależnie od czasu spędzonego wykonaniu obliczeń w poprzedzającej funkcji. Znacznik czasu jest liczbą dziesiętną wyrażoną w milisekundach z maksymalną dokładnością 1ms (1000 µs).

+ +

Składnia

+ +
window.requestAnimationFrame(callback);
+
+ +

Parametry

+ +
+
callback
+
Parametr określający funkcję do wywołania, gdy nadchodzi czas odświeżenia animacji przed następnym odmalowaniem. Przekazywana funkcja przyjmuje pojedynczy argument {{domxref("DOMHighResTimeStamp")}}, który określa aktualny czas (zwrócony przez {{domxref('Performance.now()')}} ) w momencie rozpoczęcia przez requestAnimationFrame uruchamiania skolejkowanych wcześniej funkcji.
+
+ +

Wartość zwracana

+ +

Wartość typu long integer będącą identyfikatorem żądania, który unikalnie określa pozycję na liście funkcji do wykonania. Jest to niezerowa wartość, jednakże nie wolno przyjmować żadnych innych założeń dotyczących wartości tego identyfikatora. Możesz przekazać tę wartość do {{domxref("Window.cancelAnimationFrame()")}} aby anulować żądanie wywołania funkcji do odświeżenia.

+ +

Przykład

+ +
var start = null;
+var element = document.getElementById("SomeElementYouWantToAnimate");
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.left = Math.min(progress/10, 200) + "px";
+  if (progress < 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}}Brak zmian, zastępuje poprzednią.
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}}Wstępna definicja
+ +

Zgodność przeglądarek

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support10.0 {{property_prefix("webkit")}}
+ 24.0 3		4.0 {{property_prefix("moz")}} 1 4
+ 23 2		10.0{{compatversionunknown}} {{property_prefix("-o")}}
+ 15.0		6.0 {{property_prefix("webkit")}}
+ 6.1
return value23.0{{CompatGeckoDesktop("11.0")}}10.0{{compatversionunknown}}{{compatversionunknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.416.0 {{property_prefix("webkit")}}{{CompatUnknown}}{{CompatUnknown}}14.07.0
+ 6.0 {{property_prefix("webkit")}}
requestID return value{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

1 Przed Gecko 11.0 {{geckoRelease("11.0")}}, mozRequestAnimationFrame() mogłobyć wywołane bez parametru. To nie jest dalej wspierane, gdyż raczej nie stanie się częścią standardu.

+ +

2 Parametrem wywoływanej funkcji jest {{domxref("DOMTimeStamp")}} zamiast {{domxref("DOMHighResTimeStamp")}} gdy stosuje się metodę z prefiksem. DOMTimeStamp ma dokładność tylko do milisekundy, podczas gdy DOMHighResTimeStamp ma minimalną dokładność dziesięciu mikrosekund. Co więcej, czas zerowy jest inny: DOMHighResTimeStamp ma taki sam czas zerowy jak performance.now(), lecz DOMTimeStamp ma czas zerowy jak Date.now().

+ +

3 Poprawnym wywołaniem anulowania żądania w Chrome jest aktualnie window.cancelAnimationFrame(). W starszych wersjach window.webkitCancelAnimationFrame() & window.webkitCancelRequestAnimationFrame(), które są przestarzałe, ale ciągle wspierane.

+ +

4 Wsparcie dla wersji z prefiksem zostało usunięte z Firefox 42.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/window/resizeby/index.html b/files/pl/web/api/window/resizeby/index.html new file mode 100644 index 0000000000..df817ea665 --- /dev/null +++ b/files/pl/web/api/window/resizeby/index.html @@ -0,0 +1,32 @@ +--- +title: window.resizeBy +slug: Web/API/Window/resizeBy +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/resizeBy +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zmienia rozmiar okna o pewną wartość.

+

Składnia

+
window.resizeBy(xDelta,yDelta)
+
+

Parametry

+ +

Przykład

+
// Spowoduje zmniejszenie się okna
+window.resizeBy(-200, -200);
+
+

Uwagi

+

Ta metoda zmienia rozmiar okna relatywnie do jego obecnego rozmiaru. Aby zmienić rozmiar okna bezwzględnie zastosuj DOM:window.resizeTo.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.resizeBy", "ja": "ja/DOM/window.resizeBy" } ) }}

diff --git a/files/pl/web/api/window/resizeto/index.html b/files/pl/web/api/window/resizeto/index.html new file mode 100644 index 0000000000..532b561993 --- /dev/null +++ b/files/pl/web/api/window/resizeto/index.html @@ -0,0 +1,36 @@ +--- +title: window.resizeTo +slug: Web/API/Window/resizeTo +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/resizeTo +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Dynamicznie zmienia rozmiar okna.

+

Składnia

+
window.resizeTo(iWidth,iHeight)
+
+

Parametry

+ +

Przykład

+
 // funkcja zmienia rozmiar okna do połowy aktualnie
+ // wyświetlanego ekranu
+ function halve() {
+   window.resizeTo(window.screen.availWidth/2,
+      window.screen.availHeight/2);
+ }
+
+

Uwagi

+

Zobacz także DOM:window.resizeBy.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.resizeTo", "ja": "ja/DOM/window.resizeTo" } ) }}

diff --git a/files/pl/web/api/window/scroll/index.html b/files/pl/web/api/window/scroll/index.html new file mode 100644 index 0000000000..3aeacc5f9a --- /dev/null +++ b/files/pl/web/api/window/scroll/index.html @@ -0,0 +1,33 @@ +--- +title: window.scroll +slug: Web/API/Window/scroll +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scroll +--- +

 

+

{{ ApiRef() }}

+

Podsumowanie

+

Przesuwa się do danych koordynatów w dokumencie.

+

Składnia

+
window.scroll(x-coord,y-coord)
+
+

Parametry

+ +

Przykład

+
 // przenieś 100-ny piksel poziomy na górę okna
+ <button onClick="scroll(0, 100);">kliknij, by przesunąć się o 100 pikseli w dół </button>
+
+

Uwagi

+

Powyższa funkcja jest tym co funkcja window.scrollTo. Dla przesuwu względnego zobacz window.scrollBy, window.scrollByLines oraz window.scrollByPages.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.scroll", "ja": "ja/DOM/window.scroll" } ) }}

diff --git a/files/pl/web/api/window/scrollbylines/index.html b/files/pl/web/api/window/scrollbylines/index.html new file mode 100644 index 0000000000..329171c9c7 --- /dev/null +++ b/files/pl/web/api/window/scrollbylines/index.html @@ -0,0 +1,35 @@ +--- +title: window.scrollByLines +slug: Web/API/Window/scrollByLines +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollByLines +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przewija dokument przez daną liczbę linii.

+

Składnia

+
window.scrollByLines(lines)
+
+

Parametry

+ +

Przykład

+
// przewija w dół o 5 linii w dokumencie.
+<button onclick="scrollByLines(5);">down 5 lines</button>
+
+
// przewija w górę o 5 linii w dokumencie.
+<button onclick="scrollByLines(-5);">up 5 lines</button>
+
+

Uwagi

+

Zobacz także window.scrollBy, window.scrollByPages.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.scrollByLines", "ja": "ja/DOM/window.scrollByLines" } ) }}

diff --git a/files/pl/web/api/window/scrollbypages/index.html b/files/pl/web/api/window/scrollbypages/index.html new file mode 100644 index 0000000000..99548bf52c --- /dev/null +++ b/files/pl/web/api/window/scrollbypages/index.html @@ -0,0 +1,35 @@ +--- +title: window.scrollByPages +slug: Web/API/Window/scrollByPages +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollByPages +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przewija aktualny dokument przez określoną liczbę stron.

+

Składnia

+
window.scrollByPages(pages)
+
+

Parametry

+ +

Przykład

+
// przewija w dół dokument o 1 stronę
+window.scrollByPages(1);
+
+// przewija w górę dokument o 1 stronę
+window.scrollByPages(-1);
+
+

Uwagi

+

Zobacz także window.scrollBy, window.scrollByLines, window.scroll, window.scrollTo.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/window.scrollByPages", "ja": "ja/DOM/window.scrollByPages" } ) }}

diff --git a/files/pl/web/api/window/scrollto/index.html b/files/pl/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..6bdb2154a7 --- /dev/null +++ b/files/pl/web/api/window/scrollto/index.html @@ -0,0 +1,32 @@ +--- +title: window.scrollTo +slug: Web/API/Window/scrollTo +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Window/scrollTo +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Przesuwa się do danych koordynatów w dokumencie.

+

Składnia

+
window.scrollTo(x-coord,y-coord)
+
+

Parametry

+ +

Przykład

+
window.scrollTo(0, 1000);
+
+

Uwagi

+

Powyższa funkcja jest tym co funkcja window.scroll. Dla przesuwu względnego zobacz window.scrollBy, window.scrollByLines oraz window.scrollByPages.

+

Specyfikacja

+

DOM poziom 0. Nie jest częścią specyfikacji.

+

 

+
+  
+

{{ languages( { "en": "en/DOM/window.scrollTo", "fr": "fr/DOM/window.scrollTo", "ja": "ja/DOM/window.scrollTo" } ) }}

diff --git a/files/pl/web/api/window/setinterval/index.html b/files/pl/web/api/window/setinterval/index.html new file mode 100644 index 0000000000..5cbfadde80 --- /dev/null +++ b/files/pl/web/api/window/setinterval/index.html @@ -0,0 +1,87 @@ +--- +title: window.setInterval +slug: Web/API/Window/setInterval +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Ustawia opóźnienie do cyklicznego wywoływania określonej funkcji.

+ +

Składnia

+ +
var idInterwalu = window.setInterval(funkcja, opóźnienie[, parametr1, parametr2, ...]);
+var idInterwalu = window.setInterval(kod, opóźnienie);
+ +

 Parametry

+ + + +

Należy zwrócić uwagę, że przekazywanie dodatkowych parametrów w pierwszej składni nie działa w Internet Explorerze.

+ +

Przykład

+ +
idInterwalu = window.setInterval(animuj, 500);
+
+ +

 W poniższym przykładzie, funkcja zmienKolorTekstu() będzie wykonywana co sekundę, dopóki użytkownik nie naciśnie przycisku Stop, co spowoduje wywołanie clearInterval() z parametrem idInterwalu.

+ +
<html>
+<head>
+<title>przykład z wykorzystaniem setInterval/clearInterval</title>
+
+<script type="text/javascript">
+var idInterwalu;
+
+function zmienKolor() {
+  idInterwalu = setInterval(zmienKolorTekstu, 1000);
+}
+
+function zmienKolorTekstu() {
+  var elem = document.getElementById("my_box");
+  if (elem.style.color == 'red') {
+    elem.style.color = 'blue';
+  } else {
+    elem.style.color = 'red';
+  }
+}
+
+function zatrzymajZmianeKoloru() {
+  clearInterval(idInterwalu);
+}
+</script>
+</head>
+
+<body onload="zmienKolor();">
+<div id="my_box">
+<p>Hello World</p>
+</div>
+<button onclick="zatrzymajZmianeKoloru();">Stop</button>
+</body>
+</html>
+ +

Uwagi

+ +

Funkcja setInterval() służy do ustawienia opóźnienia dla cyklicznie wywoływanych funkcji, takich jak funkcje animacji.

+ +

Możliwe jest anulowanie wykonania fukcji poprzez wywołanie window.clearInterval().

+ +

Jeżeli funkcja ma zostać wykonana tylko raz a nie być wykonywana cyklicznie to należy skorzystać z  window.setTimeout().

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +

{{ languages( { "en": "en/DOM/window.setInterval", "fr": "fr/DOM/window.setInterval", "ja": "ja/DOM/window.setInterval", "pl": "pl/DOM/window.setInterval" } ) }}

diff --git a/files/pl/web/api/window/settimeout/index.html b/files/pl/web/api/window/settimeout/index.html new file mode 100644 index 0000000000..926080dd5b --- /dev/null +++ b/files/pl/web/api/window/settimeout/index.html @@ -0,0 +1,46 @@ +--- +title: window.setTimeout +slug: Web/API/Window/setTimeout +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Uruchamia fragment kodu bądź funkcję po określonym odstępie czasu.

+

Składnia

+
id = window.setTimeout(funkcja, opóźnienie[, param1, param2, ...]);
+id = window.setTimeout(kod, opóźnienie);
+
+

gdzie

+ +

Przykłady

+
window.setTimeout('window.parent.generateOutput()', 1000);
+
+
function generateOutput(aConcise) {
+  if(aConcise)
+    parent.generateConciseOutput();
+  else
+    parent.generateOutput();
+}
+window.setTimeout(generateOutput, 1000, true);
+
+

Zobacz też przykład użycia clearTimeout().

+

Uwagi

+

Możesz anulować opóźnienie wywołania funkcji za pomocą window.clearTimeout().

+

Jeśli chcesz, by funkcja była uruchamiana cyklicznie (np. co każde N milisekund), rozważ wykorzystanie window.setInterval().

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/window.setTimeout", "fr": "fr/DOM/window.setTimeout", "ja": "ja/DOM/window.setTimeout", "pl": "pl/DOM/window.setTimeout" } ) }}

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

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

+ +

Notes

+ +

The sidebar object returned has the following methods:

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

Specification

+ +

Mozilla-specific. Not part of any standard.

diff --git a/files/pl/web/api/windowbase64/atob/index.html b/files/pl/web/api/windowbase64/atob/index.html new file mode 100644 index 0000000000..cd36201a6c --- /dev/null +++ b/files/pl/web/api/windowbase64/atob/index.html @@ -0,0 +1,104 @@ +--- +title: WindowBase64.atob() +slug: Web/API/WindowBase64/atob +tags: + - API + - Base-64 + - Base64 + - Method + - Metodă + - Reference + - Referencja + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +

{{APIRef}}

+

Funkcja WindowBase64.atob() dekoduje ciąg danych, który został zakodowany używając kodowania base-64. Możesz użyć metody window.btoa() 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 window.atob() aby zdekodować dane ponownie. Na przykład możesz zakodować, przesłać i zdekodować znaki kontrolne ASCII o wartościach od 0 do 31.

+

Aby używać tej funkcji z ciągami Unicode albo UTF-8, zobacz tę uwagę w Kodowaniu i dekodowaniu Base64 i tę uwagę w window.btoa().

+

Składnia

+
var odkodowaneDane = window.atob(zakodowaneDane);
+

Przykład

+
var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu
+var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu
+

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}Bez zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Migawka {{SpecName("HTML WHATWG")}}. Utworzenie WindowBase64 (properties where on the target before it).
+

Zgodność przeglądarek

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FunkcjaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Podstawowa obsługa{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1][2]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FunkcjaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Podstawowa obsługa{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+

[1]  btoa() jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli window nie jest globalnym obiektem w komponencie.

+

[2] Wraz z Firefoxem 27, metoda atob() ignoruje wszystkie spacje w argumencie dla zgodności z najnowszą specyfikacją HTML5. ({{ bug(711180) }})

+

Zobacz też

+ diff --git a/files/pl/web/api/windowbase64/btoa/index.html b/files/pl/web/api/windowbase64/btoa/index.html new file mode 100644 index 0000000000..cf3e90c26d --- /dev/null +++ b/files/pl/web/api/windowbase64/btoa/index.html @@ -0,0 +1,126 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +tags: + - API + - Base-64 + - Base64 + - Method + - Reference + - Referencja + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +

{{APIRef}}

+

Tworzy string ASCII zakodowany w base-64 z ciągu ("string") danych binarnych.

+

Metoda ta jednak nie nadaje się do konwertowania surowych ciągów Unicode! Zobacz sekcję Unicode poniżej.

+

Składnia

+
var zakodowaneDane = window.btoa(ciagDoZakodowania);
+

Przykład

+
var zakodowaneDane = window.btoa("Hello, world"); // kodowanie ciągu
+var odkodowaneDane = window.atob(zakodowaneDane); // odkodowywanie ciągu ("Hello, world")
+
+

Uwagi

+

Możesz używać tej metody do kodowania danych, które w innym wypadku mogą powodować problemy z komunikacją. Przekaż je, a następnie użyj metody window.atob() aby odkodować dane ponownie. Na przykład możesz zakodować znaki kontrolne takie jak ASCII o wartości od 0 do 31.

+

btoa() jest także dostępne dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli window nie jest globalnym obiektem w komponencie.

+

Ciągi Unicode

+

W większości przeglądarek odwołanie się do window.btoa() z ciągiem Unicode spowoduje wystąpienie wyjątku Character Out Of Range.

+

Aby tego uniknąć, rozważ ten model odnotowany przez Johana Sundströma:

+
function utf8_to_b64( str ) {
+    return window.btoa(encodeURIComponent( escape( str )));
+}
+
+function b64_to_utf8( str ) {
+    return unescape(decodeURIComponent(window.atob( str )));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+
+

Lepszym, bardziej wiarygodnym i mniej wymagającym rozwiązaniem jest konwersja DOMString do ciągu zakodowanego w UTF-8 używając TypedArray. W tym celu proszę zapoznać się z tym akapitem.

+

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML WHATWG')}}Brak zmian od ostatniej migawki, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML5.1')}}Migawka {{SpecName("HTML WHATWG")}}. Bez zmian.
{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}{{Spec2('HTML5 W3C')}}Migawka {{SpecName("HTML WHATWG")}}. Utworzenie WindowBase64 (properties where on the target before it).
+

Zgodność przeglądarek

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FunkcjaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Podstawowa obsługa{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FunkcjaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Podstawowa obsługa{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+

[1] btoa() jest także dostępna dla komponentów XPCOM zaimplementowanych w JavaScript, nawet jeżeli window nie jest globalnym obiektem w komponencie.

+

Zobacz też

+ diff --git a/files/pl/web/api/windowbase64/index.html b/files/pl/web/api/windowbase64/index.html new file mode 100644 index 0000000000..2d13e49406 --- /dev/null +++ b/files/pl/web/api/windowbase64/index.html @@ -0,0 +1,113 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +

{{APIRef("HTML DOM")}}

+ +

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This helper neither defines nor inherits any properties.

+ +

Methods

+ +

This helper does not inherit any methods.

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+ +

See also

+ + diff --git a/files/pl/web/api/zdarzenia_dotykowe/index.html b/files/pl/web/api/zdarzenia_dotykowe/index.html new file mode 100644 index 0000000000..4d49e9b5b5 --- /dev/null +++ b/files/pl/web/api/zdarzenia_dotykowe/index.html @@ -0,0 +1,336 @@ +--- +title: Zdarzenia dotykowe +slug: Web/API/Zdarzenia_dotykowe +translation_of: Web/API/Touch_events +--- +
{{DefaultAPISidebar("Touch Events")}}
+ +

W celu zapewnienia wsparcia dla dotykowych interfejsów użytkownika, zdarzenia dotykowe oferują możliwość interpretowania aktywności palca (lub rysika) na ekranach i gładzikach.

+ +

Interfejsy zdarzeń dotykowych to stounkowo niskopoziomowe API, które mogą być użyte do specyficznych dla aplikacji wielodotykowych interakcji takich jak gesty wykonywane dwoma palcami. Interakcja wielodotykowa zaczyna się, kiedy palec (lub rysik) dotyka powierzchni ekranu lub gładzika. Pozostałe palce mogą dotknąć powierzhni później i, opcjonalnie, poruszać się po powierzchni dotykowej. Interakcja kończy się, gdy palce są zabrane z powierzchni ekranu lub gładzika. W czasie trwania interakcji, aplikacja odbiera zdarzenia dotykowe podczas faz startu, ruchu i zakończenia tejże interakcji.

+ +

Zdarzenia dotykowe są podobne do zdarzeń myszki, z tą różnicą, że pozwalają na jednoczesne dotknięcia w różnych miejscach na ekranie. Interfejs {{domxref("TouchEvent")}} hermetyzuje wszystkie punkty dotyku aktywne w danym momencie. Interfejs {{domxref("Touch")}}, który reprezentuje pojedynczy punkt dotyku, zawiera informacje takie jak pozycja punktu dotyku w stosunku do widoku okna przeglądarki.

+ +

Definicje

+ +
+
Powierzchnia
+
Powierzchnia dotykowa. Może to być ekran lub gładzik.
+
+ +
+
Punkt dotyku
+
Punkt kontaktu z powierzchnią. Może to być palec (lub łokieć, ucho, nos, cokolwiek, ale najczęściej jednak palec) lub rysik.
+
+ +

Interfejsy

+ +
+
{{domxref("TouchEvent")}}
+
Reprezentuje zdarzenie, które zachodzi, gdy stan dotknięć powierzchni się zmienia.
+
{{domxref("Touch")}}
+
Reprezentuje pojedynczy punkt kontaktu między użytkownikiem a powierzchnią dotykową.
+
{{domxref("TouchList")}}
+
Reprezentuje grupę dotknięć; jest używany, gdy na przykład użytkownik dotyka powierzchni wieloma palcami jednocześnie.
+
+ +

Przykład

+ +

Poniższy przykład śledzi wiele dotknięć w jednym czasie, pozwalając użytkownikowi na rysowanie w elemencie {{HTMLElement("canvas")}} przy użyciu więcej niż jednego palca jednocześnie. Kod ten będzie działać jedynie w przeglądarkach wspierających zdarzenia dotykowe.

+ +
Uwaga: W niniejszym tekście słowo „palec” używane jest do opisania kontaktu z powierzchnią dotykową, ale może to być oczywiście także rysik lub dowolna inna metoda dotykania ekranu.
+ +

Stwórz kanwę

+ +
<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
+  Twoja przeglądarka nie wspiera elementu kanwa (canvas).
+</canvas>
+<br>
+<button onclick="startup()">Initialize</button>
+<br>
+Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
+
+ +

Ustawianie funkcji do obsługi zdarzeń

+ +

Kiedy strona się ładuje, pokazana niżej funkcja startup() powinna być wywołana przez atrybut onload naszego elementu {{HTMLElement("body")}} (choć w przykładzie używamy przycisku do jej uruchomienia, ze względu na ograniczenia systemu przykłądów w MDN).

+ +
function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchmove", handleMove, false);
+  console.log("initialized.");
+}
+
+ +

Funkcja ta po prostu ustawia nasłluchiwanie zdarzeń dla naszego elementu {{HTMLElement("canvas")}}, tak że możemy obsłużyć zdarzenia dotykowe, kiedy się pojawią.

+ +

Śledzenie nowych zdarzeń

+ +

We'll keep track of the touches in-progress.

+ +
var ongoingTouches = [];
+
+ +

When a {{event("touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the handleStart() function below is called.

+ +
function handleStart(evt) {
+  evt.preventDefault();
+  console.log("touchstart.");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    console.log("touchstart:" + i + "...");
+    ongoingTouches.push(copyTouch(touches[i]));
+    var color = colorForTouch(touches[i]);
+    ctx.beginPath();
+    ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false);  // a circle at the start
+    ctx.fillStyle = color;
+    ctx.fill();
+    console.log("touchstart:" + i + ".");
+  }
+}
+
+ +

This calls {{domxref("event.preventDefault()")}} to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). Then we get the context and pull the list of changed touch points out of the event's {{domxref("TouchEvent.changedTouches")}} property.

+ +

After that, we iterate over all the {{domxref("Touch")}} objects in the list, pushing them onto an array of active touch points and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly.

+ +

Drawing as the touches move

+ +

Each time one or more fingers moves, a {{event("touchmove")}} event is delivered, resulting in our handleMove() function being called. Its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch.

+ +
function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx >= 0) {
+      console.log("continuing touch "+idx);
+      ctx.beginPath();
+      console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");");
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = color;
+      ctx.stroke();
+
+      ongoingTouches.splice(idx, 1, copyTouch(touches[i]));  // swap in the new touch record
+      console.log(".");
+    } else {
+      console.log("can't figure out which touch to continue");
+    }
+  }
+}
+
+ +

This iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch in order to determine the starting point for each touch's new line segment to be drawn. This is done by looking at each touch's {{domxref("Touch.identifier")}} property. This property is a unique integer for each touch, and remains consistent for each event during the duration of each finger's contact with the surface.

+ +

This lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together.

+ +

After drawing the line, we call Array.splice() to replace the previous information about the touch point with the current information in the ongoingTouches array.

+ +

Handling the end of a touch

+ +

When the user lifts a finger off the surface, a {{event("touchend")}} event is sent. We handle this by calling the handleEnd() function below. Its job is to draw the last line segment for each touch that ended and remove the touch point from the ongoing touch list.

+ +
function handleEnd(evt) {
+  evt.preventDefault();
+  log("touchend");
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    if (idx >= 0) {
+      ctx.lineWidth = 4;
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+      ctx.lineTo(touches[i].pageX, touches[i].pageY);
+      ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8);  // and a square at the end
+      ongoingTouches.splice(idx, 1);  // remove it; we're done
+    } else {
+      console.log("can't figure out which touch to end");
+    }
+  }
+}
+
+ +

This is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call Array.splice(), we simply remove the old entry from the ongoing touch list, without adding in the updated information. The result is that we stop tracking that touch point.

+ +

Handling canceled touches

+ +

If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the {{event("touchcancel")}} event is sent, and we call the handleCancel() function below.

+ +
function handleCancel(evt) {
+  evt.preventDefault();
+  console.log("touchcancel.");
+  var touches = evt.changedTouches;
+
+  for (var i = 0; i < touches.length; i++) {
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+    ongoingTouches.splice(idx, 1);  // remove it; we're done
+  }
+}
+
+ +

Since the idea is to immediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.

+ +

Convenience functions

+ +

This example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear.

+ +

Selecting a color for each touch

+ +

In order to make each touch's drawing look different, the colorForTouch() function is used to pick a color based on the touch's unique identifier. This identifier is an opaque number, but we can at least rely on it differing between the currently-active touches.

+ +
function colorForTouch(touch) {
+  var r = touch.identifier % 16;
+  var g = Math.floor(touch.identifier / 3) % 16;
+  var b = Math.floor(touch.identifier / 7) % 16;
+  r = r.toString(16); // make it a hex digit
+  g = g.toString(16); // make it a hex digit
+  b = b.toString(16); // make it a hex digit
+  var color = "#" + r + g + b;
+  console.log("color for touch with identifier " + touch.identifier + " = " + color);
+  return color;
+}
+
+ +

The result from this function is a string that can be used when calling {{HTMLElement("canvas")}} functions to set drawing colors. For example, for a {{domxref("Touch.identifier")}} value of 10, the resulting string is "#a31".

+ +

Copying a touch object

+ +

Some browsers (mobile Safari, for one) re-use touch objects between events, so it's best to copy the bits you care about, rather than referencing the entire object.

+ +
function copyTouch(touch) {
+  return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
+}
+ +

Finding an ongoing touch

+ +

The ongoingTouchIndexById() function below scans through the ongoingTouches array to find the touch matching the given identifier, then returns that touch's index into the array.

+ +
function ongoingTouchIndexById(idToFind) {
+  for (var i = 0; i < ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+
+ +

Showing what's going on

+ +
function log(msg) {
+  var p = document.getElementById('log');
+  p.innerHTML = msg + "\n" + p.innerHTML;
+}
+ +

If your browser supports it, you can {{LiveSampleLink('Example', 'see it live')}}.

+ +

jsFiddle example

+ +

Dodatkowe wskazówki

+ +

This section provides additional tips on how to handle touch events in your web application.

+ +

Obsługa kliknięć

+ +

Since calling preventDefault() on a {{event("touchstart")}} or the first {{event("touchmove")}} event of a series prevents the corresponding mouse events from firing, it's common to call preventDefault() on {{event("touchmove")}} rather than {{event("touchstart")}}. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)

+ +
function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+
+  switch (evt.type) {
+    case "touchstart":
+      type = "mousedown";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchmove":
+      type = "mousemove";
+      touch = evt.changedTouches[0];
+      break;
+    case "touchend":
+      type = "mouseup";
+      touch = evt.changedTouches[0];
+      break;
+  }
+
+  newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null);
+  evt.originalTarget.dispatchEvent(newEvt);
+}
+
+ +

Calling preventDefault() only on a second touch

+ +

One technique for preventing things like pinchZoom on a page is to call preventDefault() on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.

+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}{{Spec2('Touch Events 2')}}Added radiusX, radiusY, rotationAngle, force properties
{{SpecName('Touch Events', '#touch-interface', 'Touch')}}{{Spec2('Touch Events')}}Initial definition.
+ +

Wsparcie przeglądarek

+ +

Touch

+ +

Touch events are typically available on devices with a touch screen, but many browsers make the touch events API unavailable on all desktop devices, even those with touch screens.

+ +

The reason for this is that some websites use the availability of parts of the touch events API as an indicator that the browser is running on a mobile device. If the touch events API is available, these websites will assume a mobile device and serve mobile-optimised content. This may then provide a poor experience for users of desktop devices that have touch screens.

+ +

To support both touch and mouse across all types of device, use pointer events instead.

+ + + +

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

+ +

Firefox, touch events, and multiprocess (e10s)

+ +

In Firefox, touch events are disabled when e10s (electrolysis; multiprocess Firefox) is disabled. e10s is on by default in Firefox, but can end up becoming disabled in certain situations, for example when certain accessibility tools or Firefox add-ons are installed that require e10s to be disabled to work. This means that even on a touchscreen-enabled desktop/laptop, touch events won't be enabled.

+ +

You can test whether e10s is disabled by going to about:support and looking at the "Multiprocess Windows" entry in the "Application Basics" section. 1/1 means it is enabled, 0/1 means disabled.

+ +

If you want to force e10s to be on — to explicitly re-enable touch events support — you need to go to about:config and create a new Boolean preference browser.tabs.remote.force-enable. Set it to true, restart the browser, and e10s will be enabled regardless of any other settings.

-- cgit v1.2.3-54-g00ecf