From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/web/accessibility/index.html | 56 + files/it/web/accessibility/sviluppo_web/index.html | 66 + .../api/canvasrenderingcontext2d/canvas/index.html | 101 + .../canvasrenderingcontext2d/fillstyle/index.html | 209 ++ .../it/web/api/canvasrenderingcontext2d/index.html | 448 ++++ .../ispointinpath/index.html | 208 ++ files/it/web/api/closeevent/index.html | 197 ++ files/it/web/api/console/index.html | 294 +++ files/it/web/api/console/log/index.html | 88 + files/it/web/api/console/table/index.html | 143 ++ files/it/web/api/crypto/index.html | 68 + files/it/web/api/crypto/subtle/index.html | 52 + files/it/web/api/datatransfer/getdata/index.html | 161 ++ files/it/web/api/datatransfer/index.html | 183 ++ files/it/web/api/document/anchors/index.html | 31 + files/it/web/api/document/applets/index.html | 25 + files/it/web/api/document/body/index.html | 88 + files/it/web/api/document/characterset/index.html | 32 + files/it/web/api/document/close/index.html | 27 + files/it/web/api/document/createelement/index.html | 139 ++ files/it/web/api/document/createrange/index.html | 30 + files/it/web/api/document/defaultview/index.html | 27 + files/it/web/api/document/doctype/index.html | 27 + .../it/web/api/document/documentelement/index.html | 68 + files/it/web/api/document/firstchild/index.html | 40 + files/it/web/api/document/forms/index.html | 128 ++ .../it/web/api/document/getelementbyid/index.html | 149 ++ .../api/document/getelementsbyclassname/index.html | 82 + .../web/api/document/getelementsbyname/index.html | 97 + .../api/document/getelementsbytagname/index.html | 116 + files/it/web/api/document/head/index.html | 84 + files/it/web/api/document/height/index.html | 35 + files/it/web/api/document/images/index.html | 52 + files/it/web/api/document/importnode/index.html | 45 + files/it/web/api/document/index.html | 308 +++ files/it/web/api/document/lastmodified/index.html | 31 + files/it/web/api/document/links/index.html | 100 + files/it/web/api/document/namespaceuri/index.html | 29 + files/it/web/api/document/open/index.html | 46 + files/it/web/api/document/queryselector/index.html | 121 + .../web/api/document/queryselectorall/index.html | 180 ++ files/it/web/api/document/referrer/index.html | 23 + files/it/web/api/document/stylesheets/index.html | 43 + files/it/web/api/document/title/index.html | 32 + files/it/web/api/document/url/index.html | 29 + files/it/web/api/document/width/index.html | 32 + files/it/web/api/document/write/index.html | 74 + files/it/web/api/document/writeln/index.html | 34 + files/it/web/api/document_object_model/index.html | 435 ++++ .../document_object_model/introduzione/index.html | 257 +++ .../index.html | 46 + .../getinstalled/index.html | 49 + .../it/web/api/domapplicationsregistry/index.html | 89 + files/it/web/api/domstring/index.html | 56 + files/it/web/api/domtokenlist/index.html | 115 + files/it/web/api/domtokenlist/item/index.html | 67 + .../it/web/api/element/addeventlistener/index.html | 694 ++++++ files/it/web/api/element/attributes/index.html | 120 + files/it/web/api/element/childnodes/index.html | 99 + files/it/web/api/element/classlist/index.html | 288 +++ files/it/web/api/element/classname/index.html | 84 + files/it/web/api/element/clientheight/index.html | 36 + files/it/web/api/element/closest/index.html | 147 ++ files/it/web/api/element/firstchild/index.html | 90 + files/it/web/api/element/getattribute/index.html | 48 + .../api/element/getelementsbytagname/index.html | 80 + files/it/web/api/element/hasattribute/index.html | 75 + files/it/web/api/element/hasattributes/index.html | 28 + files/it/web/api/element/index.html | 475 ++++ files/it/web/api/element/innerhtml/index.html | 213 ++ .../web/api/element/insertadjacenthtml/index.html | 102 + files/it/web/api/element/nodename/index.html | 116 + files/it/web/api/element/nodetype/index.html | 178 ++ files/it/web/api/element/nodevalue/index.html | 75 + files/it/web/api/element/parentnode/index.html | 61 + files/it/web/api/element/prefix/index.html | 26 + files/it/web/api/element/queryselector/index.html | 131 ++ .../it/web/api/element/queryselectorall/index.html | 182 ++ .../it/web/api/element/removeattribute/index.html | 57 + .../web/api/element/requestfullscreen/index.html | 110 + files/it/web/api/element/scrollheight/index.html | 170 ++ files/it/web/api/element/scrolltop/index.html | 83 + files/it/web/api/element/setattribute/index.html | 83 + files/it/web/api/element/tagname/index.html | 72 + files/it/web/api/element/textcontent/index.html | 138 ++ .../it/web/api/element/toggleattribute/index.html | 104 + files/it/web/api/event/altkey/index.html | 46 + files/it/web/api/event/bubbles/index.html | 31 + files/it/web/api/event/button/index.html | 57 + files/it/web/api/event/cancelable/index.html | 23 + files/it/web/api/event/charcode/index.html | 49 + files/it/web/api/event/ctrlkey/index.html | 44 + files/it/web/api/event/currenttarget/index.html | 99 + files/it/web/api/event/eventphase/index.html | 19 + files/it/web/api/event/index.html | 240 ++ files/it/web/api/event/ischar/index.html | 30 + files/it/web/api/event/keycode/index.html | 48 + files/it/web/api/event/layerx/index.html | 102 + files/it/web/api/event/layery/index.html | 102 + files/it/web/api/event/metakey/index.html | 30 + files/it/web/api/event/pagex/index.html | 98 + files/it/web/api/event/pagey/index.html | 98 + files/it/web/api/event/preventdefault/index.html | 176 ++ files/it/web/api/event/shiftkey/index.html | 45 + files/it/web/api/event/stoppropagation/index.html | 60 + files/it/web/api/event/timestamp/index.html | 45 + files/it/web/api/event/type/index.html | 50 + files/it/web/api/event/view/index.html | 22 + files/it/web/api/event/which/index.html | 60 + files/it/web/api/fetch_api/index.html | 170 ++ files/it/web/api/file/index.html | 101 + .../using_files_from_web_applications/index.html | 506 +++++ files/it/web/api/geolocation/index.html | 133 ++ .../api/geolocation/using_geolocation/index.html | 321 +++ .../web/api/geolocation/watchposition/index.html | 166 ++ files/it/web/api/geolocationposition/index.html | 126 ++ files/it/web/api/globaleventhandlers/index.html | 714 ++++++ .../api/globaleventhandlers/onresize/index.html | 77 + files/it/web/api/htmlcanvaselement/index.html | 245 +++ .../it/web/api/htmlcanvaselement/toblob/index.html | 262 +++ files/it/web/api/htmlcollection/index.html | 101 + files/it/web/api/htmlcollection/item/index.html | 50 + files/it/web/api/htmlelement/index.html | 481 ++++ .../it/web/api/htmlelement/offsetheight/index.html | 123 ++ .../api/htmlformelement/acceptcharset/index.html | 22 + files/it/web/api/htmlformelement/action/index.html | 30 + .../it/web/api/htmlformelement/elements/index.html | 34 + .../it/web/api/htmlformelement/enctype/index.html | 28 + files/it/web/api/htmlformelement/index.html | 125 ++ files/it/web/api/htmlformelement/length/index.html | 26 + files/it/web/api/htmlformelement/method/index.html | 28 + files/it/web/api/htmlformelement/name/index.html | 35 + files/it/web/api/htmlformelement/reset/index.html | 28 + files/it/web/api/htmlformelement/submit/index.html | 30 + files/it/web/api/htmlformelement/target/index.html | 24 + files/it/web/api/htmliframeelement/index.html | 455 ++++ files/it/web/api/htmliframeelement/mute/index.html | 93 + files/it/web/api/htmlunknownelement/index.html | 58 + files/it/web/api/index.html | 17 + files/it/web/api/indexeddb_api/index.html | 243 ++ files/it/web/api/mutationobserver/index.html | 102 + .../it/web/api/navigator/cookieenabled/index.html | 83 + files/it/web/api/navigator/credentials/index.html | 57 + files/it/web/api/navigator/index.html | 119 + .../web/api/navigatorconcurrenthardware/index.html | 56 + files/it/web/api/node/appendchild/index.html | 99 + files/it/web/api/node/index.html | 368 ++++ files/it/web/api/node/lastchild/index.html | 59 + files/it/web/api/node/nextsibling/index.html | 101 + files/it/web/api/node/previoussibling/index.html | 81 + files/it/web/api/nodelist/foreach/index.html | 125 ++ files/it/web/api/nodelist/index.html | 124 ++ files/it/web/api/notifiche/dir/index.html | 72 + files/it/web/api/notifiche/index.html | 495 +++++ files/it/web/api/parentnode/children/index.html | 95 + .../api/parentnode/firstelementchild/index.html | 99 + files/it/web/api/parentnode/index.html | 90 + .../web/api/parentnode/lastelementchild/index.html | 98 + files/it/web/api/performance/index.html | 135 ++ files/it/web/api/performance/now/index.html | 104 + files/it/web/api/range/clonecontents/index.html | 27 + files/it/web/api/range/clonerange/index.html | 28 + files/it/web/api/range/collapse/index.html | 36 + files/it/web/api/range/collapsed/index.html | 33 + .../api/range/commonancestorcontainer/index.html | 31 + .../web/api/range/compareboundarypoints/index.html | 54 + files/it/web/api/range/comparepoint/index.html | 37 + .../api/range/createcontextualfragment/index.html | 37 + files/it/web/api/range/deletecontents/index.html | 25 + files/it/web/api/range/detach/index.html | 28 + files/it/web/api/range/endcontainer/index.html | 29 + files/it/web/api/range/endoffset/index.html | 29 + files/it/web/api/range/extractcontents/index.html | 27 + files/it/web/api/range/index.html | 150 ++ files/it/web/api/range/insertnode/index.html | 38 + files/it/web/api/range/ispointinrange/index.html | 31 + files/it/web/api/range/selectnode/index.html | 35 + .../it/web/api/range/selectnodecontents/index.html | 37 + files/it/web/api/range/setend/index.html | 38 + files/it/web/api/range/setendafter/index.html | 35 + files/it/web/api/range/setendbefore/index.html | 35 + files/it/web/api/range/setstart/index.html | 38 + files/it/web/api/range/setstartafter/index.html | 35 + files/it/web/api/range/setstartbefore/index.html | 35 + files/it/web/api/range/startcontainer/index.html | 29 + files/it/web/api/range/startoffset/index.html | 29 + files/it/web/api/range/surroundcontents/index.html | 36 + files/it/web/api/range/tostring/index.html | 28 + files/it/web/api/selection/addrange/index.html | 39 + files/it/web/api/selection/anchornode/index.html | 21 + files/it/web/api/selection/anchoroffset/index.html | 21 + files/it/web/api/selection/collapse/index.html | 44 + .../it/web/api/selection/collapsetoend/index.html | 19 + .../web/api/selection/collapsetostart/index.html | 14 + files/it/web/api/selection/containsnode/index.html | 47 + .../api/selection/deletefromdocument/index.html | 28 + files/it/web/api/selection/extend/index.html | 39 + files/it/web/api/selection/focusnode/index.html | 21 + files/it/web/api/selection/focusoffset/index.html | 21 + files/it/web/api/selection/getrangeat/index.html | 37 + files/it/web/api/selection/index.html | 102 + files/it/web/api/selection/iscollapsed/index.html | 24 + files/it/web/api/selection/rangecount/index.html | 19 + .../web/api/selection/removeallranges/index.html | 19 + files/it/web/api/selection/removerange/index.html | 38 + .../web/api/selection/selectallchildren/index.html | 39 + files/it/web/api/selection/tostring/index.html | 27 + files/it/web/api/storage/clear/index.html | 126 ++ files/it/web/api/storage/getitem/index.html | 144 ++ files/it/web/api/storage/index.html | 161 ++ files/it/web/api/storage/setitem/index.html | 133 ++ files/it/web/api/urlutils/index.html | 205 ++ files/it/web/api/webgl_api/index.html | 254 +++ files/it/web/api/websocket/index.html | 148 ++ files/it/web/api/websocket/websocket/index.html | 48 + files/it/web/api/window/alert/index.html | 36 + files/it/web/api/window/back/index.html | 27 + files/it/web/api/window/blur/index.html | 26 + files/it/web/api/window/close/index.html | 72 + files/it/web/api/window/closed/index.html | 66 + files/it/web/api/window/confirm/index.html | 47 + files/it/web/api/window/crypto/index.html | 90 + files/it/web/api/window/defaultstatus/index.html | 38 + .../web/api/window/devicemotion_event/index.html | 97 + files/it/web/api/window/document/index.html | 39 + files/it/web/api/window/focus/index.html | 26 + files/it/web/api/window/forward/index.html | 22 + files/it/web/api/window/getselection/index.html | 46 + files/it/web/api/window/history/index.html | 37 + files/it/web/api/window/home/index.html | 24 + files/it/web/api/window/index.html | 686 ++++++ files/it/web/api/window/localstorage/index.html | 138 ++ files/it/web/api/window/locationbar/index.html | 43 + files/it/web/api/window/matchmedia/index.html | 91 + files/it/web/api/window/moveby/index.html | 36 + files/it/web/api/window/moveto/index.html | 37 + files/it/web/api/window/name/index.html | 23 + files/it/web/api/window/onuserproximity/index.html | 45 + files/it/web/api/window/opener/index.html | 24 + .../api/window/orientationchange_event/index.html | 66 + files/it/web/api/window/print/index.html | 17 + files/it/web/api/window/prompt/index.html | 51 + .../api/window/requestanimationframe/index.html | 115 + files/it/web/api/window/resizeby/index.html | 35 + files/it/web/api/window/resizeto/index.html | 39 + files/it/web/api/window/sessionstorage/index.html | 138 ++ files/it/web/api/window/sidebar/index.html | 56 + files/it/web/api/window/sizetocontent/index.html | 15 + files/it/web/api/window/status/index.html | 26 + files/it/web/api/window/statusbar/index.html | 32 + files/it/web/api/window/stop/index.html | 17 + files/it/web/api/window/top/index.html | 87 + .../api/windoworworkerglobalscope/fetch/index.html | 167 ++ .../web/api/windoworworkerglobalscope/index.html | 115 + .../web/api/windowtimers/clearinterval/index.html | 48 + files/it/web/api/windowtimers/index.html | 124 ++ files/it/web/api/worker/index.html | 107 + files/it/web/api/xmlhttprequest/index.html | 173 ++ .../xmlhttprequest/onreadystatechange/index.html | 119 + files/it/web/api/xmlhttprequest/open/index.html | 115 + .../web/api/xmlhttprequest/readystate/index.html | 152 ++ .../xmlhttprequest/usare_xmlhttprequest/index.html | 741 +++++++ .../api/xmlhttprequest/xmlhttprequest/index.html | 50 + .../web/css/-moz-border-bottom-colors/index.html | 89 + .../web/css/-moz-font-language-override/index.html | 6 + .../web/css/-webkit-overflow-scrolling/index.html | 52 + files/it/web/css/@document/index.html | 47 + files/it/web/css/_colon_-moz-first-node/index.html | 46 + files/it/web/css/_colon_-moz-last-node/index.html | 46 + .../it/web/css/_colon_-moz-list-bullet/index.html | 42 + files/it/web/css/_colon_active/index.html | 128 ++ files/it/web/css/_colon_focus/index.html | 117 + files/it/web/css/_colon_hover/index.html | 99 + files/it/web/css/_doublecolon_selection/index.html | 134 ++ files/it/web/css/attribute_selectors/index.html | 239 ++ files/it/web/css/background-attachment/index.html | 135 ++ files/it/web/css/background-color/index.html | 86 + files/it/web/css/background-image/index.html | 126 ++ files/it/web/css/background-position/index.html | 158 ++ files/it/web/css/background-repeat/index.html | 165 ++ files/it/web/css/background/index.html | 116 + files/it/web/css/border-bottom/index.html | 99 + files/it/web/css/border-style/index.html | 229 ++ files/it/web/css/border/index.html | 109 + files/it/web/css/cascade/index.html | 149 ++ files/it/web/css/color/index.html | 81 + files/it/web/css/css_box_model/index.html | 165 ++ .../introduction_to_the_css_box_model/index.html | 68 + .../it/web/css/css_flexible_box_layout/index.html | 118 + .../using_css_flexible_boxes/index.html | 394 ++++ files/it/web/css/css_positioning/index.html | 63 + .../understanding_z_index/index.html | 51 + files/it/web/css/cursor/index.html | 388 ++++ .../index.html" | 40 + files/it/web/css/flex-shrink/index.html | 120 + files/it/web/css/flex/index.html | 200 ++ files/it/web/css/font-size-adjust/index.html | 114 + .../web/css/guida_di_riferimento_ai_css/index.html | 96 + files/it/web/css/index.html | 107 + files/it/web/css/media_queries/index.html | 136 ++ files/it/web/css/min-width/index.html | 258 +++ files/it/web/css/mozilla_extensions/index.html | 336 +++ files/it/web/css/object-fit/index.html | 161 ++ files/it/web/css/pseudo-classes/index.html | 167 ++ files/it/web/css/ricette_layout/index.html | 60 + .../it/web/css/selettore_figli_diretti/index.html | 121 + files/it/web/css/text-align/index.html | 108 + files/it/web/css/text-shadow/index.html | 122 ++ .../web/css/transition-timing-function/index.html | 634 ++++++ files/it/web/css/type_selectors/index.html | 78 + files/it/web/css/universal_selectors/index.html | 105 + files/it/web/css/word-break/index.html | 131 ++ files/it/web/css/z-index/index.html | 192 ++ .../web/esempi_di_tecnologie_web_open/index.html | 136 ++ files/it/web/events/domcontentloaded/index.html | 75 + files/it/web/events/index.html | 2310 ++++++++++++++++++++ files/it/web/events/load/index.html | 123 ++ files/it/web/guide/ajax/index.html | 57 + files/it/web/guide/ajax/iniziare/index.html | 252 +++ files/it/web/guide/api/index.html | 26 + files/it/web/guide/css/index.html | 23 + files/it/web/guide/graphics/index.html | 58 + .../guide/html/categorie_di_contenuto/index.html | 141 ++ .../it/web/guide/html/editable_content/index.html | 216 ++ .../rich-text_editing_in_mozilla/index.html | 420 ++++ files/it/web/guide/index.html | 39 + files/it/web/guide/woff/index.html | 99 + files/it/web/html/attributi/index.html | 590 +++++ .../canvas/drawing_graphics_with_canvas/index.html | 161 ++ files/it/web/html/canvas/index.html | 73 + files/it/web/html/element/a/index.html | 457 ++++ files/it/web/html/element/abbr/index.html | 142 ++ files/it/web/html/element/acronym/index.html | 118 + files/it/web/html/element/address/index.html | 120 + files/it/web/html/element/applet/index.html | 120 + files/it/web/html/element/area/index.html | 191 ++ files/it/web/html/element/article/index.html | 119 + files/it/web/html/element/aside/index.html | 134 ++ files/it/web/html/element/audio/index.html | 341 +++ files/it/web/html/element/b/index.html | 134 ++ files/it/web/html/element/base/index.html | 137 ++ files/it/web/html/element/basefont/index.html | 103 + files/it/web/html/element/bdi/index.html | 116 + files/it/web/html/element/bdo/index.html | 128 ++ files/it/web/html/element/bgsound/index.html | 101 + files/it/web/html/element/big/index.html | 99 + files/it/web/html/element/blink/index.html | 112 + files/it/web/html/element/blockquote/index.html | 130 ++ files/it/web/html/element/body/index.html | 211 ++ files/it/web/html/element/br/index.html | 135 ++ files/it/web/html/element/canvas/index.html | 178 ++ files/it/web/html/element/caption/index.html | 134 ++ files/it/web/html/element/center/index.html | 51 + files/it/web/html/element/div/index.html | 137 ++ files/it/web/html/element/figura/index.html | 170 ++ files/it/web/html/element/footer/index.html | 119 + files/it/web/html/element/head/index.html | 85 + files/it/web/html/element/header/index.html | 120 + files/it/web/html/element/hgroup/index.html | 99 + files/it/web/html/element/html/index.html | 87 + files/it/web/html/element/i/index.html | 115 + files/it/web/html/element/iframe/index.html | 471 ++++ files/it/web/html/element/img/index.html | 422 ++++ files/it/web/html/element/index.html | 235 ++ files/it/web/html/element/input/file/index.html | 520 +++++ files/it/web/html/element/input/index.html | 576 +++++ files/it/web/html/element/kbd/index.html | 153 ++ files/it/web/html/element/main/index.html | 154 ++ files/it/web/html/element/nav/index.html | 124 ++ files/it/web/html/element/output/index.html | 122 ++ files/it/web/html/element/p/index.html | 109 + files/it/web/html/element/section/index.html | 150 ++ files/it/web/html/element/span/index.html | 110 + files/it/web/html/element/strike/index.html | 51 + files/it/web/html/element/table/index.html | 437 ++++ files/it/web/html/element/time/index.html | 118 + files/it/web/html/element/title/index.html | 56 + files/it/web/html/forms_in_html/index.html | 83 + files/it/web/html/global_attributes/id/index.html | 109 + files/it/web/html/global_attributes/index.html | 444 ++++ files/it/web/html/html5/index.html | 167 ++ .../html/html5/introduction_to_html5/index.html | 22 + files/it/web/html/index.html | 75 + files/it/web/html/riferimento/index.html | 46 + .../index.html | 320 +++ .../html/utilizzare_application_cache/index.html | 383 ++++ files/it/web/http/authentication/index.html | 134 ++ files/it/web/http/basi_http/index.html | 48 + files/it/web/http/caching/index.html | 187 ++ files/it/web/http/compressione/index.html | 67 + files/it/web/http/conditional_requests/index.html | 144 ++ files/it/web/http/cookies/index.html | 193 ++ .../http/cors/errors/corsdidnotsucceed/index.html | 36 + .../cors/errors/corsmissingalloworigin/index.html | 46 + files/it/web/http/cors/errors/index.html | 76 + files/it/web/http/cors/index.html | 565 +++++ files/it/web/http/feature_policy/index.html | 161 ++ files/it/web/http/headers/age/index.html | 69 + files/it/web/http/headers/authorization/index.html | 88 + files/it/web/http/headers/cookie/index.html | 74 + files/it/web/http/headers/host/index.html | 77 + files/it/web/http/headers/index.html | 368 ++++ files/it/web/http/headers/server/index.html | 70 + .../headers/strict-transport-security/index.html | 118 + .../http/headers/x-content-type-options/index.html | 90 + .../web/http/headers/x-xss-protection/index.html | 90 + files/it/web/http/index.html | 231 ++ .../web/http/negoziazione-del-contenuto/index.html | 143 ++ files/it/web/http/panoramica/index.html | 176 ++ .../web/http/protocol_upgrade_mechanism/index.html | 148 ++ files/it/web/http/redirections/index.html | 318 +++ .../http/resources_and_specifications/index.html | 267 +++ files/it/web/http/richieste_range/index.html | 115 + files/it/web/http/sessione/index.html | 171 ++ files/it/web/http/status/100/index.html | 42 + files/it/web/http/status/101/index.html | 51 + files/it/web/http/status/200/index.html | 55 + files/it/web/http/status/302/index.html | 50 + files/it/web/http/status/404/index.html | 62 + files/it/web/http/status/500/index.html | 43 + files/it/web/http/status/index.html | 171 ++ files/it/web/index.html | 125 ++ files/it/web/javascript/chiusure/index.html | 345 +++ .../javascript/cos\303\250_javascript/index.html" | 57 + files/it/web/javascript/data_structures/index.html | 444 ++++ .../ecmascript_6_support_in_mozilla/index.html | 153 ++ files/it/web/javascript/eventloop/index.html | 106 + .../javascript/gestione_della_memoria/index.html | 197 ++ files/it/web/javascript/getting_started/index.html | 330 +++ .../index.html | 461 ++++ .../guida/dettagli_object_model/index.html | 727 ++++++ .../guida/espressioni_regolari/index.html | 647 ++++++ files/it/web/javascript/guida/functions/index.html | 646 ++++++ .../javascript/guida/grammar_and_types/index.html | 659 ++++++ files/it/web/javascript/guida/index.html | 124 ++ .../web/javascript/guida/introduzione/index.html | 140 ++ .../guida/iteratori_e_generatori/index.html | 162 ++ .../guida/loops_and_iteration/index.html | 340 +++ .../web/javascript/il_dom_e_javascript/index.html | 81 + files/it/web/javascript/index.html | 116 + .../inheritance_and_the_prototype_chain/index.html | 556 +++++ .../index.html | 390 ++++ .../javascript/new_in_javascript/1.8.5/index.html | 123 ++ .../it/web/javascript/new_in_javascript/index.html | 80 + .../novit\303\240_in_javascript_1.6/index.html" | 81 + .../novit\303\240_in_javascript_1.7/index.html" | 79 + .../reference/classes/costruttore/index.html | 161 ++ .../reference/classes/extends/index.html | 175 ++ .../it/web/javascript/reference/classes/index.html | 270 +++ .../javascript/reference/classes/static/index.html | 70 + .../it/web/javascript/reference/errors/index.html | 31 + .../errors/invalid_array_length/index.html | 77 + .../invalid_assignment_left-hand_side/index.html | 54 + .../missing_semicolon_before_statement/index.html | 78 + .../reference/errors/too_much_recursion/index.html | 72 + .../reference/errors/unexpected_token/index.html | 50 + .../reference/errors/unexpected_type/index.html | 67 + .../arguments/index.html | 224 ++ .../arrow_functions/index.html | 394 ++++ .../functions_and_function_scope/get/index.html | 154 ++ .../functions_and_function_scope/index.html | 617 ++++++ .../functions_and_function_scope/set/index.html | 214 ++ .../global_objects/array/concat/index.html | 188 ++ .../global_objects/array/copywithin/index.html | 180 ++ .../global_objects/array/entries/index.html | 77 + .../global_objects/array/every/index.html | 184 ++ .../reference/global_objects/array/fill/index.html | 155 ++ .../global_objects/array/filter/index.html | 245 +++ .../reference/global_objects/array/find/index.html | 216 ++ .../global_objects/array/findindex/index.html | 182 ++ .../reference/global_objects/array/flat/index.html | 159 ++ .../global_objects/array/flatmap/index.html | 142 ++ .../global_objects/array/foreach/index.html | 331 +++ .../reference/global_objects/array/from/index.html | 242 ++ .../global_objects/array/includes/index.html | 162 ++ .../reference/global_objects/array/index.html | 480 ++++ .../global_objects/array/indexof/index.html | 226 ++ .../global_objects/array/isarray/index.html | 133 ++ .../reference/global_objects/array/join/index.html | 112 + .../reference/global_objects/array/keys/index.html | 74 + .../global_objects/array/lastindexof/index.html | 169 ++ .../global_objects/array/length/index.html | 129 ++ .../reference/global_objects/array/map/index.html | 323 +++ .../reference/global_objects/array/of/index.html | 92 + .../reference/global_objects/array/pop/index.html | 117 + .../global_objects/array/prototype/index.html | 203 ++ .../reference/global_objects/array/push/index.html | 142 ++ .../global_objects/array/reduce/index.html | 576 +++++ .../global_objects/array/reverse/index.html | 133 ++ .../global_objects/array/slice/index.html | 241 ++ .../reference/global_objects/array/some/index.html | 202 ++ .../reference/global_objects/array/sort/index.html | 267 +++ .../global_objects/array/splice/index.html | 163 ++ .../global_objects/array/tostring/index.html | 80 + .../global_objects/array/unshift/index.html | 98 + .../global_objects/array/values/index.html | 87 + .../global_objects/arraybuffer/index.html | 147 ++ .../reference/global_objects/atomics/index.html | 166 ++ .../global_objects/atomics/store/index.html | 91 + .../global_objects/date/getdate/index.html | 78 + .../global_objects/date/getday/index.html | 89 + .../global_objects/date/getfullyear/index.html | 84 + .../global_objects/date/gethours/index.html | 79 + .../global_objects/date/getmilliseconds/index.html | 77 + .../global_objects/date/getminutes/index.html | 77 + .../global_objects/date/getmonth/index.html | 90 + .../global_objects/date/getseconds/index.html | 79 + .../global_objects/date/gettime/index.html | 125 ++ .../date/gettimezoneoffset/index.html | 99 + .../reference/global_objects/date/index.html | 249 +++ .../reference/global_objects/date/now/index.html | 96 + .../reference/global_objects/date/utc/index.html | 135 ++ .../reference/global_objects/decodeuri/index.html | 120 + .../global_objects/decodeuricomponent/index.html | 124 ++ .../reference/global_objects/encodeuri/index.html | 160 ++ .../global_objects/encodeuricomponent/index.html | 162 ++ .../reference/global_objects/escape/index.html | 126 ++ .../reference/global_objects/eval/index.html | 231 ++ .../global_objects/function/apply/index.html | 250 +++ .../global_objects/function/arguments/index.html | 92 + .../global_objects/function/arity/index.html | 26 + .../global_objects/function/bind/index.html | 277 +++ .../global_objects/function/call/index.html | 175 ++ .../reference/global_objects/function/index.html | 237 ++ .../global_objects/function/length/index.html | 87 + .../reference/global_objects/generator/index.html | 187 ++ .../global_objects/generator/next/index.html | 157 ++ .../javascript/reference/global_objects/index.html | 182 ++ .../reference/global_objects/infinity/index.html | 114 + .../reference/global_objects/isfinite/index.html | 136 ++ .../reference/global_objects/isnan/index.html | 176 ++ .../reference/global_objects/json/index.html | 244 +++ .../reference/global_objects/json/parse/index.html | 126 ++ .../global_objects/json/stringify/index.html | 325 +++ .../reference/global_objects/map/clear/index.html | 76 + .../reference/global_objects/map/delete/index.html | 74 + .../global_objects/map/foreach/index.html | 88 + .../reference/global_objects/map/index.html | 439 ++++ .../reference/global_objects/math/abs/index.html | 95 + .../reference/global_objects/math/acos/index.html | 94 + .../reference/global_objects/math/atan/index.html | 100 + .../reference/global_objects/math/atan2/index.html | 155 ++ .../reference/global_objects/math/ceil/index.html | 161 ++ .../reference/global_objects/math/e/index.html | 79 + .../reference/global_objects/math/floor/index.html | 158 ++ .../reference/global_objects/math/index.html | 208 ++ .../reference/global_objects/math/max/index.html | 145 ++ .../reference/global_objects/math/min/index.html | 160 ++ .../reference/global_objects/math/pow/index.html | 151 ++ .../global_objects/math/random/index.html | 107 + .../reference/global_objects/math/round/index.html | 100 + .../reference/global_objects/math/sqrt/index.html | 136 ++ .../reference/global_objects/nan/index.html | 79 + .../reference/global_objects/null/index.html | 89 + .../reference/global_objects/number/index.html | 188 ++ .../global_objects/object/assign/index.html | 268 +++ .../global_objects/object/create/index.html | 234 ++ .../object/defineproperties/index.html | 224 ++ .../global_objects/object/freeze/index.html | 210 ++ .../object/getprototypeof/index.html | 130 ++ .../object/hasownproperty/index.html | 164 ++ .../reference/global_objects/object/index.html | 224 ++ .../reference/global_objects/object/is/index.html | 130 ++ .../global_objects/object/isfrozen/index.html | 184 ++ .../global_objects/object/issealed/index.html | 146 ++ .../global_objects/object/keys/index.html | 167 ++ .../global_objects/object/observe/index.html | 189 ++ .../global_objects/object/prototype/index.html | 214 ++ .../global_objects/object/seal/index.html | 157 ++ .../global_objects/object/tostring/index.html | 170 ++ .../reference/global_objects/parsefloat/index.html | 139 ++ .../reference/global_objects/parseint/index.html | 190 ++ .../global_objects/promise/all/index.html | 110 + .../global_objects/promise/catch/index.html | 124 ++ .../reference/global_objects/promise/index.html | 248 +++ .../global_objects/proxy/handler/apply/index.html | 119 + .../global_objects/proxy/handler/index.html | 83 + .../reference/global_objects/proxy/index.html | 396 ++++ .../global_objects/proxy/revocabile/index.html | 86 + .../global_objects/set/entries/index.html | 113 + .../reference/global_objects/set/index.html | 394 ++++ .../reference/global_objects/set/values/index.html | 114 + .../global_objects/string/charat/index.html | 247 +++ .../global_objects/string/includes/index.html | 188 ++ .../reference/global_objects/string/index.html | 410 ++++ .../global_objects/string/indexof/index.html | 151 ++ .../global_objects/string/length/index.html | 90 + .../global_objects/string/prototype/index.html | 178 ++ .../reference/global_objects/string/raw/index.html | 108 + .../reference/global_objects/symbol/index.html | 230 ++ .../reference/global_objects/undefined/index.html | 173 ++ .../reference/global_objects/unescape/index.html | 124 ++ .../reference/global_objects/uneval/index.html | 112 + files/it/web/javascript/reference/index.html | 49 + .../operators/destructuring_assignment/index.html | 451 ++++ .../javascript/reference/operators/in/index.html | 198 ++ .../web/javascript/reference/operators/index.html | 282 +++ .../javascript/reference/operators/new/index.html | 186 ++ .../operators/operator_condizionale/index.html | 171 ++ .../operators/operatore_virgola/index.html | 105 + .../operators/operatori_aritmetici/index.html | 291 +++ .../reference/operators/spread_syntax/index.html | 257 +++ .../reference/operators/super/index.html | 181 ++ .../javascript/reference/operators/this/index.html | 410 ++++ .../reference/operators/yield/index.html | 163 ++ .../reference/statements/break/index.html | 130 ++ .../reference/statements/empty/index.html | 102 + .../reference/statements/export/index.html | 259 +++ .../reference/statements/for...of/index.html | 264 +++ .../reference/statements/function_star_/index.html | 280 +++ .../reference/statements/import/index.html | 167 ++ .../web/javascript/reference/statements/index.html | 131 ++ .../javascript/reference/statements/let/index.html | 208 ++ .../reference/statements/switch/index.html | 320 +++ .../reference/statements/throw/index.html | 195 ++ .../javascript/reference/statements/var/index.html | 221 ++ .../reference/template_strings/index.html | 210 ++ .../una_reintroduzione_al_javascript/index.html | 966 ++++++++ files/it/web/performance/index.html | 286 +++ .../percorso_critico_di_rendering/index.html | 62 + files/it/web/reference/api/index.html | 58 + files/it/web/reference/index.html | 23 + files/it/web/security/index.html | 18 + files/it/web/security/password_insicure/index.html | 67 + files/it/web/svg/element/animate/index.html | 115 + files/it/web/svg/element/index.html | 297 +++ files/it/web/tutorials/index.html | 152 ++ files/it/web/web_components/index.html | 210 ++ .../usare_custom_elements/index.html | 297 +++ files/it/web/xslt/index.html | 40 + 630 files changed, 92232 insertions(+) create mode 100644 files/it/web/accessibility/index.html create mode 100644 files/it/web/accessibility/sviluppo_web/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html create mode 100644 files/it/web/api/closeevent/index.html create mode 100644 files/it/web/api/console/index.html create mode 100644 files/it/web/api/console/log/index.html create mode 100644 files/it/web/api/console/table/index.html create mode 100644 files/it/web/api/crypto/index.html create mode 100644 files/it/web/api/crypto/subtle/index.html create mode 100644 files/it/web/api/datatransfer/getdata/index.html create mode 100644 files/it/web/api/datatransfer/index.html create mode 100644 files/it/web/api/document/anchors/index.html create mode 100644 files/it/web/api/document/applets/index.html create mode 100644 files/it/web/api/document/body/index.html create mode 100644 files/it/web/api/document/characterset/index.html create mode 100644 files/it/web/api/document/close/index.html create mode 100644 files/it/web/api/document/createelement/index.html create mode 100644 files/it/web/api/document/createrange/index.html create mode 100644 files/it/web/api/document/defaultview/index.html create mode 100644 files/it/web/api/document/doctype/index.html create mode 100644 files/it/web/api/document/documentelement/index.html create mode 100644 files/it/web/api/document/firstchild/index.html create mode 100644 files/it/web/api/document/forms/index.html create mode 100644 files/it/web/api/document/getelementbyid/index.html create mode 100644 files/it/web/api/document/getelementsbyclassname/index.html create mode 100644 files/it/web/api/document/getelementsbyname/index.html create mode 100644 files/it/web/api/document/getelementsbytagname/index.html create mode 100644 files/it/web/api/document/head/index.html create mode 100644 files/it/web/api/document/height/index.html create mode 100644 files/it/web/api/document/images/index.html create mode 100644 files/it/web/api/document/importnode/index.html create mode 100644 files/it/web/api/document/index.html create mode 100644 files/it/web/api/document/lastmodified/index.html create mode 100644 files/it/web/api/document/links/index.html create mode 100644 files/it/web/api/document/namespaceuri/index.html create mode 100644 files/it/web/api/document/open/index.html create mode 100644 files/it/web/api/document/queryselector/index.html create mode 100644 files/it/web/api/document/queryselectorall/index.html create mode 100644 files/it/web/api/document/referrer/index.html create mode 100644 files/it/web/api/document/stylesheets/index.html create mode 100644 files/it/web/api/document/title/index.html create mode 100644 files/it/web/api/document/url/index.html create mode 100644 files/it/web/api/document/width/index.html create mode 100644 files/it/web/api/document/write/index.html create mode 100644 files/it/web/api/document/writeln/index.html create mode 100644 files/it/web/api/document_object_model/index.html create mode 100644 files/it/web/api/document_object_model/introduzione/index.html create mode 100644 files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html create mode 100644 files/it/web/api/domapplicationsregistry/getinstalled/index.html create mode 100644 files/it/web/api/domapplicationsregistry/index.html create mode 100644 files/it/web/api/domstring/index.html create mode 100644 files/it/web/api/domtokenlist/index.html create mode 100644 files/it/web/api/domtokenlist/item/index.html create mode 100644 files/it/web/api/element/addeventlistener/index.html create mode 100644 files/it/web/api/element/attributes/index.html create mode 100644 files/it/web/api/element/childnodes/index.html create mode 100644 files/it/web/api/element/classlist/index.html create mode 100644 files/it/web/api/element/classname/index.html create mode 100644 files/it/web/api/element/clientheight/index.html create mode 100644 files/it/web/api/element/closest/index.html create mode 100644 files/it/web/api/element/firstchild/index.html create mode 100644 files/it/web/api/element/getattribute/index.html create mode 100644 files/it/web/api/element/getelementsbytagname/index.html create mode 100644 files/it/web/api/element/hasattribute/index.html create mode 100644 files/it/web/api/element/hasattributes/index.html create mode 100644 files/it/web/api/element/index.html create mode 100644 files/it/web/api/element/innerhtml/index.html create mode 100644 files/it/web/api/element/insertadjacenthtml/index.html create mode 100644 files/it/web/api/element/nodename/index.html create mode 100644 files/it/web/api/element/nodetype/index.html create mode 100644 files/it/web/api/element/nodevalue/index.html create mode 100644 files/it/web/api/element/parentnode/index.html create mode 100644 files/it/web/api/element/prefix/index.html create mode 100644 files/it/web/api/element/queryselector/index.html create mode 100644 files/it/web/api/element/queryselectorall/index.html create mode 100644 files/it/web/api/element/removeattribute/index.html create mode 100644 files/it/web/api/element/requestfullscreen/index.html create mode 100644 files/it/web/api/element/scrollheight/index.html create mode 100644 files/it/web/api/element/scrolltop/index.html create mode 100644 files/it/web/api/element/setattribute/index.html create mode 100644 files/it/web/api/element/tagname/index.html create mode 100644 files/it/web/api/element/textcontent/index.html create mode 100644 files/it/web/api/element/toggleattribute/index.html create mode 100644 files/it/web/api/event/altkey/index.html create mode 100644 files/it/web/api/event/bubbles/index.html create mode 100644 files/it/web/api/event/button/index.html create mode 100644 files/it/web/api/event/cancelable/index.html create mode 100644 files/it/web/api/event/charcode/index.html create mode 100644 files/it/web/api/event/ctrlkey/index.html create mode 100644 files/it/web/api/event/currenttarget/index.html create mode 100644 files/it/web/api/event/eventphase/index.html create mode 100644 files/it/web/api/event/index.html create mode 100644 files/it/web/api/event/ischar/index.html create mode 100644 files/it/web/api/event/keycode/index.html create mode 100644 files/it/web/api/event/layerx/index.html create mode 100644 files/it/web/api/event/layery/index.html create mode 100644 files/it/web/api/event/metakey/index.html create mode 100644 files/it/web/api/event/pagex/index.html create mode 100644 files/it/web/api/event/pagey/index.html create mode 100644 files/it/web/api/event/preventdefault/index.html create mode 100644 files/it/web/api/event/shiftkey/index.html create mode 100644 files/it/web/api/event/stoppropagation/index.html create mode 100644 files/it/web/api/event/timestamp/index.html create mode 100644 files/it/web/api/event/type/index.html create mode 100644 files/it/web/api/event/view/index.html create mode 100644 files/it/web/api/event/which/index.html create mode 100644 files/it/web/api/fetch_api/index.html create mode 100644 files/it/web/api/file/index.html create mode 100644 files/it/web/api/file/using_files_from_web_applications/index.html create mode 100644 files/it/web/api/geolocation/index.html create mode 100644 files/it/web/api/geolocation/using_geolocation/index.html create mode 100644 files/it/web/api/geolocation/watchposition/index.html create mode 100644 files/it/web/api/geolocationposition/index.html create mode 100644 files/it/web/api/globaleventhandlers/index.html create mode 100644 files/it/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/it/web/api/htmlcanvaselement/index.html create mode 100644 files/it/web/api/htmlcanvaselement/toblob/index.html create mode 100644 files/it/web/api/htmlcollection/index.html create mode 100644 files/it/web/api/htmlcollection/item/index.html create mode 100644 files/it/web/api/htmlelement/index.html create mode 100644 files/it/web/api/htmlelement/offsetheight/index.html create mode 100644 files/it/web/api/htmlformelement/acceptcharset/index.html create mode 100644 files/it/web/api/htmlformelement/action/index.html create mode 100644 files/it/web/api/htmlformelement/elements/index.html create mode 100644 files/it/web/api/htmlformelement/enctype/index.html create mode 100644 files/it/web/api/htmlformelement/index.html create mode 100644 files/it/web/api/htmlformelement/length/index.html create mode 100644 files/it/web/api/htmlformelement/method/index.html create mode 100644 files/it/web/api/htmlformelement/name/index.html create mode 100644 files/it/web/api/htmlformelement/reset/index.html create mode 100644 files/it/web/api/htmlformelement/submit/index.html create mode 100644 files/it/web/api/htmlformelement/target/index.html create mode 100644 files/it/web/api/htmliframeelement/index.html create mode 100644 files/it/web/api/htmliframeelement/mute/index.html create mode 100644 files/it/web/api/htmlunknownelement/index.html create mode 100644 files/it/web/api/index.html create mode 100644 files/it/web/api/indexeddb_api/index.html create mode 100644 files/it/web/api/mutationobserver/index.html create mode 100644 files/it/web/api/navigator/cookieenabled/index.html create mode 100644 files/it/web/api/navigator/credentials/index.html create mode 100644 files/it/web/api/navigator/index.html create mode 100644 files/it/web/api/navigatorconcurrenthardware/index.html create mode 100644 files/it/web/api/node/appendchild/index.html create mode 100644 files/it/web/api/node/index.html create mode 100644 files/it/web/api/node/lastchild/index.html create mode 100644 files/it/web/api/node/nextsibling/index.html create mode 100644 files/it/web/api/node/previoussibling/index.html create mode 100644 files/it/web/api/nodelist/foreach/index.html create mode 100644 files/it/web/api/nodelist/index.html create mode 100644 files/it/web/api/notifiche/dir/index.html create mode 100644 files/it/web/api/notifiche/index.html create mode 100644 files/it/web/api/parentnode/children/index.html create mode 100644 files/it/web/api/parentnode/firstelementchild/index.html create mode 100644 files/it/web/api/parentnode/index.html create mode 100644 files/it/web/api/parentnode/lastelementchild/index.html create mode 100644 files/it/web/api/performance/index.html create mode 100644 files/it/web/api/performance/now/index.html create mode 100644 files/it/web/api/range/clonecontents/index.html create mode 100644 files/it/web/api/range/clonerange/index.html create mode 100644 files/it/web/api/range/collapse/index.html create mode 100644 files/it/web/api/range/collapsed/index.html create mode 100644 files/it/web/api/range/commonancestorcontainer/index.html create mode 100644 files/it/web/api/range/compareboundarypoints/index.html create mode 100644 files/it/web/api/range/comparepoint/index.html create mode 100644 files/it/web/api/range/createcontextualfragment/index.html create mode 100644 files/it/web/api/range/deletecontents/index.html create mode 100644 files/it/web/api/range/detach/index.html create mode 100644 files/it/web/api/range/endcontainer/index.html create mode 100644 files/it/web/api/range/endoffset/index.html create mode 100644 files/it/web/api/range/extractcontents/index.html create mode 100644 files/it/web/api/range/index.html create mode 100644 files/it/web/api/range/insertnode/index.html create mode 100644 files/it/web/api/range/ispointinrange/index.html create mode 100644 files/it/web/api/range/selectnode/index.html create mode 100644 files/it/web/api/range/selectnodecontents/index.html create mode 100644 files/it/web/api/range/setend/index.html create mode 100644 files/it/web/api/range/setendafter/index.html create mode 100644 files/it/web/api/range/setendbefore/index.html create mode 100644 files/it/web/api/range/setstart/index.html create mode 100644 files/it/web/api/range/setstartafter/index.html create mode 100644 files/it/web/api/range/setstartbefore/index.html create mode 100644 files/it/web/api/range/startcontainer/index.html create mode 100644 files/it/web/api/range/startoffset/index.html create mode 100644 files/it/web/api/range/surroundcontents/index.html create mode 100644 files/it/web/api/range/tostring/index.html create mode 100644 files/it/web/api/selection/addrange/index.html create mode 100644 files/it/web/api/selection/anchornode/index.html create mode 100644 files/it/web/api/selection/anchoroffset/index.html create mode 100644 files/it/web/api/selection/collapse/index.html create mode 100644 files/it/web/api/selection/collapsetoend/index.html create mode 100644 files/it/web/api/selection/collapsetostart/index.html create mode 100644 files/it/web/api/selection/containsnode/index.html create mode 100644 files/it/web/api/selection/deletefromdocument/index.html create mode 100644 files/it/web/api/selection/extend/index.html create mode 100644 files/it/web/api/selection/focusnode/index.html create mode 100644 files/it/web/api/selection/focusoffset/index.html create mode 100644 files/it/web/api/selection/getrangeat/index.html create mode 100644 files/it/web/api/selection/index.html create mode 100644 files/it/web/api/selection/iscollapsed/index.html create mode 100644 files/it/web/api/selection/rangecount/index.html create mode 100644 files/it/web/api/selection/removeallranges/index.html create mode 100644 files/it/web/api/selection/removerange/index.html create mode 100644 files/it/web/api/selection/selectallchildren/index.html create mode 100644 files/it/web/api/selection/tostring/index.html create mode 100644 files/it/web/api/storage/clear/index.html create mode 100644 files/it/web/api/storage/getitem/index.html create mode 100644 files/it/web/api/storage/index.html create mode 100644 files/it/web/api/storage/setitem/index.html create mode 100644 files/it/web/api/urlutils/index.html create mode 100644 files/it/web/api/webgl_api/index.html create mode 100644 files/it/web/api/websocket/index.html create mode 100644 files/it/web/api/websocket/websocket/index.html create mode 100644 files/it/web/api/window/alert/index.html create mode 100644 files/it/web/api/window/back/index.html create mode 100644 files/it/web/api/window/blur/index.html create mode 100644 files/it/web/api/window/close/index.html create mode 100644 files/it/web/api/window/closed/index.html create mode 100644 files/it/web/api/window/confirm/index.html create mode 100644 files/it/web/api/window/crypto/index.html create mode 100644 files/it/web/api/window/defaultstatus/index.html create mode 100644 files/it/web/api/window/devicemotion_event/index.html create mode 100644 files/it/web/api/window/document/index.html create mode 100644 files/it/web/api/window/focus/index.html create mode 100644 files/it/web/api/window/forward/index.html create mode 100644 files/it/web/api/window/getselection/index.html create mode 100644 files/it/web/api/window/history/index.html create mode 100644 files/it/web/api/window/home/index.html create mode 100644 files/it/web/api/window/index.html create mode 100644 files/it/web/api/window/localstorage/index.html create mode 100644 files/it/web/api/window/locationbar/index.html create mode 100644 files/it/web/api/window/matchmedia/index.html create mode 100644 files/it/web/api/window/moveby/index.html create mode 100644 files/it/web/api/window/moveto/index.html create mode 100644 files/it/web/api/window/name/index.html create mode 100644 files/it/web/api/window/onuserproximity/index.html create mode 100644 files/it/web/api/window/opener/index.html create mode 100644 files/it/web/api/window/orientationchange_event/index.html create mode 100644 files/it/web/api/window/print/index.html create mode 100644 files/it/web/api/window/prompt/index.html create mode 100644 files/it/web/api/window/requestanimationframe/index.html create mode 100644 files/it/web/api/window/resizeby/index.html create mode 100644 files/it/web/api/window/resizeto/index.html create mode 100644 files/it/web/api/window/sessionstorage/index.html create mode 100644 files/it/web/api/window/sidebar/index.html create mode 100644 files/it/web/api/window/sizetocontent/index.html create mode 100644 files/it/web/api/window/status/index.html create mode 100644 files/it/web/api/window/statusbar/index.html create mode 100644 files/it/web/api/window/stop/index.html create mode 100644 files/it/web/api/window/top/index.html create mode 100644 files/it/web/api/windoworworkerglobalscope/fetch/index.html create mode 100644 files/it/web/api/windoworworkerglobalscope/index.html create mode 100644 files/it/web/api/windowtimers/clearinterval/index.html create mode 100644 files/it/web/api/windowtimers/index.html create mode 100644 files/it/web/api/worker/index.html create mode 100644 files/it/web/api/xmlhttprequest/index.html create mode 100644 files/it/web/api/xmlhttprequest/onreadystatechange/index.html create mode 100644 files/it/web/api/xmlhttprequest/open/index.html create mode 100644 files/it/web/api/xmlhttprequest/readystate/index.html create mode 100644 files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html create mode 100644 files/it/web/api/xmlhttprequest/xmlhttprequest/index.html create mode 100644 files/it/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/it/web/css/-moz-font-language-override/index.html create mode 100644 files/it/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/it/web/css/@document/index.html create mode 100644 files/it/web/css/_colon_-moz-first-node/index.html create mode 100644 files/it/web/css/_colon_-moz-last-node/index.html create mode 100644 files/it/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/it/web/css/_colon_active/index.html create mode 100644 files/it/web/css/_colon_focus/index.html create mode 100644 files/it/web/css/_colon_hover/index.html create mode 100644 files/it/web/css/_doublecolon_selection/index.html create mode 100644 files/it/web/css/attribute_selectors/index.html create mode 100644 files/it/web/css/background-attachment/index.html create mode 100644 files/it/web/css/background-color/index.html create mode 100644 files/it/web/css/background-image/index.html create mode 100644 files/it/web/css/background-position/index.html create mode 100644 files/it/web/css/background-repeat/index.html create mode 100644 files/it/web/css/background/index.html create mode 100644 files/it/web/css/border-bottom/index.html create mode 100644 files/it/web/css/border-style/index.html create mode 100644 files/it/web/css/border/index.html create mode 100644 files/it/web/css/cascade/index.html create mode 100644 files/it/web/css/color/index.html create mode 100644 files/it/web/css/css_box_model/index.html create mode 100644 files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/it/web/css/css_flexible_box_layout/index.html create mode 100644 files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/it/web/css/css_positioning/index.html create mode 100644 files/it/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/it/web/css/cursor/index.html create mode 100644 "files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" create mode 100644 files/it/web/css/flex-shrink/index.html create mode 100644 files/it/web/css/flex/index.html create mode 100644 files/it/web/css/font-size-adjust/index.html create mode 100644 files/it/web/css/guida_di_riferimento_ai_css/index.html create mode 100644 files/it/web/css/index.html create mode 100644 files/it/web/css/media_queries/index.html create mode 100644 files/it/web/css/min-width/index.html create mode 100644 files/it/web/css/mozilla_extensions/index.html create mode 100644 files/it/web/css/object-fit/index.html create mode 100644 files/it/web/css/pseudo-classes/index.html create mode 100644 files/it/web/css/ricette_layout/index.html create mode 100644 files/it/web/css/selettore_figli_diretti/index.html create mode 100644 files/it/web/css/text-align/index.html create mode 100644 files/it/web/css/text-shadow/index.html create mode 100644 files/it/web/css/transition-timing-function/index.html create mode 100644 files/it/web/css/type_selectors/index.html create mode 100644 files/it/web/css/universal_selectors/index.html create mode 100644 files/it/web/css/word-break/index.html create mode 100644 files/it/web/css/z-index/index.html create mode 100644 files/it/web/esempi_di_tecnologie_web_open/index.html create mode 100644 files/it/web/events/domcontentloaded/index.html create mode 100644 files/it/web/events/index.html create mode 100644 files/it/web/events/load/index.html create mode 100644 files/it/web/guide/ajax/index.html create mode 100644 files/it/web/guide/ajax/iniziare/index.html create mode 100644 files/it/web/guide/api/index.html create mode 100644 files/it/web/guide/css/index.html create mode 100644 files/it/web/guide/graphics/index.html create mode 100644 files/it/web/guide/html/categorie_di_contenuto/index.html create mode 100644 files/it/web/guide/html/editable_content/index.html create mode 100644 files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html create mode 100644 files/it/web/guide/index.html create mode 100644 files/it/web/guide/woff/index.html create mode 100644 files/it/web/html/attributi/index.html create mode 100644 files/it/web/html/canvas/drawing_graphics_with_canvas/index.html create mode 100644 files/it/web/html/canvas/index.html create mode 100644 files/it/web/html/element/a/index.html create mode 100644 files/it/web/html/element/abbr/index.html create mode 100644 files/it/web/html/element/acronym/index.html create mode 100644 files/it/web/html/element/address/index.html create mode 100644 files/it/web/html/element/applet/index.html create mode 100644 files/it/web/html/element/area/index.html create mode 100644 files/it/web/html/element/article/index.html create mode 100644 files/it/web/html/element/aside/index.html create mode 100644 files/it/web/html/element/audio/index.html create mode 100644 files/it/web/html/element/b/index.html create mode 100644 files/it/web/html/element/base/index.html create mode 100644 files/it/web/html/element/basefont/index.html create mode 100644 files/it/web/html/element/bdi/index.html create mode 100644 files/it/web/html/element/bdo/index.html create mode 100644 files/it/web/html/element/bgsound/index.html create mode 100644 files/it/web/html/element/big/index.html create mode 100644 files/it/web/html/element/blink/index.html create mode 100644 files/it/web/html/element/blockquote/index.html create mode 100644 files/it/web/html/element/body/index.html create mode 100644 files/it/web/html/element/br/index.html create mode 100644 files/it/web/html/element/canvas/index.html create mode 100644 files/it/web/html/element/caption/index.html create mode 100644 files/it/web/html/element/center/index.html create mode 100644 files/it/web/html/element/div/index.html create mode 100644 files/it/web/html/element/figura/index.html create mode 100644 files/it/web/html/element/footer/index.html create mode 100644 files/it/web/html/element/head/index.html create mode 100644 files/it/web/html/element/header/index.html create mode 100644 files/it/web/html/element/hgroup/index.html create mode 100644 files/it/web/html/element/html/index.html create mode 100644 files/it/web/html/element/i/index.html create mode 100644 files/it/web/html/element/iframe/index.html create mode 100644 files/it/web/html/element/img/index.html create mode 100644 files/it/web/html/element/index.html create mode 100644 files/it/web/html/element/input/file/index.html create mode 100644 files/it/web/html/element/input/index.html create mode 100644 files/it/web/html/element/kbd/index.html create mode 100644 files/it/web/html/element/main/index.html create mode 100644 files/it/web/html/element/nav/index.html create mode 100644 files/it/web/html/element/output/index.html create mode 100644 files/it/web/html/element/p/index.html create mode 100644 files/it/web/html/element/section/index.html create mode 100644 files/it/web/html/element/span/index.html create mode 100644 files/it/web/html/element/strike/index.html create mode 100644 files/it/web/html/element/table/index.html create mode 100644 files/it/web/html/element/time/index.html create mode 100644 files/it/web/html/element/title/index.html create mode 100644 files/it/web/html/forms_in_html/index.html create mode 100644 files/it/web/html/global_attributes/id/index.html create mode 100644 files/it/web/html/global_attributes/index.html create mode 100644 files/it/web/html/html5/index.html create mode 100644 files/it/web/html/html5/introduction_to_html5/index.html create mode 100644 files/it/web/html/index.html create mode 100644 files/it/web/html/riferimento/index.html create mode 100644 files/it/web/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/it/web/html/utilizzare_application_cache/index.html create mode 100644 files/it/web/http/authentication/index.html create mode 100644 files/it/web/http/basi_http/index.html create mode 100644 files/it/web/http/caching/index.html create mode 100644 files/it/web/http/compressione/index.html create mode 100644 files/it/web/http/conditional_requests/index.html create mode 100644 files/it/web/http/cookies/index.html create mode 100644 files/it/web/http/cors/errors/corsdidnotsucceed/index.html create mode 100644 files/it/web/http/cors/errors/corsmissingalloworigin/index.html create mode 100644 files/it/web/http/cors/errors/index.html create mode 100644 files/it/web/http/cors/index.html create mode 100644 files/it/web/http/feature_policy/index.html create mode 100644 files/it/web/http/headers/age/index.html create mode 100644 files/it/web/http/headers/authorization/index.html create mode 100644 files/it/web/http/headers/cookie/index.html create mode 100644 files/it/web/http/headers/host/index.html create mode 100644 files/it/web/http/headers/index.html create mode 100644 files/it/web/http/headers/server/index.html create mode 100644 files/it/web/http/headers/strict-transport-security/index.html create mode 100644 files/it/web/http/headers/x-content-type-options/index.html create mode 100644 files/it/web/http/headers/x-xss-protection/index.html create mode 100644 files/it/web/http/index.html create mode 100644 files/it/web/http/negoziazione-del-contenuto/index.html create mode 100644 files/it/web/http/panoramica/index.html create mode 100644 files/it/web/http/protocol_upgrade_mechanism/index.html create mode 100644 files/it/web/http/redirections/index.html create mode 100644 files/it/web/http/resources_and_specifications/index.html create mode 100644 files/it/web/http/richieste_range/index.html create mode 100644 files/it/web/http/sessione/index.html create mode 100644 files/it/web/http/status/100/index.html create mode 100644 files/it/web/http/status/101/index.html create mode 100644 files/it/web/http/status/200/index.html create mode 100644 files/it/web/http/status/302/index.html create mode 100644 files/it/web/http/status/404/index.html create mode 100644 files/it/web/http/status/500/index.html create mode 100644 files/it/web/http/status/index.html create mode 100644 files/it/web/index.html create mode 100644 files/it/web/javascript/chiusure/index.html create mode 100644 "files/it/web/javascript/cos\303\250_javascript/index.html" create mode 100644 files/it/web/javascript/data_structures/index.html create mode 100644 files/it/web/javascript/ecmascript_6_support_in_mozilla/index.html create mode 100644 files/it/web/javascript/eventloop/index.html create mode 100644 files/it/web/javascript/gestione_della_memoria/index.html create mode 100644 files/it/web/javascript/getting_started/index.html create mode 100644 files/it/web/javascript/guida/controllo_del_flusso_e_gestione_degli_errori/index.html create mode 100644 files/it/web/javascript/guida/dettagli_object_model/index.html create mode 100644 files/it/web/javascript/guida/espressioni_regolari/index.html create mode 100644 files/it/web/javascript/guida/functions/index.html create mode 100644 files/it/web/javascript/guida/grammar_and_types/index.html create mode 100644 files/it/web/javascript/guida/index.html create mode 100644 files/it/web/javascript/guida/introduzione/index.html create mode 100644 files/it/web/javascript/guida/iteratori_e_generatori/index.html create mode 100644 files/it/web/javascript/guida/loops_and_iteration/index.html create mode 100644 files/it/web/javascript/il_dom_e_javascript/index.html create mode 100644 files/it/web/javascript/index.html create mode 100644 files/it/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/it/web/javascript/introduzione_al_carattere_object-oriented_di_javascript/index.html create mode 100644 files/it/web/javascript/new_in_javascript/1.8.5/index.html create mode 100644 files/it/web/javascript/new_in_javascript/index.html create mode 100644 "files/it/web/javascript/new_in_javascript/novit\303\240_in_javascript_1.6/index.html" create mode 100644 "files/it/web/javascript/new_in_javascript/novit\303\240_in_javascript_1.7/index.html" create mode 100644 files/it/web/javascript/reference/classes/costruttore/index.html create mode 100644 files/it/web/javascript/reference/classes/extends/index.html create mode 100644 files/it/web/javascript/reference/classes/index.html create mode 100644 files/it/web/javascript/reference/classes/static/index.html create mode 100644 files/it/web/javascript/reference/errors/index.html create mode 100644 files/it/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/it/web/javascript/reference/errors/invalid_assignment_left-hand_side/index.html create mode 100644 files/it/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/it/web/javascript/reference/errors/too_much_recursion/index.html create mode 100644 files/it/web/javascript/reference/errors/unexpected_token/index.html create mode 100644 files/it/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/arguments/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/arrow_functions/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/get/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/index.html create mode 100644 files/it/web/javascript/reference/functions_and_function_scope/set/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/it/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/it/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/it/web/javascript/reference/global_objects/atomics/index.html create mode 100644 files/it/web/javascript/reference/global_objects/atomics/store/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/it/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/it/web/javascript/reference/global_objects/decodeuri/index.html create mode 100644 files/it/web/javascript/reference/global_objects/decodeuricomponent/index.html create mode 100644 files/it/web/javascript/reference/global_objects/encodeuri/index.html create mode 100644 files/it/web/javascript/reference/global_objects/encodeuricomponent/index.html create mode 100644 files/it/web/javascript/reference/global_objects/escape/index.html create mode 100644 files/it/web/javascript/reference/global_objects/eval/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/arity/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/index.html create mode 100644 files/it/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/it/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/it/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/it/web/javascript/reference/global_objects/index.html create mode 100644 files/it/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/it/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/it/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/it/web/javascript/reference/global_objects/json/index.html create mode 100644 files/it/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/it/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/it/web/javascript/reference/global_objects/map/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/it/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/it/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/it/web/javascript/reference/global_objects/null/index.html create mode 100644 files/it/web/javascript/reference/global_objects/number/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/defineproperties/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/issealed/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/observe/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/prototype/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/seal/index.html create mode 100644 files/it/web/javascript/reference/global_objects/object/tostring/index.html create mode 100644 files/it/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/it/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/it/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/it/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/handler/apply/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/handler/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/index.html create mode 100644 files/it/web/javascript/reference/global_objects/proxy/revocabile/index.html create mode 100644 files/it/web/javascript/reference/global_objects/set/entries/index.html create mode 100644 files/it/web/javascript/reference/global_objects/set/index.html create mode 100644 files/it/web/javascript/reference/global_objects/set/values/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/prototype/index.html create mode 100644 files/it/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/it/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/it/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/it/web/javascript/reference/global_objects/unescape/index.html create mode 100644 files/it/web/javascript/reference/global_objects/uneval/index.html create mode 100644 files/it/web/javascript/reference/index.html create mode 100644 files/it/web/javascript/reference/operators/destructuring_assignment/index.html create mode 100644 files/it/web/javascript/reference/operators/in/index.html create mode 100644 files/it/web/javascript/reference/operators/index.html create mode 100644 files/it/web/javascript/reference/operators/new/index.html create mode 100644 files/it/web/javascript/reference/operators/operator_condizionale/index.html create mode 100644 files/it/web/javascript/reference/operators/operatore_virgola/index.html create mode 100644 files/it/web/javascript/reference/operators/operatori_aritmetici/index.html create mode 100644 files/it/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/it/web/javascript/reference/operators/super/index.html create mode 100644 files/it/web/javascript/reference/operators/this/index.html create mode 100644 files/it/web/javascript/reference/operators/yield/index.html create mode 100644 files/it/web/javascript/reference/statements/break/index.html create mode 100644 files/it/web/javascript/reference/statements/empty/index.html create mode 100644 files/it/web/javascript/reference/statements/export/index.html create mode 100644 files/it/web/javascript/reference/statements/for...of/index.html create mode 100644 files/it/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/it/web/javascript/reference/statements/import/index.html create mode 100644 files/it/web/javascript/reference/statements/index.html create mode 100644 files/it/web/javascript/reference/statements/let/index.html create mode 100644 files/it/web/javascript/reference/statements/switch/index.html create mode 100644 files/it/web/javascript/reference/statements/throw/index.html create mode 100644 files/it/web/javascript/reference/statements/var/index.html create mode 100644 files/it/web/javascript/reference/template_strings/index.html create mode 100644 files/it/web/javascript/una_reintroduzione_al_javascript/index.html create mode 100644 files/it/web/performance/index.html create mode 100644 files/it/web/performance/percorso_critico_di_rendering/index.html create mode 100644 files/it/web/reference/api/index.html create mode 100644 files/it/web/reference/index.html create mode 100644 files/it/web/security/index.html create mode 100644 files/it/web/security/password_insicure/index.html create mode 100644 files/it/web/svg/element/animate/index.html create mode 100644 files/it/web/svg/element/index.html create mode 100644 files/it/web/tutorials/index.html create mode 100644 files/it/web/web_components/index.html create mode 100644 files/it/web/web_components/usare_custom_elements/index.html create mode 100644 files/it/web/xslt/index.html (limited to 'files/it/web') diff --git a/files/it/web/accessibility/index.html b/files/it/web/accessibility/index.html new file mode 100644 index 0000000000..2e786c4fb1 --- /dev/null +++ b/files/it/web/accessibility/index.html @@ -0,0 +1,56 @@ +--- +title: Accessibilità +slug: Web/Accessibility +tags: + - Accessibilità +translation_of: Web/Accessibility +--- +

L'accessibilità nello sviluppo web indica il fatto di permettere a quante più persone possibile l'utilizzo dei siti web, anche se le capacità di quelle persone sono in qualche modo limitate. In questo articolo vengono riportate alcune informazioni sullo sviluppo di contenuti accessibili.

+ +

"Il termine 'accessibile' è più spesso utilizzato per descrivere strutture o servizi per l'assistenza delle persone disabili, ad esempio una struttura 'accessibile alle sedie a rotelle'. Tuttavia questa definizione può essere estesa alla scrittura Braille, ai segnali audio sugli attraversamenti pedonali, alle rampe per sedie a rotelle, al design dei siti web, ecc." Articolo di Wikipedia sull'accessibilità

+ +

"Fondamentalmente, il Web è progettato per funzionare per tutti, indipendentemente dall'hardware o dal software utilizzati, dalla lingua, dalla cultura, dalla posizione geografica o dalle capacità fisiche e mentali. Quando il Web raggiunge questo scopo, è accessibile alle persone con diverse capacità di udito, movimento, vista e abilità cognitive." W3C - Accessibility

+ +
+
+

Documentazione

+ +

L'Area di Apprendimento dell'Accessibilità di Mozilla Developer Network contiene guide aggiornate che spiegano gli elementi essenziali dell'accessibilità:

+ +
+
Cos'è l'accessibilità?
+
Questo articolo inaugura il modulo con una visione generale di cosa è realmente l'accessibilità. Sono inclusi argomenti come: quali gruppi di persone dobbiamo tenere in considerazione e perché, quali strumenti di supporto le persone usano per interagire con la rete, e come possiamo rendere l'accessibilità parte integrante del nostro processo di sviluppo web
+
HTML: una buona base per l'accessibilità
+
Buona parte del contenuto di un sito può essere reso accessibile semplicemente facendo attenzione ad usare sempre nella maniera corretta gli elementi HTML più opportuni per le funzionalità che si vogliono implementare. Questo articolo analizza in dettaglio come il linguaggio HTML può essere usato al meglio per garantire la massima accessibilità.
+
Linee guida di accessibiltà per CSS e JavaScript
+
CSS e JavaScript, quando utilizzati propriamente, possono contribuire ad offrire una esperienza accessibile della rete. Se invece vengono utilizzati in maniera incorretta possono causare una drastica riduzione dell'accessibilità. Questo articolo riporta alcune linee guida per l'utilizzo di CSS e JavaScript che devono essere tenute in considerazione per permettere a contenuti anche molto complessi di avere il più alto grado di accessibilità possibile.
+
Basi della tecnologia WAI-ARIA
+
Proseguendo i temi trattati nell'articolo precedente, può risultare complicato creare elementi di interfaccia utente accessibili quando gli stessi si basano su HTML non semantico e presentano contenuto aggiornato dinamicamente tramite JavaScript. La tecnologia WAI-ARIA può essere d'aiuto aggiungendo valore semantico addizionale, che i browser e le tecnologie assistive possono riconoscere e utilizzare per permettere agli utenti di decifrare più chiaramente il contesto e ciò che sta accadendo durante la navigazione del sito. In questo articolo vedremo come usare questa tecnologia a un livello basico per migliorare l'accessibilità.
+
Accessibilità multimediale
+
+

Un'altra categoria di contenuti che possono dare problemi di accessibilità sono gli elementi multimediali: audio, video e immagini devono sempre essere associati ad adeguate alternative testuali, di modo che possano essere interpretati correttamente dalle tecnologie assistive e dagli utenti che ne fanno uso. Questo articolo spiega come gestire l'accessibilità di questo tipo di contenuti.

+
+
Accessibilità per dispositivi mobili
+
L'uso di internet su dispositivi mobili è sempre più diffuso, e le principali piattaforme come iOS e Android sono dotate di numerosi strumenti per garantire l'accessibilità. È dunque importante prendere in considerazione l'accessibilità del tuo contenuto web su tali piattaforme. Questo articolo propone considerazioni sull'accessibilità specificamente pensate per dispositivi mobili
+
+ +

Vedi tutti gli articoli sull'Accessibilità...

+
+ +
+

Strumenti per gli sviluppatori Web

+ + + +

Vedi tutti...

+ +

Altri siti utili

+ + +
+
diff --git a/files/it/web/accessibility/sviluppo_web/index.html b/files/it/web/accessibility/sviluppo_web/index.html new file mode 100644 index 0000000000..6388da389a --- /dev/null +++ b/files/it/web/accessibility/sviluppo_web/index.html @@ -0,0 +1,66 @@ +--- +title: Sviluppo Web +slug: Web/Accessibility/Sviluppo_Web +translation_of: Web/Accessibility +--- +

 

+ + + + + + + +
+

Accessibilità Web

+
+
+ ARIA per sviluppatori
+
+
+
+ ARIA rende possibile la creazione di contenuto HTML dinamico accessibile. Ad esempio, regioni di contenuto attivo e widget JavaScript.
+
+
+
+ Widget JavaScript navigabili da tastiera
+
+ Fino ad ora, gli sviluppatori che volevano rendere i propri widget basati su <div> e <span> accessibili tramite tastiera mancavano della tecnica adatta. L'usabilità da tastiera è parte dei requisiti minimi di accessibilità di cui ogni sviluppatore dovrebbe essere a conoscenza.
+
+

Accessibilità di XUL

+
+
+  
+
+ Sviluppare componenti personalizzati accessibili con XUL
+
+ Come usare tecniche di accessibilità in DHTML per rendere accessibili i propri componenti XUL personalizzati.
+
+
+
+ Linee guida alla creazione di XUL accessibile
+
+ Quando viene utilizzato secondo queste linee guida, XUL è in grado di generare interfacce utente accessibili. Sviluppatori, revisori, designer e ingegneri del controllo qualità devono avere familiarità con queste linee guida.
+
+
+
+
+
+ 		+

Risorse esterne

+
+
+ Dive into Accessibility
+
+
+
+ Questo libro risponde a due domande. La prima è "Perché dovrei rendere il mio sito web più accessibile?" La seconda è "Come posso rendere il mio sito più accessibile?"
+
+
+
+ Accessible Web Page Authoring
+
+ Una pratica lista di controllo sull'accessibilità Web, da IBM.
+
+
+

 

diff --git a/files/it/web/api/canvasrenderingcontext2d/canvas/index.html b/files/it/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..bb453e4419 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,101 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +
{{APIRef}}
+ +

La proprietà CanvasRenderingContext2D.canvas è un riferimento di sola lettura verso il canvas {{domxref("HTMLCanvasElement")}} che contiene il context corrente. Può essere {{jsxref("null")}} se non vi è un elemento {{HTMLElement("canvas")}} associato.

+ +

Sintassi

+ +
ctx.canvas;
+ +

Esempi

+ +

Dato il seguente elmento  {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas"></canvas>
+
+ +

È possibile ottenere un riferimento all'elemento canvas da cui è ottenuto questo CanvasRenderingContext2D utilizzando la property canvas:

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.canvas // HTMLCanvasElement
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html new file mode 100644 index 0000000000..2f905a5241 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -0,0 +1,209 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +tags: + - API + - CamvasRenderingContext2D + - Canvas + - Proprietà + - Riferimento +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +
{{APIRef}}
+ +

La proprietà CanvasRenderingContext2D.fillStyle delle Canvas 2D API specifica il colore o lo stile da usare all'interno delle forme. Il colore preimpostato è #000 (nero).

+ +

Vedi anche i capitoli Applicare stili e colori nel Canvas Tutorial.

+ +

Sintassi

+ +
ctx.fillStyle = color;
+ctx.fillStyle = gradient;
+ctx.fillStyle = pattern;
+
+ +

Opzioni

+ +
+
color
+
Una {{domxref("DOMString")}} letta come valore CSS {{cssxref("<color>")}}.
+
gradient
+
Un oggetto {{domxref("CanvasGradient")}} (gradiente lineare o radiale).
+
pattern
+
Un oggetto {{domxref("CanvasPattern")}} (immagine ripetuta).
+
+ +

Esempi

+ +

Usare la proprietà fillStyle per impostare un colore diverso

+ +

In questa semplice porzione di codice viene usata la proprietù fillStyle per impostare un colore diverso.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "blue";
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Modifica il codice qui sotto e vedi i cambiamenti in tempo reale nel canvas:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Un esempio di fillStyle con i cicli for

+ +

In questo esempio, useremo due cicli for per disegnare una griglia di rettangoli, ognuno di un colore differente. Il risultato finale dovrebbe assomigliare allo screenshot. Niente di particolarmente spettacolare. Usiamo due variabili i e j per generare un colore RGB unico per ogni quadrato, questo modificando soltanto i valori del rosso e del verde. Il canale del blu ha un valore fisso. Modificando i canali, puoi generare ogni tipo di palette. Aumentando le ripetizioni del ciclo, puoi ottenere qualcosa di assomigliante alle palette usate da Photoshop.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+for (var i=0;i<6;i++){
+  for (var j=0;j<6;j++){
+    ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
+                     Math.floor(255-42.5*j) + ',0)';
+    ctx.fillRect(j*25,i*25,25,25);
+  }
+}
+
+ +

Il risultato assomiglia a questo:

+ +

{{EmbedLiveSample("Un_esempio_di_fillStyle_con_i_cicli_for", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ + + + + +

Vedi anche

+ + diff --git a/files/it/web/api/canvasrenderingcontext2d/index.html b/files/it/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..e6b2eb7167 --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,448 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Games + - Graphics + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CanvasRenderingContext2D +--- +
{{APIRef}}
+ +The CanvasRenderingContext2D interface provides the 2D rendering context for the drawing surface of a {{ HTMLElement("canvas") }} element. + +

To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <canvas>, supplying "2d" as the argument:

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

Once you have the 2D rendering context for a canvas, you can draw within it. For example:

+ +
ctx.fillStyle = "rgb(200,0,0)";
+ctx.fillRect(10, 10, 55, 50);
+
+ +

See the properties and methods in the sidebar and below. The canvas tutorial has more information, examples, and resources as well.

+ +

Drawing rectangles

+ +

There are three methods that immediately draw rectangles to the bitmap.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Draws a filled rectangle at (x, y) position whose size is determined by width and height.
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.
+
+ +

Drawing text

+ +

The following methods are provided for drawing text. See also the {{domxref("TextMetrics")}} object for text properties.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Draws (fills) a given text at the given (x,y) position.
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Draws (strokes) a given text at the given (x, y) position.
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Returns a {{domxref("TextMetrics")}} object.
+
+ +

Line styles

+ +

The following methods and properties control how lines are drawn.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Width of lines. Default 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Type of endings on the end of lines. Possible values: butt (default), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Miter limit ratio. Default 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Returns the current line dash pattern array containing an even number of non-negative numbers.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Sets the current line dash pattern.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Specifies where to start a dash array on a line.
+
+ +

Text styles

+ +

The following properties control how text is laid out.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Font setting. Default value 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Text alignment setting. Possible values: start (default), end, left, right or center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic (default), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Directionality. Possible values: ltr, rtl, inherit (default).
+
+ +

Fill and stroke styles

+ +

Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Color or style to use inside shapes. Default #000 (black).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Color or style to use for the lines around shapes. Default #000 (black).
+
+ +

Gradients and patterns

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Creates a linear gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Creates a radial gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.
+
+ +

Shadows

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Specifies the blurring effect. Default 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Color of the shadow. Default fully-transparent black.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Horizontal distance the shadow will be offset. Default 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Vertical distance the shadow will be offset. Default 0.
+
+ +

Paths

+ +

The following methods can be used to manipulate paths of objects.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Moves the starting point of a new sub-path to the (x, y) coordinates.
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Connects the last point in the subpath to the x, y coordinates with a straight line.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the Bézier curve.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Adds a quadratic Bézier curve to the current path.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
+
+ +

Drawing paths

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Fills the subpaths with the current fill style.
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Strokes the subpaths with the current stroke style.
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
If a given element is focused, this method draws a focus ring around the current path.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Scrolls the current path or a given path into the view.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Reports whether or not the specified point is contained in the current path.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Reports whether or not the specified point is inside the area contained by the stroking of a path.
+
+ +

Transformations

+ +

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}}
+
Current transformation matrix ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Multiplies the current transformation matrix with the matrix described by its arguments.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Resets the current transform by the identity matrix.
+
+ +

Compositing

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.
+
+ +

Drawing images

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
+
+ +

Pixel manipulation

+ +

See also the {{domxref("ImageData")}} object.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
+
+ +

Image smoothing

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Image smoothing mode; if disabled, images will not be smoothed if scaled.
+
+ +

The canvas state

+ +

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Restores the drawing style state to the last element on the 'state stack' saved by save().
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+ +

Hit regions

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Adds a hit region to the canvas.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Removes the hit region with the specified id from the canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Removes all hit regions from the canvas.
+
+ +

Non-standard APIs

+ + + +

Most of these APIs are deprecated and will be removed in the future.

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
+
Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
This is redundant with an equivalent overload of drawImage.
+
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
+
Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
+
Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
+
Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
+
Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
+
Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
+
Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
+
Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.getContextAttributes()
+
Inspired by the same WebGLRenderingContext method it returns an Canvas2DContextAttributes object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (true by default) to indicate that transparency is used in the canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
+
+ +

WebKit only

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
The backing store size in relation to the canvas element. See High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
+ +
+
+ +

Gecko only

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDash
+
An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDashOffset
+
Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}
+
Renders a region of a XUL element into the canvas.
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1")}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatOpera("9")}}{{CompatSafari("2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Compatibility notes

+ + + +

See also

+ + diff --git a/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html b/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html new file mode 100644 index 0000000000..bcb314845c --- /dev/null +++ b/files/it/web/api/canvasrenderingcontext2d/ispointinpath/index.html @@ -0,0 +1,208 @@ +--- +title: CanvasRenderingContext2D.isPointInPath() +slug: Web/API/CanvasRenderingContext2D/isPointInPath +translation_of: Web/API/CanvasRenderingContext2D/isPointInPath +--- +
{{APIRef}}
+ +

Il metodo CanvasRenderingContext2D.isPointInPath() delle API Canvas 2D controlla se un punto specificato cade all'interno del path corrente.

+ +

Sintassi

+ +
boolean ctx.isPointInPath(x, y);
+boolean ctx.isPointInPath(x, y, algorithmo);
+
+boolean ctx.isPointInPath(path, x, y);
+boolean ctx.isPointInPath(path, x, y, algoritmo);
+
+ +

Parametri

+ +
+
x
+
La coordinata X del punto da controllare
+
y
+
La coordinata Y del punto da controllare
+
Algoritmo
+
La'lgoritmo con cui viene verificato se il punto cade all'interno del path.
+ Valori possibili: +
    +
  • "nonzero": La regola non-zero ,  valore predefinito.
    • +
  • "evenodd": La regola even-odd .
    • +
+
+
path
+
Il {{domxref("Path2D")}} path da usare come path corrente.
+
+ +

Restituisce

+ +
+
{{jsxref("Boolean")}}
+
+

Un Boolean, che sarà true (vero) se il punto cade all'interno della forma, altrimenti restitiusce false (falso).

+
+
+ +

Esempi

+ +

Uso del metodo isPointInPath

+ +

Questa è una semplice snippet che usa il metodo isPointInPath per controllare se un punto cade o no sulla forma corrente.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true
+
+ +

Modifica il codice qui sotto, e guarda live come cambia il canvas: per guardare i log apri la tua console

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.rect(10, 10, 100, 100);
+ctx.stroke();
+console.log(ctx.isPointInPath(10, 10)); // true</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ispointinpath", "CanvasRenderingContext2D.isPointInPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Parametro path{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(31) }}{{ CompatNo }}{{ CompatVersionUnknown() }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Parametro path{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile(31) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Note di compatibilità

+ + + +

Vedi anche

+ + diff --git a/files/it/web/api/closeevent/index.html b/files/it/web/api/closeevent/index.html new file mode 100644 index 0000000000..4d534f6858 --- /dev/null +++ b/files/it/web/api/closeevent/index.html @@ -0,0 +1,197 @@ +--- +title: CloseEvent +slug: Web/API/CloseEvent +translation_of: Web/API/CloseEvent +--- +

{{APIRef("Websockets API")}}

+ +

Un evento di tipo CloseEvent viene inviato al client tramite WebSockets in fase di chiusura della connessione. Questo viene ricevuto dal listener registrato sull'attributo onclose dell'oggetto di tipo WebSocket.

+ +

Costruttore

+ +
+
{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
+
Crea un nuovo CloseEvent.
+
+ +

Proprietà

+ +
+
{{domxref("CloseEvent.code")}} {{readOnlyInline}}
+
Restituisce un unsigned short che contiene il codice di chiusura inviato dal server. Questi sono i valori ammessi. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Status codeNameDescription
0–999 Riservati e non usati.
1000CLOSE_NORMALChiusura normale; la connessione si è conclusa normalmente, qualsiasi fosse il suo scopo.
1001CLOSE_GOING_AWAYL'endpoint se ne è andato, o per un errore del server oppure perché la pagina che ha aperto la connessione non è più attiva.
1002CLOSE_PROTOCOL_ERRORL'endpoint ha terminato la connessione per un errore di protocollo.
1003CLOSE_UNSUPPORTEDLa connessione è stata terminata perché l'endpoint ha ricevuto dei dati che non può accettare (per esempio, dati binari a fronte di un endpoint che consuma solo testo).
1004 Riservato. In futuro potrebbe esserne rivelato l'uso.
1005CLOSE_NO_STATUSRiservato. Indica che non è stato ricevuto nessuno stato di chiusura sebbene fosse atteso.
1006CLOSE_ABNORMALRiservato. Usato per indicare che la connessione è stata chiusa in modo anomalo (cioè, cioè senza l'invio del frame di chiusura) dove invece era atteso un codice di chiusura.
1007 L'endpoint ha terminato la connessione perché ha ricevuto un messaggio con dati inconsistenti (per esempio, dati non-UTF-8 all'interno di un messaggio testuale).
1008 L'endpoint ha terminato la connessione perché ha ricevuto un messaggio che viola la sua politica. E' un codice generico, quando 1003 e 1009 non sono adatti.
1009CLOSE_TOO_LARGEL'endpoint ha terminato la connessione perché ha ricevuto un frame di dati troppo grande.
1010 Il client ha terminato la connessione perché era attesa una negoziazione di una o più "estensioni" del protocollo che però non è avvenuta.
1011 Il server ha terminato la connessione perché ha incontrato una condizione inattesa che gli ha impedito di completare la richiesta.
1012–1014 Riservati per usi futuri dallo standard WebSocket.
1015 Riservato. Indica che la connessione è stata chiusa a causa di un fallimento dell'handshake TLS (per esempio, il certificato del server non può essere verificato).
1016–1999 Riservati per usi futuri dallo standard WebSocket.
2000–2999 Riservati per estensioni WebSocket.
3000–3999 Disponibili per librerie e framework. Meglio non usarli nelle applicazioni.
4000–4999 Disponibili per essere utilizzati dalle applicazioni.
+
+
{{domxref("CloseEvent.reason")}} {{readOnlyInline}}
+
Restituisce un {{ domxref("DOMString") }} che indica la ragione per cui il server ha chiuso la connessione. Questo dipende dal particolare server e sotto-protocollo.
+
{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Boolean")}} che indica se la connessione è stata chiusa senza problemi o meno.
+
+ +

 

+ +

Compatibilità con i browser

+ +

 

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatUnknown() }}{{ CompatGeckoDesktop("8.0") }} [1][2]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Prima di Gecko 8.0 {{ geckoRelease("8.0") }}, Gecko inviava l'evento WebSocket {{event("close")}} come semplice evento. Il supporto al CloseEvent è stato implementato in Gecko 8.0.

+ +

[2] Prima di Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko restituiva il codice di chiusura CLOSE_NORMAL anche quando il canale veniva chiuso a causa di un errore inatteso, o anche a causa di un errore non coperto dalla specifica. Adesso viene restituito CLOSE_GOING_AWAY.

+ +

Vedi anche

+ + + +

 

diff --git a/files/it/web/api/console/index.html b/files/it/web/api/console/index.html new file mode 100644 index 0000000000..61521af0f3 --- /dev/null +++ b/files/it/web/api/console/index.html @@ -0,0 +1,294 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - Debugging + - Interface + - NeedsTranslation + - Reference + - TopicStub + - console + - web console +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}
+ +

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

+ +

The Console object can be accessed from any global object. {{domxref("Window")}} on browsing scopes and {{domxref("WorkerGlobalScope")}} as specific variants in workers via the property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply console. For example:

+ +
console.log("Failed to open the specified link")
+ +

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

+ +

{{AvailableInWorkers}}

+ +

Methods

+ +
+
{{domxref("Console.assert()")}}
+
Log a message and stack trace to console if the first argument is false.
+
{{domxref("Console.clear()")}}
+
Clear the console.
+
{{domxref("Console.count()")}}
+
Log the number of times this line has been called with the given label.
+
{{domxref("Console.countReset()")}}
+
Resets the value of the counter with the given label.
+
{{domxref("Console.debug()")}}
+
Outputs a message to the console with the log level "debug". +
Note: Starting with Chromium 58 this method only appears in Chromium browser consoles when level "Verbose" is selected.
+
+
{{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.dirxml()")}}
+
+

Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible.

+
+
{{domxref("Console.error()")}}
+
Outputs an error message. You may use string substitution and additional arguments with this method.
+
{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+
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. However, 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 of 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()")}} {{Non-standard_inline}}
+
Starts the browser's built-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile.
+
{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
+
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool).
+
{{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 it started.
+
{{domxref("Console.timeLog()")}}
+
Logs the value of the specified timer to the console.
+
{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
+
Adds a marker to the browser's Timeline or Waterfall tool.
+
{{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 respectively. Each of these results in output 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 objects 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
%o or %OOutputs a JavaScript object. Clicking the object name opens more information about it in the inspector.
%d or %iOutputs an integer. Number formatting is supported, for example  console.log("Foo %.2d", 1.1) will output the number as two significant figures with a leading 0: Foo 01
%sOutputs a string.
%fOutputs a floating-point value. Formatting is supported, for example  console.log("Foo %.2f", 1.1) will output the number to 2 decimal places: Foo 1.10
+ +
+

Note: Precision formatting doesn't work in Chrome

+
+ +

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("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+ +
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.
+ +
 
+ +
+ +
 
+ +
+

Note: Quite a few CSS properties are supported by this styling; you should experiment and see which ones prove useful.

+
+ +
 
+ +
{{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 the only parameter. To stop the timer, and to get the elapsed time in milliseconds, 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.timeLog("answer time");
+alert("Do a bunch of other stuff...");
+console.timeEnd("answer time");
+
+ +

Will log the time needed by the user to dismiss the alert box, log the time to the console, wait for the user to dismiss the second alert, and then log the ending time to the console:

+ +

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:

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

The output in the console looks something like this:

+ +

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Console API')}}{{Spec2('Console API')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

Notes

+ + + +

See also

+ + + +

Other implementations

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

Il metodo  log() di {{domxref("Console")}} stampa un messaggio sulla web console. Il messaggio può essere una semplice stringa (opzionalmente, anche con valori sostituibili), o può essere uno qualsiasi o più oggetti JavaScript.

+ +

{{AvailableInWorkers}}

+ +

Sintassi

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

Parametri

+ +
+
obj1 ... objN
+
Una lista di oggetti JavaScript da stampare. La rappresentazione sotto forma di stringa di ciascuno di questi oggetti sarà messa in coda nell'ordine presentato e stampata. Perfavore fai attenzione che se tu stampi degli oggetti nelle ultime versioni si Chrome e Firefox quello che otterrai sarà un riferimento all'oggetto, che non necessariamente è il 'valore' dell'oggetto nel momento della chiamata di console.log(), ma è il valore dell'oggetto al momento in cui tu apri la console.
+
msg
+
Una stringa JavaScript contenente zero o più stringhe da sostituire.
+
subst1 ... substN
+
Oggetti JavaScript con i quali verranno sostituite le stringhe da sostituire in msg. Questo ti offre controlli aggiuntivi sul formato dell'output
+
+ +

Vedi Stampare del testo sulla Console nella documentazione di {{domxref("console")}} per maggiori dettagli.

+ +

Differenza tra log() e dir()

+ +

Ti potresti esser chiesto qual è la differenza tra {{domxref("console.dir()")}} e console.log().

+ +

Un'altra utile differenza esiste in Chrome quando invii elementi DOM alla console.

+ +

+ +

Nota bene:

+ + + +

Specificamente, console.log offre un trattamento speciale agli elementi del DOM, mentre console.dir non lo fa. Ė spesso utile quando si prova a vedere la rappresentazione completa degli oggetti JS del DOM.

+ +

Ulteriori informazioni si possono trovare sulle Chrome Console API reference su questa e altre funzioni.

+ +

Registrare (loggare) gli oggetti

+ +

Non usare console.log(obj), usa console.log(JSON.parse(JSON.stringify(obj))).

+ +

In questo modo sarai sicuro di visulizzare il valore di obj al momento in cui lo stai registrando (loggando). Altrimenti, svariati browser offrono una vista live che aggiorna costantemente i valori non appena cambiano. Potrebbe non essere quel che cerchi.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName("Console API", "#log", "console.log()")}}{{Spec2("Console API")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

+ + diff --git a/files/it/web/api/console/table/index.html b/files/it/web/api/console/table/index.html new file mode 100644 index 0000000000..d2ae5bbce2 --- /dev/null +++ b/files/it/web/api/console/table/index.html @@ -0,0 +1,143 @@ +--- +title: Console.table() +slug: Web/API/Console/table +translation_of: Web/API/Console/table +--- +
 {{APIRef("Console API")}}
+ +

Visualizza dati tabulari come una tabella.

+ +

Questa funzione richiede un argomento obbligatorio data, che deve essere un array di oggetti, ed un parametro opzionale columns.

+ +

La funzione visualizza data come una tabella ed ogni elemento dell'array (o ogni sua proprietà numerabile se data è un oggetto) sarà una riga della tabella.

+ +

La prima colonna della tabella rappresenta l'etichetta (index). Se data è un array allora il valore sarà il suo indice nell'array. Se, invece, data è un oggetto, il suo valore sarà il nome della proprietà. Nota che (in Firefox) console.table limita a 1000 la visualizzazione delle righe (la prima riga contiene i nomi delle etichette).

+ +

{{AvailableInWorkers}}

+ +

Collezioni di tipi di primitive

+ +

L'argomento data può essere un array o un oggetto.

+ +
// array di stringhe
+
+console.table(["apples", "oranges", "bananas"]);
+ +

+ +
// un oggetto le cui proprietà sono stringhe
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);
+ +

+ +

Collezioni di tipi composti

+ +

Se l'elemento nell'array o le proprietà nell'oggetto sono a loro volta array o oggetti, allora i loro elementi o proprietà sono enumerati nella riga, uno per colonna:

+ +
// un array di arrays
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);
+ +

Table displaying array of arrays

+ +
// un array di oggetti
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);
+ +

Nota che se l'array contiene oggetti, allora le colonne sono etichettate con il nome della proprietà.

+ +

Table displaying array of objects

+ +
// un oggetto le cui proprietà sono oggetti
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);
+ +

Table displaying object of objects

+ +

Restringimento delle colonne visualizzate

+ +

Di default, console.table() visualizza la lista di elementi in ogni riga. Puoi usare il parametro opzionale columns per selezionare un sottoinsieme delle colonne da visualizzare:

+ +
// un array di oggetti, visualizzando solo firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);
+ +

Table displaying array of objects with filtered output

+ +

Ordinamento delle colonne

+ +

Puoi ordinare la tabella in base ad una particolare colonna cliccando sulla sua etichetta.

+ +

Sintassi

+ +
console.table(data [, columns]);
+
+ +

Parametri

+ +
+
data
+
Il dato da visualizzare. Deve essere un oggetto o un array.
+
columns
+
Un array contenente i nomi delle colonne da includere nell'output.
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Initial definition
+ +

Compatibilità dei browser

+ +
+ + +

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

+
diff --git a/files/it/web/api/crypto/index.html b/files/it/web/api/crypto/index.html new file mode 100644 index 0000000000..0add9721d2 --- /dev/null +++ b/files/it/web/api/crypto/index.html @@ -0,0 +1,68 @@ +--- +title: Crypto +slug: Web/API/Crypto +tags: + - API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/Crypto +--- +

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

+ +

The Crypto interface represents basic cryptography features available in the current context. It allows access to a cryptographically strong random number generator and to cryptographic primitives.

+ +

An object with this interface is available on Web context via the {{domxref("Window.crypto")}} property.

+ +

Properties

+ +

This interface implements properties defined on {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}
+
Returns a {{domxref("SubtleCrypto")}} object providing access to common cryptographic primitives, like hashing, signing, encryption or decryption.
+
+ +

Methods

+ +

This interface implements methods defined on {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.getRandomValues()")}}
+
Fills the passed {{ jsxref("TypedArray") }} with cryptographically sound random values.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}Initial definition
+ +

Browser Compatibility

+ +
+ + +

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

+
+ +

See Also

+ + diff --git a/files/it/web/api/crypto/subtle/index.html b/files/it/web/api/crypto/subtle/index.html new file mode 100644 index 0000000000..ae850ea329 --- /dev/null +++ b/files/it/web/api/crypto/subtle/index.html @@ -0,0 +1,52 @@ +--- +title: Crypto.subtle +slug: Web/API/Crypto/subtle +tags: + - API + - Crittografia + - D + - Proprietà + - Riferimenti + - Sola lettura + - Web Crypto API +translation_of: Web/API/Crypto/subtle +--- +

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

+ +

La proprietà in sola lettura Crypto.subtle restituisce un oggetto {{domxref("SubtleCrypto")}}, rendendo disponibili le funzioni crittografiche.

+ +

Syntax

+ +
var crypto = crypto.subtle;
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}{{ Spec2('Web Crypto API') }}Definizione iniziale.
+ +

Browser compatibility

+ + + +

{{Compat("api.Crypto.subtle")}}

+ +

See also

+ + diff --git a/files/it/web/api/datatransfer/getdata/index.html b/files/it/web/api/datatransfer/getdata/index.html new file mode 100644 index 0000000000..635da432ed --- /dev/null +++ b/files/it/web/api/datatransfer/getdata/index.html @@ -0,0 +1,161 @@ +--- +title: DataTransfer.getData() +slug: Web/API/DataTransfer/getData +translation_of: Web/API/DataTransfer/getData +--- +
+

 

+{{APIRef("HTML DOM")}}
+ +

Il metodo DataTransfer.getData() recupera i dati del trascinamento  (come {{domxref("DOMString")}}) per il data type specificato. Se l'operazione di trascinamento non include dati, questo metodo restituisce una stringa vuota.

+ +

Esempi di tipi di data types sono text/plain e text/uri-list.

+ +

Sintassi

+ +
DOMString dataTransfer.getData(format);
+
+ +

Argomenti

+ +
+
formato
+
Una {{domxref("DOMString")}} rappresentante il  tipo di dato da recuperare.
+
+ +

Valore restituito

+ +
+
{{domxref("DOMString")}}
+
Una {{domxref("DOMString")}} rappresentante i dati trascinati per il formato specificato. Se l'operazione di trascinamento non ha dati o l'operazione non ha dati per il formato specificato, questo metodo restituisce una stringa vuota.
+
+ +

Esempio

+ +

Questo esempio mostra l'uso dell'oggetto {{domxref("DataTransfer")}} e dei metodi {{domxref("DataTransfer.getData()","getData()")}} e {{domxref("DataTransfer.setData()","setData()")}} .

+ +

HTML

+ +
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
+    <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
+</div>
+<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
+
+ +

CSS

+ +
#div1, #div2 {
+    width:100px;
+    height:50px;
+    padding:10px;
+    border:1px solid #aaaaaa;
+}
+
+ +

JavaScript

+ +
function allowDrop(allowdropevent) {
+    allowdropevent.target.style.color = 'blue';
+    allowdropevent.preventDefault();
+}
+
+function drag(dragevent) {
+    dragevent.dataTransfer.setData("text", dragevent.target.id);
+    dragevent.target.style.color = 'green';
+}
+
+function drop(dropevent) {
+    dropevent.preventDefault();
+    var data = dropevent.dataTransfer.getData("text");
+    dropevent.target.appendChild(document.getElementById(data));
+    document.getElementById("drag").style.color = 'black';
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Esempio', 600, '', '', 'Web/API/DataTransfer/getData') }}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-getdata", "getData()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-getdata", "getData()")}}{{Spec2("HTML5.1")}}definizione iniziale
+ +

Compatibilità dei browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support43.5{{CompatGeckoDesktop(10)}} [1]123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(10)}}[1]{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] in versioni di Firefox precedenti alla 49, questo metodo restituisce sempre una lista vuota se il tipo mime non è in una white list.

+ +

Vedere anche

+ +

{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}

diff --git a/files/it/web/api/datatransfer/index.html b/files/it/web/api/datatransfer/index.html new file mode 100644 index 0000000000..a821dabb6a --- /dev/null +++ b/files/it/web/api/datatransfer/index.html @@ -0,0 +1,183 @@ +--- +title: DataTransfer +slug: Web/API/DataTransfer +tags: + - API + - NeedsMarkupWork + - NeedsTranslation + - Reference + - TopicStub + - Web Development + - drag and drop +translation_of: Web/API/DataTransfer +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see HTML Drag and Drop API.

+ +

This object is available from the {{domxref("DragEvent.dataTransfer","dataTransfer")}} property of all {{domxref("DragEvent","drag events")}}. It cannot be created separately (i.e. there is no constructor for this object).

+ +

Properties

+ +

Standard properties

+ +
+
{{domxref("DataTransfer.dropEffect")}}
+
Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be none copy link or move.
+
{{domxref("DataTransfer.effectAllowed")}}
+
Provides all of the types of operations that are possible. Must be one of none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized.
+
{{domxref("DataTransfer.files")}}
+
Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.
+
{{domxref("DataTransfer.items")}} {{readonlyInline}}
+
Gives a {{domxref("DataTransferItemList")}} object which is a list of all of the drag data.
+
{{domxref("DataTransfer.types")}} {{readonlyInline}}
+
An array of {{domxref("DOMString","string")}} giving the formats that were set in the {{event("dragstart")}} event.
+
+ +

Gecko properties

+ +

{{SeeCompatTable}}

+ +
Note: All of the properties in this section are Gecko-specific.
+ +
+
{{domxref("DataTransfer.mozCursor")}}
+
Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.
+
{{domxref("DataTransfer.mozItemCount")}} {{readonlyInline}}
+
Gives the number of items in the drag operation.
+
{{domxref("DataTransfer.mozSourceNode")}} {{readonlyInline}}
+
The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is null for external drags or if the caller can't access the node.
+
{{domxref("DataTransfer.mozUserCancelled")}} {{readonlyInline}}
+
This property applies only to the dragend event, and is true if the user canceled the drag operation by pressing escape. It will be false in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location.
+
+ +

Methods

+ +

Standard methods

+ +
+
{{domxref("DataTransfer.clearData()")}}
+
Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.
+
{{domxref("DataTransfer.getData()")}}
+
Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.
+
{{domxref("DataTransfer.setData()")}}
+
Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.
+
{{domxref("DataTransfer.setDragImage()")}}
+
Set the image to be used for dragging if a custom one is desired.
+
+ +

Gecko methods

+ +

{{SeeCompatTable}}

+ +
Note: All of the methods in this section are Gecko-specific.
+ +
+
{{domxref("DataTransfer.addElement()")}}
+
Sets the drag source to the given element.
+
{{domxref("DataTransfer.mozClearDataAt()")}}
+
Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.
+
{{domxref("DataTransfer.mozGetDataAt()")}}
+
Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.
+
{{domxref("DataTransfer.mozSetDataAt()")}}
+
A data transfer may store multiple items, each at a given zero-based index. mozSetDataAt() may only be called with an index argument less than mozItemCount in which case an existing item is modified, or equal to mozItemCount in which case a new item is added, and the mozItemCount is incremented by one.
+
{{domxref("DataTransfer.mozTypesAt()")}}
+
Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.
+
+ +

Example

+ +

Every method and property listed in this document has its own reference page and each reference page either directly includes an example of the interface or has a link to an example.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#datatransfer','DataTransfer')}}{{Spec2('HTML WHATWG')}}mozCursor, mozItemCount, mozSourceNode, mozUserCancelled, addElement(), mozClearDataAt(), mozGetDataAt(), mozSetDataAt() and mozTypesAt are Gecko specific.
{{SpecName('HTML5.1', 'editing.html#the-datatransfer-interface','DataTransfer')}}{{Spec2('HTML5.1')}}Not included in W3C HTML5 {{Spec2('HTML5 W3C')}}
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support43.5 [2]10 [1] [2]123.1 [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1]Partial support refers to not supporting {{domxref("DataTransfer.setDragImage()")}} [CanIUse.com]

+ +

[2]Does not support {{domxref("DataTransfer.items")}} property

+ +

See also

+ + diff --git a/files/it/web/api/document/anchors/index.html b/files/it/web/api/document/anchors/index.html new file mode 100644 index 0000000000..2b7261420d --- /dev/null +++ b/files/it/web/api/document/anchors/index.html @@ -0,0 +1,31 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +translation_of: Web/API/Document/anchors +--- +
{{APIRef("DOM")}}
+ +

anchors restituisce un Array contenente tutte le ancore presenti nel documento.

+ +

Sintassi

+ +
nodeList = document.anchors
+
+ +

Esempio

+ +
if ( document.anchors.length >= 5 ) {
+    dump("Ho trovato troppe ancore");
+    window.location = "http://www.google.com";
+}
+
+ +

Note

+ +

Per ragioni di compatibilità all'indietro, l'array restituito contiene solo le ancore che hanno un attributo name e non quelle che hanno solo l'attributo id.

+ +

Specifiche

+ +

DOM Level 2 HTML: anchors

+ +

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

diff --git a/files/it/web/api/document/applets/index.html b/files/it/web/api/document/applets/index.html new file mode 100644 index 0000000000..47328fbe65 --- /dev/null +++ b/files/it/web/api/document/applets/index.html @@ -0,0 +1,25 @@ +--- +title: document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +
{{APIRef("DOM")}}
+ +

applets restituisce un array contenente le applet presenti nel documento.

+ +

Sintassi

+ +
nodeList = document.applets
+
+ +

Esempio

+ +
// ( voglio la seconda applet )
+la_mia_applet_java = document.applets[1];
+
+ +

Specifiche

+ +

DOM Level 2 HTML: applets

+ +

{{ languages( { "pl": "pl/DOM/document.applets" } ) }}

diff --git a/files/it/web/api/document/body/index.html b/files/it/web/api/document/body/index.html new file mode 100644 index 0000000000..e13f8e1400 --- /dev/null +++ b/files/it/web/api/document/body/index.html @@ -0,0 +1,88 @@ +--- +title: Document.body +slug: Web/API/Document/body +tags: + - API + - DOM + - HTML DOM + - Proprietà + - Referenza +translation_of: Web/API/Document/body +--- +
{{APIRef("DOM")}}
+ +

La proprietà Document.body rappresenta il nodo {{HTMLElement("body")}} o {{HTMLElement("frameset")}} del documento corrente, o null se non esiste alcun elemento di questo tipo.

+ +

Sintassi

+ +
var objRef = document.body;
+document.body = objRef;
+ +

Esempio

+ +
// Dato questo 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"
+
+ +

Appunti

+ +

document.body è l'elemento che contiene il contenuto per il documento. Nei documenti con contenuto <body> restituisce l'elemento <body>, e nei documenti frameset, restituisce l'elemento <frameset> più esterno.

+ +

Anche se body è settabile, l'impostazione di un nuovo corpo su un documento rimuoverà efficacemente tutti i figli attuali dell'elemento <body>.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +
{{Compat("api.Document.body")}}
+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/characterset/index.html b/files/it/web/api/document/characterset/index.html new file mode 100644 index 0000000000..e2062ac971 --- /dev/null +++ b/files/it/web/api/document/characterset/index.html @@ -0,0 +1,32 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +translation_of: Web/API/Document/characterSet +--- +
{{APIRef("DOM")}}
+ +

Restituisce la codifica dei caratteri utilizzata per il documento corrente.

+ +

Sintassi

+ +
stringa = document.characterSet
+
+ +

Esempio

+ +
<button onclick="alert(document.characterSet);"
+>Mostra il set di caratteri</button>
+// restituisce il set di caratteri, come "ISO-8859-1" o "UTF-8"
+
+ +

Note

+ +

La codifica dei caratteri è il set di caratteri utilizzato per visualizzare il documento, che potrebbe essere differente dalla codifica specificata nella pagina (l'utente può reimpostare la codifica da utilizzare).

+ +

Per un elenco completo delle codifiche, si veda: http://www.iana.org/assignments/character-sets.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

{{ languages( { "pl": "pl/DOM/document.characterSet" } ) }}

diff --git a/files/it/web/api/document/close/index.html b/files/it/web/api/document/close/index.html new file mode 100644 index 0000000000..bc86c7bacc --- /dev/null +++ b/files/it/web/api/document/close/index.html @@ -0,0 +1,27 @@ +--- +title: document.close +slug: Web/API/Document/close +translation_of: Web/API/Document/close +--- +
{{APIRef("DOM")}}
+ +

document.close() termina la scrittura su un documento che è stato aperto con document.open().

+ +

Sintassi

+ +
document.close();
+
+ +

Esempio

+ +
// apro un documento per scrivervi sopra;
+// scrivo il contenuto sul documento;
+// chiudo il documento.
+document.open();
+document.write("<p>Testo da inserire...</p>");
+document.close();
+
+ +

Specifiche

+ +

DOM Level 2 HTML: close() Method

diff --git a/files/it/web/api/document/createelement/index.html b/files/it/web/api/document/createelement/index.html new file mode 100644 index 0000000000..649ba72fb3 --- /dev/null +++ b/files/it/web/api/document/createelement/index.html @@ -0,0 +1,139 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Referenza + - createElement + - metodo +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

In un documento HTML, il metodo document.createElement() crea l'elemento HTML specificato da tagName o un {{domxref("HTMLUnknownElement")}} se tagName non viene riconosciuto.

+ +
+

Note: In un documento XUL, crea l'elemento XUL specificato. In altri documenti, crea un elemento con un URI namespace null.

+
+ +

Sintassi

+ +
var element = document.createElement(tagName[, options]);
+
+ +

Parametri

+ +
+
tagName
+
Una stringa che specifica il tipo di elemento da creare. Il {{domxref("Node.nodeName", "nodeName")}} dell'elemento creato viene inizializzato con il valore di tagName. Non utilizzare nomi qualificati (come "html:a") con questo metodo. Quando chiamato su un documento HTML, createElement() converte tagName in minuscolo prima di creare l'elemento. In Firefox, Opera e Chrome, createElement(null) funziona come createElement("null").
+
options{{optional_inline}}
+
Un oggetto ElementCreationOptions opzionale contenente una singola proprietà denominata is, il cui valore è il nome del tag per un elemento personalizzato precedentemente definito utilizzando customElements.define(). Vedi {{anch("Esempio di componente Web")}} per ulteriori dettagli.
+
+ +

Valore di ritorno

+ +

Il nuovo {{domxref("Element")}}.

+ +

Esempi

+ +

Esempio basilare

+ +

Questo crea un nuovo <div> e lo inserisce prima dell'elemento con l'ID "div1".

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Lavorare con gli elementi||</title>
+</head>
+<body>
+  <div id="div1">Il testo sopra è stato creato dinamicamente.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement() {
+  // crea un nuovo elemento div
+  var newDiv = document.createElement("div");
+  // ed assegnargli un contenuto
+  var newContent = document.createTextNode("Hi there and greetings!");
+  // aggiungi il nodo di testo al div appena creato
+  newDiv.appendChild(newContent);
+
+  // aggiungi l'elemento appena creato e il suo contenuto nel DOM
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Esempio_basilare", 500, 50)}}

+ +

Esempio di componente Web

+ +

Il seguente frammento di esempio è tratto dal nostro esempio di componente di espansione list-web (vedi anche live). In questo caso, il nostro elemento personalizzato estende {{domxref("HTMLUListElement")}}, che rappresenta l'elemento {{htmlelement("ul")}}.

+ +
// Crea una classe per l'elemento
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Chiama sempre super prima nel costruttore
+    super();
+
+    // definizione del costruttore lasciata fuori per brevità
+    ...
+  }
+}
+
+// Definisce il nuovo elemento
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

Se volessimo creare un'istanza di questo elemento a livello di codice, utilizzeremmo una chiamata seguendo le linee seguenti:

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

Al nuovo elemento verrà assegnato un attributo is il cui valore è il nome del tag dell'elemento personalizzato.

+ +
+

Note: Per la retrocompatibilità con le versioni precedenti della specifica Elementi personalizzati, alcuni browser ti permetteranno di passare una stringa qui invece di un oggetto, dove il valore della stringa è il nome del tag dell'elemento personalizzato.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/createrange/index.html b/files/it/web/api/document/createrange/index.html new file mode 100644 index 0000000000..6c78f471f3 --- /dev/null +++ b/files/it/web/api/document/createrange/index.html @@ -0,0 +1,30 @@ +--- +title: document.createRange +slug: Web/API/Document/createRange +translation_of: Web/API/Document/createRange +--- +
{{APIRef("DOM")}}
+ +

Restituisce un nuovo oggetto Range.

+ +

Sintassi

+ +
range = document.createRange();
+
+ +

range è l'oggetto range creato.

+ +

Esempio

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

Note

+ +

Una volta che un Range è stato creato, occorre impostare il punto iniziale e quello finale prima di poter utilizzare la maggior parte dei suoi metodi.

+ +

Specifiche

+ +

DOM Level 2 Range: DocumentRange.createRange

diff --git a/files/it/web/api/document/defaultview/index.html b/files/it/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..46f9ef20c0 --- /dev/null +++ b/files/it/web/api/document/defaultview/index.html @@ -0,0 +1,27 @@ +--- +title: document.defaultView +slug: Web/API/Document/defaultView +translation_of: Web/API/Document/defaultView +--- +
{{APIRef("DOM")}}
+ +

document.defaultView restituisce un riferimento all'AbstractView predefinita del documento, oppure null se non ne esiste una.

+ +

Sintassi

+ +
var vista = document.defaultView;
+
+ +

Questa proprietà è di sola lettura.

+ +

Note

+ +

document.defaultView fa parte dell'interfaccia DocumentView del DOM Level 2.

+ +

document.defaultView generalmente è un riferimento all'oggetto window del documento, però questo non è definito nella specifica è non può essere dato per scontato in ogni tipo di ambiente, o più precisamente in ogni browser.

+ +

Specifiche

+ +

DOM Level 2 defaultView

+ +

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

diff --git a/files/it/web/api/document/doctype/index.html b/files/it/web/api/document/doctype/index.html new file mode 100644 index 0000000000..e9393d19b6 --- /dev/null +++ b/files/it/web/api/document/doctype/index.html @@ -0,0 +1,27 @@ +--- +title: document.doctype +slug: Web/API/Document/doctype +translation_of: Web/API/Document/doctype +--- +
{{APIRef("DOM")}}
+ +

Restituisce la dichiarazione di tipo di documento (DTD) associata al documento corrente. L'oggetto restituito implementa l'interfaccia DocumentType.

+ +

Sintassi

+ +
doctype = document.doctype
+
+ +

doctype è un proprietà di sola lettura

+ +

Note

+ +

Questa proprietà restituisce null se non vi è alcun DTD associato al documento corrente.

+ +

Lo standard DOM level 2 non permette modifiche alla DTD.

+ +

Specifiche

+ +

DOM Level 2 Core: doctype

+ +

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

diff --git a/files/it/web/api/document/documentelement/index.html b/files/it/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..e48895b7a0 --- /dev/null +++ b/files/it/web/api/document/documentelement/index.html @@ -0,0 +1,68 @@ +--- +title: Document.documentElement +slug: Web/API/Document/documentElement +translation_of: Web/API/Document/documentElement +--- +
{{ApiRef("DOM")}}
+ +

Document.documentElement ritorna l'{{domxref("Element")}} che è l'elemento principale di {{domxref("document")}} (per esempio, l'elemento {{HTMLElement("html")}} per i documenti HTML).

+ +

Sintassi

+ +
var element = document.documentElement;
+
+ +

Esempio

+ +
var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier è la NodeList dei figli diretti dell'elemento root
+for (var i = 0; i < firstTier.length; i++) {
+   // fare qualcosa con ogni child diretto dell'elemento radice
+   // come firstTier[i]
+}
+ +

Appunti

+ +

Per qualsiasi documento HTML non vuoto, document.documentElement sarà sempre un elemento {{HTMLElement("html")}}. Per qualsiasi documento XML non vuoto, document.documentElement sarà sempre qualunque elemento sia l'elemento radice del documento.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM3 Core')}} 
{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}{{Spec2('DOM2 Core')}} 
+ +

Compatibilità con i browser

+ + + +

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

diff --git a/files/it/web/api/document/firstchild/index.html b/files/it/web/api/document/firstchild/index.html new file mode 100644 index 0000000000..ed5a34a883 --- /dev/null +++ b/files/it/web/api/document/firstchild/index.html @@ -0,0 +1,40 @@ +--- +title: document.firstChild +slug: Web/API/Document/firstChild +translation_of: Web/API/Node/firstChild +--- +
{{APIRef("DOM")}}
+ +

document.firstChild restituisce il primo nodo figlio del documento.

+ +

Sintassi

+ +
child = document.firstChild
+
+ +

Parametri

+ + + +

Esempio

+ +
function primoFiglio() {
+  f = document.firstChild;
+  alert(f.tagName);
+}
+// restituisce [object DocumentType] se il documento ha una DTD
+// altrimenti restituisce "HTML"
+
+// Per un documento HTML che ha una DTD
+// document.firstChild
+// restituisce [object DocumentType]
+
+
+ +

Specifiche

+ +

DOM Level 2 Core: firstChild

+ +

{{ languages( { "pl": "pl/DOM/document.firstChild" } ) }}

diff --git a/files/it/web/api/document/forms/index.html b/files/it/web/api/document/forms/index.html new file mode 100644 index 0000000000..cda3146a42 --- /dev/null +++ b/files/it/web/api/document/forms/index.html @@ -0,0 +1,128 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - API + - DOM + - Document + - Forms + - HTML DOM + - HTML forms + - Proprietà + - Referenza +translation_of: Web/API/Document/forms +--- +

La proprietà di sola lettura forms dell'interfaccia {{domxref("Document")}} restituisce una {{domxref("HTMLCollection")}} che elenca tutti gli elementi {{HTMLElement("form")}} contenuti nel documento.

+ +
+

Note: Allo stesso modo, è possibile accedere a un elenco di elementi di input utente di un modulo utilizzando la proprietà {{domxref("HTMLFormElement.elements")}}.

+
+ +

Sintassi

+ +
collection = document.forms;
+ +

Valore

+ +

Un oggetto {{domxref("HTMLCollection")}} che elenca tutti i form del documento. Ogni elemento della collezione è un {{domxref("HTMLFormElement")}} che rappresenta un singolo elemento <form>.

+ +

Se il documento non ha moduli, la raccolta restituita è vuota, con una lunghezza pari a zero.

+ +

Esempi

+ +

Ottenere informazioni sul modulo

+ +
<!DOCTYPE html>
+<html lang="en">
+
+<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>
+
+ +

Ottenere un elemento all'interno di un modulo

+ +
var selectForm = document.forms[index];
+var selectFormElement = document.forms[index].elements[index];
+
+ +

Accesso al modulo con nome

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>document.forms example</title>
+</head>
+
+<body>
+
+<form name="login">
+  <input name="email" type="email">
+  <input name="password" type="password">
+  <button type="submit">Log in</button>
+</form>
+
+<script>
+  var loginForm = document.forms.login; // Or document.forms['login']
+  loginForm.elements.email.placeholder = 'test@example.com';
+  loginForm.elements.password.placeholder = 'password';
+</script>
+</body>
+</html>
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}{{ Spec2('DOM2 Events') }}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

+ + + +
{{APIRef("DOM")}}
diff --git a/files/it/web/api/document/getelementbyid/index.html b/files/it/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..bdcfac73a5 --- /dev/null +++ b/files/it/web/api/document/getelementbyid/index.html @@ -0,0 +1,149 @@ +--- +title: Document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elementi + - Referenza + - Web + - getElementById + - id + - metodo +translation_of: Web/API/Document/getElementById +--- +
{{ ApiRef("DOM") }}
+ +

Il metodo {{domxref("Document")}} getElementById() restituisce un oggetto {{domxref("Element")}} che rappresenta l'elemento la cui proprietà {{domxref("Element.id", "id")}} corrisponde alla stringa specificata. Poiché gli ID degli elementi devono essere univoci se specificati, sono un modo utile per accedere rapidamente a un elemento specifico.

+ +

Se hai bisogno di accedere a un elemento che non ha un ID, puoi usare {{domxref("Document.querySelector", "querySelector()")}} per trovare l'elemento usando un qualsiasi {{Glossary("CSS selector", "selettore")}}.

+ +

Sintassi

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

Parametri

+ +
+
id
+
L'ID dell'elemento da localizzare. L'ID è una stringa sensibile al maiuscolo/minuscolo, che è univoca all'interno del documento; solo un elemento può avere un dato ID.
+
+ +

Valore di ritorno

+ +

Un oggetto {{domxref("Element")}} che descrive l'oggetto elemento DOM che corrisponde all'ID specificato o null se nel documento non è stato trovato alcun elemento corrispondente.

+ +

Esempio

+ +

HTML

+ +
<html>
+<head>
+  <title>getElementById example</title>
+</head>
+<body>
+  <p id="para">text here</p>
+  <button onclick="changeColor('blue');">blue</button>
+  <button onclick="changeColor('red');">red</button>
+</body>
+</html>
+ +

JavaScript

+ +
function changeColor(newColor) {
+  var elem = document.getElementById('para');
+  elem.style.color = newColor;
+}
+ +

Risultato

+ +

{{ EmbedLiveSample('Esempio', 250, 100) }}

+ +

Note di utilizzo

+ +

La maiuscola di "Id" nel nome di questo metodo deve essere corretta affinché il codice funzioni; getElementByID() non è valido e non funzionerà, per quanto naturale possa sembrare.

+ +

A differenza di altri metodi di ricerca degli elementi come {{domxref("Document.querySelector()")}} e {{domxref("Document.querySelectorAll()")}}, getElementById() è disponibile solo come metodo per l'oggetto globale document, e non è disponibile come metodo su tutti gli oggetti elemento nel DOM. Poiché gli ID devono essere univoci nell'intero documento, non sono necessarie versioni "locali" della funzione.

+ +

Esempio

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p id="test1">hello word2</p>
+        <p>hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById('parent-id');
+        var test1 = parentDOM.getElementById('test1');
+        // throw error
+        // Uncaught TypeError: parentDOM.getElementById is not a function
+    </script>
+</body>
+</html>
+ +

Se non ci sono elementi con l'id fornito, questa funzione restituisce null. Nota che il parametro id è case-sensitive, quindi document.getElementById("Main") restituirà null invece dell'elemento <div id="main"> perché "M" e "m" sono diversi per gli scopi di questo metodo.

+ +

Gli elementi non presenti nel documento non vengono cercati da getElementById(). Quando crei un elemento ed assegni un ID ad esso, devi inserire l'elemento nell'albero del documento con {{domxref("Node.insertBefore()")}} o un metodo simile prima di poterlo ottenere con getElementById():

+ +
var element = document.createElement('div');
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el sarà nullo!
+
+ +

Documenti non HTML. L'implementazione del DOM deve avere informazioni che indicano quali attributi sono di tipo ID. Gli attributi con il nome "id" non sono di tipo ID a meno che non siano definiti nella DTD del documento. L'attributo id è definito come di tipo ID nei casi comuni di XHTML, XUL, e altri. Si prevede che le implementazioni che non sanno se gli attributi siano di tipo ID o non restituiscano null.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Definizione iniziale per l'interfaccia
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Sostituisce DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Sostituisce DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Intende rimpiazzare DOM 3
+ +

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

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

{{APIRef("DOM")}}

+ +

Il metodo getElementsByClassName dell'interfaccia {{domxref("Document")}} restituisce un array-like object di tutti gli elementi figli che hanno le classi specificate. Quando viene richiamato sull'oggetto {{domxref("document")}}, viene eseguita la ricerca del documento completo, incluso il nodo radice. Puoi anche usare {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} su qualsiasi elemento; restituirà solo gli elementi che sono discendenti dell'elemento radice specificato con le classi fornite.

+ +

Sintassi

+ +
var elementi = document.getElementsByClassName(nomi); // oppure:
+var elementi = rootElement.getElementsByClassName(nomi);
+ + + +

Esempi

+ +

Ottenere tutti gli elementi che hanno una come classe 'test':

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

Ottenere tutti gli elementi che hanno entrambe le classi 'red' e 'test':

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

Ottenere tutti gli elementi che hanno una classe di 'test', all'interno di un elemento che ha l'ID di 'main':

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

Ottenere il primo elemento con classe 'test' o indefinito se non ci sono elementi corrispondenti:

+ +
document.getElementsByClassName('test')[0]
+
+ +

Possiamo anche utilizzare il metodo Array.prototype su qualsiasi {{domxref("HTMLCollection")}} passando la HTMLCollection come il valore this. Qui troveremo tutti gli elementi div che hanno come classe 'test':

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

Ottenere il primo elemento la cui classe è 'test'

+ +

Questo è il metodo di operazione più comunemente usato.

+ +
<html>
+<body>
+    <div id="parent-id">
+        <p>hello world 1</p>
+        <p class="test">hello world 2</p>
+        <p>hello world 3</p>
+        <p>hello world 4</p>
+    </div>
+
+    <script>
+        var parentDOM = document.getElementById("parent-id");
+
+        var test = parentDOM.getElementsByClassName("test"); // una lista di elementi corrispondenti, *non* l'elemento stesso
+        console.log(test); //HTMLCollection[1]
+
+        var testTarget = parentDOM.getElementsByClassName("test")[0]; // il primo elemento, come volevamo
+        console.log(testTarget); //<p class="test">hello world 2</p>
+    </script>
+</body>
+</html>
+ +

Compatibilità con i browser

+ + + +

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

+ +

Specifiche

+ + diff --git a/files/it/web/api/document/getelementsbyname/index.html b/files/it/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..f39fdf8ef7 --- /dev/null +++ b/files/it/web/api/document/getelementsbyname/index.html @@ -0,0 +1,97 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +tags: + - API + - DOM + - Document + - HTML + - Referenza + - metodo +translation_of: Web/API/Document/getElementsByName +--- +
{{APIRef("DOM")}}
+ +

Il metodo getElementsByName() dell'oggetto {{domxref("Document")}} ritorna una raccolta di elementi {{domxref("NodeList")}} con un determinato {{domxref("element.name","name")}} nel documento.

+ +

Sintassi

+ +
var elements = document.getElementsByName(name);
+
+ + + +

Esempio

+ +
<!DOCTYPE html>
+<html lang="en">
+<title>Example: using document.getElementsByName</title>
+
+<input type="hidden" name="up">
+<input type="hidden" name="down">
+
+<script>
+  var up_names = document.getElementsByName("up");
+  console.log(up_names[0].tagName); // ritorna "INPUT"
+</script>
+</html>
+
+ +

Appunti

+ +

L'attributo {{domxref("element.name","name")}} può essere applicato solo nei documenti (X)HTML.

+ +

La raccolta {{domxref("NodeList")}} restituita contiene tutti gli elementi con il parametro name dato, come {{htmlelement("meta")}}, {{htmlelement("object")}}, e persino elementi che non supportano affatto l'attributo name.

+ +
+

Il metodo getElementsByName funziona in modo diverso in IE10 e versioni precedenti. Lì, getElementsByName() restituisce anche gli elementi che hanno un attributo id con il valore specificato. Fai attenzione a non usare la stessa stringa sia di un name che di un id.

+
+ +
+

Il metodo getElementsByName funziona in modo diverso in IE. Lì, getElementsByName() non restituisce tutti gli elementi che potrebbero non avere un attributo name (come <span>).

+
+ +
+

Sia IE che Edge restituiscono una {{domxref("HTMLCollection")}}, non una {{domxref("NodeList")}}

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}{{Spec2("DOM2 HTML")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/getelementsbytagname/index.html b/files/it/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..e5ad9540fb --- /dev/null +++ b/files/it/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,116 @@ +--- +title: Document.getElementsByTagName() +slug: Web/API/Document/getElementsByTagName +tags: + - API + - DOM + - Referenza + - metodo +translation_of: Web/API/Document/getElementsByTagName +--- +
{{APIRef("DOM")}}
+ +

Il metodo getElementsByTagName dell'interfaccia {{domxref("Document")}} ritorna una {{domxref("HTMLCollection")}} di elementi con il tag specificato. Viene cercato il documento completo, incluso il nodo radice. L'HTMLCollection è dinamica, il che significa che si aggiorna automaticamente per rimanere sincronizzato con l'albero del DOM senza dover chiamare di nuovo document.getElementsByTagName().

+ +

Sintassi

+ +
var elementi = document.getElementsByTagName(nome);
+ + + +
Le ultime specifiche W3C dicono che gli elementi sono una HTMLCollection; tuttavia, questo metodo restituisce una {{domxref("NodeList")}} nei browser WebKit. Vedi {{bug(14869)}} per i dettagli.
+ +

Esempio

+ +

Nell'esempio seguente, getElementsByTagName() inizia da un particolare elemento padre e ricerca dall'alto verso il basso ricorsivamente attraverso il DOM da quell'elemento padre, una raccolta di tutti i discendenti che corrispondono al parametro nome del tag. Questo documento mostra sia document.getElementsByTagName() che l'identico funzionale {{domxref("Element.getElementsByTagName()")}}, che avvia la ricerca su un elemento specifico all'interno dell'albero del DOM.

+ +

Facendo click sui pulsanti viene utilizzato getElementsByTagName() per contare gli elementi del paragrafo discendente di un particolare genitore (il documento stesso o uno dei due elementi {{HTMLElement("div")}}).

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>esempio di getElementsByTagName</title>
+  <script>
+    function getAllParaElems() {
+      var allParas = document.getElementsByTagName('p');
+      var num = allParas.length;
+      alert('Ci sono ' + num + ' paragrafi in questo documento');
+    }
+
+    function div1ParaElems() {
+      var div1 = document.getElementById('div1');
+      var div1Paras = div1.getElementsByTagName('p');
+      var num = div1Paras.length;
+      alert('Ci sono ' + num + ' paragrafi in #div1');
+    }
+
+    function div2ParaElems() {
+      var div2 = document.getElementById('div2');
+      var div2Paras = div2.getElementsByTagName('p');
+      var num = div2Paras.length;
+      alert('Ci sono ' + num + ' paragrafi in #div2');
+    }
+  </script>
+</head>
+<body style="border: solid green 3px">
+  <p>Qualche testo esterno</p>
+  <p>Qualche testo esterno</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Qualche testo div1</p>
+    <p>Qualche testo div1</p>
+    <p>Qualche testo div1</p>
+
+    <div id="div2" style="border: solid red 3px">
+      <p>Qualche testo div2</p>
+      <p>Qualche testo div2</p>
+    </div>
+  </div>
+
+  <p>Qualche testo esterno/p>
+  <p>Qualche testo esterno</p>
+
+  <button onclick="getAllParaElems();">
+    mostra tutti gli elementi p nel documento</button><br />
+
+  <button onclick="div1ParaElems();">
+    mostra tutti gli elementi p nell'elemento div1</button><br />
+
+  <button onclick="div2ParaElems();">
+   mostra tutti gli elementi p nell'elemento div2</button>
+
+</body>
+</html>
+
+ +

Note

+ +

Quando chiamato su un documento HTML, getElementsByTagName() converte in minuscolo il suo argomento prima di procedere. Ciò non è desiderabile quando si cerca di far corrispondere gli elementi SVG di camelCase in una sottostruttura in un documento HTML. {{Domxref("document.getElementsByTagNameNS()")}} è utile in questo caso. Vedi anche {{Bug(499656)}}.

+ +

document.getElementsByTagName() è simile a {{domxref("Element.getElementsByTagName()")}}, ad eccezione del fatto che la sua ricerca comprende l'intero documento.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/head/index.html b/files/it/web/api/document/head/index.html new file mode 100644 index 0000000000..941a533431 --- /dev/null +++ b/files/it/web/api/document/head/index.html @@ -0,0 +1,84 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - API + - Document + - HTML DOM + - Proprietà + - Referenza +translation_of: Web/API/Document/head +--- +
{{APIRef("DOM")}}
+ +

La proprietà head di sola lettura dell'interfaccia {{domxref("Document")}} restituisce l'elemento {{HTMLElement("head")}} del documento corrente.

+ +

Sintassi

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

Valore

+ +

Un {{domxref("HTMLHeadElement")}}.

+ +

Esempio

+ +
<!doctype html>
+<head id="my-document-head">
+  <title>Esempio: usare document.head</title>
+</head>
+
+<script>
+  var theHead = document.head;
+
+  console.log(theHead.id); // "my-document-head";
+
+  console.log( theHead === document.querySelector("head") ); // true
+</script>
+
+ +

Appunti

+ +

document.head è di sola lettura. Cercare di assegnare un valore a questa proprietà fallirà silenziosamente o, in Strict Mode, genera un {{jsxref("TypeError")}} .

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{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')}} 
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/height/index.html b/files/it/web/api/document/height/index.html new file mode 100644 index 0000000000..ee517b6c39 --- /dev/null +++ b/files/it/web/api/document/height/index.html @@ -0,0 +1,35 @@ +--- +title: document.height +slug: Web/API/Document/height +translation_of: Web/API/Document/height +--- +
{{APIRef("DOM")}}
+ +

Restituisce l'altezza in pixel dell'elemento body del documento corrente.

+ +

Syntax

+ +
height_value = document.height
+
+ +

Parametri

+ + + +

Esempio

+ +
// visualizza l'altezza del documento
+alert(document.height);
+
+ +

Note

+ +

Si veda document.width.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di uno standard.

+ +

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

diff --git a/files/it/web/api/document/images/index.html b/files/it/web/api/document/images/index.html new file mode 100644 index 0000000000..abe27b2a11 --- /dev/null +++ b/files/it/web/api/document/images/index.html @@ -0,0 +1,52 @@ +--- +title: Document.images +slug: Web/API/Document/images +translation_of: Web/API/Document/images +--- +
{{APIRef("DOM")}}
+ +

document.images restituisce una collezione delle immagini nel documento HTML corrente.

+ +

Sintassi

+ +
var htmlCollection = document.images;
+ +

Esempio

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

Note

+ +

document.images.length – proprietà che restituisce il numero di immagini della pagina.

+ +

document.images è parte del DOM HTML, e funziona solo per documenti HTML.

+ +

Specifiche tecniche

+ + + + + + + + + + + + + + + + + + + + + +
Specifiche tecnicheStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-images', 'Document.images')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-90379117', 'Document.images')}}{{ Spec2('DOM2 Events') }}Initial definition.
diff --git a/files/it/web/api/document/importnode/index.html b/files/it/web/api/document/importnode/index.html new file mode 100644 index 0000000000..354db3c0c8 --- /dev/null +++ b/files/it/web/api/document/importnode/index.html @@ -0,0 +1,45 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +
{{APIRef("DOM")}}
+ +

Restituisce un clone di un nodo preso da un documento esterno.

+ +

Sintassi

+ +
nodo =
+document.importNode(
+nodoEsterno,
+bool)
+
+ + + +

Esempio

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var vecchioNodo = iframe.contentDocument.getElementById("mioNodo");
+var nuovoNodo = document.importNode(vecchioNodo,true);
+document.getElementById("contenitore").appendChild(nuovoNodo);
+
+ +

Note

+ +

Il nodo non viene rimosso dal documento originale. Il nodo importato è un clone dell'originale. I nodi presi dai documenti esterni devono essere importati prima di poter essere inseriti nel documento corrente.

+ +

http://www.w3.org/DOM/faq.html#ownerdoc

+ +

Specifiche

+ +

DOM Level 2 Core: Document.importNode

+ +

{{ languages( { "fr": "fr/DOM/document.importNode" } ) }}

diff --git a/files/it/web/api/document/index.html b/files/it/web/api/document/index.html new file mode 100644 index 0000000000..108f317cc3 --- /dev/null +++ b/files/it/web/api/document/index.html @@ -0,0 +1,308 @@ +--- +title: Document +slug: Web/API/Document +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Document +--- +

{{ ApiRef("DOM") }}

+ +

Introduzione

+ +

L'oggetto document fornisce un modo generico di rappresentare documenti HTML, XHTML, e XML. Implementa l'interfaccia DOM Core document.

+ +

In aggiunta all'interfaccia generalizzata DOM core document, i documenti HTML implementano pure l'interfaccia DOM HTMLDocument, che è un'interfaccia più specializzata per interagire con i documenti HTML (contiene ad esempio document.cookie). In questa pagina, le proprietà e i metodi che fanno parte di questa interfaccia più specializzata sono seguite da un asterisco.

+ +

L'oggetto document è contenuto nell'oggetto window e può contenere un numero qualsiasi di elementi.

+ +

L'interfaccia di document fornisce accesso a informazioni come il tipo di documento, i plugin e le applet, e fornisce metodi per creare e manipolare i suoi nodi figli.

+ +

Proprietà

+ +
+
document.alinkColor*{{ Deprecated_inline() }}
+
Restituisce o setta il colore dei link attivi nel corpo del documento.
+
+ +
+
document.anchors*
+
Restituisce una collezione delle ancore presenti nel documento.
+
+ +
+
document.applets*
+
Restituisce una collezione delle applet presenti nel documento.
+
+ +
+
document.bgColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore di sfondo dell'elemento body del documento.
+
+ +
+
document.body*
+
Restituisce il nodo BODY del documento.
+
+ +
+
document.characterSet
+
Restituisce il set di caratteri usato nel documento.
+
+ +
+
document.compatMode*
+
Indica se il documento viene letto dal browser in modalità standard o in modalità compatibile.
+
+ +
+
document.cookie*
+
Restituisce una stringa contenente la lista dei cookie(separati da un punto e virgola) usati dal documento o setta un singolo cookie.
+
+ +
+
document.contentWindow*
+
Restituisce l'oggetto window in cui è contenuto il documento.
+
+ +
+
document.defaultView
+
Restituisce un riferimento all'oggetto window.
+
+ +
+
document.designMode
+
Restituisce/setta lo stato di attivazione del Rich Text Editor di firefox, Midas.
+
+ +
+
document.doctype
+
Restituisce la Dichiarazione del Tipo di Documento(DTD) del documento corrente.
+
+ +
+
document.documentElement
+
Restituisce l'elemento che è figlio diretto di document, cioè nella maggior parte dei casi l'elemento HTML.
+
+ +
+
document.domain*
+
Restituisce il dominio del documento corrente.
+
+ +
+
document.embeds*
+
Restituisce una lista degli elementi object contenuti nel documento.
+
+ +
+
document.fgColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore di default per il testo del documento corrente.
+
+ +
+
document.firstChild
+
Restituisce il primo nodo figlio di document. (Guarda anche firstChild presente nell'intefaccia element).
+
+ +
+
document.forms*
+
Restituisce una collezione degli elementi FORM contenuti nel documento.
+
+ +
+
document.height*
+
Restituisce/setta l'altezza del documento corrente.
+
+ +
+
document.images*
+
Restituisce una collezione delle immagini contenute nel documento corrente.
+
+ +
+
document.implementation*
+
Restituisce l'implementazione DOM associata al documento corrente.
+
+ +
+
document.lastModified*
+
Restituisce la data in cui il documento è stato modificato l'ultima volta.
+
+ +
+
document.linkColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore dei collegamenti nel documento.
+
+ +
+
document.links*
+
Restituisce una collezione dei collegamenti presenti nel documento.
+
+ +
+
document.location*
+
Restituisce l'URI del documento corrente.
+
+ +
+
document.namespaceURI
+
Restituisce lo spazio dei nomi XML del documento corrente.
+
+ +
+
document.plugins*
+
Restituisce una lista dei plugin disponibili.
+
+ +
+
document.referrer*
+
Restituisce l'URI della pagina che ha portato al documento corrente.
+
+ +
+
document.styleSheets*
+
Restituisce una collezione degli oggetti stylesheet presenti nel documento corrente.
+
+ +
+
document.title*
+
Restituisce il titolo del documento corrente.
+
+ +
+
document.URL
+
Restituisce una stringa che rappresenta l'URI del documento corrente.
+
+ +
+
document.vlinkColor*{{ Deprecated_inline() }}
+
Restituisce/setta il colore dei collegamenti visitati.
+
+ +
+
document.width*
+
Restituisce la larghezza del documento corrente.
+
+ +

Metodi

+ +
+
document.clear {{ Deprecated_inline() }}
+
Cancella i contenuti del documento.
+
+ +
+
document.close
+
Chiude lo stream per la scrittura del documento.
+
+ +
+
document.createAttribute
+
Crea (e restituisce) un nuovo nodo attributo.
+
+ +
+
document.createDocumentFragment
+
Crea un frammento.
+
+ +
+
document.createElement*
+
Crea un elemento a partire dal nome di tag dato. Non funziona con documenti xml.
+
+ +
+
document.createElementNS
+
Crea un elmento col nome di tag e l'URI per lo spazio dei nomi dati.
+
+ +
+
document.createTextNode
+
Crea un nodo testuale.
+
+ +
+
document.createEvent
+
Crea un oggetto di classe Event.
+
+ +
+
document.createRange
+
Crea un oggetto di classe Range.
+
+ +
+
document.execCommand
+
Esegue un comando Midas.
+
+ +
+
document.evaluate
+
Valuta una espressione XPath.
+
+ +
+
document.getElementById
+
Restituisce un riferimento a oggetto per l'elemento che ha il dato id.
+
+ +
+
document.getElementsByName
+
Restituisce una collezione di elementi con il dato attributo name.
+
+ +
+
document.getElementsByTagName
+
Restituisce una collezione degli elementi con il dato nome di tag.
+
+ +
+
document.importNode
+
Restituisce un clone di un nodo preso da un documento esterno.
+
+ +
+
document.loadOverlay
+
Carica un overlay XUL dinamicamente. Funziona solo con i documenti XUL.
+
+ +
+
document.open
+
Apre uno stream di documento per la scrittura.
+
+ +
+
document.queryCommandEnabled
+
Restituisce true se il comando Midas può essere eseguito sul range corrente.
+
+ +
+
document.queryCommandIndeterm
+
Restituisce true se il comando Midas è in uno stato indeterminato per il range corrente.
+
+ +
+
document.queryCommandState
+
Restituisce true se il comando Midas è stato eseguito sul range corrente.
+
+ +
+
document.queryCommandValue
+
Restituisce il valore corrente del range corrente per il comando Midas.
+
+ +
+
document.write*
+
Scrive del codice all'interno del documento.Non funziona con i documenti xml.
+
+ +
+
document.writeln
+
Scrive una linea di codice all'interno del documento. Non funziona con i documenti xml.
+
+ +

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

diff --git a/files/it/web/api/document/lastmodified/index.html b/files/it/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..4e56851ee4 --- /dev/null +++ b/files/it/web/api/document/lastmodified/index.html @@ -0,0 +1,31 @@ +--- +title: document.lastModified +slug: Web/API/Document/lastModified +translation_of: Web/API/Document/lastModified +--- +
{{APIRef("DOM")}}
+ +

Restituisce una stringa contenente la data e l'ora dell'utlima modifica apportata al documento corrente.

+ +

Sintassi

+ +
stringa = document.lastModified
+
+ +

Esempio

+ +
dump(document.lastModified);
+// restituisce: Tuesday, July 10, 2001 10:19:42
+
+ +

Note

+ +

Si noti che essendo una stringa, lastModified non può essere utilizzata facilmente per le comparazioni tra le date di modifica di un altro documento.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

MSDN: proprietà lastModified

+ +

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

diff --git a/files/it/web/api/document/links/index.html b/files/it/web/api/document/links/index.html new file mode 100644 index 0000000000..fff02b997f --- /dev/null +++ b/files/it/web/api/document/links/index.html @@ -0,0 +1,100 @@ +--- +title: document.links +slug: Web/API/Document/links +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Document/links +--- +
+

{{ APIRef("DOM") }}

+ +

La proprietà links restituisce una collezione di tutti gli elementi {{HTMLElement("area")}} e di tutti gli elementi {{HTMLElement("a")}} in un documento con un valore per l'attributo href .

+ +

Sintassi

+ +
nodeList = document.links
+ +

Esempio

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

Specifiche tecniche

+ + + + + + + + + + + + + + + + + + + +
Specifiche tecnicheStatoCommento
{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}{{Spec2("DOM2 HTML")}}Definizione iniziale
+ +

Compatibilità browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
diff --git a/files/it/web/api/document/namespaceuri/index.html b/files/it/web/api/document/namespaceuri/index.html new file mode 100644 index 0000000000..704185463f --- /dev/null +++ b/files/it/web/api/document/namespaceuri/index.html @@ -0,0 +1,29 @@ +--- +title: document.namespaceURI +slug: Web/API/Document/namespaceURI +translation_of: Web/API/Node/namespaceURI +--- +
{{APIRef("DOM")}}
+ +

namespaceURI restituisce lo spazio dei nomi XML del documento corrente.

+ +

Sintassi

+ +
NSURI = document.namespaceURI
+
+ +

Parametri

+ + + +

Note

+ +

Il DOM di per sè non supporta la validazione del namespace. Spetta all'applicazione DOM effettuare la necessaria validazione. Si noti inoltre che il prefisso del namespace, una volta associato a un nodo particolare, non può più cambiare.

+ +

Specifiche

+ +

DOM Level 2 Core: namespaceURI

+ +

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

diff --git a/files/it/web/api/document/open/index.html b/files/it/web/api/document/open/index.html new file mode 100644 index 0000000000..7f4c1eb77a --- /dev/null +++ b/files/it/web/api/document/open/index.html @@ -0,0 +1,46 @@ +--- +title: document.open +slug: Web/API/Document/open +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Document/open +--- +
{{APIRef("DOM")}}
+ +

Il metodo document.open() apre un documento in scrittura (document.write()).

+ +

Sintassi

+ +
document.open();
+
+ +

Esempio

+ +
// In questo esempio, i contenuti del documento
+// vengono sovrascritti quando il documento
+// viene reinizializzato con open().
+document.write("<html><p>eliminami</p></html>");
+document.open();
+// il documento è vuoto
+
+ +

Note

+ +

Se un documento esiste, questo metodo lo svuota (si veda l'esempio sopra).

+ +

Inoltre document.open() viene chiamato implicitamente quando si chiama document.write() dopo che la pagina è stata caricata, nonostante ciò non sia richiesto dalle specifiche del W3C.

+ +

Non confondere questo metodo con window.open(). document.open() permette di sovrascrivere il documento corrente o aggiungere testo allo stesso, mentre window.open fornisce un modo per apreire una finestra, lasciando intatto il documento. Poiché window è l'oggetto globale, scrivere solamente open(...) fa la stessa cosa

+ +

Puoi chiudere il documento aperto usando document.close().

+ +

Specificazioni

+ +

DOM Level 2 HTML: open() Method

+ +
 
+ +

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

diff --git a/files/it/web/api/document/queryselector/index.html b/files/it/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..6d8000818d --- /dev/null +++ b/files/it/web/api/document/queryselector/index.html @@ -0,0 +1,121 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +translation_of: Web/API/Document/querySelector +--- +
{{ApiRef("DOM")}}
+ +

Il metodo {{domxref("Document")}} querySelector() ritorna il primo {{domxref("Element")}} all'interno del documento che corrisponde al selettore specificato o al gruppo di selettori. Se non vengono trovate corrispondenze, viene restituito null.

+ +
+

Note: Il matching viene eseguito utilizzando il deep-pre-order traversal dei nodi del documento partendo dal primo elemento nel markup del documento e iterando attraverso i nodi sequenziali per ordine del numero di nodi figli.

+
+ +

Sintassi

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

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori da trovare. Questa stringa deve essere una stringa di selettore CSS valida; se non lo è, viene generata un'eccezione SYNTAX_ERR. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sui selettori e su come gestirli.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Un oggetto {{domxref ("Element")}} che rappresenta il primo elemento nel documento che corrisponde al set specificato di CSS selectors, o null viene restituito se non ci sono corrispondenze.

+ +

Se hai bisogno di un elenco di tutti gli elementi che corrispondono ai selettori specificati, dovresti usare {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.

+ +

Eccezioni

+ +
+
SYNTAX_ERR
+
La sintassi dei selettori specificati non è valida.
+
+ +

Note di utilizzo

+ +

Se il selettore specificato corrisponde a un ID erroneamente utilizzato più di una volta nel documento, viene restituito il primo elemento con quell'ID.

+ +

Gli pseudo-elementi CSS non restituiranno mai alcun elemento, come specificato nelle API dei selettori.

+ +

Escaping caratteri speciali

+ + + +

Per eseguire la corrispondenza con un ID o selettori che non seguono la sintassi CSS standard (ad esempio utilizzando due punti o uno spazio in modo inappropriato), è necessario eseguire l'escape del carattere con un backslash ("\"). Poiché il backslash è anche un carattere di escape in JavaScript, se si immette una stringa letterale, è necessario eseguire l'escape due volte (una per la stringa JavaScript e un'altra per querySelector ()):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b è il carattere di controllo backspace)
+  document.querySelector('#foo\bar');    // Non corrisponde a nulla
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // Seleziona il primo div
+
+  document.querySelector('#foo:bar');    // Non corrisponde a nulla
+  document.querySelector('#foo\\:bar');  // Seleziona il secondo div
+ +

Esempi

+ +

Trovare il primo elemento che corrisponde a una classe

+ +

In questo esempio, viene restituito il primo elemento del documento con la classe "myclass":

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

Un selettore più complesso

+ +

I selettori possono anche essere molto potenti, come dimostrato nel seguente esempio. Qui, il primo elemento {{HTMLElement("input")}} con il nome "login" (<input name="login"/>) situato all'interno di un {{HTMLElement("div")}} la cui classe è "user-panel main" (<div class="user-panel main">) nel documento viene restituito:

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

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{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")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +
{{Compat("api.Document.querySelector")}}
+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/queryselectorall/index.html b/files/it/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..a8e614ce9e --- /dev/null +++ b/files/it/web/api/document/queryselectorall/index.html @@ -0,0 +1,180 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Cercare elementi + - Document + - Localizzare Elementi + - Referenza + - Selettori + - Selettori CSS + - Selezionare Elementi + - Trovare elementi + - metodo + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Il metodo {{domxref("Document")}} querySelectorAll() ritorna una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi del documento che corrispondono al gruppo specificato di selettori.

+ +
+

Note: This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.

+
+ +

Sintassi

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve contenere dei selettori CSS validi; se non lo sono, viene generata un'eccezione SyntaxError. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sull'uso dei selettori per cercare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape di backslash, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ogni elemento che corrisponde ad almeno uno dei selettori specificati o una {{domxref("NodeList")}} vuota in caso di assenza di corrispondenze.

+ +
+

Note: Se i selectors specificati includono uno pseudo-elemento CSS, l'elenco restituito è sempre vuoto.

+
+ +

Eccezioni

+ +
+
SyntaxError
+
La sintassi della stringa selectors specificata non è valida.
+
+ +

Esempi

+ +

Ottenere un elenco di elementi

+ +

Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} nel documento:

+ +
var matches = document.querySelectorAll("p");
+ +

Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} all'interno del documento con la classe "note" o "alert":

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Qui, otteniamo un elenco di elementi <p> il cui elemento padre immediato è un {{domxref("div")}} con la classe "highlighted" e che si trovano all'interno di un contenitore il cui ID è "test".

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Questo esempio utilizza un selettore tramite attributo per restituire un elenco degli elementi {{domxref("iframe")}} nel documento che contengono un attributo denominato "data-src":

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è "userlist" con l'attributo "data-active" il cui valore è "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Accedere ai risultati

+ +

Una volta che viene restituita la {{domxref("NodeList")}} degli elementi corrispondenti, è possibile esaminarla come qualsiasi array. Se l'array è vuoto (ovvero la sua proprietà length è 0), non è stato trovato alcun elemento.

+ +

Altrimenti, puoi semplicemente usare la notazione array standard per accedere ai contenuti della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Note dell'utente

+ +

querySelectorAll() si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.

+ +

HTML

+ +

Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} nidificati.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

In questo esempio, quando si seleziona ".outer .inner" nel contesto <div> con la classe "select", si trova ancora l'elemento con la classe ".inner" anche se .outer non è un discendente dell'elemento base su cui viene eseguita la ricerca (".select"). Per impostazione predefinita, querySelectorAll() verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.

+ +

La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, trova solo i selettori corrispondenti sui discendenti dell'elemento base:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Standard di vita
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Nessun cambiamento
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Definizione iniziale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definizione originale
+ +

Compatibilità con i browser

+ +
+ + +

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

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/document/referrer/index.html b/files/it/web/api/document/referrer/index.html new file mode 100644 index 0000000000..8cefd3c9ac --- /dev/null +++ b/files/it/web/api/document/referrer/index.html @@ -0,0 +1,23 @@ +--- +title: document.referrer +slug: Web/API/Document/referrer +translation_of: Web/API/Document/referrer +--- +
{{APIRef("DOM")}}
+ +

Restituisce l'URI della pagina che l'utente ha visitato e che conteneva il link al documento corrente.

+ +

Sintassi

+ +
stringa = document.referrer
+
+ +

Note

+ +

Il valore è una stringa vuota se l'utente si è recato alla pagina corrente digitando l'indirizzo direttamente o attraverso un bookmark. Siccome questa proprietà restituisce solo una stringa, non fornisce un accesso al DOM della pagina a cui si riferisce.

+ +

Specifiche

+ +

DOM Level 2: referrer

+ +

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

diff --git a/files/it/web/api/document/stylesheets/index.html b/files/it/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..9de0ad0fc5 --- /dev/null +++ b/files/it/web/api/document/stylesheets/index.html @@ -0,0 +1,43 @@ +--- +title: document.styleSheets +slug: Web/API/Document/styleSheets +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +

{{APIRef("DOM")}}

+ +

Restituisce una lista di oggetti stylesheet per i fogli stile esplicitamente linkati o inclusi nel documento.

+ +

Proprietà

+ +

styleSheetList.length - restituisce il numero di oggetti stylesheet contenuti nell'oggetto.

+ +

Sintassi

+ +
styleSheetList =
+document.styleSheets
+
+ +

L'oggetto restituito è di tipo StyleSheetList.

+ +

E' una collezione ordinata di oggetti stylesheet. + styleSheetList + .item( + + indice + ) o semplicemente + styleSheetList + {{ mediawiki.external(' + + indice + ') }} restituisce un singolo oggetto stylesheet indicato dall'indice (indice comincia da 0).

+ +

Specifiche

+ +

DOM Level 2 Style: styleSheets

+ +

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

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

{{APIRef("DOM")}}document.title restituisce il titolo del documento.

+ +

Sintassi

+ +
sTitle = document.title
+
+ +

Parametri

+ + + +

Esempio

+ +
<html>
+  <title>Ciao mondo!</title>
+  <body>
+...
+// document.title restituisce "Ciao mondo!"
+
+ +

Specifiche

+ +

DOM Level 2: title

+ +

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

diff --git a/files/it/web/api/document/url/index.html b/files/it/web/api/document/url/index.html new file mode 100644 index 0000000000..e3a04cf953 --- /dev/null +++ b/files/it/web/api/document/url/index.html @@ -0,0 +1,29 @@ +--- +title: document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

Restituisce l'URL del documento corrente.

+ +

Sintassi

+ +
stringa = document.URL
+
+ +

Esempio

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

Notesù

+ +

URL è un sostituto della proprietà non standard document.location.href. Tuttavia document.URL è di sola lettura, diversamente da document.location.href.

+ +

Specifiche

+ +

DOM Level 2 HTML: URL

+ +

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

diff --git a/files/it/web/api/document/width/index.html b/files/it/web/api/document/width/index.html new file mode 100644 index 0000000000..82756dbbc7 --- /dev/null +++ b/files/it/web/api/document/width/index.html @@ -0,0 +1,32 @@ +--- +title: document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +
{{APIRef("DOM")}}
+ +

Restituisce la larghezza in pixel dell'elemento body del documento corrente.

+ +

Non supportato da IE.

+ +

Sintassi

+ +
pixels = document.width;
+
+ +

Esempio

+ +
function init() {
+  alert("La larghezza del documento è di " + document.width + " pixel.");
+}
+
+ +

Note

+ +

Si veda document.height.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di uno standard.

+ +

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

diff --git a/files/it/web/api/document/write/index.html b/files/it/web/api/document/write/index.html new file mode 100644 index 0000000000..0337177181 --- /dev/null +++ b/files/it/web/api/document/write/index.html @@ -0,0 +1,74 @@ +--- +title: Document.write() +slug: Web/API/Document/write +translation_of: Web/API/Document/write +--- +

{{ ApiRef("DOM") }}

+ +

Riassunto

+ +

Scrive una stringa di testo in un flusso di documento aperto da document.open().

+ +

Sintassi

+ +
document.write(markup);
+
+ + + +

Example

+ +
<html>
+
+<head>
+<title>write example</title>
+
+<script type="text/javascript">
+
+function newContent()
+{
+alert("load new content");
+document.open();
+document.write("<h1>Out with the old - in with the new!</h1>");
+document.close();
+}
+
+</script>
+</head>
+
+<body onload="newContent();">
+<p>Some original document content.</p>
+</body>
+</html>
+
+ +

Note

+ +

La scrittura di un documento che è gia stato caricato senza document.open() eseguirà automaticamente document.open. Una volta che hai finito di scrivere, si consiglia di chiamare document.close(), per dire al browser di completare il caricamento della pagina. Il testo che si scrive viene analizzato nel modello struttura del documento. Nell'esempio precedente, l'h1 diventa nodo del documento.

+ +

Se il document.write() viene incorporato direttamente nel codice HTML, allora non chiamerà il document.open(). Per esempio:

+ +
 <div>
+  <script type="text/javascript">
+    document.write("<h1>Main title</h1>")
+  </script>
+ </div>
+
+ +
Nota: document.write (come document.writeln) non lavora in documenti XHTML (si otterrà "Operazione non ammessa" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) nella console). Questo è il caso se l'apertura di un file locale con estensione .xhtml, o per qualsiasi documento servito con un tipo MIME application/xhtml+xml . Ulteriori informazioni sono disponibili nel W3C XHTML FAQ.
+ +

Specificazioni

+ + + +

Vedi anche

+ + diff --git a/files/it/web/api/document/writeln/index.html b/files/it/web/api/document/writeln/index.html new file mode 100644 index 0000000000..080eb49c4e --- /dev/null +++ b/files/it/web/api/document/writeln/index.html @@ -0,0 +1,34 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +

{{ ApiRef("DOM") }}

+ +

Scrive una stringa di testo seguita da un carattere di accapo nel documento.

+ +

Sintassi

+ +
document.writeln(riga);
+
+ +

Parametri

+ + + +

Esempio

+ +
document.writeln("<p>inserisci una password:</p>");
+
+ +

Note

+ +

document.writeln è uguale a document.write, in più aggiunge una nuova riga.

+ +
Nota: document.writeln (come document.write) non funziona nei documenti XHTML (restituisce un errore "Operation is not supported" (Operazione non supportata) (NS_ERROR_DOM_NOT_SUPPORTED_ERR) sulla console degli errori). Questo può capitare per esempio aprendo un file locale con estensione .xhtml o qualsiasi documento da un server che abbia MIME type application/xhtml+xml. Altre informazioni sono disponibili nelle W3C XHTML FAQ.
+ +

Specifiche

+ +

writeln

diff --git a/files/it/web/api/document_object_model/index.html b/files/it/web/api/document_object_model/index.html new file mode 100644 index 0000000000..c1877f3642 --- /dev/null +++ b/files/it/web/api/document_object_model/index.html @@ -0,0 +1,435 @@ +--- +title: Document Object Model (DOM) +slug: Web/API/Document_Object_Model +tags: + - API + - DOM + - DOM Reference + - Intermediate + - Reference +translation_of: Web/API/Document_Object_Model +--- +
{{DefaultAPISidebar("DOM")}}
+ +

Il Document Object Model (DOM) rappresenta una pagina web come un documento con un albero logico di oggetti.

+ +

Ogni ramo dell'albero termina in un nodo, e ogni nodo contiene oggetti. Il modello DOM collega le pagine web agli script o ai linguaggi di programmazione. Usualmente significa usare JavaScript, anche se modellare documenti HTML, SVG o XML come oggetti non è parte del linguaggio JavaScript.

+ +

I metodi del DOM permettono un accesso programmatico all'albero; tramite i metodi e le proprietà del DOM è possibile modificare la struttura del documento stesso, lo stile e/o il contenuto.

+ +

I nodi possono avere degli eventi aggangiati ad essi e quando un evento viene scatenato, l'handler dell'evento viene eseguito.

+ +

E' disponibile una introduzione al DOM.

+ +

Interfacce DOM

+ +
+ +
+ +

Interfacce DOM obsolete {{obsolete_inline}}

+ +

The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still not very clear whether some may be reintroduced or not, but for the time being they have to be considered as obsolete and should be avoided:

+ +
+ +
+ +

HTML interfaces

+ +

A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.

+ +

An HTMLDocument object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}}. Eventually, {{domxref("Selection")}} is done on the document.

+ +

HTML element interfaces

+ +
+ +
+ +

Other interfaces

+ +
+ +
+ +

Obsolete HTML interfaces {{obsolete_inline}}

+ +
+ +
+ +

SVG interfaces

+ +

SVG element interfaces

+ +
+ +
+ +

SVG data type interfaces

+ +

Here are the DOM API for data types used in the definitions of SVG properties and attributes.

+ +
+

Note: Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

+
+ +

Static type

+ +
+ +
+ +

Animated type

+ +
+ +
+ + + +
+ +
+ +

Other SVG interfaces

+ +
+ +
+ +

See also

+ + diff --git a/files/it/web/api/document_object_model/introduzione/index.html b/files/it/web/api/document_object_model/introduzione/index.html new file mode 100644 index 0000000000..328caa0c5c --- /dev/null +++ b/files/it/web/api/document_object_model/introduzione/index.html @@ -0,0 +1,257 @@ +--- +title: Introduzione al DOM +slug: Web/API/Document_Object_Model/Introduzione +tags: + - Beginner + - DOM + - Guida + - HTML DOM + - Introduzione + - Principianti + - Tutorial +translation_of: Web/API/Document_Object_Model/Introduction +--- +

Il Document Object Model (DOM) è la rappresentazione degli oggetti che comprendono la struttura e il contenuto di un documento sul web. In questa guida, introdurremo brevemente il DOM. Vedremo come il DOM rappresenta un documento {{Glossary("HTML")}} o {{Glossary("XML")}} in memoria e come puoi usare le APIs per creare contenuti web e applicazioni.

+ +

Che cos'è il DOM?

+ +

Il Document Object Model (DOM) è una interfaccia di programmazione per documenti HTML e XML. Rappresenta la pagina in modo che i programmi possano modificare la struttura, lo stile e il contenuto del documento. Il DOM rappresenta il documento come nodi e oggetti. In questo modo, i linguaggi di programmazione possono connettersi alla pagina.

+ +

La pagina web è un documento. Questo documento può essere visualizzato nella finestra del browser o come sorgente HTML. Ma è lo stesso documento in entrambi i casi. Il Document Obkect Model (DOM) rappresenta come entrambi i documenti possono essere manipolati. Il DOM è una rappresentazione ad oggetti della pagina web, che può essere modificata con linguaggi di scripting come JavaScript.

+ +

Gli standard W3C DOM e WHATWG DOM sono implementati nei più moderni browsers. Molti browsers estendono lo standard, pertanto è necessario prestare attenzione quando li si utilizza sul Web in cui è possibile accedere ai documenti da vari browser con DOM diversi.

+ +

Per esempio, lo standard DOM specifica che il metodo getElementsByTagName usato qui sotto, dovrebbe ritornare una lista di tutti gli elementi <p> nel documento.

+ +
const paragrafi = document.getElementsByTagName("p");
+// paragrafi[0] è il primo <p> elemento
+// paragrafi[1] è il secondo <p> elemento, etc.
+alert(paragrafi[0].nodeName);
+
+ +

Tutte le proprietà, metodi ed eventi disponibili per la manipolazione e la creazione di pagine web sono organizzate in oggetti (per esempio, l'oggetto document che rappresenta il documento stesso, l'oggetto table che implementa la speciale interfaccia DOM {{domxref("HTMLTableElement")}} per accedere alle tabelle HTML, e così via). Questa documentazione fornisce una documentazione oggetto per oggetto al DOM.

+ +

Il DOM moderno è costruito utilizzando APIs multiple che lavorano insieme. Il DOM principale definisce gli oggetti che descrivono, fondamentalmente, un documento e gli oggetti al suo interno. Questo viene ampliato come richiesto da altre API che aggiungono nuove funzionalità e capacità al DOM. Ad esempio, l'HTML DOM API aggiunge il supporto per la rappresentazione di documenti HTML nel DOM principale.

+ +

DOM e JavaScript

+ +

Il breve esempio qui sotto, come quasi tutti gli esempi in questo riferimento, è {{glossary("JavaScript")}}. Che significa che è scrittp in JavaScript ma usa il DOM per accedere al documenti ed ai suoi elementi. Il DOM non è un linguaggio di programmazione, ma senza di esso, il linguaggio JavaScript non potrebbe avere nessun modello o conoscenza sulla pagina web HTML o XML e le loro componenti (ad es. elementi). Ogni elemento nel documento - il documento nel suo insieme, la testata, le tabelle all'interno del documento, le intestazioni delle tabelle, il testo all'interno della cella della tabella - è parte del document object model per quel documento, che può essere accessibile e manipolato usanto il DOM e linguaggi di scripting come Java.

+ +

Agli inizi, JavaScript e il DOM 

+ +

All'inizio, JavaScript e DOM erano strettamente intrecciati, ma alla fine si sono evoluti in entità separate. Il contenuto della pagina è memorizzato nel DOM e può essere consultato e manipolato tramite JavaScript, in modo da poter scrivere questa equazione approssimativa:

+ +

API = DOM + JavaScript

+ +

Il DOM è stato progettato per essere indipendente da qualsiasi particolare linguaggio di programmazione, rendendo la rappresentazione strutturale del documento disponibile da un'unica API coerente. Sebbene ci concentriamo esclusivamente su JavaScript in questa documentazione di riferimento, le implementazioni del DOM possono essere costruite per qualsiasi linguaggio, come dimostra questo esempio di Python:

+ +
# Esempio DOM in Python
+import xml.dom.minidom as m
+doc = m.parse(r"C:\Projects\Py\chap1.xml")
+doc.nodeName # DOM property of document object
+p_list = doc.getElementsByTagName("para")
+
+ +

Per ulteriori informazioni su quali tecnologie sono coinvolte nella scrittura di JavaScript sul Web, vedere JavaScript technologies overview.

+ +

Accedere al DOM

+ +

Tu non devi fare niente di speciale per avere accesso al DOM. Browser differenti hanno differenti implementazione del DOM, e le loro implementazioni variano in base alla conformazione dello standard DOM (il soggetto che tenta di 

+ +

Non devi fare nulla di speciale per iniziare a utilizzare il DOM. Browser diversi hanno implementazioni diverse del DOM e queste implementazioni presentano vari gradi di conformità allo standard DOM effettivo (un argomento che cerchiamo di evitare in questa documentazione), ma ogni browser Web utilizza alcuni modelli di oggetti per rendere accessibili le pagine Web tramite JavaScript .

+ +

Quando crei uno script, indipendentemente dal fatto che sia in linea in un elemento <script> o incluso nella pagina Web mediante un'istruzione di caricamento degli script, puoi immediatamente iniziare a utilizzare l'API {{domxref ("document")}} o {{domxref("Window", "window")}} per manipolare il documento stesso o per ottenere i figli di quel documento, che sono i vari elementi nella pagina web. La tua programmazione DOM potrebbe essere qualcosa di semplice come la seguente, che visualizza un messaggio di avviso utilizzando la funzione {{domxref("window.alert", "alert()")}} dalla funzione {{domxref("Window", "window")}} oppure può utilizzare metodi DOM più sofisticati per creare effettivamente nuovi contenuti, come nell'esempio più lungo di seguito.

+ +
<body onload="window.alert('Benvenuto nella mia pagina web!');">
+
+ +

Un altro esempio. Questa funzione crea un nuovo elemento H1, gli aggiunge del testo (all'elemento) e, infine, aggiunge l'H1 all'albero di questo documento.

+ +
<html>
+  <head>
+    <script>
+       // esegui questa funzione quando la pagina è stata caricata
+       window.onload = function() {
+
+         // crea un paio di elementi in una pagina HTML altrimenti vuota
+         const heading = document.createElement("h1");
+         const heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+
+ +

Tipi di dati fondamentali

+ +

Questo riferimento cerca di descrivere i vari oggetti e tipi in termini semplici. Tuttavia, ci sono diversi tipi di dati che vengono trasmessi all'API di cui dovresti essere a conoscenza.

+ +
+

Nota: poiché la stragrande maggioranza del codice che utilizza il DOM ruota attorno alla manipolazione di documenti HTML, è comune fare riferimento ai nodi nel DOM come elementi anche se, a rigor di termini, non tutti i nodi sono un elemento.

+
+ +

La tabella seguente descrive brevemente questi tipi di dati.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipi di dati (Interfaccia)Descrizione
{{domxref("Document")}} +

Quando un membro restituisce un oggetto di tipo documento (ad esempio, la proprietà ownerDocument di un elemento restituisce il document a cui appartiene), questo oggetto è l'oggetto del documento radice stesso. Il capitolo DOM document Reference descrive l'oggetto del documento.

+
{{domxref("Node")}}Ogni oggetto situato all'interno di un documento è un nodo di qualche tipo. In un documento HTML, un oggetto può essere un nodo elemento ma anche un nodo testo o nodo attributo.
{{domxref("Element")}}Il tipo element è basado sul node. Si riferisce a un elemento o un nodo di tipo element restituito da un membro dell'API DOM. Anziché dire, ad esempio, che il metodo{{domxref("document.createElement()")}} restituisce un riferimento a un oggetto a un node, diciamo solo che questo metodo restituisce l'element che è stato appena creato nel DOM. Gli oggetti element implementano l'interfaccia DOM Element e anche l'interfaccia Node più basilare, entrambe incluse in questo riferimento. In un documento HTML, gli elementi sono ulteriormente migliorati dall'interfaccia {{domxref("HTMLElement")}} dell'API DOM HTML e da altre interfacce che descrivono le capacità di tipi specifici di elementi (ad esempio {{domxref("HTMLTableElement")}} per {{HTMLElement("table")}} elements).
{{domxref("NodeList")}}Una nodeList è un array di elementi, simili al tipo ritornanto dal metodo.{{domxref("document.getElementsByTagName()")}}. Gli elementi nel nodeList sono accessibili, da indice, tramite due opzioni: +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ Questi due sono equivalenti. Nel primo, item() è un singolo metodo dell'oggetto nodeList. Quest'ultimo utilizza la tipica sintassi dell'array per recuperare il secondo elemento nell'elenco.
{{domxref("Attribute")}}Quando un attribute viene restituito da un membro (ad es. con il metodo createAttribute()), si ha un riferimento a un oggetto che espone un'interfaccia speciale (sebbene piccola) per gli attributi. Gli attributi sono nodi nel DOM proprio come gli elementi, anche se raramente li puoi usare come tali.
{{domxref("NamedNodeMap")}}Un namedNodeMap è simile a un array ma è possibile accedere agli elementi in base al nome o all'indice, sebbene quest'ultimo caso sia solo una comodità per l'enumerazione, poiché non sono in un ordine particolare nell'elenco. Un namedNodeMap ha un metodo item() per questo scopo e puoi anche aggiungere e rimuovere elementi da una namedNodeMap.
+ +

Ci sono anche alcune considerazioni terminologiche comuni da tenere a mente. È comune fare riferimento a qualsiasi nodo {{domxref ("Attribute")}} semplicemente come un attribute, ad esempio, e fare riferimento a un array di nodi DOM come nodeList. Troverai questi termini e altri da introdurre e utilizzare in tutta la documentazione.

+ +

interfaccia DOM

+ +

Questa guida riguarda gli oggetti e le cose reali che puoi usare per manipolare la gerarchia DOM. Ci sono molti punti in cui capire come questi lavori possono essere fonte di confusione. Ad esempio, l'oggetto che rappresenta l'elemento del modulo HTML ottiene la sua proprietà name dall'interfaccia HTMLFormElement ma la sua proprietà className dall'interfaccia HTMLElement. In entrambi i casi, la proprietà desiderata è semplicemente nell'oggetto modulo.
+
+ Ma la relazione tra gli oggetti e le interfacce che implementano nel DOM può essere confusa, e quindi questa sezione tenta di dire qualcosa sulle interfacce effettive nella specifica DOM e su come sono rese disponibili.

+ +

Interfacce ed oggetti

+ +

Molti oggetti prendono in prestito da diverse interfacce. L'oggetto tabella, ad esempio, implementa un'interfaccia specializzata {{domxref("HTMLTableElement")}}, che include metodi come createCaption e insertRow. Ma poiché è anche un elemento HTML, la table implementa l'interfaccia Element descritta nel capitolo DOM {{domxref ("Element")}}. E infine, poiché un elemento HTML è anche, per quanto riguarda il DOM, un nodo nella struttura ad albero dei nodi che compongono il modello a oggetti per una pagina HTML o XML, l'oggetto table implementa anche l'interfaccia Node di base, da quale Element deriva.

+ +

Quando si ottiene un riferimento a un oggetto table, come nell'esempio seguente, si utilizzano abitualmente tutte e tre queste interfacce in modo intercambiabile sull'oggetto, forse senza saperlo.

+ +
const table = document.getElementById("table");
+const tableAttrs = table.attributes; // Node/Element interface
+for (let i = 0; i < tableAttrs.length; i++) {
+  // HTMLTableElement interface: border attribute
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// HTMLTableElement interface: summary attribute
+table.summary = "note: increased border";
+
+ +

Principali interfacce nel DOM

+ +

Questa sezione elenca alcune delle interfacce più comunemente utilizzate nel DOM. L'idea non è di descrivere cosa fanno queste API qui, ma di darti un'idea del tipo di metodi e proprietà che vedrai molto spesso mentre usi il DOM. Queste API comuni sono usate negli esempi più lunghi nel capitolo DOM Examples alla fine di questo libro.

+ +

Gli oggetti document e window sono gli oggetti le cui interfacce si utilizzano generalmente più spesso nella programmazione DOM. In termini semplici, l'oggetto window rappresenta qualcosa di simile al browser e l'oggetto document è la radice del documento stesso. L'Element eredita dall'interfaccia del Node generico e insieme queste due interfacce forniscono molti dei metodi e delle proprietà che usi sui singoli elementi. Questi elementi possono anche avere interfacce specifiche per gestire il tipo di dati contenuti in tali elementi, come nell'esempio dell'oggetto tabella nella sezione precedente.

+ +

Di seguito è riportato un breve elenco di API comuni negli script di pagine Web e XML che utilizzano DOM.

+ + + +

Test dell'API DOM

+ +

Questo documento fornisce esempi per ogni interfaccia che è possibile utilizzare nel proprio sviluppo Web. In alcuni casi, gli esempi sono pagine HTML complete, con l'accesso DOM in un elemento <script>, l'interfaccia (ad es. Pulsanti) necessaria per accendere lo script in un modulo e gli elementi HTML su cui opera il DOM elencati come bene. In questo caso, puoi tagliare e incollare l'esempio in un nuovo documento HTML, salvarlo ed eseguire l'esempio dal browser.

+ +

Ci sono alcuni casi, tuttavia, quando gli esempi sono più concisi. Per eseguire esempi che dimostrano solo la relazione di base dell'interfaccia con gli elementi HTML, è possibile impostare una pagina di prova in cui è possibile accedere facilmente alle interfacce dagli script. La seguente pagina Web molto semplice fornisce un elemento <script> nell'intestazione in cui è possibile inserire funzioni che testano l'interfaccia, alcuni elementi HTML con attributi che è possibile recuperare, impostare o altrimenti manipolare e l'interfaccia utente Web necessaria per chiama quelle funzioni dal browser.

+ +

Puoi utilizzare questa pagina di prova o crearne una simile per testare le interfacce DOM che ti interessano e vedere come funzionano sulla piattaforma del browser. È possibile aggiornare il contenuto della funzione test() secondo necessità, creare più pulsanti o aggiungere elementi se necessario.

+ +
<html>
+<head>
+  <title>DOM Tests</title>
+  <script>
+    function setBodyAttr(attr, value) {
+      if (document.body) document.body[attr] = value;
+      else throw new Error("no support");
+    }
+  </script>
+</head>
+<body>
+  <div style="margin: .5in; height: 400px;">
+    <p><b><tt>text</tt></b></p>
+    <form>
+      <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+        <option value="black">black</option>
+        <option value="red">red</option>
+      </select>
+      <p><b><tt>bgColor</tt></b></p>
+      <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+        <option value="white">white</option>
+        <option value="lightgrey">gray</option>
+      </select>
+      <p><b><tt>link</tt></b></p>
+      <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+        <option value="blue">blue</option>
+        <option value="green">green</option>
+      </select>
+      <small>
+        <a href="http://some.website.tld/page.html" id="sample">
+          (sample link)
+        </a>
+      </small><br />
+      <input type="button" value="version" onclick="ver()" />
+    </form>
+  </div>
+</body>
+</html>
+
+ +

Per testare molte interfacce in una singola pagina —ad esempio una "suite" di proprietà che influisce sui colori di una pagina Web— è possibile creare una pagina di test simile con un'intera console di pulsanti, campi di testo e altri elementi HTML. La schermata seguente ti dà un'idea di come le interfacce possono essere raggruppate per il test.

+ +
+
Figure 0.1 Esempio DOM Test Page
+Image:DOM_Ref_Introduction_to_the_DOM.gif
+ +

In questo esempio, i menu drop-down, aggiornano dinamicamente tali aspetti accessibili della pagina Web come il colore di sfondo (bgColor), il colore dei collegamenti ipertestuali (aLink) e il colore del testo (text). Tuttavia, progettate le vostre pagine di test e testare le interfacce mentre le implementate è una parte importante dell'apprendimento dell'uso efficace del DOM.

+ + + + + +
{{DefaultAPISidebar("DOM")}}
diff --git a/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..7e82547d5d --- /dev/null +++ b/files/it/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,46 @@ +--- +title: Individuazione degli elementi DOM mediante selettori +slug: Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +

L'API dei selettori fornisce metodi che consentono di recuperare in modo rapido e semplice i nodi {{domxref("Element")}} dal DOM confrontando una serie di selettori. Questo è molto più rapido rispetto alle tecniche passate, in cui era necessario, ad esempio, utilizzare un loop nel codice JavaScript per individuare gli elementi specifici che dovevi trovare.

+ +

L'interfaccia NodeSelector

+ +

Questa specifica aggiunge due nuovi metodi a qualsiasi oggetto che implementa le interfacce {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}}:

+ +
+
querySelector
+
Restituisce il primo nodo {{domxref("Element")}} corrispondente nella sottostruttura del nodo. Se non viene trovato alcun nodo corrispondente, viene restituito null.
+
querySelectorAll
+
Restituisce una {{domxref("NodeList")}} contenente tutti i nodi Element corrispondenti all'interno della sottostruttura del nodo o una NodeList vuota se non vengono trovate corrispondenze.
+
+ +
Note: La {{domxref("NodeList")}} restituita da {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} non è dinamica, il che significa che le modifiche nel DOM non si riflettono nella collezione. Questo è diverso dagli altri metodi di DOM querying che restituiscono gli elenchi dei nodi dinamici.
+ +

È possibile trovare esempi e dettagli leggendo la documentazione per i metodi {{domxref("Element.querySelector()")}} e {{domxref("Element.querySelectorAll()")}}, nonché nell'articolo Code snippets for querySelector.

+ +

Selettori

+ +

I metodi di selezione accettano uno o più selettori separati da virgola per determinare quale elemento o elementi devono essere restituiti. Ad esempio, per selezionare tutti gli elementi paragrafo (p)  in un documento la cui classe CSS è warning o note, è possibile effettuare le seguenti operazioni:

+ +
var special = document.querySelectorAll("p.warning, p.note");
+ +

Puoi anche effettuare una query per ID. Per esempio:

+ +
var el = document.querySelector("#main, #basic, #exclamation");
+ +

Dopo aver eseguito il codice sopra, el contiene il primo elemento nel documento il cui ID è uno di main, basic, o exclamation.

+ +

Puoi usare qualsiasi selettore CSS con i metodi querySelector() e querySelectorAll().

+ +

Vedi anche

+ + diff --git a/files/it/web/api/domapplicationsregistry/getinstalled/index.html b/files/it/web/api/domapplicationsregistry/getinstalled/index.html new file mode 100644 index 0000000000..24657e5900 --- /dev/null +++ b/files/it/web/api/domapplicationsregistry/getinstalled/index.html @@ -0,0 +1,49 @@ +--- +title: DOMApplicationsRegistry.getInstalled() +slug: Web/API/DOMApplicationsRegistry/getInstalled +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/getInstalled +--- +

 

+ +

 

+ +

{{ ApiRef("Apps") }}

+ +

{{ non-standard_header() }}

+ +

Summary

+ +

Get a list of all installed apps from this origin. For example, if you call this on the Firefox Marketplace, you will get the list of apps installed by the Firefox Marketplace.

+ +
+

Note: Installable open web apps used to have a "single app per origin" security policy, but this was lifted as of Firefox 34/Firefox OS 2.1 (read this FAQ entry for more information). If you still need to support older versions, consider hosting your apps at separate origins; one strategy is to create different subdomains for your apps.

+
+ +

Syntax

+ +
var request = window.navigator.mozApps.getInstalled();
+
+ +

Errors

+ +

The string ERROR can be returned in DOMRequest.error.

+ +

Example

+ +
var request = window.navigator.mozApps.getInstalled();
+request.onerror = function(e) {
+  alert("Error calling getInstalled: " + request.error.name);
+};
+request.onsuccess = function(e) {
+  alert("Success, number of apps: " + request.result.length);
+  var appsRecord = request.result;
+};
+ +

Callers are expected to set the onsuccess and onerror callback properties of the returned object, as shown in this example. If the call is successful an array of App objects is returned in the result property of the returned object. In the example this is request.result.

+ + + + diff --git a/files/it/web/api/domapplicationsregistry/index.html b/files/it/web/api/domapplicationsregistry/index.html new file mode 100644 index 0000000000..4effc6546e --- /dev/null +++ b/files/it/web/api/domapplicationsregistry/index.html @@ -0,0 +1,89 @@ +--- +title: DOMApplicationsRegistry +slug: Web/API/DOMApplicationsRegistry +tags: + - API + - Apps + - Apps API + - NeedsTranslation + - Non-standard + - TopicStub +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry +--- +

{{ ApiRef("Apps") }}

+ +

{{ non-standard_header() }}

+ +

Provides support for installing, managing, and controlling Open Web apps in a browser. Currently implemented as {{ domxref('window.navigator.mozApps') }}.

+ +

Property

+ +
+
{{domxref("DOMApplicationsRegistry.mgmt")}}
+
A mgmt object that exposes functions that let dashboards manage and launch apps on a user's behalf.
+
+ +

Methods

+ +
+
{{ domxref("DOMApplicationsRegistry.checkInstalled()") }}
+
Checks whether an app has already been installed, taking its manifest as parameter.
+
{{ domxref("DOMApplicationsRegistry.install()") }}
+
Triggers the installation of an app. During the installation process, the app is validated and the user is prompted to approve the installation.
+
{{ domxref("DOMApplicationsRegistry.getSelf()") }}
+
Returns an object that contains an {{ domxref('app') }} object for the app.
+
{{ domxref("DOMApplicationsRegistry.getInstalled()") }}
+
Gets a list of all installed apps.
+
+ +

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/it/web/api/domstring/index.html b/files/it/web/api/domstring/index.html new file mode 100644 index 0000000000..625d5762d3 --- /dev/null +++ b/files/it/web/api/domstring/index.html @@ -0,0 +1,56 @@ +--- +title: DOMString +slug: Web/API/DOMString +tags: + - API + - DOM + - Referenza + - String +translation_of: Web/API/DOMString +--- +
{{APIRef("DOM")}}
+ +

DOMString è una stringa UTF-16. Poiché JavaScript utilizza già tali stringhe, DOMString viene mappato direttamente su {{jsxref("String")}}.

+ +

Passare {{jsxref("null")}} ad un metodo o parametro che accetta una DOMString tipicamente si trasforma in "null".

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}Riformulazione della definizione per rimuovere casi di bordo strani.
{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Vedi anche

+ + diff --git a/files/it/web/api/domtokenlist/index.html b/files/it/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..dab0967959 --- /dev/null +++ b/files/it/web/api/domtokenlist/index.html @@ -0,0 +1,115 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +tags: + - API + - DOM + - DOMTokenList + - Interfaccia + - Referenza +translation_of: Web/API/DOMTokenList +--- +
{{APIRef("DOM")}}
+ +

L'interfaccia DOMTokenList rappresenta un insieme di token separati dallo spazio. Tale insieme viene restituito da {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}}, {{domxref("HTMLAreaElement.relList")}}, {{domxref("HTMLIframeElement.sandbox")}}, o {{domxref("HTMLOutputElement.htmlFor")}}. Viene indicizzato a partire da 0 come con gli JavaScript {{jsxref("Array")}} oggetti. DOMTokenList è sempre case-sensitive.

+ +

Proprietà

+ +
+
{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
+
È un integer che rappresenta il numero di oggetti memorizzati nell'oggetto.
+
{{domxref("DOMTokenList.value")}}
+
Il valore della lista come una {{domxref("DOMString")}}.
+
+ +

Metodi

+ +
+
{{domxref("DOMTokenList.item()")}}
+
Restituisce un elemento nell'elenco per il suo indice (restituisce undefined se il numero è maggiore o uguale alla lunghezza dell'elenco).
+
{{domxref("DOMTokenList.contains()")}}
+
Restituisce true se la lista contiene il token dato, altrimenti false.
+
{{domxref("DOMTokenList.add()")}}
+
Aggiunge il token indicato alla lista.
+
{{domxref("DOMTokenList.remove()")}}
+
Rimuove il token specificato dall'elenco.
+
{{domxref("DOMTokenList.replace()")}}
+
Sostituisce un token esistente con un nuovo token.
+
{{domxref("DOMTokenList.supports()")}}
+
Restituisce true se un determinato token si trova nei token supportati dell'attributo associato.
+
{{domxref("DOMTokenList.toggle()")}}
+
Rimuove un determinato token dall'elenco e restituisce false. Se il token non esiste viene aggiunto e la funzione restituisce true.
+
{{domxref("DOMTokenList.entries()")}}
+
Restituisce un {{jsxref("Iteration_protocols","iterator")}} consentendoti di passare attraverso tutte le coppie chiave/valore contenute in questo oggetto.
+
{{domxref("DOMTokenList.forEach()")}}
+
Esegue una funzione fornita una volta per elemento DOMTokenList.
+
{{domxref("DOMTokenList.keys()")}}
+
Restituisce un {{jsxref("Iteration_protocols", "iterator")}} consentendo di esaminare tutte le chiavi delle coppie chiave/valore contenute in questo oggetto.
+
{{domxref("DOMTokenList.values()")}}
+
Restituisce un {{jsxref("Iteration_protocols", "iterator")}} consentendo di esaminare tutti i valori delle coppie chiave/valore contenute in questo oggetto.
+
+ +

Esempi

+ +

Nel seguente semplice esempio, recuperiamo l'elenco di classi impostato su un elemento {{htmlelement("p")}} come una DOMTokenList usando {{domxref("Element.classList")}}, aggiungi una classe usando {{domxref("DOMTokenList.add()")}}, quindi aggiorna il {{domxref("Node.textContent")}} di <p> per uguagliare DOMTokenList.

+ +

Innanzitutto, l'HTML:

+ +
<p class="a b c"></p>
+ +

Ora JavaScript:

+ +
var para = document.querySelector("p");
+var classes = para.classList;
+para.classList.add("d");
+para.textContent = 'paragraph classList is "' + classes + '"';
+ +

L'output è simile a questo:

+ +

{{ EmbedLiveSample('Esempi', '100%', 60) }}

+ +

Taglio di spazi bianchi e rimozione di duplicati

+ +

I metodi che modificano DOMTokenList (come {{domxref("DOMTokenList.add()")}}) tagliano automaticamente gli spazi bianchi in eccesso e rimuovono i valori duplicati dall'elenco. Per esempio:

+ +
<span class="    d   d e f"></span>
+ +
var span = document.querySelector("span");
+var classes = span.classList;
+span.classList.add("x");
+span.textContent = 'span classList is "' + classes + '"';
+ +

L'output è simile a questo:

+ +

{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}

+ +

Specificazioni

+ + + + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}Initial definition
+ +

Compatibilità con i browser

+ + + +

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

+ +

Guarda anche

+ + diff --git a/files/it/web/api/domtokenlist/item/index.html b/files/it/web/api/domtokenlist/item/index.html new file mode 100644 index 0000000000..c81eedcbc9 --- /dev/null +++ b/files/it/web/api/domtokenlist/item/index.html @@ -0,0 +1,67 @@ +--- +title: DOMTokenList.item() +slug: Web/API/DOMTokenList/item +translation_of: Web/API/DOMTokenList/item +--- +

{{APIRef("DOM")}}

+ +

Il metodo item() dell'interfaccia {{domxref("DOMTokenList")}} restituisce un elemento nell'elenco per il suo indice.

+ +

Sintassi

+ +
tokenList.item(index);
+ +

Parametri

+ +
+
index
+
Una {{domxref("DOMString")}} che rappresenta l'indice dell'elemento che si desidera restituire.
+
+ +

Valore di ritorno

+ +

Una {{domxref("DOMString")}} che rappresenta l'elemento restituito. Restituisce undefined se il numero è maggiore o uguale alla lunghezza della lista.

+ +

Esempi

+ +

Nel seguente esempio recuperiamo l'elenco di classi impostate su un elemento {{htmlelement("span")}} come DOMTokenList usando {{domxref("Element.classList")}}. Quindi recuperiamo l'ultimo elemento nell'elenco usando item(length-1) e lo scriviamo nel <span>'s {{domxref("Node.textContent")}}.

+ +

Innanzitutto, l'HTML:

+ +
<span class="a b c"></span>
+ +

Ora JavaScript:

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+var item = classes.item(classes.length-1);
+span.textContent = item;
+ +

L'output è simile a questo:

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}{{Spec2('DOM WHATWG')}}Definizione iniziale
+ +

Compatibilità con i Browser

+ +
+ + +

{{Compat("api.DOMTokenList.item")}}

+
diff --git a/files/it/web/api/element/addeventlistener/index.html b/files/it/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..6608e69bd3 --- /dev/null +++ b/files/it/web/api/element/addeventlistener/index.html @@ -0,0 +1,694 @@ +--- +title: EventTarget.addEventListener() +slug: Web/API/Element/addEventListener +tags: + - API + - DOM + - EventTarget + - Gestori di Eventi + - JavaScript + - Referenza + - Ricevere Eventi + - Rilevare Eventi + - addEventListener + - attachEvent + - eventi + - metodo + - mselementresize +translation_of: Web/API/EventTarget/addEventListener +--- +
{{APIRef("DOM Events")}}
+ +

Il metodo {{domxref("EventTarget")}} addEventListener() imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene consegnato all'elemento di destinazione. I target comuni sono {{domxref("Element")}}, {{domxref("Document")}}, e {{domxref("Window")}}, ma la destinazione può essere qualsiasi oggetto che supporti eventi (come XMLHttpRequest).

+ +

addEventListener() funziona aggiungendo una funzione o un oggetto che implementa {{domxref("EventListener")}} all'elenco di listener di eventi per il tipo di evento specificato sul {{domxref("EventTarget")}} sul quale è chiamato.

+ +

Sintassi

+ +
target.addEventListener(type, listener[, options]);
+target.addEventListener(type, listener[, useCapture]);
+target.addEventListener(type, listener[, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla only
+ +

Parametri

+ +
+
type
+
Una stringa sensibile al maiuscolo/minuscolo che rappresenta il tipo di evento da assegnare.
+
listener
+
L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia {{domxref("Event")}}) quando si verifica un evento del tipo specificato. Questo deve essere un oggetto che implementa l'interfaccia {{domxref("EventListener")}}, o una funzione. Vedi {{anch("Il callback del listener di eventi")}} per i dettagli sul callback stesso.
+
options {{optional_inline}}
+
Un oggetto opzioni che specifica le caratteristiche del listener di eventi. Le opzioni disponibili sono: +
    +
  • capture: Un {{jsxref("Boolean")}} che indica che eventi di questo tipo verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sotto di esso nell'albero del DOM.
    • +
  • once: Un {{jsxref("Boolean")}} che indica che il listener dovrebbe essere invocato al massimo una volta dopo essere stato aggiunto. Se ritorna true, il listener verrebbe automaticamente rimosso quando invocato.
    • +
  • passive: Un {{jsxref("Boolean")}} che, se true, indica che la funzione specificata da listener non chiamerà mai {{domxref("Event.preventDefault", "preventDefault()")}}. Se un listener passivo chiama preventDefault(), l'user agent non farà altro che generare un avviso nella console. Vedi {{anch("Miglioramento delle prestazioni di scorrimento con i listeners passivi")}} per saperne di più.
    • +
  • {{non-standard_inline}} mozSystemGroup: Un {{jsxref("Boolean")}} che indica che l'ascoltatore deve essere aggiunto al gruppo di sistema. Disponibile solo nel codice in esecuzione in XBL o nel {{glossary("chrome")}} del browser Firefox.
    • +
+
+
useCapture {{optional_inline}}
+
Un {{jsxref("Boolean")}} che indica se eventi di questo tipo verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sotto di esso nell'albero del DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non innescheranno un ascoltatore designato ad usare il capturing. Il bubbling e la cattura degli eventi sono due modi di propagare gli eventi che si verificano in un elemento che è annidato in un altro elemento, quando entrambi gli elementi hanno registrato un handle per quell'evento. La modalità di propagazione dell'evento determina l'ordine in cui gli elementi ricevono l'evento. Vedi DOM Level 3 Events e JavaScript Event order per una spiegazione dettagliata. Se non specificato, useCapture di default è false.
+
+
Note: Per gli ascoltatori di eventi collegati al target dell'evento, l'evento si trova nella fase target, piuttosto che nelle fasi di cattura e bubbling. Gli eventi nella fase di destinazione attiveranno tutti gli ascoltatori di un elemento nell'ordine in cui sono stati registrati, indipendentemente dal parametro useCapture.
+ +
Note: useCapture non è sempre stato opzionale. Idealmente, dovresti includerlo per la massima compatibilità con i browser.
+
+
wantsUntrusted {{Non-standard_inline}}
+
Un parametro specifico per Firefox (Gecko). Se è true, il listener riceve eventi sintetici inviati dal contenuto web (il valore predefinito è false per il browser {{glossary("chrome")}} e true per le normali pagine Web). Questo parametro è utile per il codice trovato nei componenti aggiuntivi e anche per il browser stesso.
+
+ +

Valore di ritorno

+ +

undefined

+ +

Note di utilizzo

+ +

Il callback del listener di eventi

+ +

Il listener di eventi può essere specificato come funzione di callback o come oggetto che implementa {{domxref("EventListener")}}, il cui metodo {{domxref("EventListener.handleEvent", "handleEvent()")}} funge da funzione di callback.

+ +

La stessa funzione di callback ha gli stessi parametri e il valore di ritorno del metodo handleEvent() cioè, il callback accetta un singolo parametro: un oggetto basato su {{domxref("Event")}} che descrive l'evento che si è verificato e non restituisce nulla.

+ +

Ad esempio, un callback del gestore di eventi che può essere utilizzato per gestire entrambi gli eventi {{event("fullscreenchange")}} e {{event("fullscreenerror")}} potrebbe avere il seguente aspetto:

+ +
function eventHandler(event) {
+  if (event.type == 'fullscreenchange') {
+    /* gestire un interruttore a schermo intero */
+  } else /* fullscreenerror */ {
+    /* gestire un errore di commutazione a schermo intero */
+  }
+}
+ +

Rilevamento sicuro del supporto opzionale

+ +

Nelle versioni precedenti della specifica DOM, il terzo parametro di addEventListener() era un valore booleano che indicava se utilizzare o meno l'acquisizione. Nel corso del tempo, è diventato chiaro che erano necessarie più opzioni. Piuttosto che aggiungere altri parametri alla funzione (complicando enormemente le cose quando si tratta di valori opzionali), il terzo parametro è stato modificato in un oggetto che può contenere varie proprietà che definiscono i valori delle opzioni per configurare il processo di rimozione del listener di eventi.

+ +

Poiché i browser più vecchi (così come alcuni browser non troppo vecchi) presuppongono ancora che il terzo parametro sia un booleano, è necessario creare il codice per gestire questo scenario in modo intelligente. Puoi farlo utilizzando il rilevamento delle funzioni per ciascuna delle opzioni che ti interessano.

+ +

Ad esempio, se si desidera verificare l'opzione passive:

+ +
var passiveSupported = false;
+
+try {
+  var options = {
+    get passive() { // Questa funzione verrà chiamata quando il browser
+                    //     tenta di accedere alla proprietà passiva.
+      passiveSupported = true;
+    }
+  };
+
+  window.addEventListener("test", options, options);
+  window.removeEventListener("test", options, options);
+} catch(err) {
+  passiveSupported = false;
+}
+
+ +

Questo crea un oggetto options con una funzione getter per la proprietà passive; il getter imposta una flag, passiveSupported, è true se viene chiamato. Ciò significa che se il browser controlla il valore della proprietà passive sull'oggetto options, passiveSupported sarà impostato su true; altrimenti rimarrà false. Chiamiamo quindi addEventListener() per impostare un gestore di eventi falsi, specificando tali opzioni, in modo che le opzioni vengano controllate se il browser riconosce un oggetto come terzo parametro. Quindi, chiamiamo removeEventListener() per pulire dopo noi stessi. (Nota che handleEvent() viene ignorato sui listener di eventi che non vengono chiamati.)

+ +

Puoi verificare se un'opzione è supportata in questo modo. Basta aggiungere un getter per quella opzione usando il codice simile a quello mostrato sopra.

+ +

Quindi, quando vuoi creare un listener di eventi effettivo che utilizza le opzioni in questione, puoi fare qualcosa di simile a questo:

+ +
someElement.addEventListener("mouseup", handleMouseUp, passiveSupported
+                               ? { passive: true } : false);
+ +

Qui stiamo aggiungendo un listener per l'evento {{event("mouseup")}} sull'elemento someElement. Per il terzo parametro, se passiveSupported è true, stiamo specificando un oggetto options con passive impostato su true; altrimenti, sappiamo che dobbiamo passare un booleano e passiamo false come valore del parametro useCapture.

+ +

Se preferisci, puoi usare una libreria di terze parti come Modernizr o Detect It per fare questo test per te.

+ +

È possibile ottenere ulteriori informazioni dall'articolo su EventListenerOptions dal gruppo di Web Incubator Community.

+ +

Esempi

+ +

Aggiungere un semplice listener

+ +

Questo esempio dimostra come utilizzare addEventListener() per controllare i click del mouse su un elemento.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  if (t2.firstChild.nodeValue == "three") {
+    t2.firstChild.nodeValue = "two";
+  } else {
+    t2.firstChild.nodeValue = "three";
+  }
+}
+
+// Aggiungere listener di eventi alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", modifyText, false);
+
+ +

In questo codice, modifyText() è un listener per gli eventi click registrati usando addEventListener(). Un click in qualsiasi punto della tabella esegue il gestore ed esegue modifyText().

+ +

Risultato

+ +

{{EmbedLiveSample('Aggiungere_un_semplice_listener')}}

+ +

Listener di eventi con funzione anonima

+ +

Qui, daremo un'occhiata a come utilizzare una funzione anonima per passare parametri nel listener di eventi.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Funzione per aggiungere listener alla tabella
+var el = document.getElementById("outside");
+el.addEventListener("click", function(){modifyText("four")}, false);
+
+ +

Nota che il listener è una funzione anonima che incapsula codice che è quindi, a sua volta, in grado di inviare parametri alla funzione modifyText(), che è responsabile per rispondere effettivamente all'evento.

+ +

Risultato

+ +

{{EmbedLiveSample('Listener_di_eventi_con_funzione_anonima')}}

+ +

Listener di eventi con una funzione a freccia

+ +

Questo esempio dimostra un semplice listener di eventi implementato utilizzando la notazione della funzione a freccia.

+ +

HTML

+ +
<table id="outside">
+    <tr><td id="t1">one</td></tr>
+    <tr><td id="t2">two</td></tr>
+</table>
+ +

JavaScript

+ +
// Funzione per modificare il contenuto di t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Aggiungere un listener alla tabella con una funzione a freccia
+var el = document.getElementById("outside");
+el.addEventListener("click", () => { modifyText("four"); }, false);
+
+ +

Risultato

+ +

{{EmbedLiveSample('Listener_di_eventi_con_una_funzione_a_freccia')}}

+ +

Si noti che, mentre le funzioni anonime e le frecce sono simili, hanno diversi collegamenti this. Mentre le funzioni anonime (e tutte le funzioni JavaScript tradizionali) creano i propri collegamenti this, le funzioni a freccia ereditano il vincolo this della funzione di contenimento.

+ +

Ciò significa che le variabili e le costanti disponibili per la funzione di contenimento sono disponibili anche per il gestore di eventi quando si utilizza una funzione di freccia.

+ +

Esempio di utilizzo delle opzioni

+ +

HTML

+ +
<div class="outer">
+    outer, once & none-once
+    <div class="middle" target="_blank">
+        middle, capture & none-capture
+        <a class="inner1" href="https://www.mozilla.org" target="_blank">
+            inner1, passive & preventDefault(which is not allowed)
+        </a>
+        <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
+            inner2, none-passive & preventDefault(not open new page)
+        </a>
+    </div>
+</div>
+
+ +

CSS

+ +
    .outer, .middle, .inner1, .inner2 {
+        display:block;
+        width:520px;
+        padding:15px;
+        margin:15px;
+        text-decoration:none;
+    }
+    .outer{
+        border:1px solid red;
+        color:red;
+    }
+    .middle{
+        border:1px solid green;
+        color:green;
+        width:460px;
+    }
+    .inner1, .inner2{
+        border:1px solid purple;
+        color:purple;
+        width:400px;
+    }
+
+ +

JavaScript

+ +
    let outer  = document.getElementsByClassName('outer') [0];
+    let middle = document.getElementsByClassName('middle')[0];
+    let inner1 = document.getElementsByClassName('inner1')[0];
+    let inner2 = document.getElementsByClassName('inner2')[0];
+
+    let capture = {
+        capture : true
+    };
+    let noneCapture = {
+        capture : false
+    };
+    let once = {
+        once : true
+    };
+    let noneOnce = {
+        once : false
+    };
+    let passive = {
+        passive : true
+    };
+    let nonePassive = {
+        passive : false
+    };
+
+
+    outer.addEventListener('click', onceHandler, once);
+    outer.addEventListener('click', noneOnceHandler, noneOnce);
+    middle.addEventListener('click', captureHandler, capture);
+    middle.addEventListener('click', noneCaptureHandler, noneCapture);
+    inner1.addEventListener('click', passiveHandler, passive);
+    inner2.addEventListener('click', nonePassiveHandler, nonePassive);
+
+    function onceHandler(event) {
+        alert('outer, once');
+    }
+    function noneOnceHandler(event) {
+        alert('outer, none-once, default');
+    }
+    function captureHandler(event) {
+        //event.stopImmediatePropagation();
+        alert('middle, capture');
+    }
+    function noneCaptureHandler(event) {
+        alert('middle, none-capture, default');
+    }
+    function passiveHandler(event) {
+        // Unable to preventDefault inside passive event listener invocation.
+        event.preventDefault();
+        alert('inner1, passive, open new page');
+    }
+    function nonePassiveHandler(event) {
+        event.preventDefault();
+        //event.stopPropagation();
+        alert('inner2, none-passive, default, not open new page');
+    }
+
+ +

Risultato

+ +

Fai click rispettivamente sui contenitori esterni, centrali e interni per vedere come funzionano le opzioni.

+ +

{{ EmbedLiveSample('Esempio_di_utilizzo_delle_opzioni', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}

+ +

Prima di utilizzare un particolare valore nell'oggetto options è una buona idea assicurarsi che il browser dell'utente lo supporti, poiché si tratta di un'aggiunta che non tutti i browser hanno supportato storicamente. Vedi {{anch("Rilevamento sicuro del supporto opzionale")}} per i dettagli.

+ +

Altre note

+ +

Perchè usare addEventListener?

+ +

addEventListener() è il modo per registrare un listener di eventi come specificato nel DOM W3C. I benefici sono i seguenti:

+ + + +

Il modo alternativo, più vecchio per registrare i listener, è descritto di seguito.

+ +

Aggiunta di un listener durante la spedizione dell'evento

+ +

Se un {{domxref("EventListener")}} viene aggiunto ad un {{domxref("EventTarget")}} mentre sta elaborando un evento, quell'evento non attiva il listener. Tuttavia, lo stesso listener può essere attivato durante una fase successiva del flusso di eventi, come la fase di bubbling.

+ +

Più listeners identici

+ +

Se più EventListener indentici sono registrati sullo stesso EventTarget con gli stessi parametri, le istanze duplicate vengono scartate. Non causano l'EventListener da chiamare due volte e non devono essere rimossi manualmente con il metodo {{domxref("EventTarget.removeEventListener", "removeEventListener()")}}. Nota tuttavia che quando si utilizza una funzione anonima come gestore, tali listener NON saranno identici poiché le funzioni anonime non sono identiche anche se definite utilizzando il codice sorgente invariato SAME chiamato semplicemente ripetutamente, anche se in un ciclo. Tuttavia, definire ripetutamente la stessa funzione denominata in questi casi può essere più problematico. (vedi Problemi di memoria di seguito.)

+ +

Il valore di this all'interno del gestore

+ +

È spesso preferibile fare riferimento all'elemento su cui è stato attivato il gestore eventi, ad esempio quando si utilizza un gestore generico per un insieme di elementi simili.

+ +

Se si collega un handler ad un elemento utilizzando addEventListener(), il valore di this all'interno del gestore è un riferimento all'elemento. È uguale al valore della proprietà currentTarget dell'argomento evento che viene passato al gestore.

+ +
my_element.addEventListener('click', function (e) {
+  console.log(this.className)           // registra il className di my_element
+  console.log(e.currentTarget === this) // ritorna `true`
+})
+
+ +

Come promemoria, le funzioni freccia non hanno il loro this contesto.

+ +
my_element.addEventListener('click', (e) => {
+  console.log(this.className)           // WARNING: `this` is not `my_element`
+  console.log(e.currentTarget === this) // logs `false`
+})
+ +

Se un gestore di eventi (ad esempio, {{domxref("Element.onclick", "onclick")}}) è specificato su un elemento nel codice sorgente HTML, il codice JavaScript nel valore dell'attributo viene effettivamente racchiuso in una funzione di gestore che associa il valore di this in modo coerente con addEventListener(); un'occorrenza di this all'interno del codice rappresenta un riferimento all'elemento.

+ +
<table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' -->
+  ...
+</table>
+
+ +

Si noti che il valore di this all'interno di una funzione, chiamato dal codice nel valore dell'attributo, si comporta come per regole standard. Questo è mostrato nel seguente esempio:

+ +
<script>
+  function logID() { console.log(this.id); }
+</script>
+<table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object -->
+  ...
+</table>
+
+ +

Il valore di this all'interno di logID() è un riferimento all'oggetto globale {{domxref("Window")}} (o undefined nel caso della strict mode).

+ +

Specificare this usando bind()

+ +

Il metodo Function.prototype.bind() consente di specificare il valore che dovrebbe essere usato come this per tutte le chiamate a una determinata funzione. Ciò ti consente di bypassare facilmente i problemi in cui non è chiaro quale sarà this a seconda del contesto in cui è stata chiamata la tua funzione. Nota, tuttavia, che è necessario mantenere un riferimento per l'ascoltatore in modo da poterlo rimuovere in seguito.

+ +

Questo è un esempio con e senza bind():

+ +
var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as |this| is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as |this| is bound to newly created object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+var s = new Something(document.body);
+
+ +

Un'altra soluzione sta utilizzando una funzione speciale chiamata handleEvent() per catturare qualsiasi evento:

+ +
var Something = function(element) {
+  // |this| is a newly created object
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is bound to newly created object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are |this|, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listeners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+var s = new Something(document.body);
+
+ +

Un altro modo di gestire il riferimento a this è passare ad EventListener una funzione che chiama il metodo dell'oggetto che contiene i campi a cui è necessario accedere:

+ +
class SomeClass {
+
+  constructor() {
+    this.name = 'Something Good';
+  }
+
+  register() {
+    var that = this;
+    window.addEventListener('keydown', function(e) {return that.someMethod(e);});
+  }
+
+  someMethod(e) {
+    console.log(this.name);
+    switch(e.keyCode) {
+      case 5:
+        // some code here...
+        break;
+      case 6:
+        // some code here...
+        break;
+    }
+  }
+
+}
+
+var myObject = new SomeClass();
+myObject.register();
+ +

Legacy Internet Explorer e attachEvent

+ +

Nelle versioni di Internet Explorer precedenti a IE 9, devi usare {{domxref("EventTarget.attachEvent", "attachEvent()")}}, piuttosto che lo standard addEventListener(). Per IE, modifichiamo l'esempio precedente per:

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

C'è un inconveniente di attachEvent(): il valore di this sarà un riferimento all'oggetto window, invece dell'elemento su cui è stato chiamato.

+ +

Il metodo attachEvent() potrebbe essere associato all'evento onresize per rilevare quando alcuni elementi di una pagina Web sono stati ridimensionati. L'evento proprietario mselementresize quando abbinato al metodo addEventListener di registrazione dei gestori di eventi, fornisce funzionalità simili a onresize, attivando quando alcuni elementi HTML vengono ridimensionati.

+ +

Compatibilità

+ +

Puoi lavorare attorno a addEventListener(), removeEventListener(), {{domxref("Event.preventDefault()")}}, e {{domxref("Event.stopPropagation()")}} non supportati da Internet Explorer 8 di usando il seguente codice all'inizio del tuo script. Il codice supporta l'uso di handleEvent() e anche l'evento {{event("DOMContentLoaded")}}.

+ +
+

Note: useCapture non è supportato, in quanto IE 8 non ha alcun metodo alternativo. Il seguente codice aggiunge solo il supporto per IE 8. Questo polyfill di IE 8 funziona solo in modalità standard: è richiesta una dichiarazione doctype.

+
+ +
(function() {
+  if (!Event.prototype.preventDefault) {
+    Event.prototype.preventDefault=function() {
+      this.returnValue=false;
+    };
+  }
+  if (!Event.prototype.stopPropagation) {
+    Event.prototype.stopPropagation=function() {
+      this.cancelBubble=true;
+    };
+  }
+  if (!Element.prototype.addEventListener) {
+    var eventListeners=[];
+
+    var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var self=this;
+      var wrapper=function(e) {
+        e.target=e.srcElement;
+        e.currentTarget=self;
+        if (typeof listener.handleEvent != 'undefined') {
+          listener.handleEvent(e);
+        } else {
+          listener.call(self,e);
+        }
+      };
+      if (type=="DOMContentLoaded") {
+        var wrapper2=function(e) {
+          if (document.readyState=="complete") {
+            wrapper(e);
+          }
+        };
+        document.attachEvent("onreadystatechange",wrapper2);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
+
+        if (document.readyState=="complete") {
+          var e=new Event();
+          e.srcElement=window;
+          wrapper2(e);
+        }
+      } else {
+        this.attachEvent("on"+type,wrapper);
+        eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
+      }
+    };
+    var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
+      var counter=0;
+      while (counter<eventListeners.length) {
+        var eventListener=eventListeners[counter];
+        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
+          if (type=="DOMContentLoaded") {
+            this.detachEvent("onreadystatechange",eventListener.wrapper);
+          } else {
+            this.detachEvent("on"+type,eventListener.wrapper);
+          }
+          eventListeners.splice(counter, 1);
+          break;
+        }
+        ++counter;
+      }
+    };
+    Element.prototype.addEventListener=addEventListener;
+    Element.prototype.removeEventListener=removeEventListener;
+    if (HTMLDocument) {
+      HTMLDocument.prototype.addEventListener=addEventListener;
+      HTMLDocument.prototype.removeEventListener=removeEventListener;
+    }
+    if (Window) {
+      Window.prototype.addEventListener=addEventListener;
+      Window.prototype.removeEventListener=removeEventListener;
+    }
+  }
+})();
+ +

Il modo più antico per registrare i listeners

+ +

addEventListener() è stato introdotto con la specifica DOM 2 Prima di allora, gli ascoltatori di eventi sono stati registrati come segue:

+ +
// Passando un riferimento alla funzione - non aggiungere "()" dopo di esso, che chiamerebbe la funzione!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+  // ... function logic ...
+};
+
+ +

Questo metodo sostituisce il listener dell'evento click esistente sull'elemento se ce n'è uno. Altri eventi e gestori di eventi associati come blur (onblur) e keypress (onkeypress) si comportano in modo simile.

+ +

Poiché era essenzialmente parte di {{glossary("DOM", "DOM 0")}}, questa tecnica per aggiungere listener di eventi è ampiamente supportata e non richiede uno speciale codice cross-browser. Viene normalmente utilizzato per registrare dinamicamente i listener di eventi a meno che non siano necessarie le funzionalità extra di addEventListener().

+ +

Problemi di memoria

+ +
var els = document.getElementsByTagName('*');
+
+
+// Case 1
+for(var i = 0; i < els.length; i++) {
+  els[i].addEventListener("click", function(e){/* do something */}, false);
+}
+
+
+// Case 2
+function processEvent(e) {
+  /* do something */
+}
+
+for(var i = 0; i < els.length; i++){
+  els[i].addEventListener("click", processEvent, false);
+}
+
+ +

Nel primo caso sopra, viene creata una nuova funzione (anonima) di gestione con ogni iterazione del ciclo. Nel secondo caso, la stessa funzione dichiarata in precedenza viene utilizzata come gestore di eventi, il che si traduce in un minore consumo di memoria poiché è stata creata una sola funzione di gestore. Inoltre, nel primo caso, non è possibile chiamare {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} perché non viene mantenuto alcun riferimento alla funzione anonima (o qui, non mantenuto a nessuna delle più funzioni anonime che il loop potrebbe creare.) Nel secondo caso, è possibile eseguire myElement.removeEventListener("click", processEvent, false) perchè processEvent è il riferimento alla funzione.

+ +

In realtà, per quanto riguarda il consumo di memoria, la mancanza di mantenere un riferimento alla funzione non è il vero problema; piuttosto è la mancanza di mantenere un riferimento di funzione STATICO. In entrambi i casi di problemi di seguito, viene mantenuto un riferimento alla funzione, ma poiché viene ridefinito a ogni iterazione, non è statico. Nel terzo caso, il riferimento alla funzione anonima viene riassegnato ad ogni iterazione. Nel quarto caso, l'intera definizione di funzione è invariata, ma viene ancora ripetutamente definita come se fosse nuova (a meno che non fosse [[promoted]] dal compilatore) e quindi non sia statica. Pertanto, sebbene sembrino essere semplicemente [[Multiple identifier event listers]], in entrambi i casi ogni iterazione creerà invece un nuovo listener con il proprio riferimento univoco alla funzione del gestore. Tuttavia, poiché la definizione della funzione stessa non cambia, la STESSA funzione può ancora essere chiamata per ogni listener duplicato (specialmente se il codice viene ottimizzato).

+ +

Anche in entrambi i casi, poiché il riferimento alla funzione è stato mantenuto ma ripetutamente ridefinito con ogni aggiunta, l'istruzione remove di sopra può ancora rimuovere un listener, ma ora solo l'ultimo aggiunto.

+ +
// Solo a scopo illustrativo: nota che "MISTAKE" di [j] per [i] causando così l'associazione di tutti gli eventi desiderati allo STESSO elemento
+
+// Case 3
+for (var i = 0, j = 0 ; i < els.length ; i++) {
+  /* do lots of stuff with */
+  els[j].addEventListener("click", processEvent = function(e){/* do something */}, false);
+}
+
+// Case 4
+for (var i = 0, j = 0 ; i < els.length ; i++) {
+  /* do lots of stuff with j */
+  function processEvent(e){/* do something */};
+  els[j].addEventListener("click", processEvent, false);
+}
+ +

Miglioramento delle prestazioni di scorrimento con i listeners passivi

+ +

Secondo la specifica, il valore predefinito per l'opzione passive è sempre falso. Tuttavia, questo introduce il potenziale per gli ascoltatori di eventi che gestiscono determinati eventi di tocco (tra gli altri) per bloccare il thread principale del browser mentre sta tentando di gestire lo scrolling, con conseguente enorme riduzione delle prestazioni durante la gestione dello scorrimento.

+ +

Per evitare questo problema, alcuni browser (in particolare, Chrome e Firefox) hanno modificato il valore predefinito dell'opzione passive in true per gli eventi {{event("touchstart")}} e {{event("touchmove")}} sui nodi a livello del documento {{domxref("Window")}}, {{domxref("Document")}}, e {{domxref("Document.body")}}. Questo impedisce al listener di eventi di essere chiamato, quindi non può bloccare il rendering della pagina mentre l'utente sta scorrendo.

+ +
+

Note: Vedi la tabella di compatibilità qui sotto se hai bisogno di sapere quali browser (e / o quali versioni di quei browser) implementano questo comportamento alterato.

+
+ +

Puoi sovrascrivere questo comportamento impostando esplicitamente il valore di passive a false, come mostrato qui:

+ +
/* Feature detection */
+var passiveIfSupported = false;
+
+try {
+  window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: true }; } }));
+} catch(err) {}
+
+window.addEventListener('scroll', function(event) {
+  /* do something */
+  // can't use event.preventDefault();
+}, passiveIfSupported );
+
+ +

Nei browser meno recenti che non supportano il parametro options su addEventListener(), il tentativo di utilizzarlo impedisce l'utilizzo dell'argomento useCapture senza utilizzare correttamente il rilevamento delle funzionalità.

+ +

Non è necessario preoccuparsi del valore di passive per l'evento di base {{event("scroll")}}. Poiché non può essere annullato, i listener di eventi non possono comunque bloccare il rendering della pagina.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}{{Spec2("DOM2 Events")}}Definizione inziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.EventTarget.addEventListener", 3)}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/attributes/index.html b/files/it/web/api/element/attributes/index.html new file mode 100644 index 0000000000..5bd14f3e4b --- /dev/null +++ b/files/it/web/api/element/attributes/index.html @@ -0,0 +1,120 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +tags: + - API + - Attributi + - DOM + - Element + - Proprietà + - Referenza +translation_of: Web/API/Element/attributes +--- +

{{ APIRef("DOM") }}

+ +

La proprietà Element.attributes restituisce una raccolta in tempo reale di tutti i nodi di attributo registrati nel nodo specificato. È una {{domxref("NamedNodeMap")}}, non un Array, quindi non ha metodi predefiniti degli {{jsxref("Array")}} e non ha i metodi {{domxref("Attr")}} dei nodi che possono differire tra i browser. Per essere più specifici, attributes è una coppia chiave/valore di stringhe che rappresenta qualsiasi informazione riguardante quell'attributo.

+ +

Sintassi

+ +
var attr = element.attributes;
+
+ +

Esempio

+ +

Esempi basilari

+ +
// Ottenere il primo elemento <p> nel documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

Enumerazione degli attributi degli elementi

+ +

L'indicizzazione numerica è utile per passare attraverso tutti gli attributi di un elemento.
+ L'esempio seguente esegue i nodi dell'attributo per l'elemento nel documento con id "paragraph" e stampa il valore di ciascun attributo.

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // First, let's verify that the paragraph has some attributes
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" style="color: green;">Sample Paragraph</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.attributes")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/childnodes/index.html b/files/it/web/api/element/childnodes/index.html new file mode 100644 index 0000000000..f56bcc4380 --- /dev/null +++ b/files/it/web/api/element/childnodes/index.html @@ -0,0 +1,99 @@ +--- +title: Node.childNodes +slug: Web/API/Element/childNodes +translation_of: Web/API/Node/childNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

La proprietà di sola lettura Node.childNodes restituisce una {{domxref("NodeList")}} dinamica di {{domxref("Node","nodi")}} figli dell'elemento dato in cui il primo nodo figlio viene assegnato all'indice 0.

+ +

Sintassi

+ +
var nodeList = elementNodeReference.childNodes;
+
+ +

Esempi

+ +

Utilizzo semplice

+ +
// parg è un riferimento a un elemento <p>
+
+// Innanzitutto controlliamo che l'elemento abbia dei nodi figli
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i < children.length; i++) {
+    // fare qualcosa con ogni bambino da children[i]
+    // NOTA: l'elenco è dinamico, l'aggiunta o la rimozione di bambini modificherà l'elenco
+  }
+}
+ +

Rimuovi tutti i bambini da un nodo

+ +
// Questo è un modo per rimuovere tutti i bambini da una
+// finestra di nodo è un riferimento ad un oggetto
+
+while (box.firstChild) {
+    //L'elenco è DINAMICO, quindi indicizzerà nuovamente ogni chiamata
+    box.removeChild(box.firstChild);
+}
+ +

Appunti

+ +

Gli elementi nella raccolta di nodi sono oggetti e non stringhe. Per ottenere dati da oggetti nodo, usa le loro proprietà (ad esempio elementNodeReference.childNodes[1].nodeName per ottenere il nome, ecc.).

+ +

L'oggetto document ha 2 figli: la dichiarazione Doctype e l'elemento root, in genere documentElement. (Nei documenti (X)HTML questo è l'elemento HTML.)

+ +

childNodes include tutti i nodi figli, inclusi nodi non-elemento come nodi di testo e commenti. Per ottenere una raccolta di soli elementi, usa {{domxref("ParentNode.children")}}.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.childNodes")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/classlist/index.html b/files/it/web/api/element/classlist/index.html new file mode 100644 index 0000000000..3d86fa8400 --- /dev/null +++ b/files/it/web/api/element/classlist/index.html @@ -0,0 +1,288 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +tags: + - API + - DOM + - Element + - Proprietà + - Read-only + - Referenza +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

La proprietà Element.classList di sola lettura restituisce una raccolta {{domxref("DOMTokenList")}} dinamica delle classi dell'elemento.

+ +

L'utilizzo di classList è una comoda alternativa all'accesso all'elenco di classi di un elemento come stringa delimitata dallo spazio tramite {{domxref("element.className")}}.

+ +

Sintassi

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

elementClasses è una {{domxref("DOMTokenList")}} che rappresenta l'attributo class di elementNodeReference. Se l'attributo class non è stato impostato o è vuoto elementClasses.length ritorna 0. element.classList è di sola lettura, sebbene sia possibile modificarlo utilizzando i metodi add() e remove().

+ +

Metodi

+ +
+
add( String [, String [, ...]] )
+
Aggiunge le classi specificate. Se queste classi esistono già nell'attributo class dell'elemento, vengono ignorate.
+
remove( String [, String [, ...]] )
+
+

Rimuove le classi specificate.

+ +
Nota: La rimozione di una classe inesistente NON genera un errore.
+
+
item( Number )
+
Restituisce il valore della classe per indice nella collezione.
+
toggle( String [, force] )
+
Quando è presente un solo argomento: aggiunge/rimuove il valore della classe; ad esempio, se la classe esiste, la rimuove e restituisce false, altrimenti, la aggiunge e restituisce true.
+
+ Quando è presente un secondo argomento: Se il secondo argomento restituisce true, aggiunge la classe specificata; se restituisce false, la rimuove.
+
contains( String )
+
Verifica se il valore di classe specificato esiste nell'attributo class dell'elemento.
+
replace( vecchiaClasse, nuovaClasse )
+
Sostituisce una classe esistente con una nuova classe.
+
+ +

Esempi

+ +
const div = document.createElement('div');
+div.className = 'foo';
+
+// il nostro stato iniziale: <div class="foo"></div>
+console.log(div.outerHTML);
+
+// usare l'API classList per rimuovere e aggiungere classi
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// <div class="anotherclass"></div>
+console.log(div.outerHTML);
+
+// se visible è impostato rimuovilo, altrimenti aggiungilo
+div.classList.toggle("visible");
+
+// aggiungi/rimuovi visible, a seconda del test condizionale, i meno di 10
+div.classList.toggle("visible", i < 10 );
+
+console.log(div.classList.contains("foo"));
+
+// aggiungere o rimuovere più classi
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// aggiungere o rimuovere più classi utilizzando la spread syntax
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// sostituire la classe "foo" con la classe "bar"
+div.classList.replace("foo", "bar");
+ +
+

Le versioni di Firefox precedenti alla 26 non implementano l'uso di diversi argomenti nei metodi add/remove/toggle. Vedi https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +
+
+ +

Polyfill

+ +

L'evento legacy onpropertychange può essere utilizzato per creare un mockup dinamico di classList dinamico grazie alla proprietà Element.prototype.className che attiva l'evento specificato una volta modificato.

+ +

Il seguente polyfill sia per classList che per DOMTokenList garantisce la piena conformità (copertura) per tutti i metodi e le proprietà standard di Element.prototype.classList per i browser IE10-IE11 oltre ad un comportamento quasi conforme per IE 6-9. Controlla:

+ +
// 1. String.prototype.trim polyfill
+if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
+(function(window){"use strict"; // prevent global namespace pollution
+if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
+var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) {
+  if (V === "") throw new DOMException(
+    "Failed to execute '" + O + "' on 'DOMTokenList': The token provided must not be empty." );
+  if((wsIndex=V.search(wsRE))!==-1) throw new DOMException("Failed to execute '"+O+"' on 'DOMTokenList': " +
+    "The token provided ('"+V[wsIndex]+"') contains HTML space characters, which are not valid in tokens.");
+}
+// 2. Implement the barebones DOMTokenList livelyness polyfill
+if (typeof DOMTokenList !== "function") (function(window){
+    var document = window.document, Object = window.Object, hasOwnProp = Object.prototype.hasOwnProperty;
+    var defineProperty = Object.defineProperty, allowTokenListConstruction = 0, skipPropChange = 0;
+    function DOMTokenList(){
+        if (!allowTokenListConstruction) throw TypeError("Illegal constructor"); // internally let it through
+    }
+    DOMTokenList.prototype.toString = DOMTokenList.prototype.toLocaleString = function(){return this.value};
+    DOMTokenList.prototype.add = function(){
+        a: for(var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v!==argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("add", val);
+            for (var i=0, Len=proto.length, resStr=val; i !== Len; ++i)
+                if (this[i] === val) continue a; else resStr += " " + this[i];
+            this[Len] = val, proto.length += 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    DOMTokenList.prototype.remove = function(){
+        for (var v=0, argLen=arguments.length,val="",ele=this[" uCL"],proto=ele[" uCLp"]; v !== argLen; ++v) {
+            val = arguments[v] + "", checkIfValidClassListEntry("remove", val);
+            for (var i=0, Len=proto.length, resStr="", is=0; i !== Len; ++i)
+                if(is){ this[i-1]=this[i] }else{ if(this[i] !== val){ resStr+=this[i]+" "; }else{ is=1; } }
+            if (!is) continue;
+            delete this[Len], proto.length -= 1, proto.value = resStr;
+        }
+        skipPropChange = 1, ele.className = proto.value, skipPropChange = 0;
+    };
+    window.DOMTokenList = DOMTokenList;
+    function whenPropChanges(){
+        var evt = window.event, prop = evt.propertyName;
+        if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) {
+            var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
+            var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
+            var oldLen = protoObjProto.length;
+            a: for(var cI = 0, cLen = protoObjProto.length = tokens.length, sub = 0; cI !== cLen; ++cI){
+                for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
+                resTokenList[cI-sub] = tokens[cI];
+            }
+            for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            if(prop !== "classList") return;
+            skipPropChange = 1, target.classList = resTokenList, target.className = strval;
+            skipPropChange = 0, resTokenList.length = tokens.length - sub;
+        }
+    }
+    function polyfillClassList(ele){
+        if (!ele || !("innerHTML" in ele)) throw TypeError("Illegal invocation");
+        ele.detachEvent( "onpropertychange", whenPropChanges ); // prevent duplicate handler infinite loop
+        allowTokenListConstruction = 1;
+        try{ function protoObj(){} protoObj.prototype = new DOMTokenList(); }
+        finally { allowTokenListConstruction = 0 }
+        var protoObjProto = protoObj.prototype, resTokenList = new protoObj();
+        a: for(var toks=ele.className.trim().split(wsRE), cI=0, cLen=toks.length, sub=0; cI !== cLen; ++cI){
+            for (var innerI=0; innerI !== cI; ++innerI) if (toks[innerI] === toks[cI]) { sub++; continue a; }
+            this[cI-sub] = toks[cI];
+        }
+        protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM
+            enumerable:   1, get: function(){return resTokenList},
+            configurable: 0, set: function(newVal){
+                skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
+                var toks = newVal.trim().split(wsRE), oldLen = protoObjProto.length;
+                a: for(var cI = 0, cLen = protoObjProto.length = toks.length, sub = 0; cI !== cLen; ++cI){
+                    for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
+                    resTokenList[cI-sub] = toks[cI];
+                }
+                for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            }
+        }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
+            enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
+        }); defineProperty(protoObjProto, " uCL", {
+            enumerable: 0, configurable: 0, writeable: 0, value: ele
+        }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
+        ele.attachEvent( "onpropertychange", whenPropChanges );
+    }
+    try { // Much faster & cleaner version for IE8 & IE9:
+        // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
+        window.Object.defineProperty(window.Element.prototype, "classList", {
+            enumerable: 1,   get: function(val){
+                                 if (!hasOwnProp.call(this, "classList")) polyfillClassList(this);
+                                 return this.classList;
+                             },
+            configurable: 0, set: function(val){this.className = val}
+        });
+    } catch(e) { // Less performant fallback for older browsers (IE 6-8):
+        window[" uCL"] = polyfillClassList;
+        // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
+        document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8
+        );
+    }
+})(window);
+// 3. Patch in unsupported methods in DOMTokenList
+(function(DOMTokenListProto, testClass){
+    if (!DOMTokenListProto.item) DOMTokenListProto.item = function(i){
+        function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
+    };
+    if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
+        if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        var oldValue = this.value;
+        return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/);
+    };
+    if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
+        DOMTokenListProto.replace = function(oldToken, newToken){
+            checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
+            var oldValue = this.value;
+            return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true));
+        };
+    if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
+        for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
+        return false;
+    };
+    if (!DOMTokenListProto.forEach) DOMTokenListProto.forEach = function(f){
+        if (arguments.length === 1) for (var i = 0, Len = this.length; i !== Len; ++i) f( this[i], i, this);
+        else for (var i=0,Len=this.length,tArg=arguments[1]; i !== Len; ++i) f.call(tArg, this[i], i, this);
+    };
+    if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: [nextIndex, that[nextIndex]], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: that[nextIndex], done: false} : {done: true};
+        }};
+    };
+    if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
+        var nextIndex = 0, that = this;
+        return {next: function() {
+            return nextIndex<that.length ? {value: nextIndex, done: false} : {done: true};
+        }};
+    };
+})(window.DOMTokenList.prototype, window.document.createElement("div").classList);
+})(window);
+
+ +

Avvertenze

+ +

Il polyfill ha funzionalità limitate. Al momento non è in grado di eseguire il polyfill fuori dagli elementi del documento (ad esempio elementi creati da document.createElement prima di essere appesi su un nodo padre) in IE6-7.

+ +

Tuttavia, dovrebbe funzionare bene in IE9. Una discrepanza maggiore tra la versione polyfilled di classList e le specifiche W3 è che per IE6-8, non esiste un modo per creare un oggetto immutabile (un oggetto le cui proprietà non possono essere modificate direttamente). In IE9, tuttavia, è possibile estendere il prototipo, congelando l'oggetto visibile e sovrascrivendo i metodi di proprietà native. Tuttavia, tali azioni non funzionerebbero in IE6-IE8 e, in IE9, rallenterebbero le prestazioni dell'intera pagina Web fino alla scansione di una lumaca, rendendo queste modifiche completamente impraticabili per questo polyfill.

+ +

Una nota minore è che in IE6-7, questo polyfill usa la proprietà window[" uCL"] sull'oggetto window per comunicare con le espressioni CSS, la proprietà css x-uCLp su tutti gli elementi e la proprietà element[" uCL"] su tutti gli elementi per consentire la raccolta di garbadge e migliorare le prestazioni. In tutti i browser polyfilled (IE6-9), una proprietà aggiuntiva element[" uCLp"] viene aggiunta all'elemento per garantire la prototipazione conforme agli standard e una proprietà DOMTokenList[" uCL"] viene aggiunta ad ogni oggetto element["classList"] per garantire che la DOMTokenList sia limitata al proprio elemento.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Definizione iniziale
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.classList")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/classname/index.html b/files/it/web/api/element/classname/index.html new file mode 100644 index 0000000000..ca463f5f75 --- /dev/null +++ b/files/it/web/api/element/classname/index.html @@ -0,0 +1,84 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - Proprietà + - Referenza +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

La proprietà className dell'interfaccia {{domxref("Element")}} ottiene e imposta il valore dell'attributo class dell'elemento specificato.

+ +

Sintassi

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Esempio

+ +
let el = document.getElementById('item');
+
+if (el.className === 'active'){
+  el.className = 'inactive';
+} else {
+  el.className = 'active';
+}
+ +

Appunti

+ +

Il nome className viene utilizzato per questa proprietà anziché class a causa di conflitti con la parola chiave "class" in molti linguaggi che vengono utilizzati per manipolare il DOM.

+ +

className può anche essere un'istanza di {{domxref("SVGAnimatedString")}} se element è un {{domxref("SVGElement")}}. È meglio ottenere/impostare className di un elemento usando {{domxref("Element.getAttribute")}} e {{domxref("Element.setAttribute")}} se si ha a che fare con elementi SVG. Tuttavia, tieni presente che {{domxref("Element.getAttribute")}} ritorna null anzichè "" se element ha un attributo class vuoto.

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+ +
+

class è un Attributo HTML, mentre className è una proprietà del DOM.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.className")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/clientheight/index.html b/files/it/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..167dd00ca3 --- /dev/null +++ b/files/it/web/api/element/clientheight/index.html @@ -0,0 +1,36 @@ +--- +title: element.clientHeight +slug: Web/API/Element/clientHeight +translation_of: Web/API/Element/clientHeight +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce l'altezza interna di un elemento in pixel, incluso il padding, ed esclusi il bordo, il margine e l'altezza della barra di scorrimento orizzontale.

+

clientHeight può essere calcolato come CSS height + CSS padding - altezza della barra di scorrimento orizzontale(se presente).

+

Sintassi e valori

+
var altezza = elemento.clientHeight;
+
+

altezza è un numero intero che rappresenta l'altezza in pixel di elemento.

+

clientHeight è di sola lettura.

+

Esempio

+
+
+

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
+

Image:clientHeight.png

+

Specifiche

+

Non fa parte di nessuna specifica W3C.

+

Note

+

clientHeight è una proprietà non standard, introdotta dal modello a oggetti di Internet Explorer.

+

Riferimenti

+ +

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

diff --git a/files/it/web/api/element/closest/index.html b/files/it/web/api/element/closest/index.html new file mode 100644 index 0000000000..cded9f95bb --- /dev/null +++ b/files/it/web/api/element/closest/index.html @@ -0,0 +1,147 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Element + - Method + - Reference +translation_of: Web/API/Element/closest +--- +

{{APIRef('Shadow DOM')}}

+ +
Il metodo closest() dell'interfaccia {{domxref("Element")}} restituisce l'antenato più vicino dell'elemento corrente (o l'elemento corrente stesso) che corrisponde ai selettori dati in un parametro. Se nessun elemento di questo tipo esiste, restituisce null.
+ +

Sintassi

+ +
var closestElement = element.closest(selectors);
+
+ +

Parametri

+ + + +

Valore del risultato

+ + + +

Eccezioni

+ + + +

Esempio

+ +

HTML

+ +
<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+ +

JavaScript

+ +
var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// returns the element with the id=div-02
+
+var r2 = el.closest("div div");
+// restituisce l'antenato più vicino che è un div in div, qui è div-03 stesso
+
+var r3 = el.closest("article > div");
+// restituisce l'antenato più vicino che è un div e ha un articolo genitore, qui è div-01
+
+var r4 = el.closest(":not(div)");
+// restituisce l'antenato più vicino che non è un div, qui è l'articolo più esterno
+ +

Polyfill

+ +

Per i browser che non supportano Element.closest(),  ma supportano il supporto per element.matches() (o un equivalente prefissato, ovvero IE9 +), esiste un polyfill:

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
+ +

Tuttavia, se davvero si richiede il supporto per IE 8, il seguente polyfill farà il lavoro molto lentamente, ma alla fine. Tuttavia, supporta solo i selettori CSS 2.1 in IE 8 e può causare gravi ritardi nei siti Web di produzione.

+ +
if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
+    return el;
+  };
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.closest")}}

+ +

Note di compatibilità

+ + +
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/firstchild/index.html b/files/it/web/api/element/firstchild/index.html new file mode 100644 index 0000000000..b5052f5dfe --- /dev/null +++ b/files/it/web/api/element/firstchild/index.html @@ -0,0 +1,90 @@ +--- +title: Node.firstChild +slug: Web/API/Element/firstChild +tags: + - API + - DOM + - Node + - Proprietà + - Referenza +translation_of: Web/API/Node/firstChild +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.firstChild restituisce il primo figlio del nodo nell'albero o null se il nodo non ha figli. Se il nodo è un Document, restituisce il primo nodo nell'elenco dei suoi figli diretti.

+ +

Sintassi

+ +
var childNode = node.firstChild;
+
+ +

Esempio

+ +

Questo esempio dimostra l'uso di firstChild e il modo in cui i nodi degli spazi bianchi potrebbero interferire con l'utilizzo di questa proprietà.

+ +
<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script>
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+</script>
+ +

In quanto sopra, la console console mostrerà '#text' perché viene inserito un nodo di testo per mantenere lo spazio bianco tra la fine dei tag di apertura <p> e <span>. Qualsiasi spazio bianco creerà un nodo #text da un singolo spazio a più spazi, ritorni, schede e così via.

+ +

Un altro nodo #text viene inserito tra i tag di chiusura </span> e </p>.

+ +

Se questo spazio viene rimosso dall'origine, i nodi #text non vengono inseriti e l'elemento span diventa il primo figlio del paragrafo.

+ +
<p id="para-01"><span>First span</span></p>
+
+<script>
+  var p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+</script>
+
+ +

Ora l'avviso mostrerà 'SPAN'.

+ +

Per evitare il problema con node.firstChild che restituisce i nodi #text o #comment, {{domxref("ParentNode.firstElementChild")}} può essere utilizzato per restituire solo il primo nodo elemento. Tuttavia, node.firstElementChild richiede uno shim per Internet Explorer 9 e versioni precedenti.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommentp
{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.firstChild")}}

diff --git a/files/it/web/api/element/getattribute/index.html b/files/it/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..e10427e5bd --- /dev/null +++ b/files/it/web/api/element/getattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +translation_of: Web/API/Element/getAttribute +--- +
{{APIRef("DOM")}}
+ +

getAttribute() restituisce il valore di un attributo specificato sull'elemento. Se l'attributo specificato non esiste, il valore restituito sarà null o "" (la stringa vuota); vedi {{Anch("Appunti")}} per maggiori dettagli.

+ +

Sintassi

+ +
var attributo = element.getAttribute(attributeName);
+
+ +

dove

+ + + +

Esempio

+ +
let div1 = document.getElementById('div1');
+let align = div1.getAttribute('align');
+
+alert(align); // Mostra il valore di "align" per l'elemento con id="div1"
+ +

Appunti

+ +

Quando viene chiamato su un elemento HTML in un DOM contrassegnato come un documento HTML, getAttribute() converte in minuscolo il suo argomento prima di procedere.

+ +

Essenzialmente tutti i browser Web (Firefox, Internet Explorer, versioni recenti di Opera, Safari, Konqueror e iCab, come elenco non esaustivo) restituiscono null quando l'attributo specificato non è presente sull'elemento specificato e questo è quello che l'attuale bozza della specifica DOM specifica. La vecchia specifica del DOM 3 Core, d'altra parte, dice che il valore di ritorno corretto in questo caso è in realtà la stringa vuota, e alcune implementazioni DOM implementano questo comportamento. L'implementazione di getAttribute in XUL (Gecko) segue effettivamente la specifica DOM 3 Core e restituisce una stringa vuota. Di conseguenza, dovresti usare {{domxref("element.hasAttribute()")}} per verificare l'esistenza di un attributo prima di chiamare getAttribute() se è possibile che l'attributo richiesto non esista sull'elemento specificato.

+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.getAttribute")}}

+
+ +

Specifiche

+ + diff --git a/files/it/web/api/element/getelementsbytagname/index.html b/files/it/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..9239135259 --- /dev/null +++ b/files/it/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,80 @@ +--- +title: Element.getElementsByTagName() +slug: Web/API/Element/getElementsByTagName +tags: + - API + - DOM + - Element + - Method + - Referenza +translation_of: Web/API/Element/getElementsByTagName +--- +
{{ APIRef("DOM") }}
+ +

Il metodo Element.getElementsByTagName() ritorna una {{domxref("HTMLCollection")}} dinamica di elementi con il tag name specificato. Vengono cercati tutti i discendenti dell'elemento specificato, ma non l'elemento stesso. L'elenco restituito è dinamico, il che significa che si aggiorna automaticamente con l'albero del DOM. Pertanto, non è necessario chiamare Element.getElementsByTagName() con lo stesso elemento e gli stessi argomenti ripetutamente se il DOM cambia tra le chiamate.

+ +

Quando viene chiamato su un elemento HTML in un documento HTML, getElementsByTagName converte in minuscolo l'argomento prima di cercarlo. Ciò non è desiderabile quando si cerca di abbinare elementi SVG camel-cased (come <linearGradient>) in un documento HTML. Invece, usa {{ domxref("Element.getElementsByTagNameNS()") }}, che preserva la conversione in minuscolo del nome del tag.

+ +

Element.getElementsByTagName è simile a {{domxref("Document.getElementsByTagName()")}}, tranne per il fatto che cerca solo elementi discendenti dell'elemento specificato.

+ +

Sintassi

+ +
elements = element.getElementsByTagName(tagName)
+ + + +

Esempio

+ +
// Controlla lo stato di ogni cella in una tabella
+const table = document.getElementById('forecast-table');
+const cells = table.getElementsByTagName('td');
+
+for (let cell of cells) {
+  let status = cell.getAttribute('data-status');
+  if (status === 'open') {
+    // Prendi i dati
+  }
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}{{Spec2('DOM WHATWG')}}Modificato il valore di ritorno da {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}
{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.getElementsByTagName")}}

diff --git a/files/it/web/api/element/hasattribute/index.html b/files/it/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..4cd6d2a9d2 --- /dev/null +++ b/files/it/web/api/element/hasattribute/index.html @@ -0,0 +1,75 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +translation_of: Web/API/Element/hasAttribute +--- +
{{APIRef("DOM")}}
+ +

Il metodo Element.hasAttribute() restituisce un valore booleano che indica se l'elemento specificato ha o meno l'attributo specificato.

+ +

Sintassi

+ +
var risultato = element.hasAttribute(name);
+
+ +
+
risultato
+
detiene il valore di ritorno true o false.
+
name
+
è una stringa che rappresenta il nome dell'attributo.
+
+ +

Esempio

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // fare qualcosa
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &&
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+
+ +

Appunti

+ +
{{DOMAttributeMethods}}
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}Da {{SpecName('DOM3 Core')}}, spostato da {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.hasAttribute")}}

diff --git a/files/it/web/api/element/hasattributes/index.html b/files/it/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..ca408ca96d --- /dev/null +++ b/files/it/web/api/element/hasattributes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Element/hasAttributes +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un valore booleano: true se l'elemento ha un qualunque numero di attributi, altrimenti false.

+

Sintassi

+

+ + bool + = element.hasAttributes()

+

Esempio

+
t1 = document.getElementById("tabella-dati");
+if (t1.hasAttributes()) {
+    // fai qualcosa con
+    // t1.attributes
+}
+
+

Specifiche

+

hasAttributes

+

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

diff --git a/files/it/web/api/element/index.html b/files/it/web/api/element/index.html new file mode 100644 index 0000000000..f518252bc7 --- /dev/null +++ b/files/it/web/api/element/index.html @@ -0,0 +1,475 @@ +--- +title: Element +slug: Web/API/Element +tags: + - API + - DOM + - Element + - Interface + - Referenza + - Referenza del DOM + - Web API +translation_of: Web/API/Element +--- +
{{APIRef("DOM")}}
+ +

Element è la classe base più generale da cui ereditano tutti gli oggetti in un {{DOMxRef("Document")}}. Ha solo metodi e proprietà comuni a tutti i tipi di elementi. Classi più specifiche ereditano da Element. Ad esempio, l'interfaccia {{DOMxRef("HTMLElement")}} è l'interfaccia di base per gli elementi HTML, mentre l'interfaccia {{DOMxRef("SVGElement")}} è la base per tutti gli elementi SVG. La maggior parte delle funzionalità è specificata più in basso nella gerarchia delle classi.

+ +

Le lingue al di fuori del regno della piattaforma Web, come XUL attraverso l'interfaccia XULElement, implementano anche  Element.

+ +

{{InheritanceDiagram}}

+ +

Proprietà

+ +

Eredita le proprietà dalla sua interfaccia genitore, {{DOMxRef("Node")}}, e per estensione l'interfaccia genitore, {{DOMxRef("EventTarget")}}. Implementa le proprietà di {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, e {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("Element.attributes")}} {{readOnlyInline}}
+
Restituisce un oggetto {{DOMxRef("NamedNodeMap")}} contenente gli attributi assegnati dell'elemento HTML corrispondente.
+
{{DOMxRef("Element.classList")}} {{readOnlyInline}}
+
Ritorna un oggetto {{DOMxRef("DOMTokenList")}} contenente la lista delle classi dell'elemento.
+
{{DOMxRef("Element.className")}}
+
È una {{DOMxRef("DOMString")}} che rappresenta la classe dell'elemento.
+
{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
+
Ritorna un {{jsxref("Number")}} che rappresenta l'altezza interna dell'elemento.
+
{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
+
Ritorna un {{jsxref("Number")}} che rappresenta la larghezza del bordo sinistro dell'elemento.
+
{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Number")}} che rappresenta la larghezza del bordo superiore dell'elemento.
+
{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
+
Restituisce un {{jsxref("Number")}} che rappresenta la larghezza interna dell'elemento.
+
{{DOMxRef("Element.computedName")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.
+
{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}
+
Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. 
+
{{DOMxRef("Element.id")}}
+
Is a {{DOMxRef("DOMString")}} representing the id of the element.
+
{{DOMxRef("Element.innerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.
+
{{DOMxRef("Element.localName")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.
+
{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
+
The namespace URI of the element, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}

+
+
+
{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}
+
Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{DOMxRef("Element.outerHTML")}}
+
Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
+
{{DOMxRef("Element.prefix")}} {{readOnlyInline}}
+
A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or null if no prefix is specified.
+
{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}
+
Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{DOMxRef("Element.scrollLeft")}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{DOMxRef("Element.scrollTop")}}
+
A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.
+
{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
+
Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.
+
{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
+
Returns the shadow root that is hosted by the element, regardless if its open or closed. Available only to WebExtensions.
+
{{DOMxRef("Element.slot")}} {{Experimental_Inline}}
+
Returns the name of the shadow DOM slot the element is inserted in.
+
{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.
+
{{DOMxRef("Element.tagName")}} {{readOnlyInline}}
+
Returns a {{jsxref("String")}} with the name of the tag for the given element.
+
{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}
+
Returns the {{DOMxRef("UndoManager")}} associated with the element.
+
{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +
+

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to Element.

+ +

This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.

+
+ +

Proprietà incluse da Slotable

+ +

L'interfaccia Element include la seguente proprietà, definita nel  mixin {{DOMxRef("Slotable")}}.

+ +
+
{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}
+
Restituisce un {{DOMxRef("HTMLSlotElement")}} che rappresenta lo {{htmlelement("slot")}} in cui è inserito il nodo.
+
+ +

Gestori di eventi

+ +
+
{{domxref("Element.onfullscreenchange")}}
+
Un gestore di eventi per l'evento {{event("fullscreenchange")}} che viene inviato quando l'elemento entra o esce dalla modalità a schermo intero. Questo può essere usato per guardare sia le transizioni attese con successo, ma anche per osservare cambiamenti inaspettati, come quando l'app è in background.
+
{{domxref("Element.onfullscreenerror")}}
+
Un gestore di eventi per l'evento {{event("fullscreenerror")}} che viene inviato quando si verifica un errore durante il tentativo di passare alla modalità a schermo intero.
+
+ +

Gestori di eventi obsoleti

+ +
+
{{DOMxRef("Element.onwheel")}}
+
Restituisce il codice di gestione degli eventi per l'evento {{Event("wheel")}}. Questo è ora implementato su {{DOMxRef("GlobalEventHandlers.onwheel", "GlobalEventHandlers")}}.
+
+ +

Metodi

+ +

Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, and {{DOMxRef("Animatable")}}.

+ +
+
{{DOMxRef("EventTarget.addEventListener()")}}
+
Registers an event handler to a specific event type on the element.
+
{{DOMxRef("Element.attachShadow()")}}
+
Attatches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
+
A shortcut method to create and run an animation on an element. Returns the created Animation object instance.
+
{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}
+
Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.
+
{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+
Creates a shadow DOM on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.
+
{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
+
Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.
+
{{DOMxRef("EventTarget.dispatchEvent()")}}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.
+
{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
+
Returns an array of Animation objects currently active on the element.
+
{{DOMxRef("Element.getAttribute()")}}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNames()")}}
+
Returns an array of attribute names from the current element.
+
{{DOMxRef("Element.getAttributeNS()")}}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.
+
{{DOMxRef("Element.getBoundingClientRect()")}}
+
Returns the size of an element and its position relative to the viewport.
+
{{DOMxRef("Element.getClientRects()")}}
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{DOMxRef("Element.getElementsByClassName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.
+
{{DOMxRef("Element.getElementsByTagName()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.
+
{{DOMxRef("Element.getElementsByTagNameNS()")}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{DOMxRef("Element.hasAttribute()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{DOMxRef("Element.hasAttributeNS()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{DOMxRef("Element.hasAttributes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.
+
{{DOMxRef("Element.hasPointerCapture()")}}
+
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.
+
{{DOMxRef("Element.insertAdjacentElement()")}}
+
Inserts a given element node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.insertAdjacentHTML()")}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{DOMxRef("Element.insertAdjacentText()")}}
+
Inserts a given text node at a given position relative to the element it is invoked upon.
+
{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{DOMxRef("Element.querySelector()")}}
+
Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.
+
{{DOMxRef("Element.querySelectorAll()")}}
+
Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.
+
{{DOMxRef("Element.releasePointerCapture()")}}
+
Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.
+
{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}
+
Removes the element from the children list of its parent.
+
{{DOMxRef("Element.removeAttribute()")}}
+
Removes the named attribute from the current node.
+
{{DOMxRef("Element.removeAttributeNS()")}}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{DOMxRef("EventTarget.removeEventListener()")}}
+
Removes an event listener from the element.
+
{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{domxref("Element.scroll()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{domxref("Element.scrollBy()")}}
+
Scrolls an element by the given amount.
+
{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
+
Scrolls the page until the element gets into the view.
+
{{domxref("Element.scrollTo()")}}
+
Scrolls to a particular set of coordinates inside a given element.
+
{{DOMxRef("Element.setAttribute()")}}
+
Sets the value of a named attribute of the current node.
+
{{DOMxRef("Element.setAttributeNS()")}}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}
+
Sets the node representation of the attribute with the specified name and namespace, from the current node.
+
{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{DOMxRef("Element.setPointerCapture()")}}
+
Designates a specific element as the capture target of future pointer events.
+
{{DOMxRef("Element.toggleAttribute()")}}
+
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
{{domxref("Element/cancel_event", "cancel")}}
+
Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the Esc key or clicks a "Close dialog" button which is part of the browser's UI.
+ Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.
+
error
+
Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.
+
{{domxref("Element/scroll_event", "scroll")}}
+
Fired when the document view or an element has been scrolled.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.
+
{{domxref("Element/select_event", "select")}}
+
Fired when some text has been selected.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.
+
{{domxref("Element/show_event", "show")}}
+
Fired when a contextmenu event was fired on/bubbled to an element that has a contextmenu attribute.
+ Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.
+
{{domxref("Element/wheel_event","wheel")}}
+
Fired when the user rotates a wheel button on a pointing device (typically a mouse).
+ Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}
+
+ +

Clipboard events

+ +
+
{{domxref("Element/copy_event", "copy")}}
+
Fired when the user initiates a copy action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.
+
{{domxref("Element/cut_event", "cut")}}
+
Fired when the user initiates a cut action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.
+
{{domxref("Element/paste_event", "paste")}}
+
Fired when the user initiates a paste action through the browser's user interface.
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.
+
+ +

Composition events

+ +
+
{{domxref("Element/compositionend_event", "compositionend")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.
+
{{domxref("Element/compositionstart_event", "compositionstart")}}
+
Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.
+
{{domxref("Element/compositionupdate_event", "compositionupdate")}}
+
Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.
+
+ +

Focus events

+ +
+
{{domxref("Element/blur_event", "blur")}}
+
Fired when an element has lost focus.
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.
+
{{domxref("Element/focus_event", "focus")}}
+
Fired when an element has gained focus.
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property
+
{{domxref("Element/focusin_event", "focusin")}}
+
Fired when an element is about to gain focus.
+
{{domxref("Element/focusout_event", "focusout")}}
+
Fired when an element is about to lose focus.
+
+ +

Fullscreen events

+ +
+
{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
+
Sent to a {{domxref("Document")}} or {{domxref("Element")}} when it transitions into or out of full-screen mode.
+ Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.
+
{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
+
Sent to a Document or Element if an error occurs while attempting to switch it into or out of full-screen mode.
+ Also available via the {{domxref("Document.onfullscreenerror", "onfullscreenerror")}} property.
+
+ +

Mouse events

+ +
+
{{domxref("Element/Activate_event", "Activate")}}
+
Occurs when an element is activated, for instance, through a mouse click or a keypress.
+ Also available via the {{domxref("ServiceWorkerGlobalScope/onactivate", "onactivate")}} property.
+
{{domxref("Element/auxclick_event", "auxclick")}}
+
Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.
+
{{domxref("Element/click_event", "click")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.
+
{{domxref("Element/contextmenu_event", "contextmenu")}}
+
Fired when the user attempts to open a context menu.
+ Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.
+
{{domxref("Element/dblclick_event", "dblclick")}}
+
Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.
+ Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.
+
{{domxref("Element/mousedown_event", "mousedown")}}
+
Fired when a pointing device button is pressed on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.
+
{{domxref("Element/mouseenter_event", "mouseenter")}}
+
Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.
+
{{domxref("Element/mouseleave_event", "mouseleave")}}
+
Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.
+
{{domxref("Element/mousemove_event", "mousemove")}}
+
Fired when a pointing device (usually a mouse) is moved while over an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.
+
{{domxref("Element/mouseout_event", "mouseout")}}
+
Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.
+
{{domxref("Element/mouseover_event", "mouseover")}}
+
Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.
+
{{domxref("Element/mouseup_event", "mouseup")}}
+
Fired when a pointing device button is released on an element.
+ Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.
+
{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
+
Fired each time the amount of pressure changes on the trackpadtouchscreen.
+
{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
+
Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".
+
{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
+
Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.
+
{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
+
Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".
+
+ +

Touch events

+ +
+
{{domxref("Element/touchcancel_event", "touchcancel")}}
+
Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).
+ Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.
+
{{domxref("Element/touchend_event", "touchend")}}
+
Fired when one or more touch points are removed from the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property
+
{{domxref("Element/touchmove_event", "touchmove")}}
+
Fired when one or more touch points are moved along the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property
+
{{domxref("Element/touchstart_event", "touchstart")}}
+
Fired when one or more touch points are placed on the touch surface.
+ Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property
+
+ +
+
 
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Aggiunto il metodo getAnimations().
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Aggiunge le proprietà undoScope e undoManager.
{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events 2')}}Aggiunti i seguenti gestori di eventi: ongotpointercapture and onlostpointercapture.
+ Aggiunti i seguenti metodi: setPointerCapture() e releasePointerCapture().
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Aggiunti i seguenti gestori di eventi: ongotpointercapture e onlostpointercapture.
+ Aggiunti i seguenti metodi: setPointerCapture() e releasePointerCapture().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Aggiunti i seguenti metodi: querySelector() e querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Aggiunto il metodo requestPointerLock().
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Aggiunto il metodo requestFullscreen().
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Aggiunte le seguenti proprietà: innerHTML, e outerHTML.
+ Aggiunti i seguenti metodi: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Aggiunte le seguenti proprietà: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Aggiunti i seguenti metodi: getClientRects(), getBoundingClientRect(), scroll(), scrollBy(), scrollTo() and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Aggiunta ereditarietà dell'interfaccia {{DOMxRef("ElementTraversal")}}.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Aggiunti i seguenti metodi: closest(), insertAdjacentElement() and insertAdjacentText().
+ Spostato hasAttributes() dall'interfaccia Node a questa.
{{SpecName("DOM4", "#interface-element", "Element")}}{{Spec2("DOM4")}}Rimossi i seguenti metodi: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Modificato il valore di ritorno di getElementsByTagName() e getElementsByTagNameNS().
+ Rimossa la proprietà schemaTypeInfo.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Aggiunti i seguenti metodi: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). Questi metodi non sono mai stati implementati e sono stati rimossi nelle specifiche successive.
+ Aggiunta la proprietà schemaTypeInfo. Questa proprietà non è mai stata implementata ed è stata rimossa nelle specifiche successive.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}Il metodo normalize() è stato spostato su {{DOMxRef("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

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

diff --git a/files/it/web/api/element/innerhtml/index.html b/files/it/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..6fbdb3c47b --- /dev/null +++ b/files/it/web/api/element/innerhtml/index.html @@ -0,0 +1,213 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - DOM Parsing + - Element + - Parsing HTML + - Proprietà + - Referenza + - innerHTML +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

La proprietà {{domxref("Element")}} innerHTML ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.

+ +
Note: Se un {{HTMLElement("div")}}, {{HTMLElement("span")}}, o {{HTMLElement("noembed")}} ha un nodo di testo figlio che include i caratteri (&), (<), o (>), innerHTML restituisce questi caratteri come entità HTML "&amp;", "&lt;" e "&gt;" rispettivamente. Usa {{domxref("Node.textContent")}} per ottenere una copia non elaborata del contenuto di questi nodi di testo.
+ +

Per inserire l'HTML nel documento invece di sostituire il contenuto di un elemento, utilizza il metodo {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.

+ +

Sintassi

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Valore

+ +

Una {{domxref("DOMString")}} contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di innerHTML rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa htmlString.

+ +

Eccezioni

+ +
+
SyntaxError
+
È stato effettuato un tentativo di impostare il valore di innerHTML utilizzando una stringa che non è HTML correttamente formato.
+
NoModificationAllowedError
+
È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è {{domxref("Document")}}.
+
+ +

Note di utilizzo

+ +

La proprietà innerHTML può essere utilizzata per esaminare il codice sorgente HTML corrente della pagina, comprese le eventuali modifiche apportate da quando la pagina è stata inizialmente caricata.

+ +

Leggere i contenuti HTML di un elemento

+ +

La lettura di innerHTML fa sì che l'user agent serializzi il fragment HTML o XML composto dai discendenti di elment. La stringa risultante viene restituita.

+ +
let contents = myElement.innerHTML;
+ +

Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.

+ +
+

Note: Il fragment HTML o XML restituito viene generato in base al contenuto corrente dell'elemento, pertanto è probabile che la marcatura e la formattazione del frammento restituito non corrispondano al markup della pagina originale.

+
+ +

Sostituzione del contenuto di un elemento

+ +

L'impostazione del valore di innerHTML consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.

+ +

Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo {{domxref("Document.body", "body")}} del documento:

+ +
document.body.innerHTML = "";
+ +

Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri "<" con l'entità HTML "&lt;", convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento {{HTMLElement("pre")}} element. Quindi il valore di innerHTML viene modificato in questa nuova stringa. Di conseguenza, il contenuto del documento viene sostituito con una visualizzazione dell'intero codice sorgente della pagina.

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+ +

Dettagli operativi

+ +

Cosa succede esattamente quando imposti il valore di innerHTML? In questo modo, l'user agent deve seguire questi passaggi:

+ +
    +
  1. Il valore specificato viene analizzato come HTML o XML (in base al tipo di documento), risultando in un oggetto {{domxref("DocumentFragment")}} che rappresenta il nuovo set di nodi del DOM per i nuovi elementi.
    2. +
  2. Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <template> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} viene sostituito con il nuovo DocumentFragment creato nel passaggio 1.
    3. +
  3. Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo DocumentFragment.
    4. +
+ +

Considerazioni sulla sicurezza

+ +

Non è raro vedere innerHTML utilizzato per inserire del testo in una pagina web. C'è la possibilità che questo diventi un vettore di attacco su un sito, creando un potenziale rischio per la sicurezza.

+ +
const name = "John";
+// supponiamo che 'el' sia un elemento DOM HTML
+el.innerHTML = name; // innocuo in questo caso
+
+// ...
+
+name = "<script>alert('Sono John in una noiosa allerta!')</script>";
+el.innerHTML = name; // innocuo in questo caso
+ +

Sebbene possa sembrare un attacco {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con innerHTML non deve essere eseguito.

+ +

Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi {{HTMLElement("script")}}, quindi c'è ancora un rischio per la sicurezza ogni volta che utilizzi innerHTML per impostare le stringhe su cui non si ha il controllo. Per esempio:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // mostra l'alert
+ +

Per questo motivo, si consiglia di non utilizzare innerHTML quando si inserisce testo normale; invece, usa {{domxref("Node.textContent")}}. Questo non analizza il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

+ +
+

Warning: Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando innerHTML molto probabilmente il tuo codice verrà rifiutato. Ad esempio, se utilizzi innerHTML in un'estensione del browser e si invia l'estensione a addons.mozilla.org, non verrà passato il processo di revisione automatica.

+
+ +

Esempio

+ +

In questo esempio viene utilizzato innerHTML per creare un meccanismo per la registrazione dei messaggi in una casella in una pagina Web.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Registrazione degli eventi del mouse in questo contenitore...");
+
+ +

La funzione log() crea l'output del log ottenendo l'ora corrente da un oggetto {{jsxref("Date")}} utilizzando {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, e creando una stringa con il timestamp e il testo del messaggio. Quindi il messaggio viene aggiunto al box con classe "log".

+ +

Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Quindi usiamo questo come gestore di eventi per un numero di eventi del mouse sulla casella che contiene il nostro registro:

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

L'HTML è abbastanza semplice per il nostro esempio.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

Il {{HTMLElement("div")}} con la classe "box" è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <div> la cui classe è "log" è il contenitore per il testo del log stesso.

+ +

CSS

+ +

I seguenti stili CSS del nostro contenuto di esempio.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Risultato

+ +

Il contenuto risultante assomiglia a questo. È possibile visualizzare l'output nel registro spostando il mouse dentro e fuori dalla scatola, facendo click su di esso e così via.

+ +

{{EmbedLiveSample("Esempio", 640, 350)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.innerHTML")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/insertadjacenthtml/index.html b/files/it/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..f69fbb1daf --- /dev/null +++ b/files/it/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,102 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - Cambiare il DOM + - DOM + - Element + - HTML + - Inserire elementi + - Inserire nodi + - Referenza + - insertAdjacentHTML + - metodo +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

Il metodo insertAdjacentHTML() dell'interfaccia {{domxref("Element")}} analizza il testo specificato come HTML o XML e inserisce i nodi risultanti nell'albero DOM in una posizione specificata. Non esegue il reparse dell'elemento su cui viene utilizzato, e quindi non corrompe gli elementi esistenti all'interno di quell'elemento. Questo evita il passaggio extra della serializzazione, rendendolo molto più veloce della manipolazione diretta di {{domxref("Element.innerHTML", "innerHTML")}}.

+ +

Sintassi

+ +
element.insertAdjacentHTML(position, text);
+ +

Parametri

+ +
+
position
+
Una {{domxref("DOMString")}} che rappresenta la posizione relativa ad element; deve essere una delle seguenti stringhe: +
    +
  • 'beforebegin': Davanti ad element stesso.
    • +
  • 'afterbegin': Appena dentro element, prima del suo primo figlio.
    • +
  • 'beforeend': Appena dentro element, prima del suo ultimo figlio.
    • +
  • 'afterend': Dopo ad element stesso.
    • +
+
+
text
+
La stringa da analizzare come HTML o XML e inserita nell'albero.
+
+ +

Visualizzazione dei nomi delle posizioni

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Note: Le posizioni beforebegin e afterend funzionano solo se il nodo si trova nell'albero del DOM e ha un elemento padre.
+ +

Esempio

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// A questo punto, la nuova struttura è:
+// <div id="one">one</div><div id="two">two</div>
+ +

Note

+ +

Considerazioni sulla sicurezza

+ +

Quando si inserisce HTML in una pagina utilizzando insertAdjacentHTML(), fare attenzione a non utilizzare l'input dell'utente che non è stato analizzato.

+ +

Non è consigliabile utilizzare  insertAdjacentHTML() quando si inserisce testo normale; usa invece la proprietà {{domxref("Node.textContent")}} o il metodo {{domxref("Element.insertAdjacentText()")}}. Questo non interpreta il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/nodename/index.html b/files/it/web/api/element/nodename/index.html new file mode 100644 index 0000000000..2030226b37 --- /dev/null +++ b/files/it/web/api/element/nodename/index.html @@ -0,0 +1,116 @@ +--- +title: Node.nodeName +slug: Web/API/Element/nodeName +tags: + - API + - DOM + - Gecko + - NeedsSpecTable + - Node + - Property + - Read-only +translation_of: Web/API/Node/nodeName +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura nodeName restituisce il nome dell'attuale {{domxref("Node")}} come stringa.

+ +

Sintassi

+ +
var str = node.nodeName;
+
+ +

Valore

+ +

Una {{domxref("DOMString")}}. I valori per i diversi tipi di nodi sono:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Interfacciavalore nodeName
{{domxref("Attr")}}Il valore di {{domxref("Attr.name")}}
{{domxref("CDATASection")}}"#cdata-section"
{{domxref("Comment")}}"#comment"
{{domxref("Document")}}"#document"
{{domxref("DocumentFragment")}}"#document-fragment"
{{domxref("DocumentType")}}Il valore di {{domxref("DocumentType.name")}}
{{domxref("Element")}}Il valore di {{domxref("Element.tagName")}}
{{domxref("Entity")}}Il nome dell'entità
{{domxref("EntityReference")}}Il nome del riferimento all'entità
{{domxref("Notation")}}Il nome della notazione
{{domxref("ProcessingInstruction")}}Il valore di {{domxref("ProcessingInstruction.target")}}
{{domxref("Text")}}"#text"
+ +

Esempio

+ +

Dato il seguente markup:

+ +
<div id="d1">hello world</div>
+<input type="text" id="t">
+
+ +

e il seguente script:

+ +
var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+
+ +

IIn XHTML (o in qualsiasi altro formato XML), il valore di text_field sarebbe letto "div". Tuttavia, in HTML, il valore di text_field sarebbe letto "DIV", poichè nodeName e tagName restituiscono in maiuscolo gli elementi HTML nei DOM contrassegnati come documenti HTML. Read more details on nodeName case sensitivity in different browsers.

+ +

Nota che la proprietà {{domxref("Element.tagName")}} potrebbe essere stata utilizzata, poiché nodeName ha lo stesso valore di tagName per un elemento. Tieni presente, tuttavia, che nodeName ritornerà "#text" per i nodi di testo mentre tagName restituirà undefined.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.nodeName")}}

diff --git a/files/it/web/api/element/nodetype/index.html b/files/it/web/api/element/nodetype/index.html new file mode 100644 index 0000000000..fba395288a --- /dev/null +++ b/files/it/web/api/element/nodetype/index.html @@ -0,0 +1,178 @@ +--- +title: Node.nodeType +slug: Web/API/Element/nodeType +tags: + - API + - DOM + - Proprietà + - Referenza +translation_of: Web/API/Node/nodeType +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.nodeType è un numero intero che identifica il nodo. Distingue tra diversi tipi di nodi tra loro, come {{domxref("Element", "elements")}}, {{domxref("Text", "text")}} and {{domxref("Comment", "comments")}}.

+ +

Sintassi

+ +
var type = node.nodeType;
+
+ +

Restituisce un numero intero che specifica il tipo del nodo. I valori possibili sono elencati in {{anch("Tipi di nodi costanti")}}.

+ +

Constanti

+ +

Tipi di nodi costanti

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValoreDescrizione
Node.ELEMENT_NODE1Un nodo {{domxref("Element")}} come {{HTMLElement("p")}} o {{HTMLElement("div")}}.
Node.TEXT_NODE3L'attuale {{domxref("Text")}} dentro un {{domxref("Element")}} o {{domxref("Attr")}}.
Node.CDATA_SECTION_NODE4Una {{domxref("CDATASection")}}, ad esempio <!CDATA[[ … ]]>.
Node.PROCESSING_INSTRUCTION_NODE7Una {{domxref("ProcessingInstruction")}} di un documento XML, come <?xml-stylesheet … ?>.
Node.COMMENT_NODE8Un nodo {{domxref("Comment")}}, come <!-- … -->.
Node.DOCUMENT_NODE9Un nodo {{domxref("Document")}}.
Node.DOCUMENT_TYPE_NODE10Un nodo {{domxref("DocumentType")}}, come <!DOCTYPE html>.
Node.DOCUMENT_FRAGMENT_NODE11Un nodo {{domxref("DocumentFragment")}}.
+ +

Tipi di nodo deprecati {{deprecated_inline()}}

+ +
+

Le seguenti costanti sono state deprecate e non dovrebbero essere più utilizzate.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValoreDescrizione
Node.ATTRIBUTE_NODE2Un {{domxref("Attr", "Attribute")}} di un {{domxref("Element")}}. Gli attributi non implementano più l'interfaccia {{domxref("Node")}} dal {{SpecName("DOM4")}}.
Node.ENTITY_REFERENCE_NODE5Un nodo di riferimento di entità XML, come &foo;. Rimosso nel {{SpecName("DOM4")}}.
Node.ENTITY_NODE6Un nodo XML <!ENTITY …>. Rimosso nel {{SpecName("DOM4")}}.
Node.NOTATION_NODE12Un nodo XML <!NOTATION …>. Rimosso nel {{SpecName("DOM4")}}.
+ +

Esempi

+ +

Diversi tipi di nodi

+ +
document.nodeType === Node.DOCUMENT_NODE; // true
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
+
+document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
+
+var p = document.createElement("p");
+p.textContent = "Once upon a time…";
+
+p.nodeType === Node.ELEMENT_NODE; // true
+p.firstChild.nodeType === Node.TEXT_NODE; // true
+
+ +

Commenti

+ +

Questo esempio controlla se il primo nodo all'interno dell'elemento del documento è un commento e visualizza un messaggio in caso contrario.

+ +
var node = document.documentElement.firstChild;
+if (node.nodeType !== Node.COMMENT_NODE) {
+  console.warn("Dovresti commentare il tuo codice!");
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}{{Spec2('DOM WHATWG')}}Deprecated ATTRIBUTE_NODE, ENTITY_REFERENCE_NODE and NOTATION_NODE types.
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}{{Spec2('DOM3 Core')}}Nessun cambiamento.
{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM2 Core')}}Nessun cambiamento.
{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.nodeType")}}

diff --git a/files/it/web/api/element/nodevalue/index.html b/files/it/web/api/element/nodevalue/index.html new file mode 100644 index 0000000000..547ba77939 --- /dev/null +++ b/files/it/web/api/element/nodevalue/index.html @@ -0,0 +1,75 @@ +--- +title: element.nodeValue +slug: Web/API/Element/nodeValue +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Node/nodeValue +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore del nodo corrente.

+

Sintassi

+
valore = document.nodeValue
+
+

valore è una stringa contenente il valore del nodo corrente, se esiste.

+

Note

+

La proprietà nodeValue dell'intero documento, restituisce null. Per un nodo di tipo testo, commento o CDATA, nodeValue restituisce il contenuto del nodo. Per i nodi attributo, restituisce il valore dell'attributo.

+

La tabella seguente mostra i valori restituiti per i vari tipi di elementi:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attril valore dell'attributo
CDATASectionil contenuto della sezione CDATA
Commentil commento
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionl'intero contenuto, escluso il target
Textil contenuto del nodo testo
+

Quando nodeValue è impostato a null, reimpostarlo non ha alcun effetto.

+

Specifiche

+

nodeValue

diff --git a/files/it/web/api/element/parentnode/index.html b/files/it/web/api/element/parentnode/index.html new file mode 100644 index 0000000000..03e89aa432 --- /dev/null +++ b/files/it/web/api/element/parentnode/index.html @@ -0,0 +1,61 @@ +--- +title: Node.parentNode +slug: Web/API/Element/parentNode +tags: + - API + - DOM + - Gecko + - Proprietà +translation_of: Web/API/Node/parentNode +--- +
+
{{APIRef("DOM")}}
+
+ +

La proprietà di sola lettura Node.parentNode restituisce il genitore del nodo specificato nell'albero DOM.

+ +

Sintassi

+ +
parentNode = node.parentNode
+
+ +

parentNode è il genitore del nodo corrente. Il genitore di un elemento è un nodo Element, un nodo Document, o un nodo DocumentFragment.

+ +

Esempio

+ +
if (node.parentNode) {
+  // rimuovi un nodo dall'albero, a meno che
+  // non sia già nell'albero
+  node.parentNode.removeChild(node);
+}
+ +

Note

+ +

I nodi Document e DocumentFragment non possono mai avere un genitore, quindi parentNode ritornerà sempre null.

+ +

Restituisce anche null se il nodo è appena stato creato e non è ancora collegato all'albero.

+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.parentNode")}}

+ +

Specifiche

+ + + +

Vedi anche

+ + diff --git a/files/it/web/api/element/prefix/index.html b/files/it/web/api/element/prefix/index.html new file mode 100644 index 0000000000..3371ff1f8d --- /dev/null +++ b/files/it/web/api/element/prefix/index.html @@ -0,0 +1,26 @@ +--- +title: element.prefix +slug: Web/API/Element/prefix +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Node/prefix +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il namespace del nodo, oppure null se il nodo non ha alcun prefisso.

+

Sintassi

+
stringa = element.prefix
+element.prefix =stringa
+
+

Esempi

+

Il seguente esempio produce il messaggio "x".

+
<x:div onclick="alert(this.prefix)"/>
+
+

Note

+

Questa proprietà funziona solo quando si utilizza un interprete in grado di gestire i namespace, per esempio quando un documento viene presentato con il tipo mime XML. Non funziona invece con i documenti HTML.

+

Specifiche

+

Node.prefix (introdotto in DOM2).

+

{{ languages( { "en": "en/DOM/element.prefix", "ja": "ja/DOM/element.prefix", "pl": "pl/DOM/element.prefix" } ) }}

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

Il metodo querySelector() dell'interfaccia {{domxref("Element")}} restituisce il primo elemento discendente dell'elemento su cui è invocato corrispondente al gruppo specificato di selettori.

+ +

Sintassi

+ +
var element = baseElement.querySelector(selectors);
+
+ +

Parameters

+ +
+
selectors
+
Un gruppo di selettori per abbinare gli elementi discendenti di {{domxref ("Element")}} baseElement contro; questa deve essere una sintassi CSS valida o si verificherà un SyntaxError. Viene restituito il primo elemento trovato che corrisponde a questo gruppo di selettori.
+
+ +

Valore di ritorno

+ +

Il primo elemento discendente di baseElement che corrisponde al gruppo specificato di selectors. L'intera gerarchia di elementi viene considerata durante la corrispondenza, inclusi quelli esterni all'insieme di elementi, incluso baseElement e i suoi discendenti; in altre parole, selectors viene prima applicato all'intero documento, non a baseElement, per generare un elenco iniziale di elementi potenziali. Gli elementi risultanti vengono quindi esaminati per vedere se sono discendenti di baseElement. La prima corrispondenza di questi elementi rimanenti viene restituita dal metodo querySelector().

+ +

Se non vengono trovate corrispondenze, il valore restituito è null.

+ +

Eccezioni

+ +
+
SyntaxError
+
I selectors specificati non sono validi.
+
+ +

Esempi

+ +

Consideriamo alcuni esempi.

+ +

Trova un elemento specifico con valori specifici di un attributo

+ +

In questo primo esempio, viene restituito il primo elemento {{HTMLElement("style")}} che non ha né il tipo né il tipo "text/css" nel corpo del documento HTML:

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

L'intera gerarchia conta

+ +

Questo esempio dimostra che la gerarchia dell'intero documento è considerata quando si applicano i selectors, in modo che i livelli al di fuori di baseElement specificato siano ancora considerati quando si localizzano le corrispondenze.

+ +

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

Risultato

+ +

Il risultato è simile a questo:

+ +

{{ EmbedLiveSample("L'intera_gerarchia_conta", 600, 160) }}

+ +

Nota come il selettore "div span" corrisponda ancora correttamente all'elemento {{HTMLElement("span")}} anche se il
+ i nodi figli di baseElement non includono l'elemento {{domxref("div")}} (fa ancora parte del selettore specificato).

+ +

More examples

+ +

Vedi {{domxref("Document.querySelector()")}} per ulteriori esempi del formato corretto per i selectors.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.querySelector")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/queryselectorall/index.html b/files/it/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..696b449cb6 --- /dev/null +++ b/files/it/web/api/element/queryselectorall/index.html @@ -0,0 +1,182 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Element + - Finding Elements + - Method + - Referenza + - Searching Elements + - Selecting Elements + - Selectors + - querySelector +translation_of: Web/API/Element/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Il metodo {{domxref("Element")}} querySelectorAll() restituisce una {{domxref("NodeList")}} statica (non dinamica) che rappresenta un elenco di elementi corrispondenti al gruppo specificato di selettori che sono i discendenti dell'elemento su cui è stato chiamato il metodo.

+ +
+

Note: This method is implemented based on the {{domxref("ParentNode")}} mixin's {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} method.

+
+ +

Sintassi

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parametri

+ +
+
selectors
+
Una {{domxref("DOMString")}} contenente uno o più selettori con cui confrontarsi. Questa stringa deve essere una stringa di un CSS selector valido; se non lo è, viene generata un'eccezione SyntaxError. Vedi Individuazione degli elementi DOM mediante selettori per ulteriori informazioni sull'uso dei selettori per identificare gli elementi. È possibile specificare più selettori separandoli utilizzando le virgole.
+
+ +
+

Note: I caratteri che non fanno parte della sintassi CSS standard devono essere sottoposti a escape utilizzando un carattere backslash. Poiché JavaScript utilizza anche l'escape del backspace, è necessario prestare particolare attenzione quando si scrivono stringhe letterali utilizzando questi caratteri. Vedi {{anch("Escaping special characters")}} per maggiori informazioni.

+
+ +

Valore di ritorno

+ +

Una {{domxref("NodeList")}} non dinamica contenente un oggetto {{domxref("Element")}} per ciascun nodo discendente che corrisponde ad almeno uno dei selettori specificati.

+ +
+

Note: Se i selectors specificati includono un CSS pseudo-element, l'elenco restituito è sempre vuoto.

+
+ +

Exceptions

+ +
+
SyntaxError
+
La sintassi della stringa selectors specificata non è valida.
+
+ +

Esempi

+ +

Ottenere un elenco di risultati

+ +

Per ottenere una {{domxref("NodeList")}} di tutti gli elementi {{HTMLElement("p")}} contenuti nell'elemento "myBox":

+ +
var matches = myBox.querySelectorAll("p");
+ +

Questo esempio restituisce un elenco di tutti gli elementi {{HTMLElement("div")}} di "myBox" con la classe "note" o "alert":

+ +
var matches = myBox.querySelectorAll("div.note, div.alert");
+
+ +

Qui, otteniamo un elenco degli elementi <p> del documento il cui elemento padre immediato è un {{domxref("div")}} con la classe "highlighted" e che si trovano all'interno di un contenitore il cui ID è "test".

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Questo esempio usa un attribute selector per restituire una lista degli elementi {{domxref("iframe")}} nel documento che contengono un attributo chiamato "data-src":

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Qui, un selettore di attributo viene utilizzato per restituire un elenco degli elementi di elenco contenuti in un elenco il cui ID è "userlist" che hanno un attributo "data-active" il cui valore è "1":

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Accedere ai risultati

+ +

Una volta restituita la {{domxref("NodeList")}} degli elementi di corrispondenza, è possibile esaminarlo come qualsiasi array. Se la matrice è vuota (ovvero la sua proprietà length è 0), non è stata trovata alcuna corrispondenza.

+ +

Altrimenti, puoi semplicemente usare la notazione standard per accedere al contenuto della lista. È possibile utilizzare qualsiasi istruzione di loop comune, come ad esempio:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +
+

Note: NodeList non è un vero array, vale a dire che non ha i metodi dell'array come slice, some, map etc. Per convertirlo in un array, prova Array.from(nodeList).

+
+ +

Note dell'utente

+ +

querySelectorAll() si comporta in modo diverso rispetto alle più comuni librerie DOM JavaScript, il che potrebbe portare a risultati imprevisti.

+ +

HTML

+ +

Considera questo HTML, con i suoi tre blocchi {{HTMLElement("div")}} annidati.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

In questo esempio, quando si seleziona ".outer .inner" nel contesto il <div> con la classe "select", tsi trova ancora l'elemento con la classe ".inner", anche se​​​​​​ .outer non è un discendente dell'elemento base su cui viene eseguita la ricerca (".select"). Per impostazione predefinita, querySelectorAll() verifica solo che l'ultimo elemento nel selettore si trovi all'interno dell'ambito di ricerca.

+ +

La pseudo-classe {{cssxref(":scope")}} ripristina il comportamento previsto, abbinando solo i selettori sui discendenti dell'elemento base:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Standard di vita
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Nessun cambiamento
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Definizione iniziale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definizione originale
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Element.querySelectorAll")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/removeattribute/index.html b/files/it/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..2a64205cc3 --- /dev/null +++ b/files/it/web/api/element/removeattribute/index.html @@ -0,0 +1,57 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - DOM + - Elemento + - Riferimento + - metodo +translation_of: Web/API/Element/removeAttribute +--- +
{{ APIRef("DOM") }}
+ +

Il metodo {{domxref("Element")}} removeAttribute() rimuove l'attributo con il nome specificato dall'elemento.

+ +

Sintassi

+ +
element.removeAttribute(attrName);
+
+ +

Parametri

+ +
+
attrName
+
Una {{domxref("DOMString")}} che specifica il nome dell'attributo da rimuovere dall'elemento. Se l'attributo specificato non esiste, removeAttribute() restituisce senza generare un errore.
+
+ +

Valore di ritorno

+ +

undefined.

+ +
+

Note: Poiché removeAttribute() non restituisce un valore, non è possibile concatenare più chiamate contemporaneamente per rimuovere più attributi contemporaneamente.

+
+ +

Note di utilizzo

+ +

Dovresti usare removeAttribute() invece di impostare il valore dell'attributo null direttamente o usando {{domxref("Element.setAttribute", "setAttribute()")}}. Molti attributi non si comportano come previsto se li imposti a null.

+ +

{{ DOMAttributeMethods() }}

+ +

Esempio

+ +
// Prima: <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// Dopo: <div id="div1" width="200px">
+
+ +

Specifica

+ +

DOM Level 2 Core: removeAttribute (introdotta nel DOM Level 1 Core)

+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.removeAttribute")}}

diff --git a/files/it/web/api/element/requestfullscreen/index.html b/files/it/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..624e2da766 --- /dev/null +++ b/files/it/web/api/element/requestfullscreen/index.html @@ -0,0 +1,110 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("Fullscreen API")}}
+ +

Il metodo Element.requestFullscreen() invia una richiesta asincrona per visualizzare l'elemento a schremo intero (full-screen).

+ +

Non c'è garanzia che l'elemento verrà effettivamente visualizzato a schermo intero. Se il permesso di entrare in modalità full-screen è accordato, il documento riceverà un evento di tipo {{event("fullscreenchange")}} che lo informarà dell'avvenuto passaggio in modalità full-screen. Viceversa, se il permesso è negato, il documento riceve un evento di tipo {{event('fullscreenerror')}}.

+ +
+

Soltanto gli elementi nel documento principale o in un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero. Questo signigica che gli elementi all'interno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} non possono.

+
+ +

Sintassi

+ +
elt.requestFullscreen();
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatoNote
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
+ +

Compatibilità browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefoxInternet ExplorerEdgeOperaSafari
Basic support{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatGeckoDesktop("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled		11{{property_prefix("ms")}}[3]{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] implementato anche come webkitRequestFullScreen.

+ +

[2] Implementato come mozRequestFullScreen (notare la letterea S maiuscola per Screen). Prima di Firefox 44, Gecko erroneamente permetteva agli elementi all'inderno di un {{HTMLElement('frame')}} o un {{HTMLElement('object')}} di richiedere e ottenere il full screen. Da Firefox 44 in poi ciò è stato corretto: solo gli elementi del documento principale o di un {{HTMLElement('iframe')}} con l'attributo {{htmlattrxref("allowfullscreen", "iframe")}} possono essere visualizzati a schermo intero.

+ +

[3] Vedi documentazione su MSDN.

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/scrollheight/index.html b/files/it/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..05cc48fd15 --- /dev/null +++ b/files/it/web/api/element/scrollheight/index.html @@ -0,0 +1,170 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +translation_of: Web/API/Element/scrollHeight +--- +

{{ APIRef("DOM") }}

+ +

L' Element.scrollHeight è una proprietà di sola lettura e contiene la misura dell'altezza del contenuto di un elemento, incluso il contenuto non visibile sullo schermo a causa dell'overflow. Il valore dello scrollHeight è uguale al minimo valore del clientHeight che l'elemento richiederebbe per adattare tutto il contenuto nel punto di vista, senza usare una barra di scorrimento verticale. Esso include il padding, ma non il bordo dell'elemento.

+ +
+

Questa proprietà ritornerà un numero intero. Se hai bisogno di un numero decimale, invece, usa {{ domxref("Element.getBoundingClientRect()") }}.

+
+ +

Sintassi

+ +
var intElemScrollHeight = document.getElementById("nome dell'id").scrollHeight;
+
+ +

La variabile intElemScrollHeight è una variabile contenente un numero intero che corrisponde allo scrollHeight in pixel dell'elemento. ScrollHeight è una proprietà di sola lettura.

+ +

Esempio

+ +
+
+

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: _fckstyle="position: _fckstyle="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:scrollHeight.png

+ +

Problemi e soluzioni

+ +

Determinare se un elemento è arrivato in fondo con lo scroll.

+ +

La seguente funzione ritorna true se l'elemento è in fondo al suo scorrimento, false altrimenti.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

 

+ +

Associato all'evento onscroll, questa equivalenza potrebbe tornare utile per determinare se l'utente ha letto un testo o no (guarda anche le proprietà element.scrollTop e element.clientHeight). Per esempio:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function checkReading () {
+  if (checkReading.read) { return; }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ?
+    "Thank you." :
+    "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+
+</script>
+<style type="text/css">
+
+#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+</style>
+</head>
+
+<body>
+
+  <form name="registration">
+
+    <p>
+      <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna. Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim.
+
+Phasellus ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id. Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem, mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta at arcu.
+
+Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum. Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in ligula. Vivamus vitae urna mauris, eget euismod nunc.
+
+Aenean semper gravida enim non feugiat. In hac habitasse platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et a orci. Donec aliquet volutpat scelerisque.
+
+Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.</textarea>
+    </p>
+
+    <p>
+      <input type="checkbox" name="accept" id="agree" />
+      <label for="agree">I agree</label>
+      <input type="submit" id="nextstep" value="Next" />
+    </p>
+
+  </form>
+
+</body>
+</html>
+
+ +

Guarda l'esempio qui sopra

+ +

Specificazioni

+ +

scrollHeight è parte del modello dell'oggetto MSIE's DHTML . scrollHeight funziona su questi browser: {{SpecName("CSSOM View")}}.

+ +

Compatibilità dei Browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersioni
Internet Explorer8.0
Firefox (Gecko)3.0 (1.9)
Opera?
Safari | Chrome | WebKit4.0 | 4.0 | ?
+ +

Nelle versioni più vecchie di FireFox: Qualora un contenuto di un elemento non generasse una barra di scorrimento varticale, allora il suo scrollHeight sarebbe uguale al suo clientHeight . Questo ci può dire che, o il contenuto è talmente corto da non richiedere una barra di scorrimento verticale, o che quell'elemento ha impostato la proprietà CSS overflow su visible (non-scrollabile).

+ +

Guarda anche

+ + diff --git a/files/it/web/api/element/scrolltop/index.html b/files/it/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..52d7520f6f --- /dev/null +++ b/files/it/web/api/element/scrolltop/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +tags: + - API + - Proprietà + - Referenza +translation_of: Web/API/Element/scrollTop +--- +
{{ APIRef("DOM") }}
+ +

La proprietà Element.scrollTop ottiene o imposta il numero di pixel in cui il contenuto di un elemento viene fatto scorrere verticalmente.

+ +

Il valore scrollTop di un elemento è una misura della distanza dalla parte superiore dell'elemento al suo contenuto visibile più in alto. Quando il contenuto di un elemento non genera una barra di scorrimento verticale, il suo valore scrollTop è 0.

+ +
+

Sui sistemi che usano il ridimensionamento del display, scrollTop può darti un valore decimale.

+
+ +

Sintassi

+ +
// Get the number of pixels scrolled.
+var intElemScrollTop = someElement.scrollTop;
+
+ +

Dopo aver eseguito questo codice, intElemScrollTop è un numero intero corrispondente al numero di pixel che il contenuto dell'{{domxref("element")}} è stato fatto scorrere verso l'alto.

+ +
// Set the number of pixels scrolled.
+element.scrollTop = intValue;
+
+ +

scrollTop può essere impostato su qualsiasi valore intero, con alcuni avvertimenti:

+ + + +

Esempio

+ +
+
+

padding-top

+If you can see this, scrollTop = 0 + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+If you can see this, scrollTop is > 0 + +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+If you can see this, scrollTop is maxed-out + +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Specifiche

+ + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.scrollTop")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/setattribute/index.html b/files/it/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..b3644c8bb2 --- /dev/null +++ b/files/it/web/api/element/setattribute/index.html @@ -0,0 +1,83 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +translation_of: Web/API/Element/setAttribute +--- +

{{APIRef("DOM")}}

+ +

Imposta il valore di un attributo sull'elemento specificato. Se l'attributo esiste già, il valore viene aggiornato; in caso contrario viene aggiunto un nuovo attributo con il nome e il valore specificati.

+ +

Per ottenere il valore corrente di un attributo, utilizza il metodo {{domxref("Element.getAttribute", "getAttribute()")}}; per rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Sintassi

+ +
Element.setAttribute(nome, valore);
+
+ +

Parametri

+ +
+
nome
+
Una {{domxref("DOMString")}} specifica il nome dell'attributo il cui valore deve essere impostato. Il nome dell'attributo viene automaticamente convertito in minuscolo quando setAttribute() viene chiamato su un elemento in un documento HTML.
+
valore
+
Una {{domxref("DOMString")}} contenente il valore da assegnare all'attributo. Qualsiasi valore non stringa specificato viene convertito automaticamente in una stringa.
+
+ +

Gli attributi booleani sono considerati true se sono presenti sull'elemento, indipendentemente dal loro valore effettivo; di norma, è necessario specificare la stringa vuota ("") in valore (alcune persone usano il nome dell'attributo, ma funziona in modo non standard). Vedi l'{{anch ("Esempio", "esempio")}} sotto per una dimostrazione pratica.

+ +

Poiché il valore specificato viene convertito in una stringa, specificare null non fa necessariamente ciò che si aspetta. Invece di rimuovere l'attributo o impostarne il valore come {{jsxref("null")}}, imposta invece il valore dell'attributo sulla stringa null. Se vuoi rimuovere un attributo, usa {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Valore di ritorno

+ +

{{jsxref("undefined")}}.

+ +

Eccezioni

+ +
+
InvalidCharacterError
+
L'attributo specificato nome contiene uno o più caratteri che non sono validi nei nomi degli attributi.
+
+ +

Esempio

+ +

Nell'esempio seguente, setAttribute() viene utilizzato per impostare gli attributi su un {{HTMLElement("button")}}.

+ +

HTML

+ +
<button>Hello World</button>
+ +

JavaScript

+ +
var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+
+ +

Questo dimostra due cose:

+ + + +

{{ EmbedLiveSample('Example', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.setAttribute")}}

+ +

Gecko notes

+ +

L'utilizzo di setAttribute() per modificare determinati attributi, in particolare value in XUL, funziona in modo incoerente, in quanto l'attributo specifica il valore predefinito. Per accedere o modificare i valori correnti, è necessario utilizzare le proprietà. Ad esempio, utilizzare Element.value anziché Element.setAttribute().

diff --git a/files/it/web/api/element/tagname/index.html b/files/it/web/api/element/tagname/index.html new file mode 100644 index 0000000000..950a9a17a4 --- /dev/null +++ b/files/it/web/api/element/tagname/index.html @@ -0,0 +1,72 @@ +--- +title: Element.tagName +slug: Web/API/Element/tagName +tags: + - API + - DOM + - Di sola lettura + - Element + - Gecko + - Proprietà + - Referenza + - Referenza del DOM + - tagName +translation_of: Web/API/Element/tagName +--- +
{{ApiRef("DOM")}}
+ +

La proprietà tagName di sola lettura dell'interfaccia {{domxref("Element")}} restituisce il nome del tag dell'elemento su cui è chiamato. Ad esempio, se l'elemento è un {{HTMLElement("img")}}, la sua proprietà tagName è "IMG" (per i documenti HTML, può essere modificata in modo diverso per i documenti XML/XHTML).

+ +

Sintassi

+ +
elementName = Element.tagName;
+
+ +

Valore

+ +

Una stringa che indica il nome del tag dell'elemento. La capitalizzazione di questa stringa dipende dal tipo di documento:

+ + + +

Per gli oggetti {{domxref("Element")}}, il valore di tagName è uguale al valore della proprietà {{domxref("Node.nodeName", "nodeName")}} che l'oggetto elemento eredita da {{domxref("Node")}}.

+ +

Esempio

+ +

HTML

+ +
<span id="born">Quando sono nato...</span>
+
+ +

JavaScript

+ +
var span = document.getElementById("born");
+console.log(span.tagName);
+
+ +

In XHTML (o qualsiasi altro formato XML), il caso originale verrà mantenuto, quindi "span" verrebbe stampato nel caso in cui il nome del tag originale fosse stato creato in minuscolo. In HTML, "SPAN" verrebbe invece stampato indipendentemente dal caso utilizzato durante la creazione del documento originale.

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-tagname', 'Element: tagName')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.tagName")}}

diff --git a/files/it/web/api/element/textcontent/index.html b/files/it/web/api/element/textcontent/index.html new file mode 100644 index 0000000000..137c76a3eb --- /dev/null +++ b/files/it/web/api/element/textcontent/index.html @@ -0,0 +1,138 @@ +--- +title: Node.textContent +slug: Web/API/Element/textContent +tags: + - API + - Command API + - DOM + - Proprietà + - Referenza +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

La proprietà textContent dell'interfaccia {{domxref("Node")}} rappresenta il contenuto del testo di un nodo e dei suoi discendenti.

+ +
+

Note: textContent e {{domxref("HTMLElement.innerText")}} sono facilmente confusi, ma i due sono diversi in modi molto importanti.

+
+ +

Sintassi

+ +
var text = Node.textContent;
+Node.textContent = string;
+
+ +

Valore di ritorno

+ +

Una stringa o null.

+ +

Descrizione

+ +

Quando ottieni questa proprietà:

+ + + +

L'impostazione di textContent su un nodo rimuove tutti i figli del nodo e li sostituisce con un singolo nodo di testo con il valore di stringa specificato.

+ +

Differenze da innerText

+ +

Non lasciarti confondere dalle differenze tra Node.textContent e {{domxref("HTMLElement.innerText")}}. Anche se i nomi sembrano simili, ci sono differenze importanti:

+ + + +

Differenze da innerHTML

+ +

{{domxref("Element.innerHTML")}} restituisce HTML, come indica il nome. A volte le persone usano innerHTML per recuperare o scrivere testo all'interno di un elemento, ma textContent ha prestazioni migliori perché il suo valore non viene analizzato come HTML. Inoltre, l'utilizzo di textContent può impedire gli attacchi XSS.

+ +

Esempi

+ +

Dato questo codice HTML:

+ +
<div id="divA">Questo è <span>un</span> testo!</div>
+ +

...puoi usare textContent per ottenere il contenuto del testo dell'elemento:

+ +
let text = document.getElementById('divA').textContent;
+// La variabile text è ora: "Questo è un testo!"
+ +

...o imposta il contenuto del testo dell'elemento:

+ +
document.getElementById('divA').textContent = 'Questo testo è diverso!';
+// L'HTML per divA è ora:
+// <div id="divA">Questo testo è diverso!</div>
+
+ +

Polyfill per IE8

+ +
// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
+if (Object.defineProperty
+  && Object.getOwnPropertyDescriptor
+  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  (function() {
+    var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
+    Object.defineProperty(Element.prototype, "textContent",
+     // Passare innerText o innerText.get direttamente non funziona,
+     // è richiesta la funzione wrapper.
+     {
+       get: function() {
+         return innerText.get.call(this);
+       },
+       set: function(s) {
+         return innerText.set.call(this, s);
+       }
+     }
+   );
+  })();
+}
+
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.textContent")}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento vs. DOM4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}}
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Introdotto
+ +

Vedi anche

+ + diff --git a/files/it/web/api/element/toggleattribute/index.html b/files/it/web/api/element/toggleattribute/index.html new file mode 100644 index 0000000000..c997b4efdd --- /dev/null +++ b/files/it/web/api/element/toggleattribute/index.html @@ -0,0 +1,104 @@ +--- +title: Element.toggleAttribute() +slug: Web/API/Element/toggleAttribute +translation_of: Web/API/Element/toggleAttribute +--- +
{{APIRef("DOM")}}
+ +

Il metodo toggleAttribute() dell'interfaccia {{domxref("Element")}} attiva/disattiva un attributo booleano (rimuovendolo se è presente e aggiungendolo se non è presente) sull'elemento specificato.

+ +

Sintassi

+ +
Element.toggleAttribute(name [, force]);
+
+ +

Parametri

+ +
+
name
+
Una {{domxref("DOMString")}} che specifica il nome dell'attributo da attivare. Il nome dell'attributo viene automaticamente convertito in minuscolo quando toggleAttribute() viene chiamato su un elemento HTML in un documento HTML.
+
force {{optional_inline}}
+
Un valore booleano per determinare se l'attributo deve essere aggiunto o rimosso, indipendentemente dal fatto che l'attributo sia presente o meno al momento.
+
+ +

Valore di ritorno

+ +

true se l'attributo name è eventualmente presente, in caso contrario false.

+ +

Exceptions

+ +
+
InvalidCharacterError
+
L'attributo specificato name contiene uno o più caratteri che non sono validi nei nomi degli attributi.
+
+ +

Esempio

+ +

Nell'esempio seguente, toggleAttribute() viene utilizzato per commutare l'attributo  readonly di un {{HTMLElement("input")}}.

+ +

HTML

+ +
<input value="text">
+<button>toggleAttribute("readonly")</button>
+ +

JavaScript

+ +
var button = document.querySelector("button");
+var input = document.querySelector("input");
+
+button.addEventListener("click", function(){
+  input.toggleAttribute("readonly");
+});
+
+ +

Risultato

+ +

{{ EmbedLiveSample('Esempio', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Polyfill

+ +
if (!Element.prototype.toggleAttribute) {
+  Element.prototype.toggleAttribute = function(name, force) {
+    if(force !== void 0) force = !!force
+
+    if (this.getAttribute(name) !== null) {
+      if (force) return true;
+
+      this.removeAttribute(name);
+      return false;
+    } else {
+      if (force === false) return false;
+
+      this.setAttribute(name, "");
+      return true;
+    }
+  };
+}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-element-toggleattribute', 'Element.toggleAttribute')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Element.toggleAttribute")}}

diff --git a/files/it/web/api/event/altkey/index.html b/files/it/web/api/event/altkey/index.html new file mode 100644 index 0000000000..1ab63e4329 --- /dev/null +++ b/files/it/web/api/event/altkey/index.html @@ -0,0 +1,46 @@ +--- +title: event.altKey +slug: Web/API/Event/altKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/altKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto ALT era premuto mentre l'evento si verificava.

+

Syntax

+
bool = event.altKey
+
+

bool vale true se il tasto ALT era premuto, altrimenti false.

+

Esempio

+
<html>
+<head>
+<title>esempio tasto ALT</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto ALT premuto: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>
+Prova a premere un tasto tenendo premuto ALT e prova a premere un tasto senza premere ALT.<br />
+Puoi anche provare a premere ALT+SHIFT.
+</p>
+</body>
+</html>
+
+

Specifiche

+

altKey

+

{{ languages( { "en": "en/DOM/event.altKey", "pl": "pl/DOM/event.altKey" } ) }}

diff --git a/files/it/web/api/event/bubbles/index.html b/files/it/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..e75e385070 --- /dev/null +++ b/files/it/web/api/event/bubbles/index.html @@ -0,0 +1,31 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se un dato evento può emergere attraverso il DOM oppure no.

+

Sintassi

+
bool = event.bubbles
+
+

bool vale true se l'evento può emergere, altrimenti vale false.

+

Note

+

Solo alcuni eventi possono emergere. Tali eventi hanno questa proprietà impostata a true. E' possibile utilizzarla per controllare se un evento può emergere.

+

Esempio

+
 function leggiInput(e) {
+  // controlla se emerge
+  if not e.bubbles {
+     // in caso negativo, passa oltre
+     passaOltre(e);
+  }
+  // altrimenti emerge
+  scriviOutput(e)
+}
+
+

{{ languages( { "en": "en/DOM/event.bubbles", "pl": "pl/DOM/event.bubbles" } ) }}

diff --git a/files/it/web/api/event/button/index.html b/files/it/web/api/event/button/index.html new file mode 100644 index 0000000000..5862d54439 --- /dev/null +++ b/files/it/web/api/event/button/index.html @@ -0,0 +1,57 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/button +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un intero che indica quale tasto del mouse è stato premuto.

+

Sintassi

+
var codiceBottone = event.button;
+
+

codiceBottone può assumere uno dei seguenti valori:

+ +

L'ordine dei bottoni è inverso se il mouse è configurato per l'utilizzo da parte dei mancini.

+

Esempio

+
<script type="text/javascript">
+
+function qualeTasto(e)
+{
+  var e = e || window.event;
+  var codiceTasto;
+
+  if ('object' == typeof e){
+    codiceTasto = e.button;
+
+    switch (codiceTasto){
+      case 0  : alert('Hai premuto il tasto sinistro');
+                break;
+      case 1  : alert('Hai premuto il tasto centrale');
+                break;
+      case 2  : alert('Hai premuto il tasto destro');
+                break;
+      default : alert('Codice sconosciuto: ' + btnCode);
+    }
+  }
+}
+
+</script>
+
+<p onclick="qualeBottone(event);">Clicca con il mouse...</p>
+
+
+

Note

+

Poichè i click del mouse spesso vengono intercettati dall'interfaccia utente, in alcuni casi potrebbe essere difficile rilevare la pressione di un bottone che non sia quello standard (generalmente il sinistro).

+

Gli utenti possono cambiare la configurazione dei tasti del loro dispositivo di puntamento in modo tale che se il valore di codiceBottone è 0, questo non è causato dal tasto che si trova fisicamente a sinistra, ma questo non ha molta importanza.

+

Specifiche

+

DOM 2 Events Specification: button

+

{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}

diff --git a/files/it/web/api/event/cancelable/index.html b/files/it/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..3258a2b37d --- /dev/null +++ b/files/it/web/api/event/cancelable/index.html @@ -0,0 +1,23 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/cancelable +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se è possibile cancellare la risposta predefinita di questo evento o meno.

+

Sintassi

+
bool =event.cancelable;
+
+

bool vale true se l'evento è cancellabile, altrimenti false.

+

Note

+

Se un evento possa essere cancellato o meno, viene determinato al momento dell'inizializzazione dell'evento.

+

Per cancellare un evento, si chiami il metodo preventDefault. Questo impedisce al browser di eseguire l'azione di default associata a tale evento.

+

Specification

+

DOM Level 2 Events: cancelable

+

{{ languages( { "en": "en/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable" } ) }}

diff --git a/files/it/web/api/event/charcode/index.html b/files/it/web/api/event/charcode/index.html new file mode 100644 index 0000000000..fb785e722e --- /dev/null +++ b/files/it/web/api/event/charcode/index.html @@ -0,0 +1,49 @@ +--- +title: event.charCode +slug: Web/API/Event/charCode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/charCode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore Unicode del tasto carattere che è stato premuto e ha scatenato un evento keypress.

+

Sintassi

+
valore = event.charCode
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di charCode</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e)
+{
+alert("Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+      + "Codice carattere: " + e.charCode);
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>Premere un qualsiasi tasto carattere.</p>
+</body>
+</html>
+
+

Note

+

In un evento keypress, il valore Unicode del tasto premuto viene registrato nella proprietà keyCode oppure nella proprietà charCode, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), charCode assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà keyCode.

+

charCode non viene mai impostato durante gli eventi keydown e keyup. In questi casi, viene impostato keyCode.

+

Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in keyCode o in charCode, si può utilizzare la proprietà which.

+

I caratteri inseriti attraverso un IME non vengono registrati nè in keyCode nè in charCode.

+

Per una lista dei possibili valori di charCode e per conoscere i tasti ai quali sono associati, vedere l'esempio Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event.

+

Specifiche

+

Non è parte di alcuna specifica. Si veda nsIDOMKeyEvent

+

{{ languages( { "en": "en/DOM/event.charCode", "pl": "pl/DOM/event.charCode" } ) }}

diff --git a/files/it/web/api/event/ctrlkey/index.html b/files/it/web/api/event/ctrlkey/index.html new file mode 100644 index 0000000000..02fe7f82bf --- /dev/null +++ b/files/it/web/api/event/ctrlkey/index.html @@ -0,0 +1,44 @@ +--- +title: event.ctrlKey +slug: Web/API/Event/ctrlKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/ctrlKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto CTRL è stato premuto mentre l'evento si verificava.

+

Sintassi

+
bool = event.ctrlKey
+
+

bool vale true se il tasto CTRL era premuto, altrimenti false.

+

Esempio

+
<html>
+<head>
+<title>esempio tasto control</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto CTRL premuto: " + e.ctrlKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>Prova a premere un tasto tenendo premuto CTRL e prova a premere un tasto senza premere CTRL.<br />
+Puoi anche provare a premere CTRL+SHIFT.</p>
+</body>
+</html>
+
+

Specifiche

+

ctrlKey

+

{{ languages( { "en": "en/DOM/event.ctrlKey", "pl": "pl/DOM/event.ctrlKey" } ) }}

diff --git a/files/it/web/api/event/currenttarget/index.html b/files/it/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..7fcc81f4b3 --- /dev/null +++ b/files/it/web/api/event/currenttarget/index.html @@ -0,0 +1,99 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +translation_of: Web/API/Event/currentTarget +--- +

{{APIRef("DOM")}}

+ +

Identifica l'elemento del DOM a cui è stato assegnato l'event handler diversamente dall' event.target che rappresenta l'elemento da cui è stato generato l'evento.

+ +

Esempio

+ +

L' event.currentTarget risulta utile da usare quando si assegna lo stesso event handler a numerosi elementi.

+ +
function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  // When this function is used as an event handler: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i < ps.length; i++){
+  ps[i].addEventListener('click', hide, false);
+}
+
+// click around and make paragraphs disappear
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

Compatibilità Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Il modello degli eventi implementato dagli Internet Explorer da 6 a 8 è diverso. Gli event listerner sono attaccati attraverso il metodo non standard element.attachEvent. In questo modello non esiste un equivalente dell' event.currentTarget inoltre this è l'oggetto globale. Una possibile soluzione è quella di wrappare la gestione dell' event.currentTarget in una funzione che chiami la funzione di handler attraverso la Function.prototype.call passando come primo parametro l'elemento. In questo modo il valore associato allo this è quello aspettato.

+ +

Vedi anche

+ +

Comparison of Event Targets

diff --git a/files/it/web/api/event/eventphase/index.html b/files/it/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..d695a1451a --- /dev/null +++ b/files/it/web/api/event/eventphase/index.html @@ -0,0 +1,19 @@ +--- +title: event.eventPhase +slug: Web/API/Event/eventPhase +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/eventPhase +--- +

{{ ApiRef() }}

+

Sommario

+

Indica quale fase del flusso degli eventi è attualmente in elaborazione.

+

Sintassi

+
fase = event.eventPhase
+
+

Specifiche

+

eventPhase

+

{{ languages( { "en": "en/DOM/event.eventPhase", "pl": "pl/DOM/event.eventPhase" } ) }}

diff --git a/files/it/web/api/event/index.html b/files/it/web/api/event/index.html new file mode 100644 index 0000000000..6ae75ff300 --- /dev/null +++ b/files/it/web/api/event/index.html @@ -0,0 +1,240 @@ +--- +title: event +slug: Web/API/Event +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event +--- +

{{ ApiRef() }}

+

Introduzione

+

Questo capitolo descrive il modello degli eventi del DOM Level 2 così come è implementato in Gecko. Viene descritta l'interfaccia Event, così come le interfacce per la registrazione di eventi per i nodi del DOM, i gestori di eventi, i listener e diversi esempi che mostrano come le interfacce dei diversi eventi si relazionano tra loro.

+

Vi è un diagramma eccellente che spiega chiaramente le tre fasi del flusso degli eventi nella bozza di DOM Level 3.

+

L'interfaccia Event

+

I gestori degli eventi possono essere assegnati a vari elementi DOM. Quando un dato evento si verifica, un oggetto evento viene creato dinamicamente e passato agli event listener che permettono di gestirlo. L'interfaccia Event del DOM è quindi accessibile dalla funzione che gestisce l'evento, alla quale viene passato un oggetto evento come primo e unico argomento.

+

Vi sono tre modi di assegnare un listener a un elemento. Con due di queste tecniche, l'oggetto evento viene passato implicitamente alla funzione che gestisce l'evento. Con la terza tecnica, occorre passare esplicitamente l'oggetto evento come parametro.

+

L'esempio seguente mostra come un oggetto evento viene passato a tale funzione e come può essere utilizzato all'interno della funzione.

+

Si noti che nel codice non viene passato alcun parametro "evt". L'oggetto evento viene passato automaticamente a foo. Tutto ciò che occorre fare è definire un parametro nel gestore di eventi che riceva l'oggetto evento.

+
function foo(evt) {
+  // le funzioni per la gestione degli eventi come questa
+  // ricevono un riferimento implicito all'oggetto evento che gestiscono
+  // (in questo caso abbiamo scelto di chiamarlo "evt").
+  alert(evt);
+}
+elementoTabella.onclick = foo;
+
+

Questo esempio è molto semplice, ma mostra una caratteristica importante degli eventi nel DOM di Gecko, cioè che è possibile accedere all'oggetto evento dalla funzione gestore. Una volta che si ha un riferimento a un evento, si può accedere a tutte le proprietà e ai metodi descritti in questo capitolo.

+

Gestori degli eventi DOM

+

Oltre all'oggetto event qui descritto, il DOM di Gecko fornisce anche metodi per la registrazione dei listener sui nodi del DOM, la rimozione di questi listeners ed eliminare gli eventi dal DOM. Questi event listener sugli elementi HTML o XML sono i modi principali per accedere agli eventi. Questi tre metodi sono descritti nella lista sottostante.

+

Si può anche passare un riferimento all'oggetto evento sotto forma di un parametro definito, chiamato event, alla funzione che gestisce l'evento. Il funzionamento è molto simile a quello della parola chiave this.

+
<html>
+<head>
+<title>esempio sul parametro evento</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  alert(
+    "valore clientX: " + evt.clientX + "\n" +
+    "valore clientY: " + evt.clientY + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+<p>Per conoscere le coordinate della posizione del mouse, clicca in qualunque punto di questa pagina.</p>
+</body>
+</html>
+
+

Utilizzando l'oggetto event predefinito è possibile passare altri parametri alla funzione, come mostrato nel seguente esempio:

+
<html>
+<head>
+<title>esempio sul parametro evento + parametri extra</title>
+
+<script type="text/javascript">
+
+var par2 = 'ciao';
+var par3 = 'mondo!';
+
+function mostraCoordinate(evt, p2, p3){
+  alert(
+    "valore clientX: " + evt.clientX + "\n"
+    + "valore clientY: " + evt.clientY + "\n"
+    + "parametro 2: " + p2 + "\n"
+    + "parametro 3: " + p3 + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="mostraCoordinate(event, par2, par3)">
+<p>Per conoscere le coordinate della posizione del mouse e visualizzare un saluto al mondo, clicca in qualunque punto di questa pagina.</p>
+</body>
+</html>
+
+

Proprietà

+
+
+ event.altKey
+
+ Restituisce un booleano che indica se il tasto <alt> è stato premuto durante l'evento.
+
+ event.bubbles
+
+ Restituisce un booleano che indica se l'evento emerge dal DOM.
+
+ event.button
+
+ Restituisce un intero che indica quale tasto del mouse è stato premuto.
+
+ event.cancelBubble
+
+ {{ Deprecated_inline() }} Restituisce un booleano che indica se l'evento è stato cancellato.
+
+ event.cancelable
+
+ Restituisce un booleano che indica se l'evento è cancellabile.
+
+ event.charCode
+
+ Restituisce il tasto carattere che è stato premuto e che ha scatenato l'evento keypress.
+
+ event.clientX
+
+ Restituisce la posizione orizzontale del puntatore del mouse.
+
+ event.clientY
+
+ Restituisce la posizione verticale del puntatore del mouse.
+
+ event.ctrlKey
+
+ Restituisce un booleano che indica se il tasto <ctrl> è stato premuto durante l'evento.
+
+ event.currentTarget
+
+ Restituisce un riferimento all'elemento a cui appartiene l'evento.
+
+ event.detail
+
+ Restituisce alcuni dettagli sull'evento.
+
+ event.eventPhase
+
+ Indica in quale fase si trova il flusso dell'elaborazione degli eventi.
+
+ event.explicitOriginalTarget
+
+ Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).
+
+ event.isChar
+
+ Restituisce un booleano che indica se l'evento è stato causato dalla pressione di un tasto carattere.
+
+ event.keyCode
+
+ Restituisce un valore Unicode per un tasto non carattere che è stato premuto.
+
+ event.layerX
+
+ Restituisce la coordinata orizzontale relativa al layer corrente.
+
+ event.layerY
+
+ Restituisce la coordinata verticale relativa al layer corrente.
+
+ event.metaKey
+
+ Restituisce un booleano che indica se il tasto meta è stato premuto durante l'evento.
+
+ event.originalTarget
+
+ Restituisce l'elemento dal quale ha avuto origine l'evento (solo Mozilla).
+
+ event.pageX
+
+ Restituisce la coordinata orizzontale relativa alla pagina.
+
+ event.pageY
+
+ Restituisce la coordinata verticale relativa alla pagina.
+
+ event.relatedTarget
+
+ Identifica un elemento secondario legato all'evento.
+
+ event.screenX
+
+ Restituisce la posizione orizzontale relativa allo schermo.
+
+ event.screenY
+
+ Restituisce la posizione verticale relativa allo schermo.
+
+ event.shiftKey
+
+ Restituisce un booleano che indica se il tasto <shift> è stato premuto durante l'evento.
+
+ event.target
+
+ Restituisce un riferimento all'elemento al quale l'evento era legato originariamente.
+
+ event.timeStamp
+
+ Restituisce il timestamp nel quale l'evento è stato scatenato.
+
+ event.type
+
+ Restituisce il nome dell'evento (case-insensitive).
+
+ event.view
+
+ Identifica l'AbstractView dal quale l'evento è stato generato.
+
+ event.which
+
+ Restituisce il valore Unicode del tasto che è stato premuto, indipendentemente da quale tipo di tasto sia stato premuto.
+
+

Metodi

+
+
+ event.initEvent
+
+ Inizializza il valore di un evento che è stato creato tramite l'interfaccia DocumentEvent.
+
+ event.initKeyEvent
+
+ Inizializza un evento legato alla tastiera (specifico di Gecko).
+
+ event.initMouseEvent
+
+ Inizializza un evento legato al mouse
+
+ event.initUIEvent
+
+ Inizializza un evento legato all'interfaccia utente
+
+ event.preventBubble
+
+ {{ Obsolete_inline() }} Previene l'emergere di un evento. Questo metodo è deprecato in favore dello standard stopPropagation ed è stato rimosso in Gecko 1.9.
+
+ event.preventCapture
+
+ {{ Obsolete_inline() }} Questo metodo è deprecato in favore dello standard stopPropagation ed è stato rimosso in Gecko 1.9.
+
+ event.preventDefault
+
+ Cancella l'evento (se è cancellabile).
+
+ event.stopPropagation
+
+ Arresta un'ulteriore propagazione degli eventi DOM.
+
+
+  
+

{{ languages( { "en": "en/DOM/event", "es": "es/DOM/event", "fr": "fr/DOM/event", "pl": "pl/DOM/event" } ) }}

diff --git a/files/it/web/api/event/ischar/index.html b/files/it/web/api/event/ischar/index.html new file mode 100644 index 0000000000..ae1edd3975 --- /dev/null +++ b/files/it/web/api/event/ischar/index.html @@ -0,0 +1,30 @@ +--- +title: event.isChar +slug: Web/API/Event/isChar +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/isChar +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un booleano che indica se è stato premuto un tasto carattere o meno.

+

Sintassi

+
bool = event.isChar
+
+ +

Esempio

+
 if e.isChar
+   ripetiInput(e.type);
+ }
+
+

Note

+

Alcune combinazioni di tasti potrebbero produrre degli eventi ma non produrre alcun carattere (per esempio CTRL+b). Quando questo accade, isChar restituisce false.

+

Attenzione: attualmente isChar è afflitto da un bug, a causa del quale il risultato è sempre false. Gli sviluppatori di Mozilla potrebbero correggere questo bug, ma potrebbero anche decidere di eliminare questa proprietà non standard.

+

Specifiche

+

Non è parte di alcuna specifica.

+

{{ languages( { "en": "en/DOM/event.isChar", "pl": "pl/DOM/event.isChar" } ) }}

diff --git a/files/it/web/api/event/keycode/index.html b/files/it/web/api/event/keycode/index.html new file mode 100644 index 0000000000..d1d69dec46 --- /dev/null +++ b/files/it/web/api/event/keycode/index.html @@ -0,0 +1,48 @@ +--- +title: event.keyCode +slug: Web/API/Event/keyCode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/keyCode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore Unicode di un tasto non-carattere che è stato premuto scatenando un evento keypress, oppure il valore di qualsiasi tasto premuto scatenando un qualsiasi altro evento relativo alla tastiera.

+

Sintassi

+
valore = event.keyCode
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di keyCode</title>
+
+<script type="text/javascript">
+
+function mostraCodiceTasto(e)
+{
+alert("Codice del tasto premuto: " + e.keyCode + "\n");
+}
+
+</script>
+</head>
+
+<body onkeydown="mostraCodiceTasto(event);">
+<p>Premere un tasto qualsiasi.</p>
+</body>
+</html>
+
+

Note

+

In un evento keypress, il valore Unicode del tasto premuto viene registrato nella proprietà keyCode oppure nella proprietà charCode, mai in entrambe. Se il tasto premuto corrisponde a un carattere (per esempio 'a'), charCode assume il valore Unicode di quel carattere (che è diverso per le maiuscole e per le minuscole). In caso contrario, il codice del tasto premuto viene registrato nella proprietà keyCode.

+

charCode non viene mai impostato durante gli eventi keydown e keyup. In questi casi, viene impostato keyCode.

+

Per leggere il codice del tasto indipendentemente dal fatto che esso si trovi in keyCode o in charCode, si può utilizzare la proprietà which.

+

I caratteri inseriti attraverso un IME non vengono registrati nè in keyCode nè in charCode.

+

Per una lista dei possibili valori di charCode e per conoscere i tasti ai quali sono associati, vedere l'esempio Reference del DOM di Gecko:Esempi #Example 7: Mostrare le costanti dell'oggetto Event.

+

Specifiche

+

Non è parte di alcuna specifica. Si veda nsIDOMKeyEvent

+

{{ languages( { "en": "en/DOM/event.keyCode", "pl": "pl/DOM/event.keyCode" } ) }}

diff --git a/files/it/web/api/event/layerx/index.html b/files/it/web/api/event/layerx/index.html new file mode 100644 index 0000000000..80dc20b35b --- /dev/null +++ b/files/it/web/api/event/layerx/index.html @@ -0,0 +1,102 @@ +--- +title: event.layerX +slug: Web/API/Event/layerX +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/layerX +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata orizzontale del punto in cui si è scatenato l'evento, relativamente al layer corrente.

+

Sintassi

+
X = event.layerX
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Note

+

layerX tiene conto di eventuali scorrimenti orizzontali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.

+

Specifiche

+

DOM level 0. Non è parte di alcuna specifica.

+

{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}

diff --git a/files/it/web/api/event/layery/index.html b/files/it/web/api/event/layery/index.html new file mode 100644 index 0000000000..9bb4f99947 --- /dev/null +++ b/files/it/web/api/event/layery/index.html @@ -0,0 +1,102 @@ +--- +title: event.layerY +slug: Web/API/Event/layerY +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/layerY +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata verticale del punto in cui si è scatenato l'evento, relativamente al layer corrente.

+

Sintassi

+
Y = event.layerY
+
+ +

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Note

+

layerY tiene conto di eventuali scorrimenti verticali avvenuti nella pagina e restituisce un valore relativo all'intero documento, a meno che l'evento non avvenga all'interno di un elemento con posizione fissa; nel qual caso il valore restituito sarà relativo all'angolo in alto a sinistra dell'elemento.

+

Specifiche

+

DOM level 0. Non è parte di alcuna specifica.

+

{{ languages( { "en": "en/DOM/event.layerX", "pl": "pl/DOM/event.layerX" } ) }}

diff --git a/files/it/web/api/event/metakey/index.html b/files/it/web/api/event/metakey/index.html new file mode 100644 index 0000000000..b3a22bfa38 --- /dev/null +++ b/files/it/web/api/event/metakey/index.html @@ -0,0 +1,30 @@ +--- +title: event.metaKey +slug: Web/API/Event/metaKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/metaKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto META era premuto mentre l'evento si verificava. Questo tasto è il tasto Apple sui computer Mac, il tasto Windows sui pc con tastiere per Windows sui quali gira questo sistema operativo e potrebbe corrispondere ad altri tasti su altre piattaforme. Non esiste però un unico tasto standard sulla cui presenza si possa fare affidamento per qualsiasi tipo di piattaforma.

+

Sintassi

+
bool = event.metaKey
+
+

bool vale true se il tasto META era premuto, altrimenti false.

+

Esempio

+
 function leggiInput(e) {
+ // controlla il tasto meta
+   if e.metaKey
+        // se era premuto si comporta di conseguenza
+     outputBellissimo(e);
+   else
+     outputMediocre(e)
+ }
+
+

Specifiche

+

metaKey

+

{{ languages( { "en": "en/DOM/event.metaKey", "pl": "pl/DOM/event.metaKey" } ) }}

diff --git a/files/it/web/api/event/pagex/index.html b/files/it/web/api/event/pagex/index.html new file mode 100644 index 0000000000..90cf1beaac --- /dev/null +++ b/files/it/web/api/event/pagex/index.html @@ -0,0 +1,98 @@ +--- +title: event.pageX +slug: Web/API/Event/pageX +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/pageX +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata orizzontale dell'evento, all'interno dell'intero documento.

+

Sintassi

+
X =event.pageX;
+
+

X è un intero che rappresenta il valore in pixel della coordinata X del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento orizzontale che è stato effettuato all'interno del browser.

+

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Specifiche

+

Non è parte di alcuno standard.

+

{{ languages( { "en": "en/DOM/event.pageX", "es": "es/DOM/event.pageX", "pl": "pl/DOM/event.pageX" } ) }}

diff --git a/files/it/web/api/event/pagey/index.html b/files/it/web/api/event/pagey/index.html new file mode 100644 index 0000000000..d0d87573cc --- /dev/null +++ b/files/it/web/api/event/pagey/index.html @@ -0,0 +1,98 @@ +--- +title: event.pageY +slug: Web/API/Event/pageY +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/pageY +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce la coordinata verticale dell'evento, all'interno dell'intero documento.

+

Sintassi

+
Y =event.pageY;
+
+

Y è un intero che rappresenta il valore in pixel della coordinata Y del puntatore del mouse, relativamente all'intero documento. La coordinata fa riferimento al momento in cui l'evento si è verificato. Questa proprietà tiene conto di ogni scorrimento verticale che è stato effettuato all'interno del browser.

+

Esempio

+
<html>
+<head>
+<title>esempio di pageX/pageY e layerX/layerY</title>
+
+<script type="text/javascript">
+
+function mostraCoordinate(evt){
+  var form = document.forms.form_coords;
+  var idPadre = evt.target.parentNode.id;
+  form.idPadre.value = idPadre;
+  form.coordinataXpagina.value = evt.pageX;
+  form.coordinataYpagina.value = evt.pageY;
+  form.coordinataXlayer.value = evt.layerX;
+  form.coordinataYlayer.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="mostraCoordinate(event)">
+
+<p>Per visualizzare le coordinate del mouse clicca in un qualunque punto della pagina.</p>
+
+<div id="d1">
+<span>Questo è un DIV non posizionato, quindi cliccando qui i valori di layerX e layerY
+saranno simili a quelli di pageX e pageY.
+</span>
+</div>
+
+<div id="d2">
+<span>Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.
+</span>
+
+<span>Fai scorrere ancora la pagina! Questo è un DIV posizionato, quindi cliccando qui i valori di layerX e layerY saranno relativi all'angolo in alto a sinistra di questo elemento. Si noti che le proprietà pageX e pageY restituiscono la posizione assoluta all'interno del documento, tenendo conto dello scorrimento della pagina.</span>
+</div>
+
+<div id="d3">
+<form name="form_coordinate">
+ Id elemento padre: <input type="text" name="idPadre" size="7" /><br />
+ pageX:<input type="text" name="coordinataXpagina" size="7" />
+ pageY:<input type="text" name="coordinataYpagina" size="7" /><br />
+ layerX:<input type="text" name="coordinataXlayer" size="7" />
+ layerY:<input type="text" name="coordinataYlayer" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Specifiche

+

Non è parte di alcuno standard.

+

{{ languages( { "es": "es/DOM/event.pageY", "pl": "pl/DOM/event.pageY" } ) }}

diff --git a/files/it/web/api/event/preventdefault/index.html b/files/it/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..040257b4a3 --- /dev/null +++ b/files/it/web/api/event/preventdefault/index.html @@ -0,0 +1,176 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/preventDefault +--- +
{{ ApiRef("DOM") }}
+ +

Il metodo preventDefault() dell'interfaccia {{domxref("Event")}} dice all'{{Glossary("user agent")}} che se l'evento non viene esplicitamente gestito, la sua azione predefinita non dovrebbe essere presa come normalmente. L'evento continua a propagarsi come al solito, a meno che uno dei suoi listener di eventi non chiami {{domxref("Event.stopPropagation", "stopPropagation()")}} o {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}, uno dei due interrompa la propagazione contemporaneamente.

+ +

Sintassi

+ +
Event.preventDefault();
+ +

Parametri

+ +

Nessuno.

+ +

Valore di ritorno

+ +

undefined.

+ +

Esempi

+ +

Blocco della gestione dei click predefinita

+ +

La commutazione di una casella di controllo è l'azione predefinita di fare click su una casella di controllo. Questo esempio mostra come impedire che ciò accada:

+ +

JavaScript

+ +
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+         document.getElementById("output-box").innerHTML += "Mi dispiace! <code>preventDefault()</code> non ti lascerà controllare questo!<br>";
+         event.preventDefault();
+}, false);
+ +

HTML

+ +
<p>Si prega di fare click sul controllo casella di controllo.</p>
+
+<form>
+  <label for="id-checkbox">Checkbox:</label>
+  <input type="checkbox" id="id-checkbox"/>
+</form>
+
+<div id="output-box"></div>
+ +

Risultato

+ +

Puoi vedere questo in azione qui:

+ +

{{EmbedLiveSample("Blocking_default_click_handling")}}

+ +

Interruzione delle sequenze di tasti per raggiungere un campo di modifica

+ +

L'esempio seguente dimostra come interrompere l'input di testo non valido per raggiungere il campo di input con preventDefault(). Al giorno d'oggi, di solito dovresti usare convalida del modulo HTML nativo.

+ +

HTML

+ +

Ecco il modulo:

+ +
<div class="container">
+  <p>Inserisci il tuo nome utilizzando solo lettere minuscole.</p>
+
+  <form>
+    <input type="text" id="my-textbox">
+  </form>
+</div>
+ +

CSS

+ +

Usiamo un po' di CSS per la finestra di avviso che disegneremo quando l'utente preme una chiave non valida:

+ +
.warning {
+  border: 2px solid #f39389;
+  border-radius: 2px;
+  padding: 10px;
+  position: absolute;
+  background-color: #fbd8d4;
+  color: #3b3c40;
+}
+ +

JavaScript

+ +

Ed ecco il codice JavaScript che fa il lavoro. Per prima cosa, ascolta gli eventi {{event("keypress")}}:

+ +
var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);
+
+ +

La funzione checkName(), che controlla il tasto premuto e decide se permetterlo:

+ +
function checkName(evt) {
+  var charCode = evt.charCode;
+  if (charCode != 0) {
+    if (charCode < 97 || charCode > 122) {
+      evt.preventDefault();
+      displayWarning(
+        "Per favore usa solo lettere minuscole."
+        + "\n" + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+
+ +

la funzione displayWarning() presenta la notifica di un problema. Non è una funzione elegante ma fa il lavoro ai fini di questo esempio:

+ +
var warningTimeout;
+var warningBox = document.createElement("div");
+warningBox.className = "warning";
+
+function displayWarning(msg) {
+  warningBox.innerHTML = msg;
+
+  if (document.body.contains(warningBox)) {
+    window.clearTimeout(warningTimeout);
+  } else {
+    // inserisci warningBox dopo myTextbox
+    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
+  }
+
+  warningTimeout = window.setTimeout(function() {
+      warningBox.parentNode.removeChild(warningBox);
+      warningTimeout = -1;
+    }, 2000);
+}
+ +

Risultato

+ +

Ecco il risultato del codice precedente:

+ +

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

+ +

Note

+ +

Chiamando preventDefault() durante qualsiasi fase del flusso di eventi annulla l'evento, il che significa che non verrà eseguita alcuna azione predefinita normalmente eseguita dall'implementazione come risultato dell'evento.

+ +
+

A partire da {{Gecko("6.0")}}, chiamare preventDefault()  fa sì che il valore della proprietà {{ domxref("Event.defaultPrevented()") }} diventi true.

+
+ +

Puoi utilizzare {{domxref("Event.cancelable")}} per verificare se l'evento è cancellabile. Chiamare preventDefault() per un evento non cancellabile non ha alcun effetto.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Event.preventDefault")}}

diff --git a/files/it/web/api/event/shiftkey/index.html b/files/it/web/api/event/shiftkey/index.html new file mode 100644 index 0000000000..fcc11142ef --- /dev/null +++ b/files/it/web/api/event/shiftkey/index.html @@ -0,0 +1,45 @@ +--- +title: event.shiftKey +slug: Web/API/Event/shiftKey +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/MouseEvent/shiftKey +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il tasto SHIFT è stato premuto durante l'evento.

+

Sintassi

+
bool = event.shiftKey
+
+

bool restituisce true se il tasto SHIFT era premuto mentre l'evento si verificava, altrimenti false.

+

Esempio

+
<html>
+<head>
+<title>esempio tasto shift</title>
+
+<script type="text/javascript">
+
+function mostraCarattere(e){
+  alert(
+    "Tasto premuto: " + String.fromCharCode(e.charCode) + "\n"
+    + "Codice carattere: " + e.charCode + "\n"
+    + "Tasto SHIFT premuto: " + e.shiftKey + "\n"
+    + "Tasto ALT premuto: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="mostraCarattere(event);">
+<p>Prova a premere un tasto tenendo premuto SHIFT e prova a premere un tasto senza premere SHIFT.<br />
+Puoi anche provare a premere SHIFT+ALT.</p>
+</body>
+</html>
+
+

Specifiche

+

shiftKey

+

{{ languages( { "en": "en/DOM/event.shiftKey", "pl": "pl/DOM/event.shiftKey" } ) }}

diff --git a/files/it/web/api/event/stoppropagation/index.html b/files/it/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..1eef27bf30 --- /dev/null +++ b/files/it/web/api/event/stoppropagation/index.html @@ -0,0 +1,60 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/stopPropagation +--- +

{{APIRef("DOM")}}

+ +

Il metodo stopPropagation() dell'interfaccia {{domxref("Event")}} impedisce un'ulteriore propagazione dell'evento corrente nelle fasi di cattura e bubbling.

+ +

Sintassi

+ +
event.stopPropagation();
+ +

Esempio

+ +

Vedi Esempio 5: Propagazione degli eventi nel capitolo degli Esempi per un esempio più dettagliato di questo metodo e la propagazione degli eventi nel DOM.

+ +

Note

+ +

Vedi la specificazione DOM per la spiegazione del flusso di eventi. (La bozza degli eventi di DOM Level 3" ha un'illustrazione.)

+ +

preventDefault è un metodo complementare che può essere utilizzato per impedire l'azione predefinita dall'evento.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}{{Spec2("DOM2 Events")}}Definzione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Event.stopPropagation")}}

diff --git a/files/it/web/api/event/timestamp/index.html b/files/it/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..d01ab1986a --- /dev/null +++ b/files/it/web/api/event/timestamp/index.html @@ -0,0 +1,45 @@ +--- +title: event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/timeStamp +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il timestamp (cioè il numero di millisecondi trascorsi dalla Unix Epoch, le ore 00:00:00 del 1/1/1970) corrispondente al momento in cui si è verificato l'evento.

+

Sintassi

+
ts = event.timeStamp
+
+

Esempio

+
<html>
+<head>
+
+<title>esempio di timeStamp</title>
+
+<script type="text/javascript">
+var ora = null;
+
+function leggiOrario(evt) {
+  ora = evt.timeStamp;
+  document.getElementById("time").firstChild.nodeValue = ora;
+}
+</script>
+</head>
+
+<body onkeypress="leggiOrario(event)">
+
+<p>Premi un tasto per conoscere il timestamp corrente grazie all'evento onkeypress.</p>
+<p>timeStamp: <span id="time">-</span></p>
+
+</body>
+</html>
+
+

Note

+

Il sistema di eventi potrebbe non supportare questa proprietà per ogni possibile tipo di evento.

+

Specifiche

+

timestamp

+

{{ languages( { "en": "en/DOM/event.timeStamp", "pl": "pl/DOM/event.timeStamp" } ) }}

diff --git a/files/it/web/api/event/type/index.html b/files/it/web/api/event/type/index.html new file mode 100644 index 0000000000..108e944059 --- /dev/null +++ b/files/it/web/api/event/type/index.html @@ -0,0 +1,50 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Event/type +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il nome dell'evento (case-insensitive).

+

Sintassi

+
stringa = event.type
+
+

Esempio

+
<html>
+<head>
+
+<title>esempio su event.type</title>
+
+<script type="text/javascript">
+var eventoCorrente = null;
+
+function tipoEvento(evt) {
+  eventoCorrente = evt.type;
+  document.getElementById("Etype").firstChild.nodeValue = eventoCorrente;
+}
+
+</script>
+</head>
+
+<body
+  onkeydown="tipoEvento(event)"
+  onkeyup="tipoEvento(event)"
+  onmousedown="tipoEvento(event)"
+  onmouseup="tipoEvento(event)">
+
+<p>Premi un tasto della tastiera o del mouse per visualizzare il nome dell'evento.</p>
+<p>Tipo evento: <span id="Etype">-</span></p>
+
+</body>
+</html>
+
+

Note

+

Il è un nome XML valido.

+

Specifiche

+

type

+

{{ languages( { "en": "en/DOM/event.type", "pl": "pl/DOM/event.type" } ) }}

diff --git a/files/it/web/api/event/view/index.html b/files/it/web/api/event/view/index.html new file mode 100644 index 0000000000..00d9f88004 --- /dev/null +++ b/files/it/web/api/event/view/index.html @@ -0,0 +1,22 @@ +--- +title: event.view +slug: Web/API/Event/view +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/UIEvent/view +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce l'oggetto AbstractView nel quale si è verificato l'evento. Nei browser web, questo è l'oggetto window che ha generato l'evento.

+

Sintassi

+
view =event.view
+
+ +

Specifiche

+

DOM Level 2 Events: UIEvent.view

+

{{ languages( { "en": "en/DOM/event.view", "pl": "pl/DOM/event.view" } ) }}

diff --git a/files/it/web/api/event/which/index.html b/files/it/web/api/event/which/index.html new file mode 100644 index 0000000000..0ab544b60c --- /dev/null +++ b/files/it/web/api/event/which/index.html @@ -0,0 +1,60 @@ +--- +title: event.which +slug: Web/API/Event/which +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/KeyboardEvent/which +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il valore di keyCode se il tasto premuto non è un tasto carattere, altrimenti restituisce il valore di charCode se è stato premuto un tasto alfanumerico.

+

Sintassi

+
int = event.which
+
+

int è il codice numerico del tasto che è stato premuto, sia esso alfanumerico oppure no. Si vedano charCode e keyCode per ulteriori informazioni.

+

Esempio

+
<html>
+<head>
+<title>esempio con charCode/keyCode/which</title>
+
+<script type="text/javascript">
+
+function mostraTastoPremuto(evt)
+{
+alert("Evento onkeypress: \n"
+      + "proprietà keyCode: " + evt.keyCode + "\n"
+      + "proprietà which: " + evt.which + "\n"
+      + "proprietà charCode: " + evt.charCode + "\n"
+      + "Tasto premuto (se alfanumerico): "
+      + String.fromCharCode(evt.charCode) + "\n"
+     );
+}
+
+
+function pressioneTasto(evt)
+{
+alert("onkeydown handler: \n"
+      + "proprietà keyCode: " + evt.keyCode + "\n"
+      + "proprietà which: " + evt.which + "\n"
+     );
+}
+
+
+</script>
+</head>
+
+<body
+ onkeypress="mostraTastoPremuto(event);"
+ onkeydown="pressioneTasto(event);"
+>
+
+<p>Premere un tasto</p>
+
+</body>
+</html>
+
+

Specifiche

+

Non è parte di alcuna specifica.

diff --git a/files/it/web/api/fetch_api/index.html b/files/it/web/api/fetch_api/index.html new file mode 100644 index 0000000000..1a458fb681 --- /dev/null +++ b/files/it/web/api/fetch_api/index.html @@ -0,0 +1,170 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +tags: + - API + - Documentazione + - Fetch + - Response + - Sperimentale + - XMLHttpRequest + - request +translation_of: Web/API/Fetch_API +--- +

{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}

+ +

La Fetch API fornisce un'interfaccia per ottenere risorse (anche attraverso la rete). Sembrerá familiare a tutti coloro che hanno usato {{domxref("XMLHttpRequest")}}, ma la nuova API fornisce un'insieme piú potente e flessibile di funzionalitá.

+ +

Concetti e uso

+ +

Fetch fornisce una definizione generica di oggetti {{domxref("Request")}} e {{domxref("Response")}} (e altri inclusi nelle richieste di rete). Questo permette loro di essere usati ovunque necessari, in futuro, sia che servano per service workers, Cache API e altri oggetti simili che usano o modificano richieste e risposte, sia per qualunque altro caso d'uso che richieda di generare le proprie risposte via codice.

+ +

Esso fornisce anche una definizione per concetti correlati come CORS e la semantica degli header HTTP di tipo origin, ovviando alla necessità di doverli definire separatamente altrove.

+ +

Per effettuare una richiesta e ottenere una risorsa, si usa il metodo {{domxref("GlobalFetch.fetch")}}. Esso è implementato in piú interfacce (specificatamente {{domxref("Window")}} e {{domxref("WorkerGlobalScope")}}). Questo lo rende disponibile all'incirca in ogni contesto in cui si puó voler ottenere risorse.

+ +

Il metodo fetch() richiede un parametro obbligatorio, il percorso (path) alla risorsa che si vuole ottenere, e ritorna una {{domxref("Promise")}} che risolve la {{domxref("Response")}} a quella richiesta, sia essa stata eseguita con successo oppure no. Si puó anche passare in via opzionale un oggetto init (per definire opzioni facoltative) come secondo parametro (per l'elenco completo delle opzioni visitare {{domxref("Request")}}).

+ +

Non appena una {{domxref("Response")}} è recuperata, vi è un certo numero di metodi disponibile allo scopo di definire cosa sia il corpo della risposta e come dovrebbe essere gestito (in dettaglio : {{domxref("Body")}}.)

+ +

È possibile creare una richiesta e una risposta direttamente usando i costruttori delle classi {{domxref("Request.Request","Request()")}} e {{domxref("Response.Response","Response()")}}, ma non e' una pratica comune. Invece, e' piu' frequente che essi vengano creati come risultato delle altre azioni della API (ad esempio, {{domxref("FetchEvent.respondWith")}} dei service workers.)

+ +
+

Note: Puoi trovare informazioni aggiuntive riguardo l'uso di fetch sulla pagina Using Fetch, e studiare i concetti sulla pagina Fetch basic concepts.

+
+ +

Annullare un fetch

+ +

I browsers hanno cominciato a supportare in via sperimentale le interfacce {{domxref("AbortController")}} e {{domxref("AbortSignal")}} (meglio note come Abort API), che permettono di annullare operazioni come Fetch e XHR quando non sono ancora state completate. Per maggiori informazioni controlla la pagina con la descrizione delle interfacce.

+ +

Fetch Interfaces

+ +
+
{{domxref("GlobalFetch")}}
+
Contiene il metodo globale fetch() usato per ottenere una risorsa.
+
{{domxref("Headers")}}
+
Rappresenta un header di richiesta/risposta, permettendo di interrogarlo ed eseguire azioni differenti in base ai risultati.
+
{{domxref("Request")}}
+
Rappresenta una richiesta.
+
{{domxref("Response")}}
+
Rappresenta una risposta a una richiesta.
+
+ +

Fetch mixin

+ +
+
{{domxref("Body")}}
+
Fornisce metodi relativi al corpo di una richiesta/risposta permettendo di dichiarare quale sia il tipo di contenuto e come dovrebbe essere gestito.
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definizione di cui sopra
+ +

Compatibilitá coi Browsers

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)IEOperaSafari (WebKit)
Supporto base{{CompatChrome(42)}}14{{CompatGeckoDesktop(39)}}
+ 34[1]
+ {{ CompatGeckoDesktop(52)}}[2]		{{CompatNo}}29
+ 28[1]		10.1
{{domxref('ReadableStream')}}{{CompatChrome(43)}}14{{CompatNo}}[3]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto base{{CompatChrome(42)}}{{CompatChrome(42)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}10.1
{{domxref('ReadableStream')}}{{CompatChrome(43)}}{{CompatChrome(43)}}{{CompatVersionUnknown}}{{CompatNo}}[3]{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

[1] Questa API è implementata ma dev'essere abilitata da un'opzione di Firefox.

+ +

[2] Per le versioni di Firefox precedenti la 52, get() ottiene solamente il primo valore nell'header specificato, mentre getAll() ottiene tutti i valori. Dalla versione 52 in avanti, get() ottiene tutti i valori e getAll() è stato eliminato.

+ +

[3] La lettura degli streams è disponibile nell'attuale versione di Firefox, ma deve essere abilitata tramite le opzioni dom.streams.enabled e javascript.options.streams.

+ +

Guarda anche

+ + diff --git a/files/it/web/api/file/index.html b/files/it/web/api/file/index.html new file mode 100644 index 0000000000..1d1941d482 --- /dev/null +++ b/files/it/web/api/file/index.html @@ -0,0 +1,101 @@ +--- +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")}}.

+ +

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")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
+
Returns the last modified {{JSxRef("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")}} {{Non-standard_Inline}} {{ReadOnlyInline}}
+
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.
+
{{DOMxRef("Blob.stream()")}}
+
Transforms the File into a {{DOMxRef("ReadableStream")}} that can be used to read the File contents.
+
{{DOMxRef("Blob.text()")}}
+
Transforms the File into a stream and reads it to completion. It returns a promise that resolves with a {{DOMxRef("USVString")}} (text).
+
{{DOMxRef("Blob.arrayBuffer()")}}
+
Transforms the File into a stream and reads it to completion. It returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', "#file-section", "The File interface")}}{{Spec2('File API')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/it/web/api/file/using_files_from_web_applications/index.html b/files/it/web/api/file/using_files_from_web_applications/index.html new file mode 100644 index 0000000000..00d0b5f28c --- /dev/null +++ b/files/it/web/api/file/using_files_from_web_applications/index.html @@ -0,0 +1,506 @@ +--- +title: Using files from web applications +slug: Web/API/File/Using_files_from_web_applications +translation_of: Web/API/File/Using_files_from_web_applications +--- +
{{APIRef ("File API")}}
+ +

Utilizzando l'API File, che è stata aggiunta al DOM in HTML5, è ora possibile per il contenuto Web chiedere all'utente di selezionare i file locali e quindi leggere il contenuto di tali file. Questa selezione può essere effettuata utilizzando un {{HTMLElement("input/file", '<input type="file">')}}elemento HTML o trascinandolo.

+ +

Se si desidera utilizzare l'API del file DOM da estensioni o altro codice Chrome del browser, è possibile; tuttavia, nota che ci sono alcune funzionalità aggiuntive di cui essere a conoscenza. Per i dettagli, vedi Utilizzo dell'API del file DOM nel codice Chrome .

+ +

Accesso ai file selezionati

+ +

Considera questo HTML:

+ +
<input type = "file" id = "input" multiple>
+ +

L'API File consente di accedere a un {{DOMxRef ("FileList")}} contenente {{DOMxRef ("File")}} oggetti che rappresentano i file selezionati dall'utente.

+ +

L' multipleattributo inputsull'elemento consente all'utente di selezionare più file.

+ +

Accesso al primo file selezionato usando un classico selettore DOM:

+ +
const selectedFile = document.getElementById ('input'). files [0];
+ +

Accesso ai file selezionati su un evento di modifica

+ +

È anche possibile (ma non obbligatorio) accedere a {{DOMxRef ("FileList")}} tramite l' changeevento. È necessario utilizzare {{DOMxRef ("EventTarget.addEventListener ()")}} per aggiungere il changelistener di eventi, in questo modo:

+ +
const inputElement = document.getElementById ("input");
+inputElement.addEventListener ("change", handleFiles, false);
+funzione handleFiles () {
+  const fileList = this.files; / * ora puoi lavorare con l'elenco dei file * /
+}
+ +

Ottenere informazioni sui file selezionati

+ +

L'oggetto {{DOMxRef ("FileList")}} fornito dal DOM elenca tutti i file selezionati dall'utente, ognuno specificato come oggetto {{DOMxRef ("File")}}. È possibile determinare il numero di file selezionato dall'utente controllando il valore dell'attributo dell'elenco file length:

+ +
const numFiles = fileList.length;
+ +

I singoli oggetti {{DOMxRef ("File")}} possono essere recuperati semplicemente accedendo all'elenco come un array:

+ +
for (let i = 0, numFiles = fileList.length; i <numFiles; i ++) {
+  const file = fileList [i];
+  // ...
+}
+
+ +

Questo ciclo scorre su tutti i file nell'elenco dei file.

+ +

Esistono tre attributi forniti dall'oggetto {{DOMxRef ("File")}} che contengono informazioni utili sul file.

+ +
+
name
+
Il nome del file come stringa di sola lettura. Questo è solo il nome del file e non include alcuna informazione sul percorso.
+
size
+
La dimensione del file in byte come numero intero a 64 bit di sola lettura.
+
type
+
Il tipo MIME del file come stringa di sola lettura o ""se il tipo non può essere determinato.
+
+ +

Esempio: visualizzazione delle dimensioni dei file

+ +

L'esempio seguente mostra un possibile utilizzo della sizeproprietà:

+ +
<! DOCTYPE html>
+<Html>
+<Head>
+<meta charset = "UTF-8">
+<title> Dimensioni file </title>
+<Script>
+funzione updateSize () {
+  let nBytes = 0,
+      oFiles = this.files,
+      nFiles = oFiles.length;
+  for (let nFileId = 0; nFileId <nFiles; nFileId ++) {
+    nBytes + = oFiles [nFileId] .size;
+  }
+  let sOutput = nBytes + "bytes";
+  // codice opzionale per l'approssimazione di multipli
+  const aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  per (nMultiple = 0, nApprox = nBytes / 1024; nApprox> 1; nApprox / = 1024, nMultiple ++) {
+    sOutput = nApprox.toFixed (3) + "" + aMultiples [nMultiple] + "(" + nBytes + "bytes)";
+  }
+  // fine del codice opzionale
+  document.getElementById ("fileNum"). innerHTML = nFiles;
+  document.getElementById ("fileSize"). innerHTML = sOutput;
+}
+
+document.getElementById ("uploadInput"). addEventListener ("change", updateSize, false);
+</ Script>
+</ Head>
+
+<Body>
+  <form name = "uploadForm">
+    <Div>
+      <input id = "uploadInput" type = "file" name = "myFiles" multiple>
+      file selezionati: <span id = "fileNum"> 0 </span>;
+      dimensione totale: <span id = "fileSize"> 0 </span>
+    </ Div>
+    <div> <input type = "submit" value = "Invia file"> </div>
+  </ Form>
+</ Body>
+</ Html>
+
+ +

Utilizzo di elementi di input di file nascosti utilizzando il metodo click ()

+ +

Puoi nascondere l'elemento file {{HTMLElement ("input")}}, ammesso, brutto e presentare la tua interfaccia per aprire il selettore di file e visualizzare il file o i file selezionati dall'utente. Puoi farlo stilando l'elemento di input con display:nonee chiamando il metodo {{DOMxRef ("HTMLElement.click", "click ()")}} sull'elemento {{HTMLElement ("input")}}.

+ +

Considera questo HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none">
+<button id="fileSelect">Select some files</button>
+ +

The code that handles the click event can look like this:

+ +
const fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+}, false);
+
+ +

You can style the new button for opening the file picker as you wish.

+ +

Using a label element to trigger a hidden file input element

+ +

To allow opening the file picker without using JavaScript (the click() method), a {{HTMLElement("label")}} element can be used. Note that in this case the input element must not be hidden using display: none (nor visibility: hidden), otherwise the label would not be keyboard-accessible. Use the visually-hidden technique instead.

+ +

Consider this HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
+<label for="fileElem">Select some files</label>
+ +

and this CSS:

+ +
.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+input.visually-hidden:focus-within + label {
+  outline: thin dotted;
+}
+
+ +

There is no need to add JavaScript code to call fileElem.click(). Also in this case you can style the label element as you wish. You need to provide a visual cue for the focus status of the hidden input field on its label, be it an outline as shown above, or background-color or box-shadow. (As of time of writing, Firefox doesn’t show this visual cue for <input type="file"> elements.)

+ +

Selecting files using drag and drop

+ +

You can also let the user drag and drop files into your web application.

+ +

The first step is to establish a drop zone. Exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy:

+ +
let dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

In this example, we're turning the element with the ID dropbox into our drop zone. This is done by adding listeners for the {{event('dragenter')}}, {{event('dragover')}}, and {{event('drop')}} events.

+ +

We don't actually need to do anything with the dragenter and dragover events in our case, so these functions are both simple. They just stop propagation of the event and prevent the default action from occurring:

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

The real magic happens in the drop() function:

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  const dt = e.dataTransfer;
+  const files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Here, we retrieve the dataTransfer field from the event, pull the file list out of it, and then pass that to handleFiles(). From this point on, handling the files is the same whether the user used the input element or drag and drop.

+ +

Example: Showing thumbnails of user-selected images

+ +

Let's say you're developing the next great photo-sharing website and want to use HTML to display thumbnail previews of images before the user actually uploads them. You can establish your input element or drop zone as discussed previously and have them call a function such as the handleFiles() function below.

+ +
function handleFiles(files) {
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+
+    if (!file.type.startsWith('image/')){ continue }
+
+    const img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
+
+    const reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Here our loop handling the user-selected files looks at each file's type attribute to see if its MIME type begins with the string "image/"). For each file that is an image, we create a new img element. CSS can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn't need to be done here.

+ +

Each image has the CSS class obj added to it, making it easy to find in the DOM tree. We also add a file attribute to each image specifying the {{DOMxRef("File")}} for the image; this will let us fetch the images for actual upload later. We use {{DOMxRef("Node.appendChild()")}} to add the new thumbnail to the preview area of our document.

+ +

Next, we establish the {{DOMxRef("FileReader")}} to handle asynchronously loading the image and attaching it to the img element. After creating the new FileReader object, we set up its onload function and then call readAsDataURL() to start the read operation in the background. When the entire contents of the image file are loaded, they are converted into a data: URL which is passed to the onload callback. Our implementation of this routine sets the img element's src attribute to the loaded image which results in the image appearing in the thumbnail on the user's screen.

+ +

Using object URLs

+ +

The DOM {{DOMxRef("URL.createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL()")}} methods let you create simple URL strings that can be used to reference any data that can be referred to using a DOM {{DOMxRef("File")}} object, including local files on the user's computer.

+ +

When you have a {{DOMxRef("File")}} object you'd like to reference by URL from HTML, you can create an object URL for it like this:

+ +
const objectURL = window.URL.createObjectURL(fileObj);
+ +

The object URL is a string identifying the {{DOMxRef("File")}} object. Each time you call {{DOMxRef("URL.createObjectURL()")}}, a unique object URL is created even if you've created an object URL for that file already. Each of these must be released. While they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calling {{DOMxRef("URL.revokeObjectURL()")}}:

+ +
URL.revokeObjectURL(objectURL);
+ +

Example: Using object URLs to display images

+ +

This example uses object URLs to display image thumbnails. In addition, it displays other file information including their names and sizes.

+ +

The HTML that presents the interface looks like this:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none">
+<a href="#" id="fileSelect">Select some files</a>
+<div id="fileList">
+  <p>No files selected!</p>
+</div>
+
+ +

This establishes our file {{HTMLElement("input")}} element as well as a link that invokes the file picker (since we keep the file input hidden to prevent that less-than-attractive user interface from being displayed). This is explained in the section {{anch("Using hidden file input elements using the click() method")}}, as is the method that invokes the file picker.

+ +

The handleFiles() method follows:

+ +
const fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+fileElem.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  if (!this.files.length) {
+    fileList.innerHTML = "<p>No files selected!</p>";
+  } else {
+    fileList.innerHTML = "";
+    const list = document.createElement("ul");
+    fileList.appendChild(list);
+    for (let i = 0; i < this.files.length; i++) {
+      const li = document.createElement("li");
+      list.appendChild(li);
+
+      const img = document.createElement("img");
+      img.src = URL.createObjectURL(this.files[i]);
+      img.height = 60;
+      img.onload = function() {
+        URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      const info = document.createElement("span");
+      info.innerHTML = this.files[i].name + ": " + this.files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+
+ +

This starts by fetching the URL of the {{HTMLElement("div")}} with the ID fileList. This is the block into which we'll insert our file list, including thumbnails.

+ +

If the {{DOMxRef("FileList")}} object passed to handleFiles() is null, we simply set the inner HTML of the block to display "No files selected!". Otherwise, we start building our file list, as follows:

+ +
    +
  1. A new unordered list ({{HTMLElement("ul")}}) element is created.
    2. +
  2. The new list element is inserted into the {{HTMLElement("div")}} block by calling its {{DOMxRef("Node.appendChild()")}} method.
    3. +
  3. For each {{DOMxRef("File")}} in the {{DOMxRef("FileList")}} represented by files: +
      +
    1. Create a new list item ({{HTMLElement("li")}}) element and insert it into the list.
      2. +
    2. Create a new image ({{HTMLElement("img")}}) element.
      3. +
    3. Set the image's source to a new object URL representing the file, using {{DOMxRef("URL.createObjectURL()")}} to create the blob URL.
      4. +
    4. Set the image's height to 60 pixels.
      5. +
    5. Set up the image's load event handler to release the object URL since it's no longer needed once the image has been loaded. This is done by calling the {{DOMxRef("URL.revokeObjectURL()")}} method and passing in the object URL string as specified by img.src.
      6. +
    6. Append the new list item to the list.
      7. +
    +
    4. +
+ +

Here is a live demo of the code above:

+ +

{{EmbedLiveSample('Example_Using_object_URLs_to_display_images', '100%', '300px')}}

+ +

Example: Uploading a user-selected file

+ +

Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.

+ +

Creating the upload tasks

+ +

Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class obj with the corresponding {{DOMxRef("File")}} attached in a file attribute. This allows us to select all of the images the user has chosen for uploading using {{DOMxRef("Document.querySelectorAll()")}}, like this:

+ +
function sendFiles() {
+  const imgs = document.querySelectorAll(".obj");
+
+  for (let i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

Line 2 fetches a {{DOMxRef("NodeList")}}, called imgs, of all the elements in the document with the CSS class obj. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new FileUpload instance for each. Each of these handles uploading the corresponding file.

+ +

Handling the upload process for a file

+ +

The FileUpload function accepts two inputs: an image element and a file from which to read the image data.

+ +
function FileUpload(img, file) {
+  const reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  const xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  const self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          const percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          const canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.send(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+
+ +

The FileUpload() function shown above creates a throbber, which is used to display progress information, and then creates an {{DOMxRef("XMLHttpRequest")}} to handle uploading the data.

+ +

Before actually transferring the data, several preparatory steps are taken:

+ +
    +
  1. The XMLHttpRequest's upload progress listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.
    2. +
  2. The XMLHttpRequest's upload load event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.
    3. +
  3. The request to upload the image file is opened by calling XMLHttpRequest's open() method to start generating a POST request.
    4. +
  4. The MIME type for the upload is set by calling the XMLHttpRequest function overrideMimeType(). In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.
    5. +
  5. The FileReader object is used to convert the file to a binary string.
    6. +
  6. Finally, when the content is loaded the XMLHttpRequest function send() is called to upload the file's content.
    7. +
+ +

Asynchronously handling the file upload process

+ +

This example, which uses PHP on the server side and JavaScript on the client side, demonstrates asynchronous uploading of a file.

+ +
<?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?><!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="application/javascript">
+        function sendFile(file) {
+            const uri = "/index.php";
+            const xhr = new XMLHttpRequest();
+            const fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            const dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                const filesArray = event.dataTransfer.files;
+                for (let i=0; i<filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+
+ +

Example: Using object URLs to display PDF

+ +

Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.

+ +

In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference pdfjs.disabled must be set to false {{non-standard_inline()}}.

+ +
<iframe id="viewer">
+
+ +

And here is the change of the src attribute:

+ +
const obj_url = URL.createObjectURL(blob);
+const iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+URL.revokeObjectURL(obj_url);
+ +

Example: Using object URLs with other file types

+ +

You can manipulate files of other formats the same way. Here is how to preview uploaded video:

+ +
const video = document.getElementById('video');
+const obj_url = URL.createObjectURL (blob);
+video.src = obj_url;
+Video.play ();
+URL.revokeObjectURL (obj_url);
+ +

specificazioni

+ + + + + + + + + + + + + + + + + + + + + +
specificazioneStatoCommento
{{SpecName ('HTML WHATWG', 'numero-stato.html # concetto-input-tipo-file-selezionato', 'Stato caricamento file')}}{{Spec2 ('HTML WHATWG')}}
{{SpecName ('File API')}}{{Spec2 ('API file')}}Definizione iniziale
+ +

Guarda anche

+ + diff --git a/files/it/web/api/geolocation/index.html b/files/it/web/api/geolocation/index.html new file mode 100644 index 0000000000..290260cdd6 --- /dev/null +++ b/files/it/web/api/geolocation/index.html @@ -0,0 +1,133 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +translation_of: Web/API/Geolocation +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

L'interfaccia Geolocation rappresenta un oggetto in grado di ottenere tramite codice la posizione del dispositivo utilizzato. Questo permette ai contenuti web di accedere alla posizione del dispositivo: ad esempio un sito web o una applicaziomne possono mostrare risultati personalizzati in base alla posizione del dispositivo.

+ +

Un oggetto con questa interfaccia si ottiene usando la proprietà {{domxref("navigator.geolocation")}}, implementata dall'oggetto {{domxref("Navigator")}}.

+ +
+

Nota: Per ragioni di sicurezza, quando una pagina web cerca di accedere alla posizione, l'utente viene notificato e gli viene chiesto il permesso. Considera che ogni browser ha una propria policy e un modo differente per chiedere il permesso.

+
+ +

Proprietà

+ +

L'interfaccia Geolocation non ha né implementazioni né proprietà.

+ +

Metodi

+ +

L'interfaccia Geolocation non eredita alcun metodo.

+ +
+
{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}
+
Determina la posizione corrente del dispositivo e ritorna un oggetto {{domxref("Position")}} con i dati.
+
{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}
+
Ritorna un valore long che rappresenta l'ultima chiamata alla funzione eseguita, quando la posizione del dispositivo cambia.
+
{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}
+
Rimuove l'handler installato con watchPosition().
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Specifiche iniziali.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base5{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ Rimosso nella 15.0
+ Reintrodotto nella 16.0		5
Secure context-only47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
Secure context-only{{CompatNo}}47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/geolocation/using_geolocation/index.html b/files/it/web/api/geolocation/using_geolocation/index.html new file mode 100644 index 0000000000..303cb4a8bb --- /dev/null +++ b/files/it/web/api/geolocation/using_geolocation/index.html @@ -0,0 +1,321 @@ +--- +title: Using geolocation +slug: Web/API/Geolocation/Using_geolocation +translation_of: Web/API/Geolocation_API +--- +

{{securecontext_header}}{{APIRef("Geolocation API")}}

+ +

Le API per la geolocalizzazione permettono agli utenti di fornire la propria posizione alle applicazioni web. Per ragioni di privacy, all'utente viene richiesta l'autorizzazione all'uso della posizione.

+ +

L'oggetto della geolocalizzazione

+ +

Le API di geolocalizzazione sono pubblicate tramite l'oggetto {{domxref("navigator.geolocation")}}.

+ +

Se l'oggetto esiste, il servizio di geolocalizzazione è disponibile. Puoi testare l'esistenza dell'oggetto tramite:

+ +
if ("geolocation" in navigator) {
+  /* la geolocalizzazione è disponibile */
+} else {
+  /* la geolocalizzazione NON È disponibile */
+}
+
+ +
+

Nota: Su Firefox 24 e versioni più vecchie, "geolocation" in navigator ritorna sempre true anche se l'API è stata disabilitata. Questa cosa è stata sistemata con Firefox 25. ({{bug(884921)}}).

+
+ +

Ottenere la posizione corrente

+ +

Per ottenere la posizione corrente dell'utente devi chiamare il metodo {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Viene così lanciata una richiesta asincrona che calcola la posizione attuale dell'utente. Quando la posizione viene calcolata, la funzione viene eseguita. Puoi creare una funzione che viene chiamata in caso di errore. Un terzo parametro opzionale è un oggetto che permette di settare il tempo massimo della posizione calcolata, il tempo di attessa per una nuova richiesta e la possibilità di usare la massima accuratezza per il cacolo della posizione.

+ +
+

Nota: Per default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} cerca di calcolare la posizione nel modo più veloce possibile avendo però una bassa accuratezza. Questo metodo è utile se ti serve una risposta veloce. Dispositivi con il GPS possono richiedere anche alcuni minuti per fare un calcolo preciso della posizione, quindi dei dati meno accurati (come l'indirizzo IP o il wifi) possono essere usati da {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

L'esempio qui sopra chiama la funzione do_something() quando la posizione viene calcolata.

+ +

Controllare la posizione attuale

+ +

Se la posizione cambia (perché il dispositivo di sposta o perché viene calcolata una posizione più accurata), puoi settare una funzione che viene chiamata quando la posizione attuale si aggiorna. Basta usare la funzione {{domxref("Geolocation.watchPosition()","watchPosition()")}}, che ha gli stessi parametri di input di {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Questa funzione viene chiamata più volte così da permettere al browser di sapere sempre la posizione del dispositivo. La funzione di errore è opzionale come lo era per {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+ +
+

Nota: Puoi usare {{domxref("Geolocation.watchPosition()","watchPosition()")}} senza una chiamata iniziale a {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

Il metodo {{domxref("Geolocation.watchPosition()","watchPosition()")}} ritorna un ID numerico che può essere usato per identificare univocamente il controllo della posizione; puoi usare questo valore insieme al metodo {{domxref("Geolocation.clearWatch()","clearWatch()")}} per fermare il controllo della posizione.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Risposta positiva

+ +

Sia {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} che {{domxref("Geolocation.watchPosition()","watchPosition()")}} accettano una risposta positiva, opzionalmente una risposta di errore e un oggetto PositionOptions.

+ +

{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}

+ +

Una chiamata a {{domxref("Geolocation.watchPosition()","watchPosition")}} è più o meno così:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Nessuna posizione disponibile.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

Descrivere una posizione

+ +

La posizione dell'utente è descritta usando un oggetto Position, che deriva dall'oggetto Coordinates.

+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}

+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}

+ +

Errori

+ +

La funzione che viene invocata in caso di errore quando si chiamano getCurrentPosition() o watchPosition() vuole un oggetto PositionError come primo parametro.

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}

+ +

Esempi live

+ + + +

HTML Content

+ +
<p><button onclick="geoFindMe()">Viasualizza la mia posizione</button></p>
+<div id="out"></div>
+
+ +

JavaScript Content

+ +
function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "<p>La geolocalizzazione non è supportata dal tuo browser</p>";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '<p>Latitudine: ' + latitude + '° <br>Longitudine: ' + longitude + '°</p>';
+
+    var img = new Image();
+    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
+
+    output.appendChild(img);
+  }
+
+  function error() {
+    output.innerHTML = "Impossibile calcolare la tua posizione";
+  }
+
+  output.innerHTML = "<p>Locating…</p>";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+
+ +

Risultato live

+ +

{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}

+ +

I permessi

+ +

Tutte le estensioni presenti su addons.mozilla.org che richiedono la posizione sono obbligate a chiedere un permesso all'utente. La seguente funzione richiede il permesso per l'uso della posizione. La risposta dell'utente viene salvata nelle preferenze tramite il parametro pref. La funzione fornita nel parametro callback viene chiamata con un valore booleano (true o false) che indica la risposta dell'utente. Se la risposta è true, l'estensione può accedere alla posizione dell'utente.

+ +
function prompt(window, pref, message, callback) {
+    let branch = Components.classes["@mozilla.org/preferences-service;1"]
+                           .getService(Components.interfaces.nsIPrefBranch);
+
+    if (branch.getPrefType(pref) === branch.PREF_STRING) {
+        switch (branch.getCharPref(pref)) {
+        case "always":
+            return callback(true);
+        case "never":
+            return callback(false);
+        }
+    }
+
+    let done = false;
+
+    function remember(value, result) {
+        return function() {
+            done = true;
+            branch.setCharPref(pref, value);
+            callback(result);
+        }
+    }
+
+    let self = window.PopupNotifications.show(
+        window.gBrowser.selectedBrowser,
+        "geolocation",
+        message,
+        "geo-notification-icon",
+        {
+            label: "Share Location",
+            accessKey: "S",
+            callback: function(notification) {
+                done = true;
+                callback(true);
+            }
+        }, [
+            {
+                label: "Always Share",
+                accessKey: "A",
+                callback: remember("always", true)
+            },
+            {
+                label: "Never Share",
+                accessKey: "N",
+                callback: remember("never", false)
+            }
+        ], {
+            eventCallback: function(event) {
+                if (event === "dismissed") {
+                    if (!done) callback(false);
+                    done = true;
+                    window.PopupNotifications.remove(self);
+                }
+            },
+            persistWhileVisible: true
+        });
+}
+
+prompt(window,
+       "extensions.foo-addon.allowGeolocation",
+       "Foo Add-on wants to know your location.",
+       function callback(allowed) { alert(allowed); });
+
+ +

Compatibilità dei browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(5.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}[1]910.60
+ {{CompatNo}} 15.0
+ 16.0		5
Secure origins only{{CompatChrome(50.0)}}{{CompatNo}}{{CompatGeckoDesktop("55")}}{{CompatNo}}3910
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Supporto base{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}1.0.1{{CompatUnknown}}10.60
+ {{CompatNo}} 15.0
+ 16.0		3.2{{CompatVersionUnknown}}
Secure origins only{{CompatUnknown}}{{CompatChrome(50.0)}}{{CompatNo}}{{CompatGeckoMobile("55")}}   10.1{{CompatChrome(50.0)}}
+
+ +

[1] Firefox calcola la tua posizione anche usando il tuo WiFi grazie ai Google Location Services. Durante il trasferimento tra Firefox e Google, i dati scambiati includono dei dati sul WiFi Access Point, un token di accesso (simile a un cookie) e l'indirizzo IP dell'utente. Per maggiori informazioni, dai un'occhiata alla Privacy Policy di Mozzilla e alla Privacy Policy di Google.

+ +

[2] A causa del punto [1], questa API non si può usare in China. Puoi usare le API di Baidu o di Autonavi.

+ +

Firefox 3.6 (Gecko 1.9.2) ha aggiunta il supporto per l'uso del servizio GPSD (GPS daemon) per usare la geolocalizzazione su Linux.

+ +

Vedi anche

+ + diff --git a/files/it/web/api/geolocation/watchposition/index.html b/files/it/web/api/geolocation/watchposition/index.html new file mode 100644 index 0000000000..e218675cf7 --- /dev/null +++ b/files/it/web/api/geolocation/watchposition/index.html @@ -0,0 +1,166 @@ +--- +title: Geolocation.watchPosition() +slug: Web/API/Geolocation/watchPosition +translation_of: Web/API/Geolocation/watchPosition +--- +

{{securecontext_header}}{{ APIref("Geolocation API") }}

+ +

Il metodo watchPosition() viene usato per creare una funzione che viene chiamata automaticamente ogni volta che cambia la posizione del dispositivo. Si può anche specificare una funzione da chiamare in caso di errore.

+ +

Questo metodo ritorna un valore ID che può essere usato per terminare il metodo {{domxref("Geolocation.clearWatch()")}}.

+ +

Sintassi

+ +
id = navigator.geolocation.watchPosition(successo[, errore[, opzioni]])
+ +

Parametri

+ +
+
successo
+
Un funzione che prende come parametro di input un oggetto {{domxref("Position")}}.
+
errore {{optional_inline}}
+
Una funzione che prende come parametro di input un oggetto {{domxref("PositionError")}}.
+
opzioni {{optional_inline}}
+
Un oggetto {{domxref("PositionOptions")}} che permette di configurare la funzione che controlla la posizione.
+
+ +

Esempi

+ +
var id, target, options;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    console.log('Congratulazioni, hai raggiunto il target');
+    navigator.geolocation.clearWatch(id);
+  }
+}
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+}
+
+target = {
+  latitude : 0,
+  longitude: 0
+};
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+
+ +
+

Se la tua applicazione gira su Firefox OS, controlla la pagina geolocation wake lock per fare in modo che la posizione del dispositivo venga aggiornata in backgound o quando lo schermo del dispositivo è spento.

+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}{{Spec2('Geolocation')}}Specifica iniziale.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base5{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ Rimosso nella 15.0
+ Reintrodotto nella 16.0		5
Secure context-only47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
Secure context-only{{CompatNo}}47{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/geolocationposition/index.html b/files/it/web/api/geolocationposition/index.html new file mode 100644 index 0000000000..7498033a57 --- /dev/null +++ b/files/it/web/api/geolocationposition/index.html @@ -0,0 +1,126 @@ +--- +title: Position +slug: Web/API/GeolocationPosition +translation_of: Web/API/GeolocationPosition +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

L'interfaccia Position rappresenta la posizione di un particolare dispositivo in un preciso istante. La posizione, rappresentata da un oggetto {{domxref("Coordinates")}}, comprende la posizione in 2D del dispositivo, su una sfera che rappresenta la Terra, l'altitudine e la velocità.

+ +

Proprietà

+ +

L'interfaccia Position non estende alcuna proprietà.

+ +
+
{{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}
+
Ritorna un oggetto {{domxref("Coordinates")}} che rappresenta la posizione attuale.
+
{{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
+
Ritorna {{domxref("DOMTimeStamp")}} che rappresenta l'orario in cui è stata calcolata la posizione.
+
+ +

Metodi

+ +

L'interaccia Position non va implementata e non estende alcun metodo.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('Geolocation', '#position', 'Position')}}{{Spec2('Geolocation')}}Specifica iniziale.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto base{{CompatChrome(5)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ Rimosso nella 15.0
+ Reintrodotto nella 16.0		5
Secure context-only{{CompatChrome(47)}}{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto base{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
Secure context-only{{CompatNo}}{{CompatChrome(47)}}{{CompatUnknown()}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/globaleventhandlers/index.html b/files/it/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..9238474923 --- /dev/null +++ b/files/it/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/it/web/api/globaleventhandlers/onresize/index.html b/files/it/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..27e71c3438 --- /dev/null +++ b/files/it/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,77 @@ +--- +title: GlobalEventHandlers.onresize +slug: Web/API/GlobalEventHandlers/onresize +tags: + - API + - DOM + - Proprietà +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

La proprietà GlobalEventHandlers.onresize contiene un {{domxref("EventHandler")}} il quale viene lanciato quando un evento {{event("resize")}} viene ricevuto.

+ +

Sintassi

+ +
window.onresize = funcRef;
+
+ +

Parameters

+ + + +

Esempio

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize test</title>
+
+</head>
+
+<body>
+<p>Ridimensiona la finestra del browser per lanciare l'evento resize.</p>
+
+<p>Altezza finestra: <span id="height"></span></p>
+<p>Larghezza finestra: <span id="width"></span></p>
+
+<script type="text/javascript">
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() {
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+</script>
+</body>
+</html>
+
+ +

Note

+ +

L'evento resize viene scatenato dopo che la finestra è stata ridimensionata.

+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificazioneStatoCommento
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/it/web/api/htmlcanvaselement/index.html b/files/it/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..763a2bc7bc --- /dev/null +++ b/files/it/web/api/htmlcanvaselement/index.html @@ -0,0 +1,245 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - HTML DOM + - Interfaccia + - Riferimenti +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+ +
L'interfaccia HTMLCanvasElement fornisce proprietà e metodi per manipolare il layout e la presentazione degli elementi del canvas. L'interfaccia HTMLCanvasElement eredita anche le proprietà ed i metodi della interfaccia {{domxref("HTMLElement")}}.
+
+ +

 

+ +

Proprietà

+ +

Eredita proprietà dalla interfaccia genitore, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Intero positivo che rispecchia l'attributo dell'elemento HTML {{htmlattrxref("height", "canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, come un numero negativo, è usato il valore di default 150.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
Un {{jsxref("Boolean")}} che rispecchia l'attributo HTML {{htmlattrxref("moz-opaque", "canvas")}} dell'elemento {{HTMLElement("canvas")}}. Permette al canvas di sapere se la traslucenza sarà un fattore. Se il canvas sa che non ci sarà traslucenza, la prestazione del dipingere puo' essere ottimizzata.
+
{{domxref("HTMLCanvasElement.width")}}
+
Intero positivo che rispecchia l'attributo HTML {{htmlattrxref("width", "canvas")}} dell'elemento {{HTMLElement("canvas")}} interpretato in unità pixel CSS. Quando l'attributo non è specificato, o se è impostato ad un valore non valido, ad esempio negativo, è usato il valore di default 300.
+
+ +

Metodi

+ +

Eredita dal proprio genitore, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Restituisce un oggetto {{domxref("CanvasCaptureMediaStream")}} che è una capture video in tempo reale della superficie del canvas.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Restituisce un contesto di disegno sul canvas, oppure null se l'identificativo del contesto non ha supporto. Un contesto di disegno permette di disegnare sul canvas. Chiamare getContext con "2d" come parametro restituisce un oggetto {{domxref("CanvasRenderingContext2D")}}, mentre chiamarlo con "experimental-webgl" (o "webgl") restituisce un oggetto {{domxref("WebGLRenderingContext")}}. Questo contesto è disponibile solo su browsers che implementano WebGL.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Restituisce un URL dati contentente una rappresentazione della immagine nel formato specificato dal parametro tipo (il valore di default è png). L'immagine restituita ha una risoluzione di 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Crea un oggetto {{domxref("Blob")}} che rappresenta l'immagine contenuta nel canvas; questo file puo' essere immagazzinato temporaneamente su disco oppure nella memoria a discrezione dell'agente per l'utente (user agent).
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
Trasferisce il controllo ad un oggetto {{domxref("OffscreenCanvas")}}, o nella thread principale oppure in una worker.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Restituisce un oggetto {{domxref("File")}} che rappresenta l'immagine contenuta nel canvas; questo è un file immagazzinato nella memoria, col nome indicato. Se il tipo del file non è specificato, il tipo di default per l'immagine è image/png.
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Aggiunge il metodo captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}Il metodo getContext() ora restituisce  {{domxref("RenderingContext")}} invece di un oggetto opaco.
+ Sono stati aggiunti i metodi probablySupportsContext(), setContext() etransferControlToProxy().
{{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')}}Definizione iniziale.
+ +

Compatibilità coi Browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2D context)4.0{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
toBlob()50{{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587)50{{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Supporto parziale in Opera Mini 5.0 e successivi.

+ +

[2] Il supporto per il terzo parametro, è stato aggiunto solo con Gecko 25: quando viene usato col tipo "image/jpeg," questo argomento specifica la qualità dell'immagine.

+ +

[3] Da questa funzionalità dipende una impostazione di preferenza di funzionalità. Imposta come true gfx.offscreencanvas.enabled in about:config .

+ +

Vedi anche:

+ + diff --git a/files/it/web/api/htmlcanvaselement/toblob/index.html b/files/it/web/api/htmlcanvaselement/toblob/index.html new file mode 100644 index 0000000000..f0793eb393 --- /dev/null +++ b/files/it/web/api/htmlcanvaselement/toblob/index.html @@ -0,0 +1,262 @@ +--- +title: HTMLCanvasElement.toBlob() +slug: Web/API/HTMLCanvasElement/toBlob +translation_of: Web/API/HTMLCanvasElement/toBlob +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

Il metodoHTMLCanvasElement.toBlob() crea un oggetto {{domxref("Blob")}} rappresentante l'immagine contenuta nel canvas;  questo file potrebbe essere immagazzinato per usi futuri su disco o in memoria a discrezione dell'user agent. Se type non è specificato, il tipo immagine è impostato aimage/png. L'immagine creata ha una risoluzione di 96dpi.
+ Il terzo argomento è usato con immagini di tipoimage/jpeg per specificare la qualità dell'output.

+ +

Sintassi

+ +
void canvas.toBlob(callback, mimeType, qualityArgument);
+
+ +

Parametri

+ +
+
callback
+
Funzione di callback con l'oggetto {{domxref("Blob")}} risultante come singolo argomento.
+
mimeType {{optional_inline}}
+
Un oggetto {{domxref("DOMString")}} indicante il tipo immagine. Quella di default èimage/png.
+
qualityArgument {{optional_inline}}
+
Un oggetto {{jsxref("Number")}} tra0 e1 indicante la qualità immagine se il tipo richiesto è image/jpeg oimage/webp. Se questo argomento è diverso dai due precedenti è utilizzato il valore di qualità immagine di default. Altri argomenti verranno ignorati.
+
+ +

Valore ritornato

+ +

Nessuno.

+ +

Esempi

+ +

Ottenere un file rappresentante il canvas

+ +

Una volta aver disegnato il contenuto in un canvas, è possibile convertirlo in un file di un qualsiasi. Lo snippet di codice in basso, ad esempio, prende l'immagine contenuta nell'elemento {{HTMLElement("canvas")}} avente ID "canvas", ottenendo una sua copia in formato immagine PNG, quindi aggiunge un nuovo elemento {{HTMLElement("img")}} al documento, la cui immagine di origine è quella creata utilizzando il canvas.

+ +
var canvas = document.getElementById('canvas');
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement('img'),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // no longer need to read the blob so it's revoked
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+
+ +

Si noti che si sta creando un'immagine PNG; se si specifica un secondo parametro nella chiamata a toBlob(),  si può specificare il formato immagine. Ad esempio, per ottenere l'immagine in formato JPEG:

+ +
 canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality
+ +
+

Convertire un canvas in icona (solo su Mozilla)

+ +

Ora si userà -moz-parse per convertire un canvas in icona. Windows XP non supporta la conversione dal formato PNG ad ICO, quindi usa quello bitmap (BMP) al suo posto. Un link di download è creato impostando l'attributo download. Il valore dello stesso è il nome che verrà utilizzato come nome del file.

+ +
var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement('a');
+    a.textContent = 'Download';
+    document.body.appendChild(a);
+    a.style.display = 'block';
+    a.download = iconName + '.ico';
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');
+
+ +

Salvare toBlob su disco con OS.File (valido solo per chrome/add-on)

+ +
+

This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.

+
+ +
var canvas = document.getElementById('canvas');
+var d = canvas.width;
+ctx = canvas.getContext('2d');
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = 'yellow';
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5.1')}}No change
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5 W3C')}}Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("50")}}{{CompatGeckoDesktop('19')}}{{CompatIE(10)}}{{property_prefix("ms")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
Image quality parameter{{CompatChrome("50")}}{{CompatGeckoDesktop('25')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome("50")}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome("50")}}
Image quality parameter{{CompatNo}}{{CompatChrome("50")}}{{CompatGeckoMobile("25")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatChrome("50")}}
+
+ +

[1] See {{WebKitBug("71270")}}.

+ +

Polyfill

+ +

A low performance polyfill based on toDataURL.

+ +
if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+  value: function (callback, type, quality) {
+
+    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+        len = binStr.length,
+        arr = new Uint8Array(len);
+
+    for (var i = 0; i < len; i++ ) {
+     arr[i] = binStr.charCodeAt(i);
+    }
+
+    callback( new Blob( [arr], {type: type || 'image/png'} ) );
+  }
+ });
+}
+
+ +

See also

+ + diff --git a/files/it/web/api/htmlcollection/index.html b/files/it/web/api/htmlcollection/index.html new file mode 100644 index 0000000000..53eb23edd1 --- /dev/null +++ b/files/it/web/api/htmlcollection/index.html @@ -0,0 +1,101 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +tags: + - API + - DOM + - HTML DOM + - HTMLCollection + - Interfaccia + - Lista di elementi + - Referenza + - Referenza DOM +translation_of: Web/API/HTMLCollection +--- +

{{APIRef("HTML DOM")}}

+ +

L'interfaccia HTMLCollection rappresenta una raccolta generica (array-like object simile agli argomenti) di elementi (nell'ordine del documento) e offre metodi e proprietà per la selezione dall'elenco.

+ +
Note: Questa interfaccia è chiamata HTMLCollection per ragioni storiche (prima del DOM moderno, le raccolte che implementano questa interfaccia potevano avere solo elementi HTML come elementi).
+ +

Una HTMLCollection nell'HTML DOM è attiva; viene aggiornata automaticamente quando viene modificato il documento sottostante.

+ +

Proprietà

+ +
+
{{domxref("HTMLCollection.length")}} {{readonlyInline}}
+
Restituisce il numero di elementi nella raccolta.
+
+ +

Metodi

+ +
+
{{domxref("HTMLCollection.item()")}}
+
Restituisce il nodo specifico al dato index a base zero nella lista. Restituisce null se index non è compreso nell'intervallo
+
{{domxref("HTMLCollection.namedItem()")}}
+
Restituisce il nodo specifico il cui ID o, come nome di fallback, corrisponde alla stringa specificata da nome. La corrispondenza per nome viene eseguita solo come ultima risorsa, solo in HTML, e solo se l'elemento di riferimento supporta l'attributo name. Restituisce null se nessun nodo corrisponde con il nome specificato.
+
+ +

Utilizzo in JavaScript

+ +

HTMLCollection espone anche i suoi membri direttamente come proprietà sia per nome che per indice. Gli ID HTML possono contenere : e . come caratteri validi, che richiederebbero l'uso della notazione della parentesi per l'accesso alla proprietà. Attualmente HTMLCollections non riconosce gli ID puramente numerici, il che causerebbe un conflitto con l'accesso in stile array, sebbene HTML5 li autorizzi.

+ +

Ad esempio, supponendo che esista un elemento <form> nel documento e il suo id sia "myForm":

+ +
var elem1, elem2;
+
+// document.forms è una HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // ritorna: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // ritorna: "true"
+
+elem1 = document.forms["named.item.with.periods"];
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM2 HTML') }} 
{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM1') }}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

+ + diff --git a/files/it/web/api/htmlcollection/item/index.html b/files/it/web/api/htmlcollection/item/index.html new file mode 100644 index 0000000000..f53047ffbc --- /dev/null +++ b/files/it/web/api/htmlcollection/item/index.html @@ -0,0 +1,50 @@ +--- +title: HTMLCollection.item +slug: Web/API/HTMLCollection/item +translation_of: Web/API/HTMLCollection/item +--- +
{{APIRef("HTML DOM")}}
+ +

Il metodo {{domxref("HTMLCollection")}} item() restituisce il nodo situato nell'offset specificato nella raccolta.

+ +
+

Note: Poiché il contenuto di una HTMLCollection è attivo, le modifiche al DOM sottostante possono e causano la modifica della posizione dei singoli nodi nella raccolta, pertanto il valore dell'indice non resterà necessariamente costante per un determinato nodo.

+
+ +

Sintassi

+ +
var elemento = HTMLCollection.item(index)
+ +

Parametri

+ +
+
index
+
La posizione del {{domxref("Node")}} da restituire. Gli elementi appaiono in una HTMLCollection nello stesso ordine in cui appaiono nella fonte del documento.
+
+ +

Valore di ritorno

+ +

Il {{domxref("Node")}} nell'indice specificato, o null se index è minore di zero o maggiore o uguale alla proprietà length.

+ +

Note di utilizzo

+ +

Il metodo item() estituisce un elemento numerato da una HTMLCollection. In JavaScript, è più semplice trattare HTMLCollection come una matrice e indicizzarla mediante la notazione degli array. Vedi l'{{anch ("Esempio", "esempio")}} sotto.

+ +

Esempio

+ +
var c = document.images;  // Questa è una HTMLCollection
+var img0 = c.item(0);     // Puoi usare il metodo item() in questo modo
+var img1 = c[1];          // Ma questa notazione è più facile e più comune
+
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.HTMLCollection.item")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/api/htmlelement/index.html b/files/it/web/api/htmlelement/index.html new file mode 100644 index 0000000000..a1b53a7528 --- /dev/null +++ b/files/it/web/api/htmlelement/index.html @@ -0,0 +1,481 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface + - NeedsNewLayout + - Referenza +translation_of: Web/API/HTMLElement +--- +
{{ApiRef("HTML DOM")}}
+ +

L'interfaccia HTMLElement rappresenta un qualsiasi elemento HTML. Alcuni elementi implementano direttamente questa interfaccia, altri la implementano attraverso un'interfaccia che la eredita.

+ +

Proprietà

+ +

Eredita le proprietà dai propri genitori, da {{domxref("Element")}} e da {{domxref("GlobalEventHandlers")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomeTipoDescrizione
{{domxref("HTMLElement.accessKey")}}{{domxref("DOMString")}}La chiave d'accesso assegnata all'elemento.
{{domxref("HTMLElement.accessKeyLabel")}}{{domxref("DOMString")}}Una stringa che rappresenta la chiave d'accesso assegnata all'elemento.
{{domxref("HTMLElement.contentEditable")}}{{domxref("DOMString")}}Ritorna o assegna la modificabilità dell'elemento.
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}{{domxref("Boolean")}}Indica se il contenuto dell'elemento sia modificabile.
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}{{domxref("DOMStringMap")}}Permette di leggere e scrivere attributi personalizzati (data-*) nell'elemento.
{{domxref("HTMLElement.dir")}}{{domxref("DOMString")}}Ritorna o assegna la direzione dell'elemento
{{domxref("HTMLElement.draggable")}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.hidden")}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}{{domxref("Boolean")}} 
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}{{domxref("DOMString")}} 
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}{{domxref("DOMSettableTokenList")}} 
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}any 
{{domxref("HTMLElement.lang")}}{{domxref("DOMString")}}Ritorna o assegna la lingua di un attributo, di un elemento, del testo e del contenuto di un elemento.
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}doubleL'altezza di un elemento, relativa al layout.
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}doubleLa distanza tra il bordo sinistro dell'elemento e il bordo sinistro del suo offsetParent.
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}{{domxref("Element")}}L'elemento a partire dal quale tutti i calcoli dell'offset sono effettuati.
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}doubleLa distanza tra il bordo superiore dell'elemento e il bordo superiore del suo offsetParent.
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}doubleLa larghezza di un elemento, relativa al layout.
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}{{domxref("HTMLPropertiesCollection")}} 
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}{{domxref("Boolean")}}Controlla il controllo ortografico (presente in tutti gli elementi HTML)
{{domxref("HTMLElement.style")}}{{domxref("CSSStyleDeclaration")}}Un oggetto che rappresenta la dichiarazione degli attributi di stile di un elemento.
{{domxref("HTMLElement.tabIndex")}}longRitorna o assegna la posizione di un elemento nell'ordine di tabbing.
{{domxref("HTMLElement.title")}}{{domxref("DOMString")}}Una stringa che appare in un popup quando il mouse si trova sopra all'elemento.
{{domxref("HTMLElement.translate")}} {{experimental_inline}}{{domxref("Boolean")}} 
+ +

Gestori degli eventi

+ +

Le proprietà degli eventi, nella forma onXYZ, sono definite nei {{domxref("GlobalEventHandlers")}} implementati da HTMLElement. Alcune altre sono specifiche per HTMLElement.

+ +
+
{{domxref("HTMLElement.onTouchStart")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchstart")}}.
+
{{domxref("HTMLElement.onTouchEnd")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchend")}}.
+
{{domxref("HTMLElement.onTouchMove")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchmove")}}.
+
{{domxref("HTMLElement.onTouchEnter")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchenter")}}.
+
{{domxref("HTMLElement.onTouchLeave")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchleave")}}.
+
{{domxref("HTMLElement.onTouchCancel")}} {{non-standard_inline}}
+
Restituisce il codice di gestione dell'evento {{event("touchcancel")}}.
+
+ +

Metodi

+ +

Eredita i metodi dal genitore, {{domxref("Element")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome e argomentiRestituisceDescrizione
{{domxref("HTMLElement.blur()")}}voidRimuove il focus della tastiera dall'elemento attualmente in focus.
{{domxref("HTMLElement.click()")}}voidInvia un evento di clic del mouse all'elemento.
{{domxref("HTMLElement.focus()")}}voidPorta il focus della tastiera sull'elemento.
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}void 
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Aggiunge le seguenti proprietà: offsetParent, offsetTop, offsetLeft, offsetWidth, e offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Aggiunge le seguenti proprietà: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, e itemValue.
+ Aggiunti i seguenti metodi: forceSpellcheck().
+ Spostati gli attributi onXYZ all'interfaccia {{domxref("GlobalEventHandlers")}} e aggiunta la sua ereditarietà.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Aggiunge le seguenti proprietà: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, e tutte le proprietà onXYZ.
+ Spostate le proprietà id e className all'interfaccia {{domxref("Element")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}Nessun cambiamento da {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Supporto di base{{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.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}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Supporto di base +

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

Vedi anche

+ + diff --git a/files/it/web/api/htmlelement/offsetheight/index.html b/files/it/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..46b7232b50 --- /dev/null +++ b/files/it/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,123 @@ +--- +title: HTMLElement.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +translation_of: Web/API/HTMLElement/offsetHeight +--- +
{{ APIRef("HTML DOM") }}
+ +

La proprietà HTMLElement.offsetHeight è una proprietà di tipo read-only e rappresenta l'altezza dell'elemento incluso padding verticale e magini, in pixels, come intero.

+ +

Di solito, l'offsetHeight di un elemento è una misura che include i bordi dell'elemento, il padding verticale dell'elemento, la scrollbar orizzontale dell'elemento  (se presente , se renderizzata) e l'altezza nel css dell'elemento.

+ +

Per l'oggetto body, la misua include la totale altezza lineare invece dell'altezza CSS. Elementi floattati sotto altri contenuti lineari sono ignorati.

+ +
+

Questa proprietà arrotonderà il valore ad un intero. Se vi serve un valore decimale usate {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintassi

+ +
var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;
+
+ +

intElemOffsetHeight è una variabile che associa un intero corrispondente al valore dell'offsetHeight in pixel dell'elemento. La proprietà offsetHeight è di tipo readonly.

+ +

Esempio

+ +

 

+ +

             Image:Dimensions-offset.png

+ + +

L'immagine nell'esempio sopra mosta una scrollbar e un offsetHeigh che si adatta alla finestra. Comunque, elementi non scrollabili potrebbero avere un offsetHeights largo, molto più largo del contenuto visibile. Questi elemnti sono tipicamente contenuti in un elemento scrollabile; di conseguenza questi elementi non scrollabili possono essere invisibili completamente o parzialmente, dipende dal settaggio dello scrollTop del contenitore scrollabile.

+ +

 

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatusCommenti
{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}{{Spec2('CSSOM View')}} 
+ +

Note

+ +

offsetHeight è una proprietà del DHTML object model la quale era stata introdotta precedentemente da MSIE. Questa si riferisce a volte alla dimensione fisica/grafica di un elemento, o all'altezza del border-box di un elemento.

+ +

Compatibilità Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vedi Anche

+ + diff --git a/files/it/web/api/htmlformelement/acceptcharset/index.html b/files/it/web/api/htmlformelement/acceptcharset/index.html new file mode 100644 index 0000000000..5100a8d7f4 --- /dev/null +++ b/files/it/web/api/htmlformelement/acceptcharset/index.html @@ -0,0 +1,22 @@ +--- +title: HTMLFormElement.acceptCharset +slug: Web/API/HTMLFormElement/acceptCharset +translation_of: Web/API/HTMLFormElement/acceptCharset +--- +
{{APIRef("HTML DOM")}}
+ +

acceptCharset restituisce una lista delle codifiche dei caratteri supportate per un dato elemento form. Questa lista è una stringa e gli elementi possono essere separati da virgole o da spazi.

+ +

Sintassi

+ +
stringa = form.acceptCharset;
+
+ +

Esempio

+ +
inputs = document.forms["myform"].acceptCharset
+
+ +

Specifiche

+ +

DOM Level 2 HTML: acceptCharset

diff --git a/files/it/web/api/htmlformelement/action/index.html b/files/it/web/api/htmlformelement/action/index.html new file mode 100644 index 0000000000..8b55910259 --- /dev/null +++ b/files/it/web/api/htmlformelement/action/index.html @@ -0,0 +1,30 @@ +--- +title: HTMLFormElement.action +slug: Web/API/HTMLFormElement/action +translation_of: Web/API/HTMLFormElement/action +--- +
{{APIRef("HTML DOM")}}
+ +

action legge o imposta l'attributo action dell'elemento FORM.

+ +

Sintassi

+ +
stringa = form.action
+form.action =
+stringa
+
+ +

Esempio

+ +
form.action = "/cgi-bin/publish";
+
+ +

Note

+ +

L'attributo action di un form è il programma che viene eseguito sul server quando il form viene inviato. Questa proprietà può essere letta o impostata.

+ +

Specifiche

+ +

DOM Level 2 HTML: action

+ +

{{ languages( { "ja": "ja/DOM/form.action" } ) }}

diff --git a/files/it/web/api/htmlformelement/elements/index.html b/files/it/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..3ea2a2aa32 --- /dev/null +++ b/files/it/web/api/htmlformelement/elements/index.html @@ -0,0 +1,34 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/HTMLFormElement/elements +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Restituisce una HTMLCollection contenente tutti i controlli dell'elemento form a cui si riferisce.

+ +

Puoi accedere un elemento della collezione sia usando l'indice che usando l'id o il name.

+ +

Sintassi

+ +
nodeList =
+HTMLFormElement.elements
+
+ +

Esempio

+ +
var input = document.getElementById("form1").elements;
+var inputByIndex = inputs[2]; //indice
+var inputByName = inputs["login"]; //id oppure name
+
+ +

Specifiche

+ +

Specifica W3C DOM 2 HTML Specifica elements

diff --git a/files/it/web/api/htmlformelement/enctype/index.html b/files/it/web/api/htmlformelement/enctype/index.html new file mode 100644 index 0000000000..082db19303 --- /dev/null +++ b/files/it/web/api/htmlformelement/enctype/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.enctype +slug: Web/API/HTMLFormElement/enctype +translation_of: Web/API/HTMLFormElement/enctype +--- +
{{APIRef("HTML DOM")}}
+ +

enctype legge o imposta il tipo di contenuto del form.

+ +

Sintassi

+ +
stringa = form.enctype
+form.enctype =
+stringa
+
+ +

Esempio

+ +
form.enctype = "application/x-www-form-urlencoded";
+
+ +

Note

+ +

Il tipo di codifica predefinito è "application/x-www-form-urlencoded".

+ +

Specifiche

+ +

DOM Level 2 HTML: enctype

diff --git a/files/it/web/api/htmlformelement/index.html b/files/it/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..35ef7bcb58 --- /dev/null +++ b/files/it/web/api/htmlformelement/index.html @@ -0,0 +1,125 @@ +--- +title: form +slug: Web/API/HTMLFormElement +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/HTMLFormElement +--- +

{{ ApiRef() }}

+

HTML Form Element Interface

+

L'elemento FORM possiede tutte le proprietà e i metodi di qualunque element, e inoltre ha un'interfaccia specializzata: HTMLFormElement.

+

Questa interfaccia fornisce i metodi per creare e modificare gli elementi del FORM. L'esempio seguente mostra come creare un nuovo elemento form, modificare i suoi attributi e inviarlo.

+
// Crea un form
+var f = document.createElement("form");
+
+// Lo aggiungere come ultimo nodo all'interno dell'elemento Body
+document.body.appendChild(f);
+
+// Setta l'attributo action e l'attributo method
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Invia il form tramite il metodo submit
+f.submit();
+
+

Il seguente esempio di pagina HTML mostra come estrarre informazioni da un form e come settare alcuni dei suoi attributi.

+
</html>
+<head>
+<title>Esempio di Form</title>
+<script type="text/javascript">
+  function getFormInfo() {
+    var info;
+
+    // Ricava un riferimento al form usando la collezione di form disponibile in document
+    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;
+  }
+
+  // Un riferimento al form viene passato
+  //  dall'attributo onclick del button usando 'this.form'
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+</head>
+<body>
+<h1>Form  example</h1>
+
+<form id="formA"
+ action="/cgi-bin/test" method="POST">
+ <p>Clicca "Info" per vedere delle info sul form.
+    Cllica set per cambiare i settaggi,quindi di nuovo info per vedere l'effetto</p>
+ <p>
+  <input type="button" value="info"
+   onclick="getFormInfo();">
+  <input type="button" value="set"
+   onclick="setFormInfo(this.form);">
+  <input type="reset" value="reset">
+  <br>
+  <textarea id="tex" style="height:15em; width:20em">
+ </p>
+</form>
+</body>
+</html>
+
+

Proprietà

+
+
+ form.elements
+
+ Restituisce una collezione dei controlli contenuti form corrente.
+
+ form.length
+
+ Restituisce il numero di controlli contenuti nel form corrente.
+
+ form.name
+
+ Restituisce una stringa con con il valore dell'attributo name del form corrente.
+
+ form.acceptCharset
+
+ Restituisce una lista dei set di caratteri supportati per il form corrente.
+
+ form.action
+
+ Restituisce/setta l'URI a cui verranno spediti i dati del form.
+
+ form.enctype
+
+ Restituisce/setta il tipo di contenuto che il form corrente invierà al server.
+
+ form.method
+
+ Restituisce/setta il metodo con cui inviare le informazioni al server.
+
+ form.target
+
+ Restituisce/setta il nome del frame in cui rendere la pagina di risposta del server.
+
+

Metodi

+
+
+ form.submit
+
+ Invia il form.
+
+ form.reset
+
+ Riporta il form al suo stato iniziale.
+
+

{{ languages( { "fr": "fr/DOM/form", "pl": "pl/DOM/form", "en": "en/DOM/form" } ) }}

diff --git a/files/it/web/api/htmlformelement/length/index.html b/files/it/web/api/htmlformelement/length/index.html new file mode 100644 index 0000000000..34f1e82ef3 --- /dev/null +++ b/files/it/web/api/htmlformelement/length/index.html @@ -0,0 +1,26 @@ +--- +title: HTMLFormElement.length +slug: Web/API/HTMLFormElement/length +translation_of: Web/API/HTMLFormElement/length +--- +
{{APIRef("HTML DOM")}}
+ +

length restituisce il numero di controlli contenuti dall'elemento FORM.

+ +

Sintassi

+ +
integer = form.length
+
+ +

Esempio

+ +
if (document.getElementById("form1").length > 1) {
+  // vi è più di un controllo
+}
+
+ +

Specification

+ +

DOM Level 2: length

+ +

{{ languages( { "ja": "ja/DOM/form.length" } ) }}

diff --git a/files/it/web/api/htmlformelement/method/index.html b/files/it/web/api/htmlformelement/method/index.html new file mode 100644 index 0000000000..bffd4f7faf --- /dev/null +++ b/files/it/web/api/htmlformelement/method/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.method +slug: Web/API/HTMLFormElement/method +translation_of: Web/API/HTMLFormElement/method +--- +
{{APIRef("HTML DOM")}}
+ +

method legge o imposta il metodo HTTP utilizzato per l'invio del form.

+ +

+

Sintassi

+

+ +
stringa = form.method
+form.method =
+stringa
+
+ +

Esempio

+ +
document.forms["myform"].method = "POST";
+
+ +

Specifiche

+ +

DOM Level 2 HTML: method

+ +

{{ languages( { "ja": "ja/DOM/form.method" } ) }}

diff --git a/files/it/web/api/htmlformelement/name/index.html b/files/it/web/api/htmlformelement/name/index.html new file mode 100644 index 0000000000..1e6c741329 --- /dev/null +++ b/files/it/web/api/htmlformelement/name/index.html @@ -0,0 +1,35 @@ +--- +title: HTMLFormElement.name +slug: Web/API/HTMLFormElement/name +translation_of: Web/API/HTMLFormElement/name +--- +
{{APIRef("HTML DOM")}}
+ +

name restituisce il nome dell'elemento FORM corrente come stringa.

+ +

Sintassi

+ +
stringa = form.name
+form.name =
+stringa
+
+ +

Esempio

+ +
form1 = document.getElementById("form1").name;
+if (form1 != document.form.form1) {
+   // il browser non supporta questo tipo di riferimenti
+}
+
+ +

Note

+ +

Si noti che questa proprietà può essere letta o impostata, il chè significa che è possibile modificare o impostare il nome del form.

+ +

Se l'elemento FORM contiene un elemento chiamato "name", questo elemento coprirà la proprietà form.name, quindi non sarà possibile utilizzarla.

+ +

Internet Explorer (IE) non permette di modificare l'attributo name di un elemento che è stato creato con createElement() utilizzando la proprietà name.

+ +

Specifiche

+ +

DOM Level 2 HTML: name

diff --git a/files/it/web/api/htmlformelement/reset/index.html b/files/it/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..0d373e6938 --- /dev/null +++ b/files/it/web/api/htmlformelement/reset/index.html @@ -0,0 +1,28 @@ +--- +title: HTMLFormElement.reset +slug: Web/API/HTMLFormElement/reset +translation_of: Web/API/HTMLFormElement/reset +--- +
{{APIRef("HTML DOM")}}
+ +

reset resetta il form al suo stato iniziale.

+ +

Sintassi

+ +
HTMLForm.reset()
+
+ +

Esempio

+ +
document.forms["mioForm"].reset();
+
+ +

Note

+ +

Questo metodo simula ciò che accadrebbe se l'utente cliccasse il bottone reset.

+ +

Se un controllo di un form (come il bottone reset) ha come nome reset, questo coprirà il metodo reset.

+ +

Specifiche

+ +

DOM Level 2 HTML: reset

diff --git a/files/it/web/api/htmlformelement/submit/index.html b/files/it/web/api/htmlformelement/submit/index.html new file mode 100644 index 0000000000..b762349b6c --- /dev/null +++ b/files/it/web/api/htmlformelement/submit/index.html @@ -0,0 +1,30 @@ +--- +title: HTMLFormElement.submit() +slug: Web/API/HTMLFormElement/submit +translation_of: Web/API/HTMLFormElement/submit +--- +
{{APIRef("HTML DOM")}}
+ +

submit invia il form.

+ +

Sintassi

+ +
HTMLForm.submit()
+
+ +

Esempio

+ +
document.forms["mioForm"].submit()
+
+ +

Note

+ +

Questo metodo simula ciò che accadrebbe se l'utente cliccasse sul bottone "invia".

+ +

Se il controllo di un form (come il bottone di invio) ha come nome o un id submit, questo coprirà il metodo submit.

+ +

Specifiche

+ +

DOM Level 2 HTML: submit

+ +

{{ languages( { "ja": "ja/DOM/form.submit" } ) }}

diff --git a/files/it/web/api/htmlformelement/target/index.html b/files/it/web/api/htmlformelement/target/index.html new file mode 100644 index 0000000000..c94b8a78f9 --- /dev/null +++ b/files/it/web/api/htmlformelement/target/index.html @@ -0,0 +1,24 @@ +--- +title: HTMLFormElement.target +slug: Web/API/HTMLFormElement/target +translation_of: Web/API/HTMLFormElement/target +--- +
{{APIRef("HTML DOM")}}
+ +

target legge o imposta il contenuto dell'attributo target (per esempio, il frame dove verrà visualizzato l'output del form).

+ +

Sintassi

+ +
stringa = form.target
+form.target =
+stringa
+
+ +

Esempio

+ +
myForm.target = document.frames[1].name;
+
+ +

Specifiche

+ +

DOM Level 2 HTML: target

diff --git a/files/it/web/api/htmliframeelement/index.html b/files/it/web/api/htmliframeelement/index.html new file mode 100644 index 0000000000..4138970a78 --- /dev/null +++ b/files/it/web/api/htmliframeelement/index.html @@ -0,0 +1,455 @@ +--- +title: HTMLIFrameElement +slug: Web/API/HTMLIFrameElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLIFrameElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLIFrameElement interface provides special properties and methods (beyond those of the {{domxref("HTMLElement")}} interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Properties

+ +

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

+ +
+
{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that specifies the alignment of the frame with respect to the surrounding context.
+
{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}
+
Is a {{domxref("Boolean")}} indicating whether the inline frame is willing to be placed into full screen mode. See Using full-screen mode for details.
+
{{domxref("HTMLIFrameElement.allowPaymentRequest")}}
+
Is a {{domxref("Boolean")}} indicating whether the Payment Request API may be invoked inside a cross-origin iframe.
+
{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}
+
Returns a {{domxref("Document")}}, the active document in the inline frame's nested browsing context.
+
{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}
+
Returns a {{domxref("WindowProxy")}}, the window proxy for the nested browsing context.
+
{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that indicates whether to create borders between frames.
+
{{domxref("HTMLIFrameElement.height")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("height", "iframe")}} HTML attribute, indicating the height of the frame.
+
{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that contains the URI of a long description of the frame.
+
{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} being the height of the frame margin.
+
{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} being the width of the frame margin.
+
{{domxref("HTMLIFrameElement.name")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("name", "iframe")}} HTML attribute, containing a name by which to refer to the frame.
+
{{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerPolicy", "iframe")}} HTML attribute indicating which referrer to use when fetching the linked resource.
+
{{domxref("HTMLIFrameElement.sandbox")}}
+
Is a {{domxref("DOMSettableTokenList")}} that reflects the {{htmlattrxref("sandbox", "iframe")}} HTML attribute, indicating extra restrictions on the behavior of the nested content.
+
{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}
+
Is a {{domxref("DOMString")}} that indicates whether the browser should provide scrollbars for the frame.
+
{{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.
+
+ +

Methods

+ +

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

+ +

Browser API methods

+ +

To support the requirement of a browser {{HTMLElement("iframe")}}, HTMLIFrameElement has been extended with new methods that give the {{HTMLElement("iframe")}} some super powers. These are non-standard (see {{anch("Browser compatibility")}}.)

+ + + +

The following navigation methods allow navigation through the browsing history of the {{HTMLElement("iframe")}}. They are necessary to be able to implement back, forward, stop, and reload buttons.

+ +
+
{{domxref("HTMLIFrameElement.reload()")}}
+
Allows reloading of the {{HTMLElement("iframe")}} element content.
+
{{domxref("HTMLIFrameElement.stop()")}}
+
Allows stopping of the {{HTMLElement("iframe")}}'s content loading.
+
{{domxref("HTMLIFrameElement.getCanGoBack()")}}
+
Indicates whether it's possible to navigate backwards.
+
{{domxref("HTMLIFrameElement.goBack()")}}
+
Changes the location of the {{HTMLElement("iframe")}} for the previous location in its browsing history.
+
{{domxref("HTMLIFrameElement.getCanGoForward()")}}
+
Indicates whether it's possible to navigate forward.
+
{{domxref("HTMLIFrameElement.goForward()")}}
+
Changes the location of the {{HTMLElement("iframe")}} for the next location in its browsing history.
+
+ +

Management methods

+ +

The next set of methods manage the resources used by a browser {{HTMLElement("iframe")}}. These are especially useful for implementing tabbed browser application.

+ +
+
{{domxref("HTMLIFrameElement.executeScript()")}}
+
Allows a specified script to be executed against a page loaded in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.purgeHistory()")}}
+
Clears all the resources (cookies, localStorage, cache, etc.) associated with the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.setVisible()")}}
+
Changes the visibility state of a browser {{HTMLElement("iframe")}}. This can influence resource allocation and some function usage such as {{domxref("window.requestAnimationFrame","requestAnimationFrame")}}.
+
{{domxref("HTMLIFrameElement.getVisible()")}}
+
Indicates the current visibility state of the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.setActive()")}}
+
Sets the current {{HTMLElement("iframe")}} as the active frame, which has an effect on how it is prioritized by the process manager.
+
{{domxref("HTMLIFrameElement.getActive()")}}
+
Indicates whether the current browser {{htmlelement("iframe")}} is the currently active frame.
+
+ + + +

The following methods allow direct control of sound in the browser element.

+ +
+
{{domxref("HTMLIFrameElement.getVolume()")}}
+
Gets the current volume of the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.setVolume()")}}
+
Sets the current volume of the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.mute()")}}
+
Mutes any audio playing in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.unmute()")}}
+
Unmutes any audio playing in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.getMuted()")}}
+
Indicates whether the browser {{HTMLElement("iframe")}} is currently muted.
+
+ +

Search methods

+ +

New methods are provided to allow programmatic searches of browser {{HTMLElement("iframe")}}s to be carried out.

+ +
+
{{domxref("HTMLIFrameElement.findAll()")}}
+
Searches for a string in a browser {{HTMLElement("iframe")}}'s content; if found, the first instance of the string relative to the caret position will be highlighted.
+
{{domxref("HTMLIFrameElement.findNext()")}}
+
Highlights the next or previous instance of a search result after a {{domxref("HTMLIFrameElement.findAll","findAll()")}} search has been carried out.
+
{{domxref("HTMLIFrameElement.clearMatch()")}}
+
Clears any content highlighted by {{domxref("HTMLIFrameElement.findAll","findAll()")}} or {{domxref("HTMLIFrameElement.findNext","findNext()")}}.
+
+ + + +

In order to manage the browser {{HTMLElement("iframe")}}'s content, many new events were added (see below). The following methods are used to deal with those events:

+ +
+
The {{HTMLElement("iframe")}} gains support for the methods of the {{domxref("EventTarget")}} interface
+
{{domxref("EventTarget.addEventListener","addEventListener()")}}, {{domxref("EventTarget.removeEventListener","removeEventListener()")}}, and {{domxref("EventTarget.dispatchEvent","dispatchEvent()")}}.
+
{{domxref("HTMLIFrameElement.sendMouseEvent()")}}
+
Sends a {{domxref("MouseEvent")}} to the {{HTMLElement("iframe")}}'s content.
+
{{domxref("HTMLIFrameElement.sendTouchEvent()")}}
+
Sends a {{domxref("TouchEvent")}} to the {{HTMLElement("iframe")}}'s content. Note that this method is available for touch enabled devices only.
+
{{domxref("HTMLIFrameElement.addNextPaintListener()")}}
+
Defines a handler to listen for the next {{event("MozAfterPaint")}} event in the browser {{HTMLElement("iframe")}}.
+
{{domxref("HTMLIFrameElement.removeNextPaintListener()")}}
+
Removes a handler previously set with {{domxref("HTMLIFrameElement.addNextPaintListener","addNextPaintListener()")}}.
+
+ +

Utility methods

+ +

Last, there are some utility methods, useful for apps that host a browser {{HTMLElement("iframe")}}.

+ +
+
{{domxref("HTMLIFrameElement.download()")}}
+
Downloads a specified URL, storing it at the specified filename/path.
+
{{domxref("HTMLIFrameElement.getContentDimensions()")}}
+
Retrieves the X and Y dimensions of the content window.
+
{{domxref("HTMLIFrameElement.getManifest()")}}
+
Retrieves the manifest of an app loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.
+
{{domxref("HTMLIFrameElement.getScreenshot()")}}
+
Takes a screenshot of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful to get thumbnails of tabs in a tabbed browser app.
+
{{domxref("HTMLIFrameElement.getStructuredData()")}}
+
Retrieves any structured microdata (and hCard and hCalendar microformat data) contained in the HTML loaded in the browser {{HTMLElement("iframe")}} and returns it as JSON.
+
{{domxref("HTMLIFrameElement.zoom()")}}
+
Changes the zoom factor of the browser {{HTMLElement("iframe")}}'s content. This is particularly useful for zooming in/out on non-touch-enabled devices.
+
+ +
+
+ + + + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Payment','#paymentrequest-and-iframe-elements','allowPaymentRequest')}}{{Spec2('Payment')}}Adds allowPaymentRequest property.
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrerPolicy property.
{{SpecName('HTML WHATWG', "the-iframe-element.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML WHATWG')}}The following property has been added: allowFullscreen.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}{{Spec2('HTML5 W3C')}}The following properties are now obsolete: scrolling, marginWidth, marginHeight, longDesc, frameBorder, and align.
+ The following properties have been added: srcdoc, sandbox, and contentWindow.
{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM2 HTML')}}The contentDocument property has been added.
{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcdoc{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
sandbox{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(17)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contentDocument{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0[3]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contentWindow{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
allowFullScreen {{experimental_inline}}{{CompatChrome(17)}} {{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{CompatGeckoDesktop(9.0)}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop(18.0)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
referrerPolicy {{experimental_inline}}{{CompatChrome(51)}}{{CompatNo}}{{compatGeckoDesktop(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Browser API methods{{CompatNo}}{{CompatNo}}{{CompatNo}}[5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
allowPaymentRequest{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcdoc{{CompatChrome(4)}}{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoMobile(25)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
sandbox{{CompatChrome(4)}}{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoMobile(17)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
seamless {{experimental_inline}}{{CompatChrome(4)}}{{CompatChrome(4)}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contentDocument{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
contentWindow{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
allowFullScreen {{experimental_inline}}{{CompatChrome(17)}} {{property_prefix("-webkit")}}[4]{{CompatChrome(17)}} {{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{CompatGeckoMobile(9.0)}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile(18.0)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
referrerPolicy {{experimental_inline}}{{CompatChrome(51)}}{{CompatChrome(51)}}{{CompatNo}}{{compatGeckoMobile(50)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Browser API methods{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
allowPaymentRequest{{CompatNo}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ + + +

See also

+ + diff --git a/files/it/web/api/htmliframeelement/mute/index.html b/files/it/web/api/htmliframeelement/mute/index.html new file mode 100644 index 0000000000..ca7e44107e --- /dev/null +++ b/files/it/web/api/htmliframeelement/mute/index.html @@ -0,0 +1,93 @@ +--- +title: HTMLIFrameElement.mute() +slug: Web/API/HTMLIFrameElement/mute +translation_of: Mozilla/Gecko/Chrome/API/Browser_API/mute +--- +

{{APIRef("HTML DOM")}}{{non-standard_header}}

+ +

Il metodo mute() del {{domxref("HTMLIFrameElement")}} muta qualsiasi audio in riproduzione nel browser {{HTMLElement("iframe")}}.

+ +

Sintassi

+ +
instanceOfHTMLIframeElement.mute();
+ +

Ritorna

+ +

Nulla.

+ +

Parametri

+ +

Nessuno.

+ +

Esempio

+ +
var browser = document.querySelector('iframe');
+
+browser.mute();
+
+ +

Specifica

+ +

Non è parte di nessuna specifica.

+ +

Compatibilità browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Supporto base{{CompatNo}}{{CompatGeckoDesktop(47)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Supporto base{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Supportato solo in codice chrome.

+ +

Vedi anche

+ + diff --git a/files/it/web/api/htmlunknownelement/index.html b/files/it/web/api/htmlunknownelement/index.html new file mode 100644 index 0000000000..079de3d82d --- /dev/null +++ b/files/it/web/api/htmlunknownelement/index.html @@ -0,0 +1,58 @@ +--- +title: HTMLUnknownElement +slug: Web/API/HTMLUnknownElement +tags: + - API + - HTML DOM + - Interfaccia + - Referenza +translation_of: Web/API/HTMLUnknownElement +--- +

{{APIRef("HTML DOM")}}

+ +

L'interfaccia HTMLUnknownElement rappresenta un elemento HTML non valido e deriva dall'interfaccia {{DOMxRef("HTMLElement")}}, ma senza implementare ulteriori proprietà o metodi.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Proprietà

+ +

Nessuna proprietà specifica; eredita proprietà dal suo genitore, {{DOMxRef("HTMLElement")}}.

+ +

Metodi

+ +

Nessuna proprietà specifica; eredita proprietà dal suo genitore, {{DOMxRef("HTMLElement")}}.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML WHATWG")}}Nessun cambiamento da {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML5 W3C")}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

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

+ +

Vedi anche

+ + diff --git a/files/it/web/api/index.html b/files/it/web/api/index.html new file mode 100644 index 0000000000..e5b4b1b744 --- /dev/null +++ b/files/it/web/api/index.html @@ -0,0 +1,17 @@ +--- +title: Riferimento Web API +slug: Web/API +tags: + - API + - Landing + - Riferimento + - Web +translation_of: Web/API +--- +

Le APIs sono dispositivi pronti per coloro che scrivono codice per il Web in JavaScript. Di seguito è riportato un elenco di tutte le interfacce (ovvero tipi di oggetti) che potresti essere in grado di utilizzare durante lo sviluppo della tua app o sito Web. API è l'acronimo di Application Programming Interface, nonché di Application Program Interface. Come parzialmente intuibile dai termini che compongono l'acronimo, le API rappresentano un'interfaccia di programmazione.

+ +
+
{{APIListAlpha}}
+
+ +

 

diff --git a/files/it/web/api/indexeddb_api/index.html b/files/it/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..8512b030bd --- /dev/null +++ b/files/it/web/api/indexeddb_api/index.html @@ -0,0 +1,243 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +translation_of: Web/API/IndexedDB_API +--- +
+

IndexedDB è una API per la memorizzazione client-side di una considerevole quantità di dati strutturati (inclusi file e blob) e per una ricerca performante su questi dati mediante gli indici. Se Web Storage è utile per memorizzare piccole quantità di dati, non lo è invece per memorizzare grandi quantità di dati strutturati. IndexedDB fornisce la soluzione. Questa è la pagina principale su IndexedDB di MDN — qui vengono forniti link a tutti i riferimenti API e guide all'uso, dettagli di supporto al browser ed alcune spiegazioni dei concetti chiave.

+
+ +

Concetti chiave ed uso

+ +

IndexedDB è un sistema di database transazionale, che inizialmente potrebbe creare confusione se si è abituati a lavorare solo con i database relazionali, ma presto diverrà abbastanza chiaro. IndexedDB permette di memorizzare e recuperare oggetti indicizzati con una chiave. E' necessario specificare lo schema del database, aprire una connessione al proprio database e poi recuperare ed aggiornare i dati attraverso una serie di transazioni.

+ + + +
+

Nota: Come molte soluzioni web storage, IndexedDB segue una same-origin policy. Quindi mentre si può accedere ai dati memorizzati sotto un dominio, non è possibile accedere ai dati attraverso domini differenti.

+
+ +

Sincrono e asincrono

+ +

IndexedDB include sia una API asincrona che una API sincrona. La API asincrona può essere usata in molti casi, incluso WebWorkers, mentre la API sincrona è designata ad essere utilizzata solo con Web Workers e sarà usata molto raramente.

+ +
+

Nota: Attualmente, nessuno dei principali browser supporta la API sincrona.

+
+ +

Limiti di memorizzazione

+ +

Non c'è alcun limite alla dimensione di un singolo elemento del database, tuttavia ci potrebbe essere un limite ad ogni dimensione complessiva del database IndexedDB. Questo limite (ed il modo con cui l'interfaccia utente lo supporterà) potrebbe variare da un browser ad un altro:

+ + + +

Asynchronous API

+ +

The asynchronous API methods return without blocking the calling thread. To get asynchronous access to a database, call open() on the indexedDB attribute of a window object. This method returns an {{domxref("IDBRequest")}} object; asynchronous operations communicate to the calling application by firing events on {{domxref("IDBRequest")}} objects.

+ +

Connecting to a database

+ +
+
{{domxref("IDBEnvironment")}}
+
Provides access to a client-side database. It is implemented by the {{ domxref("window") }} and {{ domxref("worker") }} objects.
+
{{domxref("IDBFactory")}}
+
Provides access to a database. This is the interface implemented by the global object indexedDB and is therefore the entry point for the API.
+
{{domxref("IDBOpenDBRequest")}}
+
Represents a request to open a database.
+
{{domxref("IDBDatabase")}}
+
Represents a connection to a database. It's the only way to get a transaction on the database.
+
+ +

Accessing results of database requests

+ +
+
{{domxref("IDBRequest")}}
+
Provides access to results of asynchronous requests to databases and database objects. It is what you get when you call an asynchronous method.
+
+ +

Retrieving and modifying data

+ +
+
{{domxref("IDBTransaction")}}
+
Represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or write) that you want.
+
{{domxref("IDBObjectStore")}}
+
Represents an object store.
+
{{domxref("IDBIndex")}}
+
Provides access to the metadata of an index.
+
{{domxref("IDBCursor")}}
+
Iterates over object stores and indexes.
+
{{domxref("IDBCursorWithValue")}}
+
Iterates over object stores and indexes and returns the cursor's current value.
+
{{domxref("IDBKeyRange")}}
+
Defines a range of keys.
+
+ +

Deprecated interfaces

+ +

An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:

+ +
+
{{domxref("IDBVersionChangeRequest")}}
+
Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.
+
{{domxref("IDBDatabaseException")}}  {{ obsolete_inline() }}
+
Represents exception conditions that can be encountered while performing database operations.
+
+ +

Synchronous API

+ +
+

Important: This is a reminder that the synchronous version of IndexedDB is not yet implemented in any browser.

+
+ +

To get synchronous access to a database, call open() on the Unimplemented indexedDBSync attribute of a worker object. This returns an IDBDatabaseSync object, which enables you to create, open, and remove object stores and indexes, set the version of the database, and create transactions.

+ + + +

Examples

+ + + +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Asynchronous API +

11.0 {{ property_prefix("webkit") }}
+ 24

+ 		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1017{{ CompatNo() }}
Synchronous API
+ (used with WebWorkers)		{{ CompatNo() }}{{ CompatNo() }}
+ See {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Asynchronous API4.4{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1017{{ CompatNo() }}
+
+ +
+

Note: Some browsers don't yet support IndexedDB but do support WebSQL, most notably Safari/Webkit on desktop and iOS. One way around this problem is to use an IndexedDB Polyfill or Shim that falls back to WebSQL or even localStorage for non-supporting browsers. The best available polyfill at present is localForage.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}{{Spec2('IndexedDB')}} 
+ + diff --git a/files/it/web/api/mutationobserver/index.html b/files/it/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..6c15916a56 --- /dev/null +++ b/files/it/web/api/mutationobserver/index.html @@ -0,0 +1,102 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - Cambiamenti del DOM + - DOM + - DOM Reference + - Mutation Observer + - Mutation Observer e resize + - resize + - resize listener +translation_of: Web/API/MutationObserver +--- +
{{APIRef("DOM WHATWG")}}
+ +

L'interfaccia {{domxref("MutationObserver")}} offre la possibilità di monitorare le mutazioni subite dall'alberatura del DOM. È stata progettata per sostituire i Mutation Events che fanno parte del DOM3 Events specification.

+ +

Costruttore

+ +
+
{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}
+
Crea e restituisce un nuovo MutationObserver che invocherà una funzione di callback specificata alla mutazione del DOM.
+
+ +

Metodi

+ +
+
{{domxref("MutationObserver.disconnect", "disconnect()")}}
+
Interrompe la ricezione da parte dell'istanza MutationObserver di notifiche sulla mutazione del DOM fino a quando verrà nuovamente invocato {{domxref("MutationObserver.observe", "observe()")}}
+
{{domxref("MutationObserver.observe", "observe()")}}
+
Configura il MutationObserver affinché possa ricevere notifiche attraverso la funzione di callback specificata quando avviene una mutazione del DOM che corrisponda alle opzioni impostate.
+
{{domxref("MutationObserver.takeRecords", "takeRecords()")}}
+
Rimuove tutte le notifiche in coda sul MutationObserver e le restituisce come nuovo  {{jsxref("Array")}} di oggetti {{domxref("MutationRecord")}}
+
+ +

Mutation Observer & customizzazione del resize event & demo

+ +

https://codepen.io/webgeeker/full/YjrZgg/

+ +

Esempio

+ +

L'esempio seguente è un adattamento di questo post

+ +
// Seleziona il nodo di cui monitare la mutazione
+var targetNode = document.getElementById('some-id');
+
+// Opzioni per il monitoraggio (quali mutazioni monitorare)
+var config = { attributes: true, childList: true, subtree: true };
+
+// Funzione di callback da eseguire quando avvengono le mutazioni
+var callback = function(mutationsList, observer) {
+    for(var mutation of mutationsList) {
+        if (mutation.type == 'childList') {
+            console.log('A child node has been added or removed.');
+        }
+        else if (mutation.type == 'attributes') {
+            console.log('The ' + mutation.attributeName + ' attribute was modified.');
+        }
+    }
+};
+
+// Creazione di un'istanza di monitoraggio collegata alla funzione di callback
+var observer = new MutationObserver(callback);
+
+// Inizio del monitoraggio del nodo target riguardo le mutazioni configurate
+observer.observe(targetNode, config);
+
+// Successivamente si può interrompere il monitoraggio
+observer.disconnect();
+ +

Leggi pure

+ + + +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilità dei Browser

+ + + +

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

diff --git a/files/it/web/api/navigator/cookieenabled/index.html b/files/it/web/api/navigator/cookieenabled/index.html new file mode 100644 index 0000000000..4905b8deb8 --- /dev/null +++ b/files/it/web/api/navigator/cookieenabled/index.html @@ -0,0 +1,83 @@ +--- +title: Navigator.cookieEnabled +slug: Web/API/Navigator/cookieEnabled +translation_of: Web/API/Navigator/cookieEnabled +--- +

{{ ApiRef("HTML DOM") }}

+ +

Riassunto

+ +

Restituisce un valore booleano che indica se i cookie abilitati o meno (sola lettura).

+ +

Sintassi

+ +
var cookieEnabled = navigator.cookieEnabled;
+
+ + + +

Example

+ +
if (!navigator.cookieEnabled) {
+  // dire all'utente che l'attivazione dei cookie rende le pagine web più utile}
+
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic supportYes{{ CompatGeckoDesktop(1.0) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile(1.0) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Note di Gecko

+ +

Prima di Gecko 8.0 {{ geckoRelease("8.0") }}, window.navigator.cookieEnabled potrebbe segnalare il risultato errato se un'eccezione del sito è stata in vigore per la pagina in cui è stato eseguito il controllo. Questo è stato risolto.

+ +

Specifications

+ +

HTML WHATWG

diff --git a/files/it/web/api/navigator/credentials/index.html b/files/it/web/api/navigator/credentials/index.html new file mode 100644 index 0000000000..107fe4a123 --- /dev/null +++ b/files/it/web/api/navigator/credentials/index.html @@ -0,0 +1,57 @@ +--- +title: credentials +slug: Web/API/Navigator/credentials +tags: + - API + - CredentialContainer + - Proprietà + - Riferimento + - credentials +translation_of: Web/API/Navigator/credentials +--- +

{{SeeCompatTable}}{{APIRef("")}}

+ +

La proprietà credentials dell'interfaccia {{domxref("Navigator")}} restituisce un interfaccia {{domxref("CredentialsContainer")}}, la quale espone metodi utili per fare request-credentials. L'interfaccia {{domxref("CredentialsContainer")}} inoltre notifica louser agent quando un avviene un evento di interesse, come, ad esempio, un sign-in o un sign-out avvenuto con successo. Questa interfaccia può essere utilizzata per scoprire la presenza della funzionalità.

+ +

Sintassi

+ +
var credentialsContainer = navigator.credentials
+ +

Value

+ +

Un'interfaccia {{domxref("CredentialsContainer")}}.

+ +

Esempio

+ +
if ('credentials' in navigator) {
+  navigator.credentials.get({password: true})
+  .then(function(creds) {
+    // Usa le credenziali.
+  });
+} else {
+  // Gestisci il sign-in alternativo, senza credentials.
+};
+
+ +

Specifica

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Definizione iniziale.
+ +

Browser compatibili

+ + + +

{{Compat("api.Navigator.credentials")}}

diff --git a/files/it/web/api/navigator/index.html b/files/it/web/api/navigator/index.html new file mode 100644 index 0000000000..6ef2055b7a --- /dev/null +++ b/files/it/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/it/web/api/navigatorconcurrenthardware/index.html b/files/it/web/api/navigatorconcurrenthardware/index.html new file mode 100644 index 0000000000..10fb1576ca --- /dev/null +++ b/files/it/web/api/navigatorconcurrenthardware/index.html @@ -0,0 +1,56 @@ +--- +title: NavigatorConcurrentHardware +slug: Web/API/NavigatorConcurrentHardware +translation_of: Web/API/NavigatorConcurrentHardware +--- +

 

+ +

Il NavigatorConcurrentHardware aggiunge all'interfaccia delle caratteristiche che permettono ai contenuti Web di determinare quanti processori logici sono a disposizione dell'utente, in modo tale da ottimizzare le operazioni di contenuti e Web apps che possano usufruire al meglio la CPU dell'utente.

+ +

Il numero dei processori logici del core serve a misurare il numero di threads che possono essere di fatto eseguiti per volta, senza che questi condividano la stesse CPU. Oggigiorno i computer hanno diversi core nella loro CPU(2 o 4 cores). Ogni core è in grado di eseguire più di un thread per volta, avvalendosi di tecniche avanzate di scheduling. Una CPU a 4 cores può restituire dunque 8 threads. Tuttavia, il browser può scegliere di ridurre questo numero in modo tale da rappresentare in maniera più accurata il numero di Worker eseguiti per volta.

+ +

Proprietà

+ +
+
NavigatorConcurrentHardware.hardwareConcurrency 
+
Restituisce il numero di processori logici disponibili allo user agent. Il valore sarà sempre almeno pari a 1 e restituirà 1 se non è possibile determinare il numero di processori logici. 
+
+ +

Metodi

+ +

Il mixin di NavigatorConcurrentHardware non ha metodi.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
HTML Living Standard
+ The definition of 'NavigatorConcurrentHardware' in that specification.		Living Standard +

Definizione Iniziale

+
+ +

Browser compatibility

+ + + +

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

+ +

Vedi anche

+ + diff --git a/files/it/web/api/node/appendchild/index.html b/files/it/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..acef4909a3 --- /dev/null +++ b/files/it/web/api/node/appendchild/index.html @@ -0,0 +1,99 @@ +--- +title: Node.appendChild() +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Node + - Referenza + - metodo +translation_of: Web/API/Node/appendChild +--- +
{{APIRef("DOM")}}
+ +

Il metodo Node.appendChild() aggiunge un nodo alla fine dell'elenco di figli di un nodo genitore specificato. Se il figlio dato è un riferimento a un nodo esistente nel documento, appendChild() lo sposta dalla sua posizione corrente alla nuova posizione (non è necessario rimuovere il nodo dal suo nodo padre prima di aggiungerlo ad un altro nodo).

+ +

Ciò significa che un nodo non può essere in due punti del documento contemporaneamente. Quindi se il nodo ha già un genitore, il nodo viene prima rimosso, quindi aggiunto alla nuova posizione. Il metodo {{domxref("Node.cloneNode()")}} può essere usato per fare una copia del nodo prima di aggiungerlo sotto il nuovo genitore. Si noti che le copie eseguite con cloneNode non verranno automaticamente mantenute sincronizzate.

+ +

Se il figlio dato è un {{domxref("DocumentFragment")}}, l'intero contenuto di {{domxref("DocumentFragment")}} viene spostato nell'elenco secondario del nodo genitore specificato.

+ +

Sintassi

+ +
element.appendChild(aChild);
+ +

Parametri

+ +
+
aChild
+
Il nodo da aggiungere al nodo genitore dato (comunemente un elemento).
+
+ +

Valore di ritorno

+ +

Il valore restituito è il figlio aggiunto tranne quando il figlio dato è un {{domxref("DocumentFragment")}}, nel qual caso viene restituito il {{domxref("DocumentFragment")}}.

+ +

Appunti

+ +

Il concatenamento potrebbe non funzionare come previsto a causa di appendChild() che restituisce l'elemento figlio:

+ +
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+ +

Sets aBlock to <b></b> only, which is probably not what you want.

+ +

Esempio

+ +
// Crea un nuovo elemento di paragrafo e aggiungilo alla fine del corpo del documento
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento da {{SpecName("DOM3 Core")}}.
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}Nessun cambiamento da {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}Nessun cambiamento da {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Definizione inziale.
+ +

Compatibilità con i browser

+ +
+ + +

{{Compat("api.Node.appendChild")}}

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/node/index.html b/files/it/web/api/node/index.html new file mode 100644 index 0000000000..97fdc9ed89 --- /dev/null +++ b/files/it/web/api/node/index.html @@ -0,0 +1,368 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - DOM Reference + - Interface + - NeedsTranslation + - Node + - Reference + - TopicStub +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}}
+ +

Node is an interface from which a number of DOM API object types inherit. It allows those types to be treated similarly; for example, inheriting the same set of methods, or being tested in the same way.

+ +

The following interfaces all inherit from Node’s methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Attr")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

+ +

These interfaces may return null in certain cases where the methods and properties are not relevant. They may throw an exception — for example when adding children to a node type for which no children can exist.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

Inherits properties from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last '/'.
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}
+
(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.
+
{{domxref("Node.childNodes")}} {{readonlyInline}}
+
Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the Node change, the {{domxref("NodeList")}} object is automatically updated.
+
{{domxref("Node.firstChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the first direct child node of the node, or null if the node has no child.
+
{{domxref("Node.isConnected")}} {{readonlyInline}}
+
Returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.
+
{{domxref("Node.lastChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the last direct child node of the node, or null if the node has no child.
+
{{domxref("Node.nextSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the next node in the tree, or null if there isn't such node.
+
{{domxref("Node.nodeName")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the name of the Node. The structure of the name will differ with the node type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the '#text' string, or a {{domxref("Document")}} node will have the '#document' string.
+
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}
+
A {{ Interface("nsIPrincipal") }} representing the node principal.
+
{{domxref("Node.nodeType")}}{{readonlyInline}}
+
Returns an unsigned short representing the type of the node. Possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
+
+
{{domxref("Node.nodeValue")}}
+
Returns / Sets the value of the current node
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Returns the {{domxref("Document")}} that this node belongs to. If the node is itself a document, returns null.
+
{{domxref("Node.parentNode")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
+
{{domxref("Node.parentElement")}} {{readonlyInline}}
+
Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns null.
+
{{domxref("Node.previousSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the previous node in the tree, or null if there isn't such node.
+
{{domxref("Node.textContent")}}
+
Returns / Sets the textual content of an element and all its descendants.
+
+ +

Deprecated properties

+ +
+
{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}
+
Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This has been replaced by {{domxref("Node.getRootNode()")}}.
+
+ +

Obsolete properties

+ +
+
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. +
+

Note: In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
The namespace URI of this node, or null if it is no namespace. +
+

Note: In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml/ namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.appendChild()")}}
+
Adds the specified childNode argument as the last child to the current node.
+ If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.
+
{{domxref("Node.cloneNode()")}}
+
Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
+
{{domxref("Node.compareDocumentPosition()")}}
+
Compares the position of the current node against another node in any other document.
+
{{domxref("Node.contains()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether a node is a descendant of a given node or not.
+
{{domxref("Node.getRootNode()")}}
+
Returns the context object's root which optionally includes the shadow root if it is available. 
+
{{domxref("Node.hasChildNodes()")}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.
+
{{domxref("Node.insertBefore()")}}
+
Inserts a {{domxref("Node")}} before the reference node as a child of a specified parent node.
+
{{domxref("Node.isDefaultNamespace()")}}
+
Accepts a namespace URI as an argument and returns a {{jsxref("Boolean")}} with a value of true if the namespace is the default namespace on the given node or false if not.
+
{{domxref("Node.isEqualNode()")}}
+
Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.
+
{{domxref("Node.isSameNode()")}}
+
Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).
+
{{domxref("Node.lookupPrefix()")}}
+
Returns a {{domxref("DOMString")}} containing the prefix for a given namespace URI, if present, and null if not. When multiple prefixes are possible, the result is implementation-dependent.
+
{{domxref("Node.lookupNamespaceURI()")}}
+
Accepts a prefix and returns the namespace URI associated with it on the given node if found (and null if not). Supplying null for the prefix will return the default namespace.
+
{{domxref("Node.normalize()")}}
+
Clean up all the text nodes under this element (merge adjacent, remove empty).
+
{{domxref("Node.removeChild()")}}
+
Removes a child node from the current element, which must be a child of the current node.
+
{{domxref("Node.replaceChild()")}}
+
Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.
+
+ +

Obsolete methods

+ +
+
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
+
 
+
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
+
Allows a user to get some {{domxref("DOMUserData")}} from the node.
+
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+
Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.
+
+ +

Examples

+ +

Remove all children nested within a node

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

Sample usage

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();
+ +

Recurse through child nodes

+ +

The following function calls a function recursively for each node contained by a root node (including the root itself):

+ +
function eachNode(rootNode, callback){
+	if(!callback){
+		var nodes = [];
+		eachNode(rootNode, function(node){
+			nodes.push(node);
+		});
+		return nodes;
+	}
+
+	if(false === callback(rootNode))
+		return false;
+
+	if(rootNode.hasChildNodes()){
+		var nodes = rootNode.childNodes;
+		for(var i = 0, l = nodes.length; i < l; ++i)
+			if(false === eachNode(nodes[i], callback))
+				return;
+	}
+}
+ +

Syntax

+ +
eachNode(rootNode, callback);
+ +

Description

+ +

Recursively calls a function for each descendant node of rootNode (including the root itself).

+ +

If callback is omitted, the function returns an {{jsxref("Array")}} instead, which contains rootNode and all nodes contained therein.

+ +

If callback is provided, and it returns {{jsxref("Boolean")}} false when called, the current recursion level is aborted, and the function resumes execution at the last parent's level. This can be used to abort loops once a node has been found (such as searching for a text node that contains a certain string).

+ +

Parameters

+ +
+
rootNode
+
The Node object whose descendants will be recursed through.
+
callback
+
An optional callback function that receives a Node as its only argument. If omitted, eachNode returns an {{jsxref("Array")}} of every node contained within rootNode (including the root itself).
+
+ +

Sample usage

+ +

The following example prints the textContent properties of each <span> tag in a <div> element named "box":

+ +
<div id="box">
+	<span>Foo</span>
+	<span>Bar</span>
+	<span>Baz</span>
+</div>
+ +
var box = document.getElementById("box");
+eachNode(box, function(node){
+	if(null != node.textContent){
+		console.log(node.textContent);
+	}
+});
+ +

The following strings will be displayed in the user's console:

+ +
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
+ +
+

Note: Whitespace forms part of a {{domxref("Text")}} node, meaning indentation and newlines form separate Text between the Element nodes.

+
+ +

Realistic usage

+ +

The following demonstrates a real-world use of the eachNode function: searching for text on a web-page. We use a wrapper function named grep to do the searching:

+ +
function grep(parentNode, pattern){
+	var matches = [];
+	var endScan = false;
+
+	eachNode(parentNode, function(node){
+		if(endScan)
+			return false;
+
+		// Ignore anything which isn't a text node
+		if(node.nodeType !== Node.TEXT_NODE)
+			return;
+
+		if("string" === typeof pattern){
+			if(-1 !== node.textContent.indexOf(pattern))
+				matches.push(node);
+		}
+		else if(pattern.test(node.textContent)){
+			if(!pattern.global){
+				endScan = true;
+				matches = node;
+			}
+			else matches.push(node);
+		}
+	});
+
+	return matches;
+}
+ +

For example, to find {{domxref("Text")}} nodes that contain typos:

+ +
var typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"];
+var pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi");
+var mistakes = grep(document.body, pattern);
+console.log(mistakes);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
+ Removed the following methods: isSupported(), hasAttributes(), getFeature(), setUserData(), and getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{domxref("Document")}}.
+ The normalize() method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.
+ Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
+ Added the following properties: baseURI and textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}The ownerDocument property was slightly modified so that {{domxref("DocumentFragment")}} also returns null.
+ Added the following properties: namespaceURI, prefix, and localName.
+ Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

diff --git a/files/it/web/api/node/lastchild/index.html b/files/it/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..34804c5644 --- /dev/null +++ b/files/it/web/api/node/lastchild/index.html @@ -0,0 +1,59 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +translation_of: Web/API/Node/lastChild +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.lastChild restituisce l'ultimo figlio del nodo. Se il suo genitore è un elemento, allora il bambino è generalmente un nodo di elemento, un nodo di testo o un nodo di commento. Restituisce null se non ci sono elementi figli.

+ +

Sintassi

+ +
var childNode = node.lastChild;
+
+ +

Esempio

+ +
var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.lastChild")}}

diff --git a/files/it/web/api/node/nextsibling/index.html b/files/it/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..f2355a6402 --- /dev/null +++ b/files/it/web/api/node/nextsibling/index.html @@ -0,0 +1,101 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +translation_of: Web/API/Node/nextSibling +--- +
{{APIRef("DOM")}}
+ +

La proprietà di sola lettura Node.nextSibling restituisce il nodo immediatamente successivo a quello specificato nei {{domxref("Node.childNodes","childNodes")}}, del loro genitore o restituisce null se il nodo specificato è l'ultimo figlio nell'elemento genitore.

+ +

Sintassi

+ +
nextNode = node.nextSibling
+
+ +

Appunti

+ +
+

I browser basati su Gecko inseriscono nodi di testo in un documento per rappresentare gli spazi bianchi nel codice sorgente. Pertanto, un nodo ottenuto, ad esempio, utilizzando Node.firstChild o Node.previousSibling può fare riferimento a un nodo di testo di spazi bianchi piuttosto che all'elemento effettivo che l'autore intendeva ottenere.

+ +

Vedi Whitespace in the DOM e W3C DOM 3 FAQ: Why are some Text nodes empty? per maggiori informazioni.

+
+ +

{{domxref("Element.nextElementSibling")}} può essere usato per ottenere l'elemento successivo saltando eventuali nodi di spazi vuoti, altro testo tra elementi o commenti.

+ +

Esempio

+ +
<div id="div-1">Here is div-1</div>
+<div id="div-2">Here is div-2</div>
+
+<script>
+var el = document.getElementById('div-1').nextSibling,
+    i = 1;
+
+console.group('Siblings of div-1:');
+
+while (el) {
+  console.log(i, '. ', el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+console.groupEnd();
+</script>
+
+/**************************************************
+  The console displays the following:
+
+     Siblings of div-1
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+
+ +

Nell'esempio precedente, i nodi, #text sono inseriti nel DOM in cui si verifica lo spazio bianco tra i tag (ad esempio dopo il tag di chiusura di un elemento e prima del tag di apertura del successivo).

+ +

La possibile inclusione di nodi di testo deve essere consentita quando si attraversa il DOM utilizzando nextSibling. Vedi le risorse nella sezione Appunti.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-nextsibling', 'Node.nextSibling')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-6AC54C2F', 'Node.nextSibling')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#attribute-nextSibling', 'Node.nextSibling')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.nextSibling")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/node/previoussibling/index.html b/files/it/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..735433da9e --- /dev/null +++ b/files/it/web/api/node/previoussibling/index.html @@ -0,0 +1,81 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +translation_of: Web/API/Node/previousSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

La proprietà di sola lettura Node.previousSibling restituisce il nodo immediatamente precedente a quello specificato nell'elenco {{domxref("Node.childNodes", "childNodes")}} del genitore, o null se il nodo specificato è il primo in tale elenco.

+ +

Sintassi

+ +
previousNode = node.previousSibling;
+
+ +

Esempio

+ +
<img id="b0">
+<img id="b1">
+<img id="b2">
+ +
console.log(document.getElementById("b1").previousSibling); // <img id="b0">
+console.log(document.getElementById("b2").previousSibling.id); // "b1"
+
+ +

Appunti

+ +
+

I browser basati su Gecko inseriscono nodi di testo in un documento per rappresentare gli spazi bianchi nel codice sorgente. Pertanto, un nodo ottenuto, ad esempio, utilizzando Node.firstChild o Node.previousSibling può fare riferimento a un nodo di testo di spazi bianchi piuttosto che all'elemento effettivo che l'autore intendeva ottenere.

+ +

Vedi Whitespace in the DOM e W3C DOM 3 FAQ: Why are some Text nodes empty? per maggiori informazioni.

+
+ +

Per navigare nella direzione opposta attraverso l'elenco dei nodi secondari usa Node.nextSibling.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-node-previousSibling', 'Node.previousSibling')}}{{Spec2('DOM WHATWG')}}Nessun cambiamento
{{SpecName('DOM3 Core', 'core.html#ID-640FB3C8', 'Node.previousSibling')}}{{Spec2('DOM3 Core')}}Nessun cambiamento
{{SpecName('DOM2 Core', 'core.html#ID-640FB3C8', 'Node.previousSibling')}}{{Spec2('DOM2 Core')}}Nessun cambiamento
{{SpecName('DOM1', 'level-one-core.html#attribute-previousSibling', 'Node.previousSibling')}}{{Spec2('DOM1')}}Definizione iniziale
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Node.previousSibling")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/nodelist/foreach/index.html b/files/it/web/api/nodelist/foreach/index.html new file mode 100644 index 0000000000..5d8f5d0088 --- /dev/null +++ b/files/it/web/api/nodelist/foreach/index.html @@ -0,0 +1,125 @@ +--- +title: NodeList.prototype.forEach() +slug: Web/API/NodeList/forEach +tags: + - DOM + - Iterabile + - NodeList + - Referenza + - Web + - metodo +translation_of: Web/API/NodeList/forEach +--- +

{{APIRef("DOM")}}

+ +

Il metodo forEach() dell'interfaccia {{domxref("NodeList")}} chiama il callback fornito nel parametro una volta per ogni coppia di valori nell'elenco, in ordine di inserimento.

+ +

Sintassi

+ +
NodeList.forEach(callback[, thisArg]);
+
+ +

Parametri

+ +
+
callback
+
Funzione da eseguire per ciascun elemento, eventualmente con 3 argomenti: +
+
currentValue
+
L'elemento corrente in elaborazione nella NodeList.
+
currentIndex
+
L'indice dell'elemento corrente in fase di elaborazione nella NodeList.
+
listObj
+
La NodeList a cui viene applicato forEach().
+
+
+
thisArg {{Optional_inline}}
+
Valore da utilizzare come {{jsxref("this")}} quando viene eseguito callback.
+
+ +

Valore di ritorno

+ +

{{jsxref('undefined')}}.

+ +

Eccezioni

+ +

Nessuna.

+ +

Esempio

+ +
var node = document.createElement("div");
+var kid1 = document.createElement("p");
+var kid2 = document.createTextNode("hey");
+var kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+var list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);
+ +

ritorna:

+ +
[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg
+ +

Polyfill

+ +

Questo {{Glossary("Polyfill","polyfill")}} aggiunge compatibilità a tutti i browser che supportano ES5:

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i < this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}
+ +

OPPURE

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}
+ +

Il comportamento sopra riportato indica il numero di browser che implementa effettivamente NodeList.prototype.forEach (Chrome, ad esempio).

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName("WebIDL", "#es-forEach", "forEach")}}{{Spec2("WebIDL")}}Definisce forEach sulle dichiarazioni iterable
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.NodeList.forEach")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/nodelist/index.html b/files/it/web/api/nodelist/index.html new file mode 100644 index 0000000000..4b18f62d63 --- /dev/null +++ b/files/it/web/api/nodelist/index.html @@ -0,0 +1,124 @@ +--- +title: NodeList +slug: Web/API/NodeList +tags: + - API + - DOM + - Interfaccia + - NodeList +translation_of: Web/API/NodeList +--- +
{{APIRef("DOM")}}
+ +

Gli oggetti NodeList sono un insieme di nodi, di solito restituiti da proprietà come {{domxref("Node.childNodes")}} ed il metodo {{domxref("document.querySelectorAll()")}}.

+ +
+

Nonostante NodeList non sia un Array, è possibile iterare su esso usando forEach(). Può anche essere convertito in un vero Array usando Array.from().

+ +

Tuttavia, alcuni browser meno recenti non hanno implementato NodeList.forEach() né Array.from(). Questo può essere aggirato usando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} — vedi l'esempio di questo documento.

+
+ +

In alcuni casi, la NodeList è dinamica, ciò significa che i cambiamenti nel DOM si riflettono sulla collezione. Per esempio, {{domxref("Node.childNodes")}} è dinamico:

+ +
var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // assume "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // dovrebbe produrre "3"
+
+ +

In altri casi, la NodeList è statica, ciò vuol dire che il contenuto della collezione non è influenzato da quelli nel DOM. {{domxref("document.querySelectorAll()")}} restituisce una NodeList statica.

+ +

È bene tenere in mente questa distinzione quando si sceglie di iterare sugli elementi nella NodeList, ed in particolare al modo in cui si salva la lunghezza della lista.

+ +

Proprietà

+ +
+
{{domxref("NodeList.length")}}
+
Il numero dei nodi nella NodeList.
+
+ +

Metodi

+ +
+
{{domxref("NodeList.item()")}}
+
Restituisce un elemento nell'elenco per il suo indice, o null se l'indice è fuori misura.
+
Un'alternativa all'accesso a nodeList[i] (che invece restituisce undefined quando i è fuori dai limiti). Ciò è utile soprattutto per le implementazioni DOM di linguaggi non JavaScript.
+
{{domxref("NodeList.entries()")}}
+
Ritorna un {{jsxref("Iteration_protocols","iterator")}} che permette al codice di passare attraverso tutte le coppie chiave/valore contenute nella collezione. (In questo caso, le chiavi sono numeri che iniziano da 0 e i valori sono nodi.)
+
{{domxref("NodeList.forEach()")}}
+
Esegue una funzione fornita una volta per elemento NodeList passando l'elemento come argomento alla funzione.
+
{{domxref("NodeList.keys()")}}
+
Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutte le chiavi delle coppie chiave/valore contenute nella collezione. (In questo caso, i tasti sono numeri che iniziano da 0).
+
{{domxref("NodeList.values()")}}
+
Ritorna un {{jsxref("Iteration_protocols", "iterator")}} che permette al codice di passare attraverso tutti i valori (nodi) delle coppie chiave/valore contenute nella collezione.
+
+ +

Esempio

+ +

È possibile iterare sugli elementi in una NodeList usando un for loop:

+ +
for (var i = 0; i < myNodeList.length; i++) {
+  var item = myNodeList[i];  // La chiamata myNodeList.item(i) non è necessaria in JavaScript
+}
+
+ +

Non utilizzare for...in o for each...in per enumerare gli elementi nelle NodeList, poiché enumereranno anche le proprietà length e item e causeranno errori se il tuo script presume che debba occuparsi solo di oggetti {{domxref("element")}}. Inoltre, for..in non garantisce la visita delle proprietà in un particolare ordine.

+ +

for...of itererà sugli oggetti NodeList correttamente:

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}
+ +

I browser recenti supportano anche metodi iteratori, {{domxref("NodeList.forEach()", "forEach()")}}, come {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, e {{domxref("NodeList.keys()", "keys()")}}.

+ +

Esiste anche un modo compatibile con Internet Explorer {{jsxref("Array.forEach()", "Array.prototype.forEach")}} per l'iterazione.

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM3 Core') }} 
{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM2 Core') }} 
{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM1') }} +

Definizione iniziale.

+
+ +

Compatibilità con i browser

+ + + +

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

diff --git a/files/it/web/api/notifiche/dir/index.html b/files/it/web/api/notifiche/dir/index.html new file mode 100644 index 0000000000..c1e16410d6 --- /dev/null +++ b/files/it/web/api/notifiche/dir/index.html @@ -0,0 +1,72 @@ +--- +title: Notification.dir +slug: Web/API/notifiche/dir +translation_of: Web/API/Notification/dir +--- +

{{APIRef("Web Notifications")}}

+ +

La proprieta' in sola lettura dir dell'interfaccia {{domxref("Notification")}} indica la direzione del testo della notifica, puo' essere specificata nell'opzione dir del costruttore di {{domxref("Notification.Notification","Notification()")}} .

+ +

{{AvailableInWorkers}}

+ +

Sintassi

+ +
var direzione = Notification.dir;
+
+ +

Valori

+ +

La {{domxref("DOMString")}} specifica la direzione el testo. I possibili valori sono:

+ + + +
+

Note: La maggior parte dei browser ignora le opzioni esplicite settate e funzionano con le proprie impostazioni.

+
+ +

Esempi

+ +

Il seguente frammento di codice crea un oggetto opzioni, da passare al costruttore Notification().

+ +
var opzioni = {
+  body: 'Amo JavaScript!',
+  dir: 'rtl'
+}
+
+var n = new Notification('Mio titolo',opzioni);
+
+n.dir // dovrebbe ritornare 'rtl'
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications','#dom-notification-dir','dir')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ + + +

{{Compat("api.Notification.dir")}}

+ +

See also

+ + diff --git a/files/it/web/api/notifiche/index.html b/files/it/web/api/notifiche/index.html new file mode 100644 index 0000000000..ae8300aa01 --- /dev/null +++ b/files/it/web/api/notifiche/index.html @@ -0,0 +1,495 @@ +--- +title: Notifiche +slug: Web/API/notifiche +translation_of: Web/API/Notification +--- +

{{APIRef("Web Notifications")}}

+ +

L'interfaccia Notification di Notifications API viene usata per configurare e mostrare le notifiche desktop all'utente.

+ +

{{AvailableInWorkers}}

+ +

Costruttore

+ +
+
{{domxref("Notification.Notification", "Notification()")}}
+
Crea una nuova istanza dell'oggetto Notification.
+
+ +

Proprietà

+ +

Proprietà Static

+ +

Queste proprietà sono disponibili solo sull'oggetto Notification stesso.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
Una stringa che rappresenta l'attuale permesso per mostrare le notifiche. I possibili valori sono: denied (l'utente rifiuta la ricezione delle notifiche), granted (l'utente accetta la ricezione delle notifiche), o default (la scelta dell'utente è sconosciuta, quindi il browser agirà come se il valore fosse negato).
+
+ +

Proprietà Instance

+ +

Queste proprietà sono disponibili solo su istanze dell'oggetto Notification.

+ +
+
{{domxref("Notification.actions")}} {{readonlyinline}}
+
L'array di azioni della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.badge")}} {{readonlyinline}}
+
L'URL dell'immagine utilizzata per rappresentare la notifica quando non c'è abbastanza spazio per visualizzare la notifica stessa.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
La stringa del corpo della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Restituisce un clone strutturato dei dati della notifica.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
La direzione del testo della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
Il codice della lingua della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
L'ID della notifica (se presente) come specificato nel parametro options del costruttore.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
L'URL dell'immagine utilizzata come icona della notifica come specificato nel parametro options del costruttore.
+
{{domxref("Notification.image")}} {{readonlyinline}}
+
L'URL di un'immagine da visualizzare come parte della notifica, come specificato nel parametro options del costruttore.
+
{{domxref("Notification.requireInteraction")}} {{readonlyinline}}
+
Un {{jsxref("Boolean")}} che indica che una notifica deve rimanere attiva finché l'utente non fa click o non la chiude, anziché chiudersi automaticamente.
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
Specifica se la notifica deve essere silenziosa, ovvero che non emetta suoni o vibrazioni, indipendentemente dalle impostazioni del dispositivo.
+
{{domxref("Notification.timestamp")}} {{readonlyinline}}
+
Specifica l'ora in cui viene creata o applicata una notifica (passato, presente o fututo).
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Il titolo della notifica come specificato nel primo parametro del costruttore.
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Specifica un modello di vibrazione da emettere per i dispositivi con hardware di vibrazione.
+
+ +

Proprietà non supportate

+ +

Le seguenti proprietà sono elencate nelle specifiche più aggiornate, ma non sono ancora supportate da alcuni browser. È consigliabile controllare regolarmente per vedere se lo stato di queste proprietà viene aggiornato, e facci sapere se trovi informazioni non aggiornate.

+ +
+
{{domxref("Notification.noscreen")}} {{readonlyinline}}
+
Specifica se l'attivazione della notifica deve abilitare o meno lo schermo del dispositivo.
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
Specifica se l'utente deve essere avvisato dopo che una nuova notifica sostituisce una vecchia.
+
{{domxref("Notification.sound")}} {{readonlyinline}}
+
Specifica una risorsa sonora da riprodurre quando scatta la notifica, al prosto del suono di notifica predefinito del sistema.
+
{{domxref("Notification.sticky")}} {{readonlyinline}}
+
Specifica se la notifica deve essere "sticky", cioè non facilmente modificabile dall'utente.
+
+ +

Gestori di eventi

+ +
+
{{domxref("Notification.onclick")}}
+
Un gestore per l'evento {{event("click")}}. Viene attivato ogni volta che l'utente fa click sulla notifica.
+
{{domxref("Notification.onerror")}}
+
Un gestore per l'evento {{event("error")}}. Viene attivato ogni volta che la notifica incontra un errore.
+
+ +

Obsolete handlers

+ +

The following event handlers are still supported as listed in the {{anch("browser compatibility")}} section below, but are no longer listed in the current spec. It is safe therefore to assume they are obsolete, and may stop working in future browser versions.

+ +
+
{{domxref("Notification.onclose")}}
+
A handler for the {{event("close")}} event. It is triggered when the user closes the notification.
+
{{domxref("Notification.onshow")}}
+
A handler for the {{event("show")}} event. It is triggered when the notification is displayed.
+
+ +

Methods

+ +

Static methods

+ +

These methods are available only on the Notification object itself.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
Requests permission from the user to display notifications.
+
+ +

Instance methods

+ +

These properties are available only on an instance of the Notification object or through its prototype. The Notification object also inherits from the {{domxref("EventTarget")}} interface.

+ +
+
{{domxref("Notification.close()")}}
+
Programmatically closes a notification.
+
+ +

Example

+ +

Assume this basic HTML:

+ +
<button onclick="notifyMe()">Notify me!</button>
+ +

It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.

+ +
function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have already been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+ +

{{EmbedLiveSample('Example', '100%', 30)}}

+ +

In many cases, you don't need to be this verbose. For example, in our Emogotchi demo (see source code), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

Then we run a simple spawnNotification() function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary options object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.

+ +
function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{property_prefix("webkit")}}[1]
+ 22		{{CompatVersionUnknown}}4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}256[3]
icon5{{property_prefix("webkit")}}[1]
+ 22		{{CompatUnknown}}4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}25{{CompatNo}}
Available in workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
noscreen, sticky{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
renotify{{CompatChrome(50.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatChrome(46.0)}}{{CompatUnknown}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatOpera(40)}}{{CompatNo}}
vibrate, actions{{CompatChrome(53.0)}}{{CompatUnknown}}  {{CompatOpera(39)}} 
badge{{CompatChrome(53.0)}}{{CompatUnknown}}  {{CompatOpera(39)}} 
image{{CompatChrome(55.0)}}{{CompatUnknown}}  {{CompatUnknown}} 
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
icon{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
silent{{CompatNo}}{{CompatChrome(43.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
noscreen, sticky{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
renotify{{CompatNo}}{{CompatChrome(50.0)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
vibrate, actions{{CompatNo}}{{CompatChrome(53.0)}}{{CompatUnknown}}   {{CompatOperaMobile(39)}} {{CompatChrome(53.0)}}
badge{{CompatNo}}{{CompatChrome(53.0)}}{{CompatUnknown}}   {{CompatOperaMobile(39)}} {{CompatChrome(53.0)}}
image{{CompatNo}}{{CompatNo}}{{CompatUnknown}}   {{CompatUnknown}} {{CompatChrome(55.0)}}
+
+ +

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

+ +

Starting in Chrome 49, notifications do not work in incognito mode.

+ +

[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 started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).

+ +

See also

+ + diff --git a/files/it/web/api/parentnode/children/index.html b/files/it/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..7bedb73eed --- /dev/null +++ b/files/it/web/api/parentnode/children/index.html @@ -0,0 +1,95 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - Child + - Child Nodes + - DOM + - HTMLCollection + - Node + - ParentNode + - Proprietà + - children +translation_of: Web/API/ParentNode/children +--- +
{{ APIRef("DOM") }}
+ +

La proprietà {{domxref("ParentNode")}} children è una proprietà di sola lettura che restituisce una {{domxref("HTMLCollection")}} dinamica che contiene tutti gli {{domxref("Element","elements")}} figli del nodo su cui è stato chiamato.

+ +

Sintassi

+ +
var children = node.children;
+ +

Valore

+ +

Una {{ domxref("HTMLCollection") }} che è dimanica, raccolta ordinata degli elementi DOM che sono figli di node. È possibile accedere ai singoli nodi figlio nella raccolta utilizzando il metodo {{domxref("HTMLCollection.item", "item()")}} nella collezione o utilizzando la notazione in stile array JavaScript.

+ +

Se il nodo non ha elementi figli, children è una lista vuota con una length di 0.

+ +

Esempio

+ +
var foo = document.getElementById('foo');
+for (var i = 0; i < foo.children.length; i++) {
+    console.log(foo.children[i].tagName);
+}
+
+ +

Polyfill

+ +
// Sovrascrive il prototipo nativo di "children".
+// Aggiunge il supporto Document e DocumentFragment per IE9 & Safari.
+// Restituisce un array invece di una HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.children == null) {
+        Object.defineProperty(constructor.prototype, 'children', {
+            get: function() {
+                var i = 0, node, nodes = this.childNodes, children = [];
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        children.push(node);
+                    }
+                }
+                return children;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Definizione iniziale.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.ParentNode.children")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/parentnode/firstelementchild/index.html b/files/it/web/api/parentnode/firstelementchild/index.html new file mode 100644 index 0000000000..472b7737a3 --- /dev/null +++ b/files/it/web/api/parentnode/firstelementchild/index.html @@ -0,0 +1,99 @@ +--- +title: ParentNode.firstElementChild +slug: Web/API/ParentNode/firstElementChild +tags: + - API + - DOM + - ParentNode + - Proprietà +translation_of: Web/API/ParentNode/firstElementChild +--- +

{{ APIRef("DOM") }}

+ +

La proprietà ParentNode.firstElementChild di sola lettura restituisce il primo figlio {{domxref("Element")}} dell'oggetto, oppure null se non ha elementi figli.

+ +
+

Questa proprietà era inizialmente definita nell'interfaccia pura {{domxref("ElementTraversal")}} pure interface. Poiché questa interfaccia conteneva due distinti set di proprietà, una diretta al {{domxref("Node")}} che ha figli, una a quelli che sono figli, sono stati spostati in due interfacce pure separate, {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. In questo caso, firstElementChild è stato spostato su {{domxref("ParentNode")}}. Questa è una modifica abbastanza tecnica che non dovrebbe influire sulla compatibilità.

+
+ +

Sintassi

+ +
var element = node.firstElementChild;
+
+ +

Esempio

+ +
<ul id="foo">
+  <li>First  (1)</li>
+  <li>Second (2)</li>
+  <li>Third  (3)</li>
+</ul>
+
+<script>
+var foo = document.getElementById('foo');
+// yields: First  (1)
+console.log(foo.firstElementChild.textContent);
+</script>
+
+ +

Polyfill per IE8, IE9 e Safari

+ +
// Overwrites native 'firstElementChild' prototype.
+// Adds Document & DocumentFragment support for IE9 & Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.firstElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'firstElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = 0;
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Diviso l'interfaccia ElementTraversal in {{domxref("ChildNode")}} e ParentNode. Questo metodo è ora definito su quest'ultimo.
+ Il {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementato le nuove interfacce.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Aggiunta la sua definizione iniziale all'interfaccia pura ElementTraversal e usarla su {{domxref("Element")}}.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.ParentNode.firstElementChild")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/parentnode/index.html b/files/it/web/api/parentnode/index.html new file mode 100644 index 0000000000..2cbf79f11c --- /dev/null +++ b/files/it/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/it/web/api/parentnode/lastelementchild/index.html b/files/it/web/api/parentnode/lastelementchild/index.html new file mode 100644 index 0000000000..006a3a316d --- /dev/null +++ b/files/it/web/api/parentnode/lastelementchild/index.html @@ -0,0 +1,98 @@ +--- +title: ParentNode.lastElementChild +slug: Web/API/ParentNode/lastElementChild +tags: + - API + - DOM + - ParentNode + - Proprietà +translation_of: Web/API/ParentNode/lastElementChild +--- +

{{ APIRef("DOM") }}

+ +

La proprietà ParentNode.LastElementChild di sola lettura restituisce l'ultimo figlio Element dell'oggetto, oppure null se non ha elementi figli.

+ +
+

Questa proprietà era inizialmente definita nell'interfaccia pura {{domxref("ElementTraversal")}} pure interface. Poiché questa interfaccia conteneva due distinti set di proprietà, una diretta al {{domxref("Node")}} che ha figli, una a quelli che sono figli, sono stati spostati in due interfacce pure separate, {{domxref("ParentNode")}} e {{domxref("ChildNode")}}. In questo caso, lastElementChild è stato spostato su {{domxref("ParentNode")}}. Questa è una modifica abbastanza tecnica che non dovrebbe influire sulla compatibilità.

+
+ +

Sintassi

+ +
var element = node.lastElementChild;
+ +

Esempio

+ +
<ul id="foo">
+  <li>First  (1)</li>
+  <li>Second (2)</li>
+  <li>Third  (3)</li>
+</ul>
+
+<script>
+var foo = document.getElementById('foo');
+// yields: Third  (3)
+console.log(foo.lastElementChild.textContent);
+</script>
+
+ +

Polyfill per IE8, IE9 e Safari

+ +
// Overwrites native 'lastElementChild' prototype.
+// Adds Document & DocumentFragment support for IE9 & Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Diviso l'interfaccia ElementTraversal in {{domxref("ChildNode")}} e ParentNode. Questo metodo è ora definito su quest'ultimo.
+ Il {{domxref("Document")}} e {{domxref("DocumentFragment")}} implementato le nuove interfacce.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Aggiunta la sua definizione iniziale all'interfaccia pura ElementTraversal e usarla su {{domxref("Element")}}.
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.ParentNode.firstElementChild")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/performance/index.html b/files/it/web/api/performance/index.html new file mode 100644 index 0000000000..fde24fddb4 --- /dev/null +++ b/files/it/web/api/performance/index.html @@ -0,0 +1,135 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Interface + - Misurazione delle performance + - Performance + - Reference + - Web Performance +translation_of: Web/API/Performance +--- +
{{APIRef("High Resolution Time")}}
+ +

 
+ L'interaccia Performance fornisce l'accesso alle informazioni relative alle performance della pagina corrente. Fa parte delle High Resolution Time API, ma viene migliorata tramite le Performance Timeline API, le Navigation Timing API, le User Timing API e le Resource Timing API.

+ +

Un oggetto di questo tipo può essere ottenuto chiamando {{domxref("Window.performance")}} in sola lettura.

+ +
+

Nota:  Questa interfaccia ed i suoi metodi sono disponibili nei Web Workers, ad eccezione di dove diversamente indicato nella guida sottostante.
+ Da notare inoltre che i markers delle peformance e le misurazioni sono relative al contesto. Se crei un marker sul thread principale (o su un altro worker), non potrai vederlo in un thread del worker e viceversa.

+
+ +

Proprietà

+ +

L'interfaccia Performance non eredita nessuna proprietà.

+ +
+
{{deprecated_inline}} {{domxref("Performance.navigation")}} {{readonlyInline}}
+
{{domxref("PerformanceNavigation")}} è un oggetto che fornisce un utile contesto sulle operazioni incluse nella lista timing, sia che la pagina venga caricata o ricaricata, quante occorrenze di redirect sono presenti e così via. Not available in workers.
+
{{deprecated_inline}}  {{domxref("Performance.timing")}} {{readonlyInline}}
+
L'oggetto {{domxref("PerformanceTiming")}} contiene le informazioni relative alla latenza delle performance. Not available in workers.
+
{{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}
+
Estensione non-standard aggiunta in Chrome, questa proprietà fornisce un oggetto con l'utilizzo della memoria di base. Non dovresti usare questa API non-stanrdard.
+
{{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}
+
Restituisce il timestamp preciso del momento in cui si è iniziato a misurare le performance.
+
+ +
+
+

Event handlers

+
+
{{domxref("Performance.onresourcetimingbufferfull")}}
+
Un {{domxref("EventTarget")}} che funge da callback e che viene eseguito quando viene scatenato l'evento {{event("resourcetimingbufferfull")}}
+
+ +

Metodi

+ +

L'interfaccia Performance non eredita nessun metodo.

+ +
+
{{domxref("Performance.clearMarks()")}}
+
Rimuove il segnaposto specificato dal buffer delle performance del browser.
+
{{domxref("Performance.clearMeasures()")}}
+
Rimuove la misurazione specificata dal buffer delle performance del browser.
+
{{domxref("Performance.clearResourceTimings()")}}
+
Rimuove tutte le {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entryType")}} di resource dal data buffer delle performance del browser.
+
{{domxref("Performance.getEntries()")}}
+
Restituisce una lista di oggetti di tipo {{domxref("PerformanceEntry")}}  basati sul filtro specificato.
+
{{domxref("Performance.getEntriesByName()")}}
+
Restituisce una lista di oggetti di tipo {{domxref("PerformanceEntry")}} secondo il nome specificato ed il tipo divoce specificata.
+
{{domxref("Performance.getEntriesByType()")}}
+
Restituisce una list di oggetti {{domxref("PerformanceEntry")}} relativi alla voce specificata
+
{{domxref("Performance.mark()")}}
+
Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nel buffer delle performance usando il nome specificato.
+
{{domxref("Performance.measure()")}}
+
Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nel buffer delle performance del browser tra due segnaposti (indicati rispettivamente come start mark ed end mark)
+
{{domxref("Performance.now()")}}
+
Restituisce un {{domxref("DOMHighResTimeStamp")}} ceh rappresenta il numero in millisecondi trascorso dall'istante preso come riferimento.
+
{{domxref("Performance.setResourceTimingBufferSize()")}}
+
Imposta la dimensione del buffer del browser relativo alla temporizzazione in un numero specificato di oggetti {{domxref("PerformanceEntry","performance entry")}} "resource" {{domxref("PerformanceEntry.entryType","type")}}
+
{{domxref("Performance.toJSON()")}}
+
Restituisce un oggetto json che rappresenta l'oggetto Performance
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('Highres Time Level 3', '#dom-performance-timeorigin','timeOrigin')}}{{Spec2('Highres Time Level 3')}}Definisce la proprietà timeOrigin 
{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}{{Spec2('Highres Time Level 2')}}Definisce il metodo toJson() .
{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}{{Spec2('Highres Time')}}Definisce il metodo now() .
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Cambia l'interfaccia getEntries() .
{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Definisce i metodi getEntries(), getEntriesByType() e getEntriesByName() .
{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('Resource Timing')}}Definisce i metodi clearResourceTimings() e setResourceTimingBufferSize() e la proprietà onresourcetimingbufferfull .
{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing Level 2')}}Spiega i metodi mark(), clearMark(), measure() e clearMeasure() .
{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing')}}Definisce i metodi mark(), clearMark(), measure() e clearMeasure().
+ +

Browser compatibility

+ +
+ + +

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

+
diff --git a/files/it/web/api/performance/now/index.html b/files/it/web/api/performance/now/index.html new file mode 100644 index 0000000000..2331157f18 --- /dev/null +++ b/files/it/web/api/performance/now/index.html @@ -0,0 +1,104 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - Performance + - Prestazioni + - Reference + - Riferimento + - Web Performance API + - metodo +translation_of: Web/API/Performance/now +--- +
{{APIRef("High Resolution Timing")}}
+ +

Il metodo performance.now() restituisce un {{domxref("DOMHighResTimeStamp")}}, misurato in millisecondi.

+ +
+

The timestamp is not actually high-resolution. To mitigate security threats such as Spectre, browsers currently round the results to varying degrees. (Firefox started rounding to 1 millisecond in Firefox 60.) Some browsers may also slightly randomize the timestamp. The precision may improve again in future releases; browser developers are still investigating these timing attacks and how best to mitigate them.

+
+ +

{{AvailableInWorkers}}

+ +

Il valore restituito rappresenta il tempo trascorso dal time origin.

+ +

Tieni a mente i seguenti punti:

+ + + +

Sintassi

+ +
t = performance.now();
+ +

Esempio

+ +
var t0 = performance.now();
+doSomething();
+var t1 = performance.now();
+console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
+
+ +

A differenza di altri timing data disponibili con JavaScript (per esempio Date.now), i timestamps restituiti da Performance.now() non sono limitati a una risoluzione di un millisecondo. Invece, rappresentano il tempo come numeri a virgola mobile con una precisione che può arrivare a un microsecondo.

+ +

Inolre, a differenza di Date.now(), il valore restituito da Performance.now() aumenta sempre con costanza, indipendentemente dal clock di sistema (che può essere regolato manualmente o distorto da software come NTP). Altrimenti, performance.timing.navigationStart + performance.now() sarà approssimativamente uguale a Date.now().

+ +

Reduced time precision

+ +

To offer protection against timing attacks and fingerprinting, the precision of performance.now() might get rounded depending on browser settings.
+ In Firefox, the privacy.reduceTimerPrecision  preference is enabled by default and defaults to 1ms.

+ +
// reduced time precision (1ms) in Firefox 60
+performance.now();
+// 8781416
+// 8781815
+// 8782206
+// ...
+
+
+// reduced time precision with `privacy.resistFingerprinting` enabled
+performance.now();
+// 8865400
+// 8866200
+// 8866700
+// ...
+
+ +

In Firefox, you can also enable privacy.resistFingerprinting — this changes the precision to 100ms or the value of privacy.resistFingerprinting.reduceTimerPrecision.microseconds, whichever is larger.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time Level 2')}}Stricter definitions of interfaces and types.
{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Performance.now")}}

+ +

See also

+ + diff --git a/files/it/web/api/range/clonecontents/index.html b/files/it/web/api/range/clonecontents/index.html new file mode 100644 index 0000000000..48d1bc09b9 --- /dev/null +++ b/files/it/web/api/range/clonecontents/index.html @@ -0,0 +1,27 @@ +--- +title: range.cloneContents +slug: Web/API/Range/cloneContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/cloneContents +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un frammento del documento copiando i nodi di un Range.

+

Sintassi

+
frammento = range.cloneContents();
+
+

Esempio

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+frammento = range.cloneContents();
+document.body.appendChild(frammento);
+
+

Note

+

Gli Event Listener aggiunti utilizzando gli Event del DOM non vengono copiati durante la clonazione. Gli attributi-evento di HTML vengono duplicati allo stesso modo in cui li copia il metodo clonNode. Anche gli attributi HTML "id" vengono clonati, il che può portare a rendere il documento non valido.

+

I nodi parzialmente selezionati includono i tag padri necessari perché il frammento di documento sia valido.

+

Specifiche

+

cloneContents

diff --git a/files/it/web/api/range/clonerange/index.html b/files/it/web/api/range/clonerange/index.html new file mode 100644 index 0000000000..ba8c0076b3 --- /dev/null +++ b/files/it/web/api/range/clonerange/index.html @@ -0,0 +1,28 @@ +--- +title: range.cloneRange +slug: Web/API/Range/cloneRange +translation_of: Web/API/Range/cloneRange +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un oggetto Range con i punti d'inizio e di fine identici a quelli del Range attuale.

+ +

Sintassi

+ +
clone = range.cloneRange();
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+clone = range.cloneRange();
+
+ +

Note

+ +

Il Range viene copiato per valore, non per referenza, quindi una modifica su uno dei due oggetti non avrà effetti sull'altro.

+ +

Specifiche

+ +

cloneRange

diff --git a/files/it/web/api/range/collapse/index.html b/files/it/web/api/range/collapse/index.html new file mode 100644 index 0000000000..f976cfeca6 --- /dev/null +++ b/files/it/web/api/range/collapse/index.html @@ -0,0 +1,36 @@ +--- +title: range.collapse +slug: Web/API/Range/collapse +translation_of: Web/API/Range/collapse +--- +

{{ APIRef("DOM") }}

+ +

Collassa il range tra i suoi due estremi.

+ +

Sintassi

+ +
range.collapse(toStart);
+
+ +

Parametri

+ +
+
toStart 
+
Un booleano, true collassa il Range al suo punto iniziale, False lo collassa alla fine.
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNode(referenceNode);
+range.collapse(true);
+
+ +

Note

+ +

Un Range collassato è vuoto, non ha alcun contenuto, specifica un singolo punto nell'albero del DOM. Per determinare se un Range è già collassato, si veda la proprietà collapsed.

+ +

Specifiche

+ +

collapse

diff --git a/files/it/web/api/range/collapsed/index.html b/files/it/web/api/range/collapsed/index.html new file mode 100644 index 0000000000..3d06ee5385 --- /dev/null +++ b/files/it/web/api/range/collapsed/index.html @@ -0,0 +1,33 @@ +--- +title: range.collapsed +slug: Web/API/Range/collapsed +translation_of: Web/API/Range/collapsed +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un booleano che indica se i punti d'inizio e di fine sono nella stessa posizione.

+ +

Sintassi

+ +
isCollapsed = range.collapsed;
+
+ +

Esempio

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

Note

+ +

Restituisce il valore booleano true se l'inizio e la fine del Range sono lo stesso punto nel DOM, altrimenti restituisce false.

+ +

Un Range collapsed è vuoto, non ha alcun contenuto, rappresenta un singolo punto nell'albero del DOM. Per collassare un Range, si veda il metodo collapse.

+ +

Specifiche

+ +

collapsed

+ +

{{ languages( { "ja": "ja/DOM/range.collapsed" } ) }}

diff --git a/files/it/web/api/range/commonancestorcontainer/index.html b/files/it/web/api/range/commonancestorcontainer/index.html new file mode 100644 index 0000000000..9f4cbec910 --- /dev/null +++ b/files/it/web/api/range/commonancestorcontainer/index.html @@ -0,0 +1,31 @@ +--- +title: range.commonAncestorContainer +slug: Web/API/Range/commonAncestorContainer +translation_of: Web/API/Range/commonAncestorContainer +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il nodo più interno che contiene i nodi startContainer e endContainer.

+ +

Sintassi

+ +
rangeAncestor = range.commonAncestorContainer;
+
+ +

Esempio

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

Note

+ +

Restituisce il nodo che si trova più in profondità, o più in basso nell'albero del DOM, che contiene entrambi i nodi startContainer e endContainer. Siccome Range non deve necessariamente essere contiguo e potrebbe anche selezionare solo in parte alcuni nodi, questo è un modo conveniente per trovare un nodo che racchiuda completamente il Range.

+ +

Questa proprietà è di sola lettura. Per cambiare il più profondo contenitore di un nodo, si consideri la possibilità di utilizzare i vari metodi per impostare le posizioni iniziali e finali di un Range.

+ +

Specifiche

+ +

commonAncestorContainer

diff --git a/files/it/web/api/range/compareboundarypoints/index.html b/files/it/web/api/range/compareboundarypoints/index.html new file mode 100644 index 0000000000..f815fd019b --- /dev/null +++ b/files/it/web/api/range/compareboundarypoints/index.html @@ -0,0 +1,54 @@ +--- +title: range.compareBoundaryPoints +slug: Web/API/Range/compareBoundaryPoints +translation_of: Web/API/Range/compareBoundaryPoints +--- +

{{ APIRef("DOM") }}

+ +

Compara i punti estremi di due Range.

+ +

Sintassi

+ +
compara =
+range.compareBoundaryPoints(
+come,
+rangeSorgente);
+
+ +
+
compara 
+
Un numero che vale 1, 0, o -1, che indica se un punto estremo di + range + è rispettivamente prima, nella stessa posizione o dopo il corrispondente punto estremo di rangeSorgente.
+
come 
+
Una costante che indica la modalità di comparazione, i possibili valori sono descritti sotto.
+
rangeSorgente 
+
Un range con cui effettuare la comparazione
+
+ +

Esempio

+ +
var range, rangeSorgente, compara;
+range = document.createRange();
+range.selectNode(document.getElementsByTagName("div")[0]);
+rangeSorgente = document.createRange();
+rangeSorgente.selectNode(document.getElementsByTagName("div")[1]);
+compara = range.compareBoundaryPoints(START_TO_END, rangeSorgente);
+
+ +

Note

+ +

Il parametro + come + può assumere i seguenti valori:

+ + + +

Specifiche

+ +

DOM Level 2 Traversal: compareBoundaryPoints

diff --git a/files/it/web/api/range/comparepoint/index.html b/files/it/web/api/range/comparepoint/index.html new file mode 100644 index 0000000000..2d3356b532 --- /dev/null +++ b/files/it/web/api/range/comparepoint/index.html @@ -0,0 +1,37 @@ +--- +title: range.comparePoint +slug: Web/API/Range/comparePoint +translation_of: Web/API/Range/comparePoint +--- +

{{ APIRef("DOM") }}

+ +

Restituisce -1 se nodo si trova prima del range, 0 se si trova nello stesso punto, 1 se si trova dopo.

+ +

Sintassi

+ +
int = range.comparePoint( nodo, offset )
+
+ +

Parametri

+ +
+
nodo 
+
Il node da comparare con range
+
offset 
+
Un intero maggiore o uguale a zero che rappresenta la distanza dall'inizio del nodo
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+valore = range.comparePoint(document.getElementsByTagName("p").item(0),1);
+
+ +

Note

+ +

Se il nodo è di tipo Text, Comment, o CDATASection, allora l'offset è il numero di caratteri dall'inizio del nodo. Per tutti gli altri tipi di nodo, offset</offset> rappresenta il numero dei nodi figlio dall'inizio di <code>nodo.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/range/createcontextualfragment/index.html b/files/it/web/api/range/createcontextualfragment/index.html new file mode 100644 index 0000000000..f56354ddc4 --- /dev/null +++ b/files/it/web/api/range/createcontextualfragment/index.html @@ -0,0 +1,37 @@ +--- +title: range.createContextualFragment +slug: Web/API/Range/createContextualFragment +translation_of: Web/API/Range/createContextualFragment +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un frammento di documento.

+ +

Sintassi

+ +
frammento = range.createContextualFragment( tag )
+
+ +

Parametri

+ +
+
tag 
+
stringa che contiene del testo da convertire in un frammento di documento
+
+ +

Esempio

+ +
var tag = "<div>Ciao, sono un nodo!</div>";
+var range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+var frammento = range.createContextualFragment(tag);
+document.body.appendChild(frammento);
+
+ +

Note

+ +

Questo metodo accetta una stringa e utilizza l'interprete di Mozilla per convertirla in un ramo (o un singolo nodo) del DOM.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/range/deletecontents/index.html b/files/it/web/api/range/deletecontents/index.html new file mode 100644 index 0000000000..25ade9f3ca --- /dev/null +++ b/files/it/web/api/range/deletecontents/index.html @@ -0,0 +1,25 @@ +--- +title: range.deleteContents +slug: Web/API/Range/deleteContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/deleteContents +--- +

{{ ApiRef() }}

+

Sommario

+

Rimuove i contenuti di un Range dal documento.

+

Sintassi

+
range.deleteContents()
+
+

Esempio

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.deleteContents();
+
+

Note

+

Diversamente dal metodo extractContents, deleteContents non restituisce un frammento di documento contenente il contenuto cancellato.

+

Specifiche

+

deleteContents

diff --git a/files/it/web/api/range/detach/index.html b/files/it/web/api/range/detach/index.html new file mode 100644 index 0000000000..be4f1de75d --- /dev/null +++ b/files/it/web/api/range/detach/index.html @@ -0,0 +1,28 @@ +--- +title: range.detach +slug: Web/API/Range/detach +translation_of: Web/API/Range/detach +--- +

{{ APIRef("DOM") }}

+ +

Rilascia un Range in uso, per liberare memoria.

+ +

Sintassi

+ +
range.detach();
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.detach();
+
+ +

Note

+ +

Permette a Mozilla di rilasciare le risorse associate a questo Range. Successivi tentativi di usare il range rilasciato causeranno una DOMException lanciata con un codice di errore INVALID_STATE_ERR.

+ +

Specifiche

+ +

detach

diff --git a/files/it/web/api/range/endcontainer/index.html b/files/it/web/api/range/endcontainer/index.html new file mode 100644 index 0000000000..b727827a32 --- /dev/null +++ b/files/it/web/api/range/endcontainer/index.html @@ -0,0 +1,29 @@ +--- +title: range.endContainer +slug: Web/API/Range/endContainer +translation_of: Web/API/Range/endContainer +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il nodo dentro il quale termina il Range.

+ +

Sintassi

+ +
endRangeNode = range.endContainer;
+
+ +

Esempio

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

Note

+ +

Restituisce una referenza al Nodo del documento dentro il quale termina il Range. Questa proprietà è di sola lettura. Per modificare la posizione finale di un nodo, si può utilizzare il metodo setEnd o un altro metodo simile.

+ +

Specifiche

+ +

endContainer

diff --git a/files/it/web/api/range/endoffset/index.html b/files/it/web/api/range/endoffset/index.html new file mode 100644 index 0000000000..0d4556ef6f --- /dev/null +++ b/files/it/web/api/range/endoffset/index.html @@ -0,0 +1,29 @@ +--- +title: range.endOffset +slug: Web/API/Range/endOffset +translation_of: Web/API/Range/endOffset +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un numero che rappresenta dove termina il Range, all'interno di endContainer.

+ +

Sintassi

+ +
endRangeOffset = range.endOffset;
+
+ +

Esempio

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

Note

+ +

endOffset ha due significati. Se endContainer è un Node di tipo Text, Comment, o CDATASection, allora l'offset è il numero di caratteri dall'inizio di endContainer alla fine del Range. Per altri tipi di Node, endOffset è il numero dei nodi figli tra l'inizio di endContainer e la fine del Range. Questa proprietà è di sola lettura. Per cambiare l'endOffset del Range, è possibile utilizzare uno dei metodi setEnd.

+ +

Specifiche

+ +

endOffset

diff --git a/files/it/web/api/range/extractcontents/index.html b/files/it/web/api/range/extractcontents/index.html new file mode 100644 index 0000000000..9c2cc50586 --- /dev/null +++ b/files/it/web/api/range/extractcontents/index.html @@ -0,0 +1,27 @@ +--- +title: range.extractContents +slug: Web/API/Range/extractContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/extractContents +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta i contenuti di un Range da un ramo del documento ad un altro ramo del documento.

+

Sintassi

+
frammento = range.extractContents();
+
+

Esempio

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+frammento = range.extractContents();
+document.body.appendChild(frammento);
+
+

Note

+

Gli Event Listener creati utilizzando gli eventi DOM non vengono conservati durante l'estrazione. Gli attributi-evento di HTML non vengono conservati nè duplicati. Gli attributi HTML "id" vengono clonati, il che può portare a rendere invalido un documento se il nodo parzialmente selezionato è estratto ed aggiunto in un altro punto del documento.

+

I nodi parzialmente selezionati vengono clonati per includere i tag padri necessari perché il frammento del documento sia valido.

+

Specifiche

+

extractContents

diff --git a/files/it/web/api/range/index.html b/files/it/web/api/range/index.html new file mode 100644 index 0000000000..9ff0663ee0 --- /dev/null +++ b/files/it/web/api/range/index.html @@ -0,0 +1,150 @@ +--- +title: range +slug: Web/API/Range +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Range +--- +

{{ ApiRef() }}

+

Introduzione

+

L'oggetto Range rappresenta una parte di un documento, che può contenere nodi e parti di nodi testuali del documento dato.

+

Un range può essere creato usando il metodo createRange dell'oggetto document. Gli oggetti Range possono essere ottenuti anche usando il metodo getRangeAt dell'oggetto selection.

+

Proprietà

+
+
+ collapsed
+
+ Restituisce un booleano che indica se i punti d'inizio e di fine del range sono nella stessa posizione.
+
+ commonAncestorContainer
+
+ Restituisce il nodo più interno che contiene i nodi startContainer e endContainer.
+
+ endContainer
+
+ Restituisce il nodo nel quale il Range finisce.
+
+ endOffset
+
+ Restituisce un numero che rappresenta il punto preciso in cui il Range finisce, all'interno di endContainer.
+
+ startContainer
+
+ Restituisce il nodo nel quale il Range inizia.
+
+ startOffset
+
+ Restituisce un numero che rappresenta il punto preciso in cui il Range inizia, all'interno di startContainer.
+
+

Metodi

+

Metodi di posizionamento

+

Questi metodi impostano i punti di inizio e di fine di un range.

+
+
+ setStart
+
+ Imposta la posizione iniziale di un Range.
+
+ setEnd
+
+ Setta la posizione finale di un Range.
+
+ setStartBefore
+
+ Setta la posizione iniziale di un Range nel nodo precedente a quello indicato.
+
+ setStartAfter
+
+ Setta la posizione iniziale di un Range nel nodo successivo a quello indicato.
+
+ setEndBefore
+
+ Setta la posizione finale di un Range nel nodo precedente a quello indicato.
+
+ setEndAfter
+
+ Setta la posizione finale di un Range nel nodo successivo a quello indicato.
+
+ selectNode
+
+ Inserisce all'interno di un Range uno specifico nodo e il suo contenuto.
+
+ selectNodeContents
+
+ Inserisce all'interno di un Range esclusivamente il contenuto di uno specifico nodo.
+
+ collapse
+
+ Collassa un Range in uno dei punti estremi.
+
+

Metodi per modificare un Range

+

Questi metodi prendono i nodi da un range e ne modificano i contenuti.

+
+
+ cloneContents
+
+ Restituisce un frammento di documento copiando i nodi da un Range.
+
+ deleteContents
+
+ Rimuove dal documento i contenuti di un Range.
+
+ extractContents
+
+ Muove i contenuti di un Range dall'albero del documento in un frammento del documento.
+
+ insertNode
+
+ Inserisce un nodo all'inizio di un Range.
+
+ surroundContents
+
+ Muove il contenuto di un Range in un nuovo nodo.
+
+

Altri metodi

+
+
+ compareBoundaryPoints
+
+ Compara i punti estremi di due Range.
+
+ cloneRange
+
+ Restituisce un oggetto Range con i punti estremi identici al Range clonato.
+
+ detach
+
+ Rilascia un Range dall'uso, per migliorare le performance.
+
+ toString
+
+ Restituisce il testo di un Range.
+
+

Metodi proprietari di Gecko

+

Questa sezione descrive metodi di Range implementati in Gecko ma che non fanno parte delle specifiche DOM del W3C.

+
+
+ compareNode (obsoleto)
+
+ Restituisce una costante che rappresenta se il nodo viene prima, dopo o dentro il Range.
+
+ comparePoint
+
+ Restituisce -1, 0, o 1 per indicare se il punto viene prima, dentro o dopo il range.
+
+ createContextualFragment
+
+ Restituisce un frammento di documento creato a partire da una data stringa di codice.
+
+ intersectsNode (obsoleto)
+
+ Restituisce un booleano che indica se il nodo dato interseca il range.
+
+ isPointInRange
+
+ Restituisce un booleano che indica se il punto dato è interno al range.
+
diff --git a/files/it/web/api/range/insertnode/index.html b/files/it/web/api/range/insertnode/index.html new file mode 100644 index 0000000000..6abfe0f295 --- /dev/null +++ b/files/it/web/api/range/insertnode/index.html @@ -0,0 +1,38 @@ +--- +title: range.insertNode +slug: Web/API/Range/insertNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/insertNode +--- +
+ {{APIRef}}
+
+  
+

Sommario

+

Inserisce un nodo all'inizio di un range.

+

Sintassi

+
range.insertNode(nuovoNodo);
+
+

Parameters

+
+
+ nuovoNodo 
+
+ è un oggetto node.
+
+

Esempio

+
range = document.createRange();
+nuovoNodo = document.createElement("p");
+nuovoNodo.appendChild(document.createTextNode("Un nuovo nodo viene inserito qui"));
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.insertNode(nuovoNodo);
+
+

Note

+

nuovoNodo viene inserito al punto iniziale del Range. Se nuovoNodo deve essere aggiunto a un nodo testo, quel nodo viene diviso al punto dell'inserimento e l'aggiunta avviene tra il due nodi testo risultanti (si veda però il bug http://bugzilla.mozilla.org/show_bug.cgi?id=135922 ).

+

Se nuovoNodo è un frammento di documento, i figli del frammento vengono inseriti al suo posto.

+

Specifiche

+

insertNode

diff --git a/files/it/web/api/range/ispointinrange/index.html b/files/it/web/api/range/ispointinrange/index.html new file mode 100644 index 0000000000..86c7e3ec43 --- /dev/null +++ b/files/it/web/api/range/ispointinrange/index.html @@ -0,0 +1,31 @@ +--- +title: range.isPointInRange +slug: Web/API/Range/isPointInRange +translation_of: Web/API/Range/isPointInRange +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un valore booleano che indica se il punto passato si trova all'interno del range.

+ +

Sintassi

+ +
bool = range.isPointInRange( nodo )
+
+ +

Parametri

+ +
+
nodo 
+
Il Node da comparare con il Range.
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+bool = range.isPointInRange(document.getElementsByTagName("p").item(0),1);
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcun standard.

diff --git a/files/it/web/api/range/selectnode/index.html b/files/it/web/api/range/selectnode/index.html new file mode 100644 index 0000000000..2b08e16731 --- /dev/null +++ b/files/it/web/api/range/selectnode/index.html @@ -0,0 +1,35 @@ +--- +title: range.selectNode +slug: Web/API/Range/selectNode +translation_of: Web/API/Range/selectNode +--- +

{{ APIRef("DOM") }}

+ +

Imposta il Range in modo tale che contenga un nodo e tutti i suoi elementi.

+ +

Sintassi

+ +
range.selectNode(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node da selezionare dentro un Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNode(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio e della fine del Range sarà lo stesso del padre del referenceNode.

+ +

Specifiche

+ +

selectNode

diff --git a/files/it/web/api/range/selectnodecontents/index.html b/files/it/web/api/range/selectnodecontents/index.html new file mode 100644 index 0000000000..e558cf5982 --- /dev/null +++ b/files/it/web/api/range/selectnodecontents/index.html @@ -0,0 +1,37 @@ +--- +title: range.selectNodeContents +slug: Web/API/Range/selectNodeContents +translation_of: Web/API/Range/selectNodeContents +--- +

 

+ +

{{ APIRef("DOM") }}

+ +

Imposta il Range perchè contenga il contenuti di un dato Node.

+ +

Sintassi

+ +
range.selectNodeContents(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node i cui contenuti devono essere selezionati dentro il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.selectNodeContents(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio e della fine del Range sarà referenceNode. startOffset è 0 e endOffset è il numero dei Node figli o il numero dei caratteri contenuti nel referenceNode.

+ +

Specifiche

+ +

selectNodeContents

diff --git a/files/it/web/api/range/setend/index.html b/files/it/web/api/range/setend/index.html new file mode 100644 index 0000000000..02754fbedb --- /dev/null +++ b/files/it/web/api/range/setend/index.html @@ -0,0 +1,38 @@ +--- +title: range.setEnd +slug: Web/API/Range/setEnd +translation_of: Web/API/Range/setEnd +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione finale di un Range.

+ +

Sintassi

+ +
range.setEnd(endNode,endOffset);
+
+ +

Parametri

+ +
+
endNode 
+
Il Node che termina il Range
+
endOffset 
+
Un intero maggiore o uguale a zero che rappresenta la distanza della fine del Range dall'inizio di endNode.
+
+ +

Esempio

+ +
range = document.createRange();
+endNode = document.getElementsByTagName("p").item(3);
+endOffset = document.getElementsByTagName("p").item(3).childNodes.length;
+range.setEnd(endNode,endOffset);
+
+ +

Note

+ +

Se l'endNode è un Node di tipo Text, Comment, o CDATASection, allora endOffset è il numero di caratteri dall'inizio di endNode. Per altri tipi di Node, endOffset è il numero dei nodi figlio dall'inizio di endNode.

+ +

Specifiche

+ +

setEnd

diff --git a/files/it/web/api/range/setendafter/index.html b/files/it/web/api/range/setendafter/index.html new file mode 100644 index 0000000000..7d23e74e02 --- /dev/null +++ b/files/it/web/api/range/setendafter/index.html @@ -0,0 +1,35 @@ +--- +title: range.setEndAfter +slug: Web/API/Range/setEndAfter +translation_of: Web/API/Range/setEndAfter +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione finale di un Range relativamente a un altro Node.

+ +

Syntax

+ +
range.setEndAfter(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node dopo il quale deve terminare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setEndAfter(referenceNode);
+
+ +

Note

+ +

Il Node della fine del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setEndAfter

diff --git a/files/it/web/api/range/setendbefore/index.html b/files/it/web/api/range/setendbefore/index.html new file mode 100644 index 0000000000..69b3f0e961 --- /dev/null +++ b/files/it/web/api/range/setendbefore/index.html @@ -0,0 +1,35 @@ +--- +title: range.setEndBefore +slug: Web/API/Range/setEndBefore +translation_of: Web/API/Range/setEndBefore +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione finale di un Range relativamente a un altro Node.

+ +

Sintassi

+ +
range.setEndBefore(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node prima del quale deve terminare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setEndBefore(referenceNode);
+
+ +

Note

+ +

Il Node padre della fine del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setEndBefore

diff --git a/files/it/web/api/range/setstart/index.html b/files/it/web/api/range/setstart/index.html new file mode 100644 index 0000000000..27623b9ea8 --- /dev/null +++ b/files/it/web/api/range/setstart/index.html @@ -0,0 +1,38 @@ +--- +title: range.setStart +slug: Web/API/Range/setStart +translation_of: Web/API/Range/setStart +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione iniziale di un Range.

+ +

Sintassi

+ +
range.setStart(startNode,startOffset);
+
+ +

Parametri

+ +
+
startNode 
+
Il Node all'inizio del Range
+
startOffset 
+
Un numero intero molto grande rappresentante l'offset per l'inizio del Range dall'iniszio dello startNode.
+
+ +

Esempio

+ +
range = document.createRange();
+startNode = document.getElementsByTagName("p").item(2);
+startOffset = 0;
+range.setStart(startNode,startOffset);
+
+ +

Note

+ +

Se lo startNode è un Node di tipo Text, Comment, oppure CDATASection, allora lo startOffset è il numero di caratteri dall'inizio dello startNode. Per gli altri tipi di Node, lo startOffset è il numero di nodi figli tra l'inizio dello startNode.

+ +

Specifiche

+ +

setStart

diff --git a/files/it/web/api/range/setstartafter/index.html b/files/it/web/api/range/setstartafter/index.html new file mode 100644 index 0000000000..4a5676a9d6 --- /dev/null +++ b/files/it/web/api/range/setstartafter/index.html @@ -0,0 +1,35 @@ +--- +title: range.setStartAfter +slug: Web/API/Range/setStartAfter +translation_of: Web/API/Range/setStartAfter +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione iniziale di un Range relativamente a un altro Node.

+ +

Sintassi

+ +
range.setStartAfter(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node dopo il quale deve iniziare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setStartAfter(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setStartAfter

diff --git a/files/it/web/api/range/setstartbefore/index.html b/files/it/web/api/range/setstartbefore/index.html new file mode 100644 index 0000000000..d98800f57b --- /dev/null +++ b/files/it/web/api/range/setstartbefore/index.html @@ -0,0 +1,35 @@ +--- +title: range.setStartBefore +slug: Web/API/Range/setStartBefore +translation_of: Web/API/Range/setStartBefore +--- +

{{ APIRef("DOM") }}

+ +

Imposta la posizione iniziale di un Range relativamente a un altro Node.

+ +

Sintassi

+ +
range.setStartBefore(referenceNode);
+
+ +

Parametri

+ +
+
referenceNode 
+
Il Node prima del quale deve iniziare il Range
+
+ +

Esempio

+ +
range = document.createRange();
+referenceNode = document.getElementsByTagName("div").item(0);
+range.setStartBefore(referenceNode);
+
+ +

Note

+ +

Il Node padre dell'inizio del Range sarà lo stesso di referenceNode.

+ +

Specification

+ +

setStartBefore

diff --git a/files/it/web/api/range/startcontainer/index.html b/files/it/web/api/range/startcontainer/index.html new file mode 100644 index 0000000000..e1eb8d3c7f --- /dev/null +++ b/files/it/web/api/range/startcontainer/index.html @@ -0,0 +1,29 @@ +--- +title: range.startContainer +slug: Web/API/Range/startContainer +translation_of: Web/API/Range/startContainer +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il Node dentro il quale comincia il Range.

+ +

Sintassi

+ +
startRangeNode = range.startContainer;
+
+ +

Esempio

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

Note

+ +

Restituisce un riferimento al Node del documento, dentro il quale comincia il Range. Questa proprietà è di sola lettura. Per modificare la posizione dell'inizio di un nodo, si utilizzi i metodi setStart.

+ +

Specifiche

+ +

startParent

diff --git a/files/it/web/api/range/startoffset/index.html b/files/it/web/api/range/startoffset/index.html new file mode 100644 index 0000000000..e0408fa445 --- /dev/null +++ b/files/it/web/api/range/startoffset/index.html @@ -0,0 +1,29 @@ +--- +title: range.startOffset +slug: Web/API/Range/startOffset +translation_of: Web/API/Range/startOffset +--- +

{{ APIRef("DOM") }}

+ +

Restituisce un numero che rappresenta il punto iniziale del Range all'interno di startContainer.

+ +

Sintassi

+ +
startRangeOffset = range.startOffset;
+
+ +

Esempio

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

Note

+ +

startRangeOffset ha due significati. Se startContainer è un code>Node</code> di tipo Text, Comment, o CDATASection, allora startRangeOffset rappresenta il numero di caratteri dall'inizio di startContainer alla fine di Range, Per tutti gli altri tipi di Node, startRangeOffset rappresenta il numero di nodi figlio tra l'inizio di startContainer e la fine di Range. Questa proprietà è di sola lettura. Per modificare il valore startOffset di un nodo, si utilizzino i metodi setStart.

+ +

Speicifiche

+ +

startOffset

diff --git a/files/it/web/api/range/surroundcontents/index.html b/files/it/web/api/range/surroundcontents/index.html new file mode 100644 index 0000000000..32b94161ef --- /dev/null +++ b/files/it/web/api/range/surroundcontents/index.html @@ -0,0 +1,36 @@ +--- +title: range.surroundContents +slug: Web/API/Range/surroundContents +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Range/surroundContents +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta il contenuto di un Range in un nuovo nodo, piazzando il nuovo nodo all'inizio del range specificato.

+

Sintassi

+
range.surroundContents(nuovoNodo);
+
+
+
+ nuovoNodo 
+
+ è un nodo
+
+

Esempio

+
var range = document.createRange();
+var nuovoNodo = document.createElement("p");
+range.selectNode(document.getElementsByTagName("div").item(0));
+range.surroundContents(nuovoNodo);
+
+

Note

+

surroundContents equivale a:

+
nuovoNodo.appendChild(range.extractContents());
+range.insertNode(nuovoNodo)
+
+

Per effetto di questo metodo, i punti estremi del range includono nuovoNodo.

+

Specifiche

+

DOM Level 2 Range: Range.surroundContents

diff --git a/files/it/web/api/range/tostring/index.html b/files/it/web/api/range/tostring/index.html new file mode 100644 index 0000000000..fd3c9d3999 --- /dev/null +++ b/files/it/web/api/range/tostring/index.html @@ -0,0 +1,28 @@ +--- +title: range.toString +slug: Web/API/Range/toString +translation_of: Web/API/Range/toString +--- +

{{ APIRef("DOM") }}

+ +

Restituisce il testo del Range.

+ +

Sintassi

+ +
text = range.toString();
+
+ +

Esempio

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+text = range.toString();
+
+ +

Note

+ +

Alterare i contenuti di un Range causa una chiamata implicita di toString(), quindi comparare il Range e il testo attraverso un alert dialog è inutile.

+ +

Specifiche

+ +

toString

diff --git a/files/it/web/api/selection/addrange/index.html b/files/it/web/api/selection/addrange/index.html new file mode 100644 index 0000000000..cff46a4d65 --- /dev/null +++ b/files/it/web/api/selection/addrange/index.html @@ -0,0 +1,39 @@ +--- +title: addRange +slug: Web/API/Selection/addRange +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/addRange +--- +

{{ ApiRef() }}

+

Sommario

+

Aggiunge un range alla selezione.

+

Sintassi

+
selezione.addRange(range)
+
+

Parametri

+
+
+ + range +
+
+ Un oggetto range che verrà aggiunto alla selezione.
+
+

Esempio

+
 /* seleziono tutti gli oggetti STRONG all'interno del documento 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( { "es": "es/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange", "pl": "pl/DOM/Selection/addRange" } ) }}

diff --git a/files/it/web/api/selection/anchornode/index.html b/files/it/web/api/selection/anchornode/index.html new file mode 100644 index 0000000000..2dcd33e119 --- /dev/null +++ b/files/it/web/api/selection/anchornode/index.html @@ -0,0 +1,21 @@ +--- +title: anchorNode +slug: Web/API/Selection/anchorNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/anchorNode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il nodo nel quale inizia la selezione.

+

Sintassi

+
selection.anchorNode
+
+

Note

+

Un utente può creare una selezione da sinistra a destra (nell'ordine del documento) oppure da destra a sinistra (in ordine inverso rispetto al documento). L'anchor è il punto in cui l'utente ha iniziato a selezionare. Per comprendere e visualizzare questo meccanismo, si può tenere premuto il tasto SHIFT e poi premere i tasti freccia; l'anchor rimane immobile ma il focus, cioè l'altro estremo della selezione, si sposta.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/anchorNode", "es": "es/DOM/Selection/anchorNode", "pl": "pl/DOM/Selection/anchorNode" } ) }}

diff --git a/files/it/web/api/selection/anchoroffset/index.html b/files/it/web/api/selection/anchoroffset/index.html new file mode 100644 index 0000000000..0c6de4e0ed --- /dev/null +++ b/files/it/web/api/selection/anchoroffset/index.html @@ -0,0 +1,21 @@ +--- +title: anchorOffset +slug: Web/API/Selection/anchorOffset +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/anchorOffset +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il numero di caratteri che separano il primo carattere della selezione (anchor), dal primo carattere del primo nodo selezionato (anchorNode).

+

Sintassi

+
selezione.anchorOffset
+
+

Note

+

Il valore restituito inizia da 0. Se la selezione comincia con il primo carattere dell'anchorNode, anchorOffset restituisce 0.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/anchorOffset", "es": "es/DOM/Selection/anchorOffset", "pl": "pl/DOM/Selection/anchorOffset" } ) }}

diff --git a/files/it/web/api/selection/collapse/index.html b/files/it/web/api/selection/collapse/index.html new file mode 100644 index 0000000000..63f2407ac1 --- /dev/null +++ b/files/it/web/api/selection/collapse/index.html @@ -0,0 +1,44 @@ +--- +title: collapse +slug: Web/API/Selection/collapse +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/collapse +--- +

{{ ApiRef() }}

+

Sommario

+

Fa collassare la selezione corrente in un singolo punto. Il documento non viene modificato. Se il contenuto è modificabile, il cursore lampeggerà.

+

Sintassi

+
selezione.collapse(nodoPadre,offset);
+
+

Parametri

+
+
+ + nodoPadre +
+
+ Il cursore si troverà all'interno di questo nodo.
+
+
+
+ + offset +
+
+ La distanza in caratteri tra il cursore e l'inizio del testo di + + parentNode + .
+
+

Esempio

+
/* Porta il cursore all'inizio del BODY */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+
+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapse", "es": "es/DOM/Selection/collapse", "pl": "pl/DOM/Selection/collapse" } ) }}

diff --git a/files/it/web/api/selection/collapsetoend/index.html b/files/it/web/api/selection/collapsetoend/index.html new file mode 100644 index 0000000000..b7193eb8e6 --- /dev/null +++ b/files/it/web/api/selection/collapsetoend/index.html @@ -0,0 +1,19 @@ +--- +title: collapseToEnd +slug: Web/API/Selection/collapseToEnd +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/collapseToEnd +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta l'anchor della selezione allo stesso punto in cui si trova il focus. Il focus non si muove. Se il contenuto è modificabile, il cursore lampeggerà.

+

Syntax

+
selezione.collapseToEnd()
+
+
+  
+

{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "es": "es/DOM/Selection/collapseToEnd", "pl": "pl/DOM/Selection/collapseToEnd" } ) }}

diff --git a/files/it/web/api/selection/collapsetostart/index.html b/files/it/web/api/selection/collapsetostart/index.html new file mode 100644 index 0000000000..ccf6084f65 --- /dev/null +++ b/files/it/web/api/selection/collapsetostart/index.html @@ -0,0 +1,14 @@ +--- +title: collapseToStart +slug: Web/API/Selection/collapseToStart +translation_of: Web/API/Selection/collapseToStart +--- +

Sommario

+

Sposta il focus della selezione allo stesso punto in cui si trova l'anchor. L'anchor non si muove. Se il contenuto è modificabile, il cursore lampeggerà. +

+

Sintassi

+
selezione.collapseToStart()
+
+
+
+{{ languages( { "en": "en/DOM/Selection/collapseToStart", "es": "es/DOM/Selection/collapseToStart", "pl": "pl/DOM/Selection/collapseToStart" } ) }} diff --git a/files/it/web/api/selection/containsnode/index.html b/files/it/web/api/selection/containsnode/index.html new file mode 100644 index 0000000000..b7729228b6 --- /dev/null +++ b/files/it/web/api/selection/containsnode/index.html @@ -0,0 +1,47 @@ +--- +title: containsNode +slug: Web/API/Selection/containsNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/containsNode +--- +

{{ ApiRef() }}

+

Sommario

+

Indica se il nodo specificato fa parte della selezione.

+

Sintassi

+
selezione.containsNode(nodo,nodoParziale)
+
+

Parametri

+
+
+ + nodo +
+
+

Il nodo da cercare all'interno della selezione

+
+
+ + nodoParziale +
+
+ Se è + + true + , containsNode restituisce true nel caso in cui solo una parte di nodo sia contenuta dalla selezione.
+
+ Se è + + false + , containsNode restituisce false nel caso in cui solo una parte di nodo sia contenuta dalla selezione.
+
+

Esempi

+
 /* controlliamo se qualcosa all'interno dell'elemento BODY è stato selezionato */
+ alert(window.getSelection().containsNode(document.body, true));
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/containsNode", "en": "en/DOM/Selection/containsNode", "pl": "pl/DOM/Selection/containsNode" } ) }}

diff --git a/files/it/web/api/selection/deletefromdocument/index.html b/files/it/web/api/selection/deletefromdocument/index.html new file mode 100644 index 0000000000..5a065e7b37 --- /dev/null +++ b/files/it/web/api/selection/deletefromdocument/index.html @@ -0,0 +1,28 @@ +--- +title: deleteFromDocument +slug: Web/API/Selection/deleteFromDocument +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/deleteFromDocument +--- +

{{ ApiRef }}

+ +

Sommario

+ +

Elimina dal documento il testo attualmente rappresentato dall'oggetto selection.

+ +

Sintassi

+ +
selezione.deleteFromDocument()
+
+ +

Esempi

+ +

Un utente seleziona il testo (immaginario) "la capra " all'interno della stringa "sotto la panca la capra crepa". L'utente poi clicca un bottone che esegue la riga JavaScript window.getSelection().deleteFromDocument(). Il testo del documento diventa "sotto la panca crepa".

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "es": "es/DOM/Selection/deleteFromDocument", "pl": "pl/DOM/Selection/deleteFromDocument" } ) }}

diff --git a/files/it/web/api/selection/extend/index.html b/files/it/web/api/selection/extend/index.html new file mode 100644 index 0000000000..58e022a2a9 --- /dev/null +++ b/files/it/web/api/selection/extend/index.html @@ -0,0 +1,39 @@ +--- +title: extend +slug: Web/API/Selection/extend +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/extend +--- +

{{ ApiRef() }}

+

Sommario

+

Sposta il focus della selezione ad un punto specificato. L'anchor invece resta immobile. La selezione si estenderà dall'anchor fino al nuovo focus, indipendentemente da quale sia la direzione (cioè potrebbe essere inversa rispetto al testo).

+

Sintassi

+
selezione.extend(nodoPadre,offset)
+
+

Parametri

+
+
+ + nodoPadre +
+
+ Il nuovo focus, cioè il nodo fino al quale si estenderà la selezione.
+
+
+
+ + offset +
+
+ Il numero di caratteri che separeranno l'inizio del testo del + + nodoPadre' + dal nuovo focus.
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/extend", "en": "en/DOM/Selection/extend", "pl": "pl/DOM/Selection/extend" } ) }}

diff --git a/files/it/web/api/selection/focusnode/index.html b/files/it/web/api/selection/focusnode/index.html new file mode 100644 index 0000000000..8c8653b829 --- /dev/null +++ b/files/it/web/api/selection/focusnode/index.html @@ -0,0 +1,21 @@ +--- +title: focusNode +slug: Web/API/Selection/focusNode +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/focusNode +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il nodo nel quale la selezione termina

+

Sintassi

+
selection.focusNode
+
+

Note

+

Un utente può creare una selezione da sinistra a destra (nell'ordine del documento) oppure da destra a sinistra (in ordine inverso rispetto al documento). L'anchor è il punto in cui l'utente ha iniziato a selezionare, il focus è il punto in cui la selezione è terminata. Per comprendere e visualizzare questo meccanismo, si può tenere premuto il tasto SHIFT e poi premere i tasti freccia; l'anchor rimane immobile ma il focus, cioè l'altro estremo della selezione, si sposta.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/focusNode", "es": "es/DOM/Selection/focusNode", "pl": "pl/DOM/Selection/focusNode" } ) }}

diff --git a/files/it/web/api/selection/focusoffset/index.html b/files/it/web/api/selection/focusoffset/index.html new file mode 100644 index 0000000000..92978a8dba --- /dev/null +++ b/files/it/web/api/selection/focusoffset/index.html @@ -0,0 +1,21 @@ +--- +title: focusOffset +slug: Web/API/Selection/focusOffset +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/focusOffset +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il numero di caratteri che separano il primo carattere della selezione (focus) dal primo carattere dell'ultimo nodo della selezione (focusNode).

+

Sintassi

+
selezione.focusOffset
+
+

Note

+

Questo valore inizia da 0. Se la selezione termina con il primo carattere di focusNode, focusOffset restituisce 0.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/focusOffset", "es": "es/DOM/Selection/focusOffset", "pl": "pl/DOM/Selection/focusOffset" } ) }}

diff --git a/files/it/web/api/selection/getrangeat/index.html b/files/it/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..f5307b03d9 --- /dev/null +++ b/files/it/web/api/selection/getrangeat/index.html @@ -0,0 +1,37 @@ +--- +title: getRangeAt +slug: Web/API/Selection/getRangeAt +translation_of: Web/API/Selection/getRangeAt +--- +

Sommario

+

Restituisce un oggetto range che rappresenta i nodi attualmente selezionati.

+

Sintassi

+
range =sel.getRangeAt(index)
+
+

Parametri

+
+
+ range
+
+ L'oggetto range che verrà restituito.
+
+
+
+ + index +
+
+ L'indice del range da restituire; parte da zero. Un valore negativo o un numero uguale o maggiore a rangeCount causa un errore.
+
+

Esempi

+
var ranges = [];
+
+sel = window.getSelection();
+
+for(var i = 0; i < sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Ogni oggetto nei ranghi ora è un
+ * oggetto range che rappresenta uno dei ranghi
+ * presenti nella selezione attuale. */
+
diff --git a/files/it/web/api/selection/index.html b/files/it/web/api/selection/index.html new file mode 100644 index 0000000000..aca2185be0 --- /dev/null +++ b/files/it/web/api/selection/index.html @@ -0,0 +1,102 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection +--- +

{{ ApiRef() }}

+ +

Sommario

+ +

E' la classe dell'oggetto restituito da window.getSelection ed altri metodi.

+ +

Descrizione

+ +

L'oggetto selection rappresenta i range che l'utente ha selezionato. In una selezione fatte dall'utente col mouse possono esserci più range, ad esempio perchè tramite posizionamento assoluto nei CSS due contenitori(DIV) distanti fra di loro nel flusso del documento appaiono vicini sul display e vengono selezionati insieme. Per accedere ai diversi Range che formano una selezione, si usa il metodo getRangeAt().

+ +

In JavaScript, l'oggetto selection può venire modificato come se fosse una stringa, ad esempio vi si può concatenare una stringa, perchè in questi casi viene automaticamente applicato il metodo toString. Ad esempio, con il codice seguente, nell'alert apparirà una stringa:

+ +
selObj = window.getSelection();
+window.alert(selObj);
+
+ +

ma la variabile selObj rimane un oggetto di tipo selection e non di tipo String, solo che all'occorrenza gli viene applicato il metodo toString().

+ +

Glossario

+ +

Altre parole chiave usate in questa sezione.

+ +
+
anchor
+
Rappresenta il punto in cui inizia una selezione. Quando si fa una selezione con il mouse, l'anchor è il punto in cui il mouse è stato premuto e non cambia mentre si muove il mouse.
+
focus
+
Rappresenta il punto in cui finisce una selezione. Quando si fa una selezione con il mouse, il focus si muove in corrispondenza del mouse(mentre il tasto è premuto), e quando il tasto viene rilasciato, rappresenta il punto in cui finisce la selezione.
+
range
+
Rappresenta un insieme di nodi contigui del documento. Un range può contenere interi nodi come anche porzioni di nodi(nel caso di nodi testuali). Un range può essere recuperato da una selezione attraverso l'oggetto range, oppure può essere creato via script e aggiunto o rimosso da una selezione.
+
+ +

Proprietà

+ +
+
anchorNode
+
Restituisce il nodo in cui inizia la selezione.
+
anchorOffset
+
Restituisce il numero di caratteri fra l'inizio del nodo testuale e l'anchor, all'interno dell'anchorNode.
+
focusNode
+
Restituisce il nodo in cui finisce la selezione.
+
focusOffset
+
Restituisce il numero di caratteri fra l'inizio del nodo testuale e il focus, all'interno del focusNode.
+
isCollapsed
+
Restituisce un valore booleano che indica se l'anchor e il focus di una selezione si trovano nella stessa posizione.
+
rangeCount
+
Restituisce il numero di range di cui è composta una selezione.
+
+ +

Metodi

+ +
+
getRangeAt
+
Restituisce un oggetto range che rappresenta uno dei range attualmente selezionati.
+
collapse
+
Collassa la selezione corrente in un singolo punto.
+
extend
+
Muove il focus della selezione in uno specifico punto.
+
collapseToStart
+
Muove il focus della selezione nel punto in cui c'è l'anchor (che non viene spostata).
+
collapseToEnd
+
Muove il focus della selezione nel punto in cui c'è il focus (che non viene spostato).
+
selectAllChildren
+
Aggiunge tutti i figli del nodo specificato alla selezione.
+
addRange
+
Aggiunge un oggetto range alla selezione..
+
removeRange
+
Rimuove un range dalla selezione.
+
removeAllRanges
+
Rimuove tutti i range dalla selezione.
+
deleteFromDocument
+
Elimina dal documento il contenuto della selezione.
+
selectionLanguageChange
+
 
+
toString
+
Restituisce una stringa che rappresenta l'oggetto selection (cioè il testo attualmente selezionato).
+
containsNode
+
Indica se un certo nodo fa parte dell'oggetto selection.
+
+ +

Guarda anche

+ +

window.getSelection, Range

+ + + + + +
 
+ +

{{ languages( { "en": "en/DOM/Selection", "es": "es/DOM/Selection", "pl": "pl/DOM/Selection" } ) }}

diff --git a/files/it/web/api/selection/iscollapsed/index.html b/files/it/web/api/selection/iscollapsed/index.html new file mode 100644 index 0000000000..f91cfc5d1d --- /dev/null +++ b/files/it/web/api/selection/iscollapsed/index.html @@ -0,0 +1,24 @@ +--- +title: isCollapsed +slug: Web/API/Selection/isCollapsed +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/isCollapsed +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce un booleano che indica se l'inizio e la fine della selezione corrente corrispondono (cioè restituisce true se la selezione è + + collassata + ).

+

Sintassi

+
selection.isCollapsed
+
+

Note

+

Anche una selezione collassata può avere un rangeCount più grande di 0. Anche selezione.getRangeAt(0) potrebbe restituire un range collassato.

+
+  
+

{{ languages( { "en": "en/DOM/Selection/isCollapsed", "es": "es/DOM/Selection/isCollapsed", "pl": "pl/DOM/Selection/isCollapsed" } ) }}

diff --git a/files/it/web/api/selection/rangecount/index.html b/files/it/web/api/selection/rangecount/index.html new file mode 100644 index 0000000000..db26f87b6f --- /dev/null +++ b/files/it/web/api/selection/rangecount/index.html @@ -0,0 +1,19 @@ +--- +title: rangeCount +slug: Web/API/Selection/rangeCount +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/rangeCount +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce il numero di range presenti nella selezione.

+

Sintassi

+
selection.rangeCount
+
+

Note

+

Prima che l'utente clicchi su una pagina appena caricata, rangeCount vale 0. Un utente normalmente può selezionare un solo range alla volta, quindi rangeCount solitamente vale 1. Tramite lo script è possibile far si che la selezione contenga più di un range.

+

{{ languages( { "en": "en/DOM/Selection/rangeCount", "es": "es/DOM/Selection/rangeCount", "pl": "pl/DOM/Selection/rangeCount" } ) }}

diff --git a/files/it/web/api/selection/removeallranges/index.html b/files/it/web/api/selection/removeallranges/index.html new file mode 100644 index 0000000000..b9aa7bba25 --- /dev/null +++ b/files/it/web/api/selection/removeallranges/index.html @@ -0,0 +1,19 @@ +--- +title: removeAllRanges +slug: Web/API/Selection/removeAllRanges +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/removeAllRanges +--- +

{{ ApiRef() }}

+

Sommario

+

Rimuove tutti i range dalla selezione, impostando le proprietà anchorNode e focusNode a null. Dopo la chiamata a questo metodo, non vi saranno elementi selezionati nella pagina.

+

Sintassi

+
selezione.removeAllRanges();
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/removeAllRanges", "en": "en/DOM/Selection/removeAllRanges", "pl": "pl/DOM/Selection/removeAllRanges" } ) }}

diff --git a/files/it/web/api/selection/removerange/index.html b/files/it/web/api/selection/removerange/index.html new file mode 100644 index 0000000000..cb4186afe9 --- /dev/null +++ b/files/it/web/api/selection/removerange/index.html @@ -0,0 +1,38 @@ +--- +title: removeRange +slug: Web/API/Selection/removeRange +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/removeRange +--- +

{{ ApiRef() }}

+

Sommario

+

Rimuove un range dalla selezione.

+

Sintassi

+
selezione.removeRange(range)
+
+

Parametri

+
+
+ + range +
+
+ Un oggetto range che verrà rimosso dalla selezione.
+
+

Esempio

+
/* Da programma, è possibile selezionare più di un range.
+   Questo script li deseleziona tutti tranne il primo. */
+s = window.getSelection();
+if(s.rangeCount > 1) {
+ for(var i = 1; i < s.rangeCount; i++) {
+  s.removeRange(s.getRangeAt(i));
+ }
+}
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/removeRange", "en": "en/DOM/Selection/removeRange", "pl": "pl/DOM/Selection/removeRange" } ) }}

diff --git a/files/it/web/api/selection/selectallchildren/index.html b/files/it/web/api/selection/selectallchildren/index.html new file mode 100644 index 0000000000..2df5613a3d --- /dev/null +++ b/files/it/web/api/selection/selectallchildren/index.html @@ -0,0 +1,39 @@ +--- +title: selectAllChildren +slug: Web/API/Selection/selectAllChildren +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/selectAllChildren +--- +

{{ ApiRef() }}

+

Sommario

+

Aggiunge alla selezione tutti i figli del nodo specificato. La selezione precedente viene perduta.

+

Sintassi

+
selezione.selectAllChildren(nodoPadre)
+
+

Parametri

+
+
+ + nodoPadre +
+
+ Tutti i figli di + + nodoPadre + verranno aggiunti alla selezione. + + nodoPadre + invece non verrà selezionato.
+
+

Esempio

+
pieDiPagina = document.getElementById("pieDiPagina");
+window.getSelection().selectAllChildren(pieDiPagina);
+/* ora tutto ciò che si trova a piè di pagina è selezionato */
+
+
+  
+

{{ languages( { "es": "es/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren", "pl": "pl/DOM/Selection/selectAllChildren" } ) }}

diff --git a/files/it/web/api/selection/tostring/index.html b/files/it/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..17a6be112b --- /dev/null +++ b/files/it/web/api/selection/tostring/index.html @@ -0,0 +1,27 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Selection/toString +--- +

{{ ApiRef() }}

+

Sommario

+

Restituisce una stringa che rappresenta l'oggetto selection. Generalmente è il testo selezionato.

+

Sintassi

+
stringa =selezione.toString()
+
+ +

Note

+

In JavaScript, questo metodo viene chiamato implicitamente quando un oggetto selection viene passato a un metodo o a una funzione che richiede una stringa:

+
alert(window.getSelection()) // la chiamata scritta da noi
+alert(window.getSelection().toString())  // la chiamata effettiva
+
+
+  
+

{{ languages( { "en": "en/DOM/Selection/toString", "es": "es/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}

diff --git a/files/it/web/api/storage/clear/index.html b/files/it/web/api/storage/clear/index.html new file mode 100644 index 0000000000..e99735a34f --- /dev/null +++ b/files/it/web/api/storage/clear/index.html @@ -0,0 +1,126 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +tags: + - API + - Persistenza + - Persistenza Browser + - Riferimento + - metodo +translation_of: Web/API/Storage/clear +--- +

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

+ +

Il metodo clear() dell'interfaccia {{domxref("Storage")}} , quando invocato, pulisce tutte le chiavi salvate.

+ +

Sintassi

+ +
storage.clear();
+ +

Return value

+ +

{{jsxref("undefined")}}.

+ +

Esempi

+ +

La seguente funzione crea tre coppie chiave/valore in local storage, infine le elimina invocando il metodo clear().

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'miGato.png');
+
+  localStorage.clear();
+}
+ +
+

Note: Per un esempio reale guarda Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità browser {{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Ogni browser riserva una quantità di memoria differente per localStorage e sessionStorage. Qui si trova il dettaglio di tutte le quantità di memoria per i vari browser.

+ +
+

Note: da iOS 5.1, Safari Mobile persiste i dati di localStorage nella cartella cache, che è soggetta a pulizie occasionali, su ordine del sistema operativo, tipicamente in condizioni di poco spazio libero sul dispositivo.

+
+ +

Vedi anche

+ +

Utilizzo di Web Storage API

diff --git a/files/it/web/api/storage/getitem/index.html b/files/it/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..701fff9910 --- /dev/null +++ b/files/it/web/api/storage/getitem/index.html @@ -0,0 +1,144 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +tags: + - API + - Memoria locale + - memoria + - metodo +translation_of: Web/API/Storage/getItem +--- +

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

+ +

Il metodo getItem() dell'interfaccia {{domxref("Storage")}} restituisce il valore contenuto nella chiave passata a parametro.

+ +

Syntax

+ +
var aValue = storage.getItem(keyName);
+
+ +

Parametri

+ +
+
keyName
+
Una {{domxref("DOMString")}} che contiene il nome della chiave da cui si vuole ottenerne il valore associato.
+
+ +

Valore restituito

+ +

Una {{domxref("DOMString")}} contenente il valore associato alla chiave. Se la chiave non esiste, null viene restituito.

+ +

Esempio

+ +

La funzione seguente ottiene tre elementi dalla memoria locale, per poi utilizzarli per impostare alcuni stili personalizzati nella pagina.

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Nota: Per vedere questo esempio usato nel mondo reale, guarda il nostro Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità browsers

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Tutti i browser hanno differenti livelli capacitativi per entrambi localStorage e sessionStorage. Qui puoi trovare una lista dettagliata delle capacità di memoria per browser differenti.

+ +
+

Nota: da iOS 5.1, Safari Mobile immagazzina i dati di localStorage nella cartella cache, che viene svuotata occasionalmente a discrezione dell'OS, solitamente quando lo spazio disponibile scarseggia.

+
+ +

Vedi anche

+ + diff --git a/files/it/web/api/storage/index.html b/files/it/web/api/storage/index.html new file mode 100644 index 0000000000..ab30b1de21 --- /dev/null +++ b/files/it/web/api/storage/index.html @@ -0,0 +1,161 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - API + - Dati + - Interfaccia + - Riferimento + - Storage + - Web Storage +translation_of: Web/API/Storage +--- +

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

+ +

L'interfaccia Storage dell'API Web Storage fornisce accesso allo storage di sessione o allo storage locale per un dato dominio, permettendo, ad esempio, l'aggiunta, modifica o rimozione di dati salvati.

+ +

Se si vuole manipolare lo storage di sessione per un dominio, va invocato il metodo {{domxref("Window.sessionStorage")}}; se si vuole manipolare lo storage locale per un dominio, va invocato {{domxref("Window.localStorage")}}.

+ +

Proprietà

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Ritorna un intero che rappresenta il numero di oggetti presenti in un oggetto Storage.
+
+ +

Metodi

+ +
+
{{domxref("Storage.key()")}}
+
Dato un numero n,  ritorna il nome dell'n-esima chiave nello storage.
+
+ +
+
{{domxref("Storage.getItem()")}}
+
Dato un nome di chiave, ritorna il corrispondente valore.
+
{{domxref("Storage.setItem()")}}
+
Dati un nome di chiave e un valore, aggiunge questa chiave allo storage, o aggiorna il valore della chiave se essa esiste già.
+
{{domxref("Storage.removeItem()")}}
+
Dato un nome di chiave, rimuove quella chiave dallo storage.
+
{{domxref("Storage.clear()")}}
+
Rimuove tutte le chiavi dallo storage.
+
+ +

Esempi

+ +

Questo è un esempio di accesso all'oggetto Storage tramite chiamata a localStorage. In primo luogo, si verifica se lo storage locale contenga oggetti usando !localStorage.getItem('bgcolor'). Se il test passa, si invoca una funzione setStyles() che recupera gli oggetti tramite {{domxref("localStorage.getItem()")}} e ne usa i valori per aggiornare gli stili della pagina. Se il test fallisce, viene invocata un'altra funzione, populateStorage(), che usa {{domxref("localStorage.setItem()")}} per settare i valori, per poi ritornare setStyles().

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Nota: Per vedere quest'esempio girare, si veda la Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilità dei browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto minimo2.1{{ CompatUnknown }}8113.2[1]
+
+ +

[1] A partite da iOS 5.1, Safari Mobile salva i dati del localStorage in una cartella di cache, soggetta occasionalmente a pulizia su richiesta del sistema operativo, tipicamente in mancanza di spazio.

+ +

I vari browser hanno diversi livelli di capacità sia per localStorage che per sessionStorage. Qui si trova un resoconto dettagliato delle capacità di immagazzinamento dei vari browser.

+ +

Vedere anche

+ +

Usare la API Web Storage

diff --git a/files/it/web/api/storage/setitem/index.html b/files/it/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..c96e805956 --- /dev/null +++ b/files/it/web/api/storage/setitem/index.html @@ -0,0 +1,133 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +translation_of: Web/API/Storage/setItem +--- +

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

+ +

Il metodo setItem(), che fa parte della funzionalità {{domxref("Storage")}} , quando passa il nome di una chiave e un valore, aggiunge questa chiave allo storage, oppure se la chiave esiste già aggiorna il valore della chiave stessa.

+ +

Sintassi

+ +
storage.setItem(keyName, keyValue);
+ +

Parametri

+ +
+
keyName
+
Il {{domxref("DOMString")}} contiene il nome della chiave che si vuole creare o aggiornare.
+
keyValue
+
Il {{domxref("DOMString")}} contiene il valore che si vuole dare alla chiave che si sta creando o aggiornando.
+
+ +

Valore di ritorno

+ +

{{jsxref("undefined")}}.

+ +

Eccezioni

+ +

setItem() potrebbe dar luogo a eccezioni se lo storage è pieno. Ad esempio, in Safari Mobile (da iOS 5) non è possibile salvare dati quando l'utente è in modalità in incognito (questo perché Safari non alloca spazio per l'utente nella modalità in incognito, al contrario degli altri browsers, i quali permettono di usare lo storage nella modalità in incognito, salvando i dati in uno spazio apposito e separato). Quindi è sempre meglio implementare delle funzioni che gestiscano le eccezioni quando si usa setItem().

+ +

Esempi

+ +

Le seguenti funzioni creano tre oggetti all'interno del local storage:

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}
+ +
+

Nota: Se vuoi un esempio veritiero, dai un'occhiata alla pagina Web Storage Demo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}{{Spec2('Web Storage')}}
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Tutti i browser hanno diversi livelli di gestione sia del localStorage che del sessionStorage. Qui trovi ulteriori dettagli.

+ +
+

Nota: da iOS 5.1, Safari Mobile memorizza i dati del localStorage nella cartella delle cache, la quale, ogni tanto, viene cancellata (ricorda che questo spazio è solitamente piccolo).

+
+ +

Altre informazioni

+ +

Come usare le Web Storage API

diff --git a/files/it/web/api/urlutils/index.html b/files/it/web/api/urlutils/index.html new file mode 100644 index 0000000000..05cc01aa9b --- /dev/null +++ b/files/it/web/api/urlutils/index.html @@ -0,0 +1,205 @@ +--- +title: URLUtils +slug: Web/API/URLUtils +translation_of: Web/API/HTMLHyperlinkElementUtils +--- +

{{ApiRef("URL API")}}{{SeeCompatTable}}

+ +

The URLUtils interface defines utility methods to work with URLs.

+ +

There are no objects of this type, but several objects implement it, such as {{domxref("Location")}}, {{domxref("URL")}}, {{domxref("HTMLAnchorElement")}}, and {{domxref("HTMLAreaElement")}}.

+ +

Properties

+ +

This interface doesn't inherit any property.

+ +
+
{{domxref("URLUtils.href")}}
+
Is a {{domxref("DOMString")}} containing the whole URL.
+
{{domxref("URLUtils.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("URLUtils.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, and then, if the port of the URL is not empty (which can happen because it was not specified or because it was specified to be the default port of the URL's scheme), a ':', and the port of the URL.
+
{{domxref("URLUtils.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("URLUtils.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("URLUtils.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("URLUtils.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters of the URL.
+
{{domxref("URLUtils.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("URLUtils.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("URLUtils.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("URLUtils.origin")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.
+
{{domxref("URLUtils.searchParams")}}
+
Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.
+
+ +

Methods

+ +

This interface doesn't inherit any method.

+ +
+
{{domxref("URLUtils.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.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('URL', '#urlutils', 'URLUtils')}}{{Spec2('URL')}}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}} [1]{{CompatGeckoDesktop("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatGeckoDesktop("29")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin on Windows.location{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}} [1]{{CompatNo}} [1]{{CompatGeckoMobile("22")}} [1]{{CompatNo}} [1]{{CompatNo}} [1]{{CompatNo}} [1]
searchParams{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
origin {{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin on Windows.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Though not grouped in a single abstract interface, these methods are directly available on the interfaces that implement it, if this interface is supported.

+ +

See also

+ + + +

+
+
+ +
 
+
diff --git a/files/it/web/api/webgl_api/index.html b/files/it/web/api/webgl_api/index.html new file mode 100644 index 0000000000..c085be1e41 --- /dev/null +++ b/files/it/web/api/webgl_api/index.html @@ -0,0 +1,254 @@ +--- +title: 'WebGL: Grafica 2D e 3D per il web' +slug: Web/API/WebGL_API +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +
+

WebGL (Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 {{HTMLElement("canvas")}} elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.

+
+ +

Support for WebGL is present in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, and Microsoft Edge build 10240+; however, the user's device must also have hardware that supports these features.

+ +

The {{anch("WebGL 2")}} API introduces support for much of the OpenGL ES 3.0 feature set; it's provided through the {{domxref("WebGL2RenderingContext")}} interface.

+ +

The {{HTMLElement("canvas")}} element is also used by the Canvas API to do 2D graphics on web pages.

+ +

Reference

+ +

Standard interfaces

+ +
+ +
+ +

Extensions

+ +
+ +
+ +

Events

+ + + +

Constants and types

+ + + +

WebGL 2

+ +

WebGL 2 is a major update to WebGL which is provided through the {{domxref("WebGL2RenderingContext")}} interface. It is based on OpenGL ES 3.0 and new features include:

+ + + +

See also the blog post "WebGL 2 lands in Firefox" and webglsamples.org/WebGL2Samples for a few demos.

+ +

Guides and tutorials

+ +

Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.

+ +

Guides

+ +
+
Data in WebGL
+
A guide to variables, buffers, and other types of data used when writing WebGL code.
+
WebGL best practices
+
Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.
+
Using extensions
+
A guide to using WebGL extensions.
+
+ +

Tutorials

+ +
+
WebGL tutorial
+
A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.
+
+ +

Examples

+ +
+
A basic 2D WebGL animation example
+
This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.
+
WebGL by example
+
A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.
+
+ +

Advanced tutorials

+ +
+
WebGL model view projection
+
A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.
+
Matrix math for the web
+
A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.
+
+ +

Resources

+ + + +

Libraries

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}}
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}}
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Builds on top of WebGL 1. Based on OpenGL ES 3.0.
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Initial definition. Based on OpenGL ES 2.0
+ +

Browser compatibility

+ +

WebGL 1

+ +
+ + +

{{Compat("api.WebGLRenderingContext", 0)}}

+ +

WebGL 2

+ + + +

{{Compat("api.WebGL2RenderingContext", 0)}}

+
+ +

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

+ +

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
+
A Boolean property that, when true, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is false by default.
+
webgl.disable_extensions
+
A Boolean property that, when true, disables all WebGL extensions. This is false by default.
+
+ +

See also

+ + diff --git a/files/it/web/api/websocket/index.html b/files/it/web/api/websocket/index.html new file mode 100644 index 0000000000..af8738a82a --- /dev/null +++ b/files/it/web/api/websocket/index.html @@ -0,0 +1,148 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +tags: + - API + - NeedsContent + - NeedsTranslation + - TopicStub + - WebSocket + - WebSockets +translation_of: Web/API/WebSocket +--- +
{{APIRef("Web Sockets API")}}
+ +

The WebSocket object provides the API for creating and managing a WebSocket connection to a server, as well as for sending and receiving data on the connection.

+ +

To construct a WebSocket, use the WebSocket() constructor.

+ +

Constructor

+ +
+
{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}
+
Returns a newly created WebSocket object.
+
+ +

Constants

+ + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValue
WebSocket.CONNECTING0
WebSocket.OPEN1
WebSocket.CLOSING2
WebSocket.CLOSED3
+ +

Properties

+ +
+
{{domxref("WebSocket.binaryType")}}
+
The binary data type used by the connection.
+
{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}
+
The number of bytes of queued data.
+
{{domxref("WebSocket.extensions")}} {{readonlyinline}}
+
The extensions selected by the server.
+
{{domxref("WebSocket.onclose")}}
+
An event listener to be called when the connection is closed.
+
{{domxref("WebSocket.onerror")}}
+
An event listener to be called when an error occurs.
+
{{domxref("WebSocket.onmessage")}}
+
An event listener to be called when a message is received from the server.
+
{{domxref("WebSocket.onopen")}}
+
An event listener to be called when the connection is opened.
+
{{domxref("WebSocket.protocol")}} {{readonlyinline}}
+
The sub-protocol selected by the server.
+
{{domxref("WebSocket.readyState")}} {{readonlyinline}}
+
The current state of the connection.
+
{{domxref("WebSocket.url")}} {{readonlyinline}}
+
The absolute URL of the WebSocket.
+
+ +

Methods

+ +
+
{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}
+
Closes the connection.
+
{{domxref("WebSocket.send", "WebSocket.send(data)")}}
+
Enqueues data to be transmitted.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+ +
+
close
+
Fired when a connection with a WebSocket is closed.
+ Also available via the onclose property
+
error
+
Fired when a connection with a WebSockethas been closed because of an error, such as when some data couldn't be sent.
+ Also available via the onerror property.
+
message
+
Fired when data is received through a WebSocket.
+ Also available via the onmessage property.
+
open
+
Fired when a connection with a WebSocketis opened.
+ Also available via the onopen property.
+
+ +

Examples

+ +
// Create WebSocket connection.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Connection opened
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Listen for messages
+socket.addEventListener('message', function (event) {
+    console.log('Message from server ', event.data);
+});
+ +

Specifications

+ + + + + + + + + + + + +
SpecificationStatus
{{SpecName("HTML WHATWG", "#the-websocket-interface", "WebSocket")}}{{Spec2("HTML WHATWG")}}
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/it/web/api/websocket/websocket/index.html b/files/it/web/api/websocket/websocket/index.html new file mode 100644 index 0000000000..8170b8aead --- /dev/null +++ b/files/it/web/api/websocket/websocket/index.html @@ -0,0 +1,48 @@ +--- +title: WebSocket() +slug: Web/API/WebSocket/WebSocket +translation_of: Web/API/WebSocket/WebSocket +--- +

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

+

Il costruttore WebSocket() restituisce un nuovo oggetto WebSocket {{domxref("WebSocket")}}.

+ +

Sintassi

+ +
var aWebSocket = new WebSocket(url [, protocols]);
+ +

Parametri

+ +
+
url
+
Corrisponde al URL al quale ci si vuole connetterse, questo dovrebbe essere l'URL a cui risponderà il server WebSocket.
+
protocols {{optional_inline}}
+
una singola stringa di protocollo o un array di stringhe di protocollo. Queste stringhe vengono utilizzate per indicare i sub-protocolli, in modo che un server possa implementare più sub-protocolli WebSocket (ad esempio, è possibile che un server sia in grado di gestire diversi tipi di interazioni a seconda del protocollo specificato). Se non si specifica una stringa di protocollo, si presume una stringa vuota.
+
+ +

Exceptions thrown

+ +
+
SECURITY_ERR
+
La porta a cui si sta tentando la connessione risulta bloccata.
+
+ +

Specifice

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-websocket', 'the WebSocket constructor')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibili

+ + diff --git a/files/it/web/api/window/alert/index.html b/files/it/web/api/window/alert/index.html new file mode 100644 index 0000000000..bfbb04052c --- /dev/null +++ b/files/it/web/api/window/alert/index.html @@ -0,0 +1,36 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +translation_of: Web/API/Window/alert +--- +

{{ APIRef }}

+ +

Mostra una finestra di avviso contenente il testo specificato.

+ +

Sintassi

+ +
window.alert(messaggio);
+
+ + + +

Esempio

+ +
window.alert("Ciao, mondo!");
+// il prefisso "window." è opzionale, quindi
+// alert("Ciao, mondo!"); ha lo stesso effetto
+
+ +

Note

+ +

La finestra di avviso dovrebbe essere utilizzata per i messaggi che non richiedono alcuna risposta da parte dell'utente, se non la conferma che tale messaggio è stato letto.

+ +

Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di permettere al resto dell'interfaccia del programma finchè la finestra non è chiusa. Non si dovrebbe abusare delle funzioni che creano questo tipo di finestre.

+ +

I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare u netidi di nsIPromptService, invece di alert.

+ +

Specifiche

+ +

HTML5

diff --git a/files/it/web/api/window/back/index.html b/files/it/web/api/window/back/index.html new file mode 100644 index 0000000000..7b24f97b28 --- /dev/null +++ b/files/it/web/api/window/back/index.html @@ -0,0 +1,27 @@ +--- +title: Window.back() +slug: Web/API/Window/back +translation_of: Web/API/Window/back +--- +
{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}
+ +

Sommario

+ +

Riporta la finestra corrente all'ultima pagina visitata, o alla pagina più indietro nella Cronologia del browser.

+ +

Sintassi

+ +
window.back()
+
+ +

Esempio

+ +
function vaiIndietro() {
+   if ( possoAndareIndietro )
+      window.back();
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/blur/index.html b/files/it/web/api/window/blur/index.html new file mode 100644 index 0000000000..de26372766 --- /dev/null +++ b/files/it/web/api/window/blur/index.html @@ -0,0 +1,26 @@ +--- +title: Window.blur() +slug: Web/API/Window/blur +translation_of: Web/API/Window/blur +--- +

{{APIRef}}

+ +

Deseleziona la finestra, come se l'utente avesse cliccato altrove.

+ +

Sintassi

+ +
window.blur()
+
+ +

Esempio

+ +
window.blur();
+
+ +

Note

+ +

Non ha effetto se la finestra non è selezionata. Si veda anche window.focus.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/close/index.html b/files/it/web/api/window/close/index.html new file mode 100644 index 0000000000..de07d87f7b --- /dev/null +++ b/files/it/web/api/window/close/index.html @@ -0,0 +1,72 @@ +--- +title: Window.close() +slug: Web/API/Window/close +translation_of: Web/API/Window/close +--- +

{{APIRef}}

+ +

Il metodo Window.close() chiude la finestra corrente, oppure quella sulla quale è invocato.

+ +

Questo metodo può essere invocato solo su finestre che sono state aperte da uno script  utilizzando il metodo {{domxref("window.open()")}}. Se la finestra non è stata aperta mediante script, nella Console JavaScript apparirà il seguente errore: Scripts may not close windows that were not opened by script.

+ +

Sintassi

+ +
window.close();
+ +

Esempi

+ +

Chiudere una finestra aperta mediante window.open()

+ +

Questo esempio mostra come chiudere una finestra aperta da uno script mediante l'invocazione di {{domxref("window.open()")}}.

+ +
<script>
+//Variabile globale in cui si memorizza un riferimento alla finestra aperta
+var openedWindow;
+
+function openWindow()
+{
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow()
+{
+  openedWindow.close();
+}
+</script>
+
+ +

Chiudere la finestra corrente

+ +

Quando si invoca direttamente il metodo close() sull'oggetto window, piuttosto che invocare close() su una istanza di window, il browser chiuderà la finestra in primo piano, indipendentemente dal fatto che uno script abbia creato quella finestra oppure no.  (Firefox 35.0.1: gli script non possono chiudere una finestra che non hanno aperto)

+ +
<script>
+function closeCurrentWindow()
+{
+  window.close();
+}
+</script>
+
+ +

Specifica

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}{{Spec2('HTML WHATWG')}} 
+ + +

Browser compatibility

+ + + +

{{Compat("api.Window.close")}}

diff --git a/files/it/web/api/window/closed/index.html b/files/it/web/api/window/closed/index.html new file mode 100644 index 0000000000..66152b63e7 --- /dev/null +++ b/files/it/web/api/window/closed/index.html @@ -0,0 +1,66 @@ +--- +title: Window.closed +slug: Web/API/Window/closed +translation_of: Web/API/Window/closed +--- +
{{APIRef}}
+ +

Questa proprietà indica se la finestra è chiusa.

+ +

Sintassi

+ +
var isClosed = window.closed;
+
+ +

Questa proprietà è di sola lettura.

+ +

Valori restituiti

+ +
+
isClosed
+
un booleano; valori possibili:
+
+ + + +

Esempi

+ +

Cambiare l'URL di una finestra da una popup

+ +

L'esempio seguente mostra come una finestra popup possa contenere codice JavaScript che modifichi l'URL della finestra che l'ha generata. Prima di tentare di modificare l'URL, controlleremo che la finestra corrente (la popup, appunto) abbia una "opener" utilizzando la proprietà window.opener e che l'opener non sia chiusa:

+ +
// controllo che l'opener esista e non sia chiusa
+if (window.opener && !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}
+
+ +

Si noti che le popup possono accedere solo a se stesse e alle finestre che le hanno generate.

+ +

Ricaricare una popup

+ +

In questo esempio la funzione aggiornaPopup() chiama il metodo reload() dell'oggetto location della popup per aggiornare il suo contenuto. Se la popup non è stata ancora aperta o l'utente l'ha chiusa, viene aperta una nuova finestra.

+ +
var finestraPopup = null;
+
+function aggiornaPopup() {
+  if (popupWindow && !popupWindow.closed) {
+    // finestraPopup è aperta, la aggiorno
+    finestraPopup.location.reload(true);
+  } else {
+    // apro una nuova popup
+    finestraPopup = window.open("popup.html","miaPopup");
+  }
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

Altre risorse

+ +

MSDN window.closed

diff --git a/files/it/web/api/window/confirm/index.html b/files/it/web/api/window/confirm/index.html new file mode 100644 index 0000000000..215e3091e5 --- /dev/null +++ b/files/it/web/api/window/confirm/index.html @@ -0,0 +1,47 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +tags: + - Window + - confirm +translation_of: Web/API/Window/confirm +--- +
{{ApiRef("Window")}}
+ +

Mostra una finestra di dialogo con un messaggio (opzionale) e due bottoni: OK e Annulla.

+ +

Sintassi

+ +
input = window.confirm(messaggio);
+
+ +

Parametri

+ +

messaggio
+      Una stringa che viene mostrata nella finestra di dialogo.

+ +

Valore ritornato

+ +

input
+      Un valore booleano che indica se è stato selezionato OK (true) o Annulla (false).

+ +

Esempio

+ +
if (window.confirm("vuoi vedere il mio vestito nuovo?")) {
+    window.open("vestito.html", "Il mio vestito nuovo", "");
+}
+
+ +

Note

+ +

Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di accedere al resto dell'interfaccia del programma finchè la finestra non viene chiusa. Per questo motivo, è meglio non abusare delle funzioni che creano questo tipo di finestre.

+ +

I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare i metodi di nsIPromptService, invece di alert.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

+ +

Altri metodi

+ +

alert, prompt

diff --git a/files/it/web/api/window/crypto/index.html b/files/it/web/api/window/crypto/index.html new file mode 100644 index 0000000000..65107e937c --- /dev/null +++ b/files/it/web/api/window/crypto/index.html @@ -0,0 +1,90 @@ +--- +title: Window.crypto +slug: Web/API/Window/crypto +translation_of: Web/API/Window/crypto +--- +
{{APIRef}}
+ +

La proprietà di sola lettura {{domxref("Window.crypto")}} ritorna l'oggetto {{domxref("Crypto")}} associato all'oggetto globale. Questo oggetto permette alle pagine web di accedere al alcuni servizi si crittografia.

+ +

Sintassi

+ +
var cryptoObj = window.crypto || window.msCrypto; // per IE 11
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}{{Spec2("Web Crypto API")}}Initial definition
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basic support44 {{CompatVersionUnknown}}{{CompatVersionUnknown}}6 {{property_prefix("ms")}}2019{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChrome for AndroidFirefox MobileFirefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Guarda anche

+ + diff --git a/files/it/web/api/window/defaultstatus/index.html b/files/it/web/api/window/defaultstatus/index.html new file mode 100644 index 0000000000..5212fabcd7 --- /dev/null +++ b/files/it/web/api/window/defaultstatus/index.html @@ -0,0 +1,38 @@ +--- +title: Window.defaultStatus +slug: Web/API/Window/defaultstatus +translation_of: Web/API/Window/defaultStatus +--- +
{{ApiRef()}}
+ +

Legge o imposta il testo predefinito della barra di stato della finestra a cui si riferisce l'oggetto window.

+ +

Sintassi

+ +
messaggio = window.defaultStatus
+window.defaultStatus =
+messaggio
+
+ +

Parameters

+ + + +

Esempio

+ +
<html>
+ <body onload="window.defaultStatus='ciao!';"/>
+  <button onclick="window.confirm('Sei sicuro di volertene andare?');">chiudi</button>
+ </body>
+</htm>
+
+ +

Note

+ +

Per impostare lo stato della finestra dopo che questa si è aperta, si può utilizzare window.status.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/devicemotion_event/index.html b/files/it/web/api/window/devicemotion_event/index.html new file mode 100644 index 0000000000..bbc0b22717 --- /dev/null +++ b/files/it/web/api/window/devicemotion_event/index.html @@ -0,0 +1,97 @@ +--- +title: devicemotion +slug: Web/API/Window/devicemotion_event +translation_of: Web/API/Window/devicemotion_event +--- +

L'evento devicemotion viene attivato a intervalli regolari e indica la quantità di forza fisica dell'accellezazione che il dispositivo riceve in quel dato momento. Fornisce inoltre informazioni circa la velocità di rotazione, se disponibili.

+ +

Informazioni Generali

+ +
+
Specifica
+
DeviceOrientation Event
+
Interfaccia
+
DeviceMotionEvent
+
Bubbles
+
No
+
Cancellabile
+
No
+
Bersaglio
+
DefaultView (window)
+
Azione predefinita
+
nessuna
+
+ +

Propietà

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not?
acceleration {{readonlyInline}}{{domxref("DeviceAcceleration")}}The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.
accelerationIncludingGravity {{readonlyInline}}{{domxref("DeviceAcceleration")}}The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.
interval {{readonlyInline}}doubleThe interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.
rotationRate {{readonlyInline}}{{domxref("DeviceRotationRate")}}The rates of rotation of the device about all three axes.
+ +

Esempio

+ +
function handleMotionEvent(event) {
+
+    var x = event.accelerationIncludingGravity.x;
+    var y = event.accelerationIncludingGravity.y;
+    var z = event.accelerationIncludingGravity.z;
+
+    // Fai qualcosa di maestoso.
+}
+
+window.addEventListener("devicemotion", handleMotionEvent, true);
+
+ +

Eventi correlati

+ + diff --git a/files/it/web/api/window/document/index.html b/files/it/web/api/window/document/index.html new file mode 100644 index 0000000000..5d98a10385 --- /dev/null +++ b/files/it/web/api/window/document/index.html @@ -0,0 +1,39 @@ +--- +title: Window.document +slug: Web/API/Window/document +translation_of: Web/API/Window/document +--- +
{{APIRef}}
+ +

Restituisce un riferimento al documento contenuto nella finestra.

+ +

Sintassi

+ +
doc = window.document
+
+ +

Parametri

+ + + +

Esempio

+ +
<html>
+<head>
+   <title>Ciao, mondo!</title>
+</head>
+<body>
+
+<script type="text/javascript">
+   var doc = window.document;
+   alert( doc.title);    // produce: Ciao, mondo!
+</script>
+
+</body>
+</html>
+ +

Specifiche

+ +

HTML

diff --git a/files/it/web/api/window/focus/index.html b/files/it/web/api/window/focus/index.html new file mode 100644 index 0000000000..696383a27c --- /dev/null +++ b/files/it/web/api/window/focus/index.html @@ -0,0 +1,26 @@ +--- +title: Window.focus() +slug: Web/API/Window/focus +translation_of: Web/API/Window/focus +--- +
{{APIRef}}
+ +

Seleziona la finestra, come se l'utente avesse cliccato su di essa.

+ +

Sintassi

+ +
window.focus()
+
+ +

Esempio

+ +
if (click) { window.focus(); }
+
+ +

Note

+ +

Non ha effetto se la finestra è già selezionata. Si veda anche window.blur.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/forward/index.html b/files/it/web/api/window/forward/index.html new file mode 100644 index 0000000000..e07fcaa219 --- /dev/null +++ b/files/it/web/api/window/forward/index.html @@ -0,0 +1,22 @@ +--- +title: Window.forward() +slug: Web/API/Window/forward +translation_of: Web/API/Window/forward +--- +
{{APIRef}}
+ +

Visualizza la pagina successiva che si trova nella Cronologia, come se l'utente avesse cliccato sul bottone Avanti.

+ +

Sintassi

+ +
window.forward()
+
+ +

Esempio

+ +
function vaiAvanti() { if (possoAndareAvanti) window.forward(); }
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/getselection/index.html b/files/it/web/api/window/getselection/index.html new file mode 100644 index 0000000000..c4f561801e --- /dev/null +++ b/files/it/web/api/window/getselection/index.html @@ -0,0 +1,46 @@ +--- +title: Window.getSelection() +slug: Web/API/Window/getSelection +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - Tutte_le_categorie +translation_of: Web/API/Window/getSelection +--- +

{{ ApiRef() }}

+ +

Restituisce un oggetto selection che rappresenta il testo selezionato dall'utente.

+ +

Sintassi

+ +
selection = window.getSelection() ;
+
+ + + +

Esempio

+ +
function esempio() {
+   var selezione = window.getSelection();
+   window.alert(selezione);
+   var range = selezione.getRangeAt(0);
+   // fai qualcosa con il range
+}
+
+ +

Note

+ +

In JavaScript, quando un oggetto selezione viene passato a una funzione che si aspetta una stringa (come window.alert o document.write), al suo posto viene passata una stringa, generalmente corrispondente al testo selezionato. Questo fa si che selection assomigli a una stringa, mentre invece è un normale oggetto dotato di metodi e proprietà. La stringa passata è infatti il risultato di toString().

+ +

Nell'esempio sopra, selezione è automaticamente "convertito" quando viene passato a window.alert. Tuttavia per utilizzare una proprietà o un metodo della classe String, come ad esempio length o substr, occorre chiamare esplicitamente il metodo toString.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuna specifica.

+ +

Vedi anche

+ +

Selection, Range

diff --git a/files/it/web/api/window/history/index.html b/files/it/web/api/window/history/index.html new file mode 100644 index 0000000000..5f087d8d0e --- /dev/null +++ b/files/it/web/api/window/history/index.html @@ -0,0 +1,37 @@ +--- +title: Window.history +slug: Web/API/Window/history +translation_of: Web/API/Window/history +--- +
{{APIRef}}
+ +

Restituisce un riferimento all'oggetto history, che fornisce un'interfaccia per manipolare la Cronologia del browser.

+ +

Sintassi

+ +
oggettoHistory = window.history
+
+ +

Parametri

+ + + +

Esempio

+ +
h = window.history;
+if ( h.length ) { // se c'è una cronologia
+    h.back();     // vai indietro nella cronologia
+}
+
+ +

Note

+ +

L'oggetto history fornisce la seguente interfaccia: current, length, next, previous, back(), forward(), go().

+ +

E' possibile accedere a questa interfaccia dall'oggetto window chiamando, per esempio, window.history.back().

+ +

Specifiche

+ +

HTML5

diff --git a/files/it/web/api/window/home/index.html b/files/it/web/api/window/home/index.html new file mode 100644 index 0000000000..ab9086cc2f --- /dev/null +++ b/files/it/web/api/window/home/index.html @@ -0,0 +1,24 @@ +--- +title: Window.home() +slug: Web/API/Window/home +translation_of: Web/API/Window/home +--- +
{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}
+ +

Rimanda il browser alla home page impostata.

+ +

Sintassi

+ +
window.home()
+
+ +

Esempio

+ +
function vai_a_casa() {
+  window.home();
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuna specifica.

diff --git a/files/it/web/api/window/index.html b/files/it/web/api/window/index.html new file mode 100644 index 0000000000..af317f6eab --- /dev/null +++ b/files/it/web/api/window/index.html @@ -0,0 +1,686 @@ +--- +title: Window +slug: Web/API/Window +tags: + - DOM + - Gecko + - Reference_del_DOM_di_Gecko + - SezioneIncompleta + - TraduzioneIncompleta + - Tutte_le_categorie +translation_of: Web/API/Window +--- +

{{ ApiRef() }}

+ +

Introduzione

+ +

Questo capitolo contiene una breve reference per tutti i metodi, proprietà, ed eventi disponibili attraverso l'oggetto window del DOM. L'oggetto window implementa l'interfacciawindow , la quale eredita dall'interfaccia AbstractView.

+ +

L'oggetto window rappresenta una finestra, contenente un documento DOM. La proprietà document punta ad un DOM document ( documento DOM ) caricato in quella pagina

+ +

Ogni tab che viene aperta contiene il suo personale oggetto window; ciò significa che l'oggetto window non è condiviso fra le varie tab aperte nella stessa finestra. Solo due metodi vengono condivisi dai vari oggetti window presenti in una stessa finestra, e sono i metodi window.resizeTo e window.resizeBy.

+ +

Proprietà

+ +
+
window.Components
+
The entry point to many XPCOM features. Some properties, e.g. classes, are only available to sufficiently privileged code.
+
+ +
+
window.content and window._content
+
Returns a reference to the content element in the current window. The variant with underscore is deprecated.
+
+ +
+
window.closed
+
This property indicates whether the current window is closed or not.
+
+ +
+
window.controllers
+
Returns the XUL controller objects for the current chrome window.
+
+ +
+
window.crypto
+
Returns the browser crypto object.
+
+ +
+
window.defaultStatus
+
Gets/sets the status bar text for the given window.
+
+ +
+
window.directories
+
Returns a reference to the directories toolbar in the current chrome.
+
+ +
+
window.document
+
Returns a reference to the document that the window contains.
+
+ +
+
window.frameElement
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
+ +
+
window.frames
+
Returns an array of the subframes in the current window.
+
+ +
+
window.history
+
Returns a reference to the history object.
+
+ +
+
window.innerHeight
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
+ +
+
window.innerWidth
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
+ +
+
window.length
+
Returns the number of frames in the window.
+
+ +
+
window.location
+
Gets/sets the location, or current URL, of the window object.
+
+ +
+
window.locationbar
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
+ +
+
window.menubar
+
Returns the menubar object, whose visibility can be toggled in the window.
+
+ +
+
window.name
+
Gets/sets the name of the window.
+
+ +
+
window.navigator
+
Returns a reference to the navigator object.
+
+ +
+
window.navigator.appCodeName
+
Returns the internal "code" name of the current browser.
+
+ +
+
window.navigator.appName
+
Returns the official name of the browser.
+
+ +
+
window.navigator.appVersion
+
Returns the version of the browser as a string.
+
+ +
+
window.navigator.cookieEnabled
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
+ +
+
window.navigator.javaEnabled()
+
Indicates whether Java is enabled in the host browser.
+
+ +
+
window.navigator.language
+
Returns a string representing the language version of the browser.
+
+ +
+
window.navigator.mimeTypes
+
Returns a list of the MIME types supported by the browser.
+
+ +
+
window.navigator.oscpu
+
Returns a string that represents the current operating system.
+
+ +
+
window.navigator.platform
+
Returns a string representing the platform of the browser.
+
+ +
+
window.navigator.plugins
+
Returns an array of the plugins installed in the browser.
+
+ +
+
window.navigator.product
+
Returns the product name of the browser (e.g. "Gecko").
+
+ +
+
window.navigator.productSub
+
Returns the product version number (e.g. "5.0").
+
+ +
+
window.navigator.userAgent
+
Returns the user agent string for the current browser.
+
+ +
+
window.navigator.vendor
+
Returns the vendor name of the current browser (e.g. "Netscape6").
+
+ +
+
window.navigator.vendorSub
+
Returns the vendor version number (e.g. "6.1").
+
+ +
+
window.opener
+
Returns a reference to the window that opened this current window.
+
+ +
+
window.outerHeight
+
Gets the height of the outside of the browser window.
+
+ +
+
window.outerWidth
+
Gets the width of the outside of the browser window.
+
+ +
+
window.pageXOffset
+
Gets the amount of content that has been hidden by scrolling to the right.
+
+ +
+
window.pageYOffset
+
Gets the amount of content that has been hidden by scrolling down.
+
+ +
+
window.parent
+
Returns a reference to the parent of the current window or subframe.
+
+ +
+
window.personalbar
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
+ +
+
window.pkcs11
+
Returns the pkcs11 object, which can be used to install drivers and other software associated with the pkcs11 protocol.
+
+ +
+
window.prompter
+
Returns a reference to the prompt window, if any, currently displayed.
+
+ +
+
window.screen
+
Returns a reference to the screen object associated with the window.
+
+ +

The following is duplicated on DOM:window.screen

+ +
+
window.screen.availTop
+
Specifies the y-coordinate of the first pixel that is not allocated to permanent or semipermanent user interface features.
+
+ +
+
window.screen.availLeft
+
Returns the first available pixel available from the left side of the screen.
+
+ +
+
window.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.
+
+ +
+
window.screen.availWidth
+
Returns the amount of horizontal space in pixels available to the window.
+
+ +
+
window.screen.colorDepth
+
Returns the color depth of the screen.
+
+ +
+
window.screen.height
+
Returns the height of the screen in pixels.
+
+ +
+
window.screen.left
+
Gets/sets the current distance in pixels from the left side of the screen.
+
+ +
+
window.screen.pixelDepth
+
Gets the bit depth of the screen.
+
+ +
+
window.screen.top
+
Gets/sets the distance from the top of the screen.
+
+ +
+
window.screen.width
+
Returns the width of the screen.
+
+ +

end of duplicated content

+ +
+
window.screenX
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
+ +
+
window.screenY
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
+ +
+
window.scrollbars
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
+ +
+
window.scrollMaxX
+
The maximum offset that the window can be scrolled to horizontally.
+
(i.e., the document width minus the viewport width)
+
+ +
+
window.scrollMaxY
+
The maximum offset that the window can be scrolled to vertically.
+
(i.e., the document height minus the viewport height)
+
+ +
+
window.scrollX
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
+ +
+
window.scrollY
+
Returns the number of pixels that the document has already been scrolled vertically.
+
+ +
+
window.self
+
Returns an object reference to the window object itself.
+
+ +
+
window.sidebar
+
Returns a reference to the window object of the sidebar.
+
+ +
+
window.status
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
+ +
+
window.statusbar
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
+ +
+
window.toolbar
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
+ +
+
window.top
+
Returns a reference to the topmost window in the window hierarchy.
+
+ +
+
window.window
+
Returns a reference to the current window.
+
+ +

Metodi

+ +
+
window.alert
+
Displays an alert dialog.
+
+ +

base64 func https://bugzilla.mozilla.org/show_bug.cgi?id=287112 (see last comments) https://bugzilla.mozilla.org/show_bug.cgi?id=123003 http://lxr.mozilla.org/seamonkey/sou...indow.cpp#4946

+ +
+
window.atob
+
Decodes a string of data which has been encoded using base-64 encoding.
+
+ +
+
window.back
+
Moves back one in the window history.
+
+ +
+
window.blur
+
Sets focus away from the window.
+
+ +
+
window.btoa
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +
+
window.captureEvents {{ Obsolete_inline() }}
+
Registers the window to capture all events of the specified type.
+
+ +
+
window.clearInterval
+
Cancels the repeated execution set using setInterval.
+
+ +
+
window.clearTimeout
+
Clears a delay that's been set for a specific function.
+
+ +
+
window.close
+
Closes the current window.
+
+ +
+
window.confirm
+
Displays a dialog with a message that the user needs to respond to.
+
+ +
+
window.dump
+
Writes a message to the console.
+
+ +
+
window.escape
+
Encodes a string.
+
+ +
+
window.focus
+
Sets focus on the current window.
+
+ +
+
window.forward
+
Moves the window one document forward in the history.
+
+ +
+
window.getAttention
+
Flashes the application icon.
+
+ +
+
window.getComputedStyle
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
+ +
+
window.getSelection
+
Returns the selection object representing the selected item(s).
+
+ +
+
window.home
+
Returns the browser to the home page.
+
+ +
+
window.moveBy
+
Moves the current window by a specified amount.
+
+ +
+
window.moveTo
+
Moves the window to the specified coordinates.
+
+ +
+
window.open
+
Opens a new window.
+
+ +
+
window.openDialog
+
Opens a new dialog window.
+
+ +
+
window.print
+
Prints the current document.
+
+ +
+
window.prompt
+
Returns the text entered by the user in a prompt dialog.
+
+ +
+
window.releaseEvents {{ Obsolete_inline() }}
+
Releases the window from trapping events of a specific type.
+
+ +
+
window.resizeBy
+
Resizes the current window by a certain amount.
+
+ +
+
window.resizeTo
+
Dynamically resizes window.
+
+ +
+
window.scroll
+
Scrolls the window to a particular place in the document.
+
+ +
+
window.scrollBy
+
Scrolls the document in the window by the given amount.
+
+ +
+
window.scrollByLines
+
Scrolls the document by the given number of lines.
+
+ +
+
window.scrollByPages
+
Scrolls the current document by the specified number of pages.
+
+ +
+
window.scrollTo
+
Scrolls to a particular set of coordinates in the document.
+
+ +
+
window.setInterval
+
Execute a function each X milliseconds.
+
+ +
+
window.setTimeout
+
Sets a delay for executing a function.
+
+ +
+
window.sizeToContent
+
Sizes the window according to its content.
+
+ +
+
window.stop
+
This method stops window loading.
+
+ +
+
window.unescape
+
Unencodes a value that has been encoded in hexadecimal (e.g. a cookie).
+
+ +
+
window.updateCommands
+
+ +

Gestori di Eventi

+ +
+
window.onabort
+
An event handler property for abort events on the window.
+
+ +
+
window.onblur
+
An event handler property for blur events on the window.
+
+ +
+
window.onchange
+
An event handler property for change events on the window.
+
+ +
+
window.onclick
+
An event handler property for click events on the window.
+
+ +
+
window.onclose
+
An event handler property for handling the window close event.
+
+ +
+
window.ondragdrop
+
An event handler property for drag and drop events on the window.
+
+ +
+
window.onerror
+
An event handler property for errors raised on the window.
+
+ +
+
window.onfocus
+
An event handler property for focus events on the window.
+
+ +
+
window.onkeydown
+
An event handler property for keydown events on the window.
+
+ +
+
window.onkeypress
+
An event handler property for keypress events on the window.
+
+ +
+
window.onkeyup
+
An event handler property for keyup events on the window.
+
+ +
+
window.onload
+
An event handler property for window loading.
+
+ +
+
window.onmousedown
+
An event handler property for mousedown events on the window.
+
+ +
+
window.onmousemove
+
An event handler property for mousemove events on the window.
+
+ +
+
window.onmouseout
+
An event handler property for mouseout events on the window.
+
+ +
+
window.onmouseover
+
An event handler property for mouseover events on the window.
+
+ +
+
window.onmouseup
+
An event handler property for mouseup events on the window.
+
+ +
+
window.onpaint
+
An event handler property for paint events on the window.
+
+ +
+
window.onreset
+
An event handler property for reset events on the window.
+
+ +
+
window.onresize
+
An event handler property for window resizing.
+
+ +
+
window.onscroll
+
An event handler property for window scrolling.
+
+ +
+
window.onselect
+
An event handler property for window selection.
+
+ +
+
window.onsubmit
+
An event handler property for submits on window forms.
+
+ +
+
window.onunload
+
An event handler property for unload events on the window.
+
+ +

{{ languages( { "fr": "fr/DOM/window", "pl": "pl/DOM/window", "en": "en/DOM/window" } ) }}

diff --git a/files/it/web/api/window/localstorage/index.html b/files/it/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..f17f5cece8 --- /dev/null +++ b/files/it/web/api/window/localstorage/index.html @@ -0,0 +1,138 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

La proprietà read-only localStorage ti permette di accedere all'oggetto {{domxref("Storage")}} per l'origine del {{domxref("Document")}}; i dati persistono anche tra diverse sessioni browser. localStorage è simile a sessionStorage, ma si differenzia dal fatto che i dati salvati con localStoragenon hanno  expiration time, i dati salvati in sessionStorage vengono cancellati al termine della sessione della pagina — cioé, quando la pagina viene chiusa.

+ +

Si dovrebbe notare che i dati salvati in entrambi localStorage o sessionStorage sono specifici rispetto al protocollo della pagina.

+ +

Sintassi

+ +
myStorage = window.localStorage;
+ +

Valore

+ +

L'oggetto {{domxref("Storage")}} che puo essere usato per accedere alla memoria del localStorage.

+ +

Eccezioni

+ +
+
SecurityError
+
La richiesta viola la policy decision, o l'origine non è un valido scheme/host/port tuple (può succedere, per esempio, se l'origine usa lo schemafile: o data: ). Per esempio, l'utente può aver il browser configurato a negare i permessi di dati persistenti.
+
+ +

Esempi

+ +

Il seguente snippet accede all'oggetto local {{domxref("Storage")}} del dominio e aggiunge i dati usando {{domxref("Storage.setItem()")}}.

+ +
localStorage.setItem('myCat', 'Tom');
+ +

La sintassi per leggere localStorage è la seguente:

+ +
var cat = localStorage.getItem("myCat");
+ +

La sintassi per rimuovere dati da localStorage è la seguente:

+ +
localStorage.removeItem("myCat");
+ +
+

Note: Riferimenti di esempi completi all'articolo: Usare lo Web Storage API.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatusCommento
{{SpecName('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatVersionUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Tutti i browsers hanno livelli di capacità vari per entrambilocalStorage e {{domxref("sessionStorage")}}. Qui una dettagliata lista di tutte le capacità di vari browser.

+ +
+

Note: A partire da iOS 5.1, Safari Mobile salva i dati di localStorage nella cartella cache, che è soggetta a rimozioni occasionali. Safari Mobile in Private mode previene la scrittura al localStorage.

+
+ +

Consulta anche

+ + diff --git a/files/it/web/api/window/locationbar/index.html b/files/it/web/api/window/locationbar/index.html new file mode 100644 index 0000000000..583c6def10 --- /dev/null +++ b/files/it/web/api/window/locationbar/index.html @@ -0,0 +1,43 @@ +--- +title: Window.locationbar +slug: Web/API/Window/locationbar +translation_of: Web/API/Window/locationbar +--- +
{{APIRef}}
+ +

Restituisce l'oggetto locationbar, che può essere reso invisibile.

+ +

Sintassi

+ +
oggetto = window.locationbar
+
+ +

Esempio

+ +

Il seguente esempio completo mostra un possibile modo per utilizzare la proprietà visible dei vari oggetti "bar" (quelli che rappresentano una qualsiasi barra); mostra anche come cambiare i privilegi necessari per modificare tale proprietà.

+ +

The following complete HTML example shows way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.

+ +
<html>
+<head>
+  <title>Esperimenti sul DOM</title>
+  <script>
+    // modifico lo stato della barra in questa finestra
+    netscape.security.PrivilegeManager.
+        enablePrivilege("UniversalBrowserWrite");
+    window.statusbar.visible=!window.statusbar.visible;
+  </script>
+</head>
+<body>
+  <p>Esperimenti sul DOM</p>
+</body>
+</html>
+
+ +

Note

+ +

Quando si carica l'esempio sopra riportato, il browser mostra una finestra di avviso. Si veda anche: window.menubar, window.personalbar, window.scrollbars, window.statusbar, window.toolbar

+ +

Specifiche

+ +

HTML5

diff --git a/files/it/web/api/window/matchmedia/index.html b/files/it/web/api/window/matchmedia/index.html new file mode 100644 index 0000000000..a4dc984d9a --- /dev/null +++ b/files/it/web/api/window/matchmedia/index.html @@ -0,0 +1,91 @@ +--- +title: Window.matchMedia() +slug: Web/API/Window/matchMedia +translation_of: Web/API/Window/matchMedia +--- +

Sommario

+ +

Restituisce un nuovo oggetto {{domxref("MediaQueryList")}} che rappresenta i risultati dell'anaisi effettuta in base alla  stringa media query specificata.

+ +

Sintassi

+ +
mql = window.matchMedia(mediaQueryString)
+ +

dove QueryString è una stringa che rappresenta la ricerca media query per la quale restituire il nuovo oggetto {{domxref("MediaQueryList")}} .

+ +

Esempio

+ +
if (window.matchMedia("(min-width: 400px)").matches) {
+  /* the viewport is at least 400 pixels wide */
+} else {
+  /* the viewport is less than 400 pixels wide */
+}
+ +

Questo codice permette di gestire la pagina in modo diverso quando la finestra è molto piccola.

+ +

Vedere Using media queries from code per altri esempi.

+ +

Compatibilità browser

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatGeckoDesktop("6.0")}}1012.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatGeckoMobile("6.0")}}{{CompatNo}}12.15
+
+ +

Specifica

+ + + +

Vedere anche

+ + diff --git a/files/it/web/api/window/moveby/index.html b/files/it/web/api/window/moveby/index.html new file mode 100644 index 0000000000..41f373f9eb --- /dev/null +++ b/files/it/web/api/window/moveby/index.html @@ -0,0 +1,36 @@ +--- +title: Window.moveBy() +slug: Web/API/Window/moveBy +translation_of: Web/API/Window/moveBy +--- +
{{APIRef}}
+ +

Sposta la finestra di un certo numero di pixel.

+ +

Sintassi

+ +
window.moveBy(x,
+y)
+
+ +

Parametri

+ + + +

Esempio

+ +
 function in_alto_a_destra() {
+    moveBy(10, -10);
+ }
+
+ +

Note

+ +

E' possibile utilizzare numeri negativi come parametri. Questa funzione esegue uno spostamento della finestra relativamente alla sua posizione attuale, mentre window.moveTo la sposta in un punto assoluto.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/moveto/index.html b/files/it/web/api/window/moveto/index.html new file mode 100644 index 0000000000..5e9b2c271c --- /dev/null +++ b/files/it/web/api/window/moveto/index.html @@ -0,0 +1,37 @@ +--- +title: Window.moveTo() +slug: Web/API/Window/moveTo +translation_of: Web/API/Window/moveTo +--- +
{{APIRef}}
+ +

Sposta la finestra alle coordinate specificate.

+ +

Sintassi

+ +
window.moveTo(x,
+y)
+
+ +

Parametri

+ + + +

Esempio

+ +
 function origine() {
+    // sposta la finestra all'angolo in alto a sinistra
+    window.moveTo(0, 0)
+ }
+
+ +

Note

+ +

Le coordinate iniziali sono 0, 0 e rappresentano l'angolo in alto a sinistra dello schermo. Questa funzione sposta la finestra in un punto assoluto, mentre window.moveBy la sposta relativamente alla sua posizione attuale.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/name/index.html b/files/it/web/api/window/name/index.html new file mode 100644 index 0000000000..8127d67285 --- /dev/null +++ b/files/it/web/api/window/name/index.html @@ -0,0 +1,23 @@ +--- +title: Window.name +slug: Web/API/Window/name +translation_of: Web/API/Window/name +--- +

{{APIRef}}
+ Restituisce o imposta il nome della finestra.

+ +

Sintassi

+ +
stringa = window.name
+ window.name =
+stringa
+
+ +

Esempio

+ +
window.name = "vista1";
+
+ +

Note

+ +

Il nome della finestra viene utilizzato soprattutto per impostare i target dei link e dei form. In realtà una finestra non deve necessariamente avere un nome.

diff --git a/files/it/web/api/window/onuserproximity/index.html b/files/it/web/api/window/onuserproximity/index.html new file mode 100644 index 0000000000..41f760ee44 --- /dev/null +++ b/files/it/web/api/window/onuserproximity/index.html @@ -0,0 +1,45 @@ +--- +title: Window.onuserproximity +slug: Web/API/Window/onuserproximity +translation_of: Web/API/Window/onuserproximity +--- +

{{ ApiRef() }}

+ +

La proprietà Window.onuserproxymity rappresenta un {{domxref("EventHandler")}}, una funzione che viene richiamata quando l'evento {{event("userproximity")}} si verifica. Questi eventi sono del tipo {{domxref("UserProximityEvent")}} e si verificano quando il sensore di prossimità del dispositivo individua che un oggetto si sta avvicinando.

+ +

Sintassi

+ +
window.onuserproximity = eventHandler
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{ SpecName('Proximity Events', '#user-proximity', 'Proximity Events') }}{{ Spec2('Proximity Events') }}Specifica iniziale
+ +

Compatibilità browser

+ + + +

{{Compat("api.Window.onuserproximity")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/api/window/opener/index.html b/files/it/web/api/window/opener/index.html new file mode 100644 index 0000000000..368b0a2f74 --- /dev/null +++ b/files/it/web/api/window/opener/index.html @@ -0,0 +1,24 @@ +--- +title: Window.opener +slug: Web/API/Window/opener +translation_of: Web/API/Window/opener +--- +
{{APIRef}}
+ +

Restituisce un riferimento alla finestra che ha aperto la finestra corrente.

+ +

Sintassi

+ +
oggetto = window.opener
+
+ +

Esempio

+ +
 if window.opener != finestraPrincipale {
+     vaiInizio(window.opener);
+ }
+
+ +

Note

+ +

Quando una finestra viene aperta come popup da un'altra finestra, mantiene un riferimento a quest'ultima a cui si può accedere con window.opener. Se la finestra corrente non ha un "opener", questo metodo restituisce null.

diff --git a/files/it/web/api/window/orientationchange_event/index.html b/files/it/web/api/window/orientationchange_event/index.html new file mode 100644 index 0000000000..ba6e0dc550 --- /dev/null +++ b/files/it/web/api/window/orientationchange_event/index.html @@ -0,0 +1,66 @@ +--- +title: orientationchange +slug: Web/API/Window/orientationchange_event +translation_of: Web/API/Window/orientationchange_event +--- +

L'evento orientationchange si scatena quando viene modificato l'orientamento del dispositivo.

+ +

Informazioni generali

+ +
+
Specification
+
Compatibility Living Standard
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Screen
+
Default Action
+
None
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Example

+ +
// Note that "orientationchange" and screen.orientation are unprefixed in the following
+// code although this API is still vendor-prefixed browsers implementing it.
+window.addEventListener("orientationchange", function() {
+    alert("the orientation of the device is now " + screen.orientation.angle);
+});
+
diff --git a/files/it/web/api/window/print/index.html b/files/it/web/api/window/print/index.html new file mode 100644 index 0000000000..87f63a0b44 --- /dev/null +++ b/files/it/web/api/window/print/index.html @@ -0,0 +1,17 @@ +--- +title: Window.print() +slug: Web/API/Window/print +translation_of: Web/API/Window/print +--- +
{{APIRef}}
+ +

Apre una finestra di stampa per stampare il documento corrente.

+ +

Sintassi

+ +
window.print()
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/prompt/index.html b/files/it/web/api/window/prompt/index.html new file mode 100644 index 0000000000..a3336c95be --- /dev/null +++ b/files/it/web/api/window/prompt/index.html @@ -0,0 +1,51 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +
{{APIRef}}
+ +

Mostra una finestra di dialogo che chiede all'utente di inserire del testo.

+ +

Sintassi

+ +
input = window.prompt(
+testo,
+valore);
+
+ + + +

Esempio

+ +
var segno = prompt("Di che segno sei?");
+if (segno.toLowerCase() == "scorpione")
+   alert("Ma dai!.. anch'io!!!");
+
+ +

Quando l'utente clicca il bottone OK, viene restituito il testo che ha digitato. Se l'utente clicca su OK senza aver inserito del testo, viene restituita una stringa vuota. Se invece l'utente clicca su Cancella, la funzione restituisce null.

+ +

Note

+ +

Una finestra di dialogo contiene un campo di testo di una sola riga, un bottone OK e un bottone Cancella. La funzione restituisce il testo (eventualmente vuoto) inserito dall'utente nel campo di testo.

+ +

A prompt dialog contains a single-line textbox, a Cancel button, and an OK button, and returns the (possibly empty) text the user inputted into that textbox.

+ +

Le finestre di dialogo sono finestre modali, cioè impediscono all'utente di permettere al resto dell'interfaccia del programma finchè la finestra non è chiusa. Non si dovrebbe abusare delle funzioni che creano questo tipo di finestre.

+ +

I programmatori che utilizzano Chrome (per esempio per le estensioni) dovrebbero utilizzare u netidi di nsIPromptService, invece di alert.

+ +

Specifiche

+ +

HTML5

+ +

Altri metodi

+ + diff --git a/files/it/web/api/window/requestanimationframe/index.html b/files/it/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..f3c835b671 --- /dev/null +++ b/files/it/web/api/window/requestanimationframe/index.html @@ -0,0 +1,115 @@ +--- +title: window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - Animations + - Animazioni + - DOM + - DOM Reference + - Drawing + - Graphics + - Performance + - Reference + - Window + - requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +
{{APIRef}}
+ +
Il metodo window.requestAnimationFrame()indica al browser che intendi eseguire un'animazione e desideri che il browser richiami una funzione specifica per aggiornare un'animazione prima che venga eseguito nuovamente il render del browser. Il metodo accetta una funzione di callback come argomento che verrà eseguita prima del nuovo render del browser.
+ +
 
+ +
Nota: la funzione di callback deve chiamare a sua volta requestAnimationFrame() se vuoi animare un'altro frame alla successiva azione di render del browser.
+ +

Dovresti chiamare questo metodo ogni qualvolta intendi aggiornare lo stato della tua animazione sul monitor. In questo modo la tua richiesta verrà eseguita prima che il browser esegua nuvamente il render della pagina. Il numero di esecuzioni della callback è generalmente di 60 volte al secondo, ma di solito rispetta il refresh-rate del display per quasi tutti i browser secondo le raccomandazioni W3C.
+ L'esecuzione di requestAnimationFrame() vengono messe in pausa in quasi tutti i browser quando la pagina è eseguita in un tab non visibile on in un {{ HTMLElement("iframe") }} non visibile in modo da migliorare le performance e l'utilizzo della batteria.

+ +

Alla funzione di callback viene passato come singolo argomento il parametro {{domxref("DOMHighResTimeStamp")}} che indica i momento corrente in cui viene eseguito dalla coda di requestAnimationFrame()
+ Nel caso di callback multiple in un singolo frame, ogni funzione riceve lo stesso timestamp anche se è trascorso del tempo durante il calcolo di ogni processo.
+ Il timestamp è un numero decimale, in millisecondi, con una precisione di 1ms (1000µs).

+ +

Sintassi

+ +
window.requestAnimationFrame(callback);
+
+ +

Parametri

+ +
+
callback
+
Il parametro che specifica la funzione di callback da richiamare prima che venga eseguito il render successivo della pagina.
+ La funzione accetta un solo parametro, {{domxref("DOMHighResTimeStamp")}}, che indica il momento esatto (nel formato {{domxref('performance.now()')}}) in cui requestAnimationFrame() inizia la sua esecuzione.
+
+ +

Valori di ritorno

+ +

Un valore intero di tipo long, l'id della richiesta che identifica univocamente la callback specifica nella lista di callback. Questo è un valore assoluto, ma non dovresti fare nessun tipo di ragionamento sulla base di questo valore. Puoi, però, usare questo valore per passarlo a {{domxref("window.cancelAnimationFrame()")}} in modo da  rimuovere/cancellare la callback dalla coda di richieste da eseguire.

+ +

Esempio

+ +
var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+element.style.position = 'absolute';
+
+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);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}{{Spec2('HTML WHATWG')}} +

Nessun cambiamento. Sostituisce il precedente.

+
{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}{{Spec2('RequestAnimationFrame')}} +

Definizione iniziale

+
+ +

Compatibilità del Browser

+ +
+ + +

{{Compat("api.Window.requestAnimationFrame")}}

+
+ +

Leggi anche

+ + diff --git a/files/it/web/api/window/resizeby/index.html b/files/it/web/api/window/resizeby/index.html new file mode 100644 index 0000000000..ee662251c4 --- /dev/null +++ b/files/it/web/api/window/resizeby/index.html @@ -0,0 +1,35 @@ +--- +title: Window.resizeBy() +slug: Web/API/Window/resizeBy +translation_of: Web/API/Window/resizeBy +--- +

{{APIRef}}

+ +

Aumenta o diminuisce le dimensioni della finestra di un certo numero di pixel.

+ +

Sintassi

+ +
window.resizeBy(xDelta,
+yDelta)
+
+ +

Parametri

+ + + +

Esempio

+ +
// rimpicciolisce la finestra
+window.resizeBy(-200, -200);
+
+ +

Note

+ +

Questo metodo ridimensiona la finestra relativamente alle sue dimensioni attuali. Per ridimensionare la finestra in termini assoluti, è possibile utilizzare window.resizeTo.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/resizeto/index.html b/files/it/web/api/window/resizeto/index.html new file mode 100644 index 0000000000..c716aa0411 --- /dev/null +++ b/files/it/web/api/window/resizeto/index.html @@ -0,0 +1,39 @@ +--- +title: Window.resizeTo() +slug: Web/API/Window/resizeTo +translation_of: Web/API/Window/resizeTo +--- +

{{APIRef}}

+ +

Ridimensiona la finestra dinamicamente.

+ +

Sintassi

+ +
window.resizeTo(larghezza,
+altezza)
+
+ +

Parameters

+ + + +

Esempio

+ +
 // questa funzione ridimensiona la finestra
+ // e fa in modo che occupi metà dello schermo
+ function ridimensiona() {
+   window.resizeTo(window.screen.availWidth/2,
+      window.screen.availHeight/2);
+ }
+
+ +

Note

+ +

Si veda anche window.resizeBy.

+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/sessionstorage/index.html b/files/it/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..06c3b48c4a --- /dev/null +++ b/files/it/web/api/window/sessionstorage/index.html @@ -0,0 +1,138 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef()}}

+ +

La proprietà sessionStorage permette di accedere all'oggetto di sessione {{domxref("Storage")}}. sessionStorage è simile a  {{domxref("Window.localStorage")}}, l'unica differenza è che mentre i dati salvati in localStorage non hanno scadenza, i dati in sessionStorage vengono ripuliti ogniqualvolta la sessione della pagina termina. La sessione della pagina dura fino a quando il browser è aperto e sopravvive alla ricarica della pagina e al ripristino. L'apertura di una pagina in un nuovo tab o in una nuova finestra implica l'apertura di una nuova sessione, il che differisce da come funzionano i cookie di sessione.

+ +

Va ricordato che i dati memorizzati nel sessionStorage o localStorage sono specifici per il protocollo della pagina.

+ +
// Salva i dati nel sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Recupare i dati dal sessionStorage
+var data = sessionStorage.getItem('key');
+ +

Value

+ +

Un oggetto {{domxref("Storage")}}.

+ +

Example

+ +

Il seguente esempio accede all'oggetto di sessione corrente  {{domxref("Storage")}} e vi aggiunge un elemento tramite  {{domxref("Storage.setItem()")}}.

+ +
sessionStorage.setItem('myCat', 'Tom');
+ +

Il seguente esempio salva automaticamente il contenuto di un campo di testo e se la pagina del browser viene ricaricata, ripristina il contenuto del campo di testo in modo da non perdere nessuna digitazione.

+ +
// Ottiene il campo di testo
+var field = document.getElementById("field");
+
+// Verifica se ha un valore di salvataggio automatico (autosave)
+// (succederò solo se la pagina viene ricaricata accidentalmente)
+if (sessionStorage.getItem("autosave")) {
+  // Ripristina il contenuto del campo di testo
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Rimane in ascolto di cambiamenti sul campo di testo
+field.addEventListener("change", function() {
+  // E salva i risultati nell'oggetto sessionStorage
+  sessionStorage.setItem("autosave", field.value);
+});
+ +

 

+ +
+

Nota: Fare riferimento a Using the Web Storage API per un esempio completo.

+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoComment
{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto Base2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Ogni browser ha un livello di supporto differente per localStorage e sessionStorage. 

+ +
+

Nota: da iOS 5.1, Safari Mobile salva i dati del localStorage nella directory cache, che è soggetta a pulizie occasinonali, tipicamente quando lo c'è poco spazio disponibile.

+
+ +

Vedere anche

+ + diff --git a/files/it/web/api/window/sidebar/index.html b/files/it/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..280b5dcce3 --- /dev/null +++ b/files/it/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/it/web/api/window/sizetocontent/index.html b/files/it/web/api/window/sizetocontent/index.html new file mode 100644 index 0000000000..4880ff9fbd --- /dev/null +++ b/files/it/web/api/window/sizetocontent/index.html @@ -0,0 +1,15 @@ +--- +title: window.sizeToContent +slug: Web/API/Window/sizeToContent +translation_of: Web/API/Window/sizeToContent +--- +

Sommario

+

Ridimensiona automaticamente la finestra perchè si adatti al suo contenuto.

+

Sintassi

+
window.sizeToContent()
+
+

Esempio

+
window.sizeToContent();
+
+

Specifiche

+

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/status/index.html b/files/it/web/api/window/status/index.html new file mode 100644 index 0000000000..4b008c0afc --- /dev/null +++ b/files/it/web/api/window/status/index.html @@ -0,0 +1,26 @@ +--- +title: Window.status +slug: Web/API/Window/status +translation_of: Web/API/Window/status +--- +
{{APIRef("DOM")}}
+ +

Legge o imposta il testo della barra di stato della finestra a cui si riferisce l'oggetto window.

+ +

Sintassi

+ +
stringa = window.status
+window.status =
+stringa
+
+ +

Esempio

+ +
while ( attesa ) {
+   window.status = "Sto caricando...";
+}
+
+ +

Specifiche

+ +

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/statusbar/index.html b/files/it/web/api/window/statusbar/index.html new file mode 100644 index 0000000000..6eb17fc2d8 --- /dev/null +++ b/files/it/web/api/window/statusbar/index.html @@ -0,0 +1,32 @@ +--- +title: window.statusbar +slug: Web/API/Window/statusbar +translation_of: Web/API/Window/statusbar +--- +

Sommario

+

Restituisce l'oggetto statusbar, che rappresenta la barra di stato, la cui visibilità può essere disabilitata nel browser.

+

Sintassi

+
oggetto = window.statusbar
+
+

Esempio

+

Il seguente esempio completo mostra un possibile modo per utilizzare la proprietà visible dei vari oggetti "bar" (quelli che rappresentano una qualsiasi barra); mostra anche come cambiare i privilegi necessari per modificare tale proprietà.

+
<html>
+<head>
+  <title>Esperimenti sul DOM</title>
+  <script>
+    // modifico lo stato della barra in questa finestra
+    netscape.security.PrivilegeManager.
+        enablePrivilege("UniversalBrowserWrite");
+    window.statusbar.visible=!window.statusbar.visible;
+  </script>
+</head>
+<body>
+  <p>Esperimenti sul DOM</p>
+</body>
+</html>
+
+

Note

+

Quando si carica l'esempio sopra riportato, il browser mostra una finestra di avviso.

+

Si veda anche: window.locationbar, window.menubar, window.personalbar, window.scrollbars, window.toolbar

+

Specifiche

+

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/stop/index.html b/files/it/web/api/window/stop/index.html new file mode 100644 index 0000000000..f807d3b843 --- /dev/null +++ b/files/it/web/api/window/stop/index.html @@ -0,0 +1,17 @@ +--- +title: window.stop +slug: Web/API/Window/stop +translation_of: Web/API/Window/stop +--- +

Sommario

+

Ferma il caricamento del documento corrente.

+

Sintassi

+
window.stop()
+
+

Esempio

+
window.stop();
+
+

Note

+

Il metodo stop() riproduce ciò che accade quando l'utente clicca sul bottone stop del browser. Per via dell'ordine in cui vengono caricati gli script, questo metodo non può fermare il caricamento del documento in cui è contenuto, ma può fermare il caricamento di grandi immagini, nuove finestre e altri oggetti collegati al documento.

+

Specifiche

+

DOM Level 0. Non è parte di alcuno standard.

diff --git a/files/it/web/api/window/top/index.html b/files/it/web/api/window/top/index.html new file mode 100644 index 0000000000..e884cc29d3 --- /dev/null +++ b/files/it/web/api/window/top/index.html @@ -0,0 +1,87 @@ +--- +title: Window.top +slug: Web/API/Window/top +tags: + - API + - DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/top +--- +

{{ APIRef }}

+ +

Sommario

+ +

Ritorna un riferimento all'oggetto window più esterno nella gerarchia.

+ +

Sintassi

+ +
var topWindow = window.top;
+
+ +

Note

+ +

Mentre proprietà  window.parent restituisce un rifermiento alla window direttamente superiore, la proprietà window.top restituisce un riferimento alla window più alta nella gerarchia delle windows (la più esterna)

+ +

Questa proprietà è particolarmente utile quando quando si sta lavorando da una window che può avere una o più windows che la contengono, in questo modo è possibile avere un riferimento alla window più esterna

+ +

Specifica

+ +

HTML5

+ +

Compatibilità con i browser

+ +

{{ CompatibilityTable() }}

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

Gecko notes

+ +
+

Note: dalla versione {{Gecko ("6.0")}}, questa proprietà è read only.

+
diff --git a/files/it/web/api/windoworworkerglobalscope/fetch/index.html b/files/it/web/api/windoworworkerglobalscope/fetch/index.html new file mode 100644 index 0000000000..057ab069a2 --- /dev/null +++ b/files/it/web/api/windoworworkerglobalscope/fetch/index.html @@ -0,0 +1,167 @@ +--- +title: WindowOrWorkerGlobalScope.fetch() +slug: Web/API/WindowOrWorkerGlobalScope/fetch +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +--- +
{{APIRef("Fetch API")}}
+ +

Il metodo fetch() del mixin {{domxref("WindowOrWorkerGlobalScope")}} avvia il processo di recupero di una risorsa dalla rete. Questo ritorna una "promise" che si risolve all'oggetto {{domxref("Response")}} che rappresenta la risposta alla tua richiesta.

+ +

WorkerOrGlobalScope è implementato sia da {{domxref("Window")}} sia da {{domxref("WorkerGlobalScope")}}, ciò significa che il metodo fetch() è disponibile in quasi tutti i contesti nei quali potresti voler recuperare risorse..

+ +

Una promise {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} responge con un {{jsxref("TypeError")}} quando viene incontrato un errore di rete, sebbene questo stia spesso a significare un errore di permessi o simili. Un controllo accurato per un fetch() di successo richiederebbe di controllare che la promise si sia risolta,  e anche il controllo che la proprietà {{domxref("Response.ok")}} ha valore true. Uno stato HTTP 404 non costituisce un errore di rete.

+ +

Il metodo fetch() è controllato dalla direttiva connect-src della Content Security Policy piuttosto che dalla direttiva delle risorse che sta recuperando.

+ +
+

Nota: I parametri del metodo fetch() sono identici a quelli del costruttore {{domxref("Request.Request","Request()")}}.

+
+ +

Sintassi

+ +
Promise<Response> fetch(input[, init]);
+ +

Parametri

+ +
+
input
+
Definisce la risorsa ceh vuoi recuperare. Questa può essere: +
    +
  • Una {{domxref("USVString")}} contenente l'URL diretto della risorsa che vuoi recuperare. Alcuni browsers accettano blob: e data: come schemi.
    • +
  • Un oggetto {{domxref("Request")}}.
    • +
+
+
init {{Optional_inline}}
+
Un oggetto opzioni contenente qualsiasi impostazione personalizzata che si vuole applicare alla richiesta. Le opzioni possibili sono: +
    +
  • method: Il metodo di richiesta, es., GET, POST.
    • +
  • headers: Qualsiasi header si voglia aggiungere alla richiesta, contenuto in un oggetto {{domxref("Headers")}} o un oggetto letterale con valori {{domxref("ByteString")}}.
    • +
  • body: Qualsiasi corpo si voglia aggiungere alla richiesta: può essere un oggetto {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, o {{domxref("USVString")}}. Si noti che una richiesta che usa il metodo GET o HEAD non può avere un corpo.
    • +
  • mode: La modalità che si vuole usare per la richiesta, es., cors, no-cors, o same-origin.
    • +
  • credentials: Le credenziali che si vuole vengano usate per la richiesta: omit, same-origin, o include. Per inviare automaticamente dei cookies per il dominio corrente, questa opzione deve essere indicata. Iniziando da Chrome 50, questa proprietà accetta anche un'istanza {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}}.
    • +
  • cache: La modalità cache ceh si vuole usare per la richiesta: default, no-store, reload, no-cache, force-cache, o only-if-cached.
    • +
  • redirect: Il metodo di reindirizzamento: follow (seguire automaticamente i reindirizzamenti), error (interrompere con un errore se avviene un reindirizzamento), o manual (gestire manualmente i reindirizzamento). In Chrome il valore di default è follow (prima di Chrome 47 era impostato a manual).
    • +
  • referrer: Una {{domxref("USVString")}} che specifica no-referrer, client, o una URL. Il valore predefinito è client.
    • +
  • referrerPolicy: Specifica il valore dello header HTTP del referente. Può essere: no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
    • +
  • integrity: Contiene il valore di integrità della sottorisorsa (subresource integrity) della richiesta (es., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
    • +
  • keepalive: L'opzione keepalive può essere usata per premettere alla richiesta di sopravvivere alla pagina. Il recupero di una risorsa con l'opzione keepalive sostituisce l'API {{domxref("Navigator.sendBeacon()")}}. 
    • +
  • signal: Un'istanza oggetto {{domxref("AbortSignal")}}; permette di comunicare con una richiesta di recupero e di interromperla se lo si desidera con un {{domxref("AbortController")}}.
    • +
+
+
+ +

Valore di ritorno

+ +

Una {{domxref("Promise")}} che risolve ad un oggetto {{domxref("Response")}}.

+ +

Eccezioni

+ + + + + + + + + + + + + + + + + + +
TipoDescrizione
AbortErrorLa richiesta è stata interrotta (tramite {{domxref("AbortController.abort()")}}).
TypeErrorDa Firefox 43, fetch() produrrà un TypeError se la URL possiede credenziali, come http://user:password@example.com.
+ +

Esempi

+ +

Nel nostro esempio Fetch Request (vedi Fetch Request live) viene creata un nuovo oggetto {{domxref("Request")}} usando il costruttore relativo, per poi recuperarlo con una chiamata fetch(). Siccome stiamo recuperando un'immagine, eseguiamo {{domxref("Body.blob()")}} alla risposta per dargli il tipo MIME adeguato in modo che venga gestito correttamente, poi creiamo un Oggetto URL dello stesso e lo mostriamo in un elemento {{htmlelement("img")}}.

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});
+ +

Nel nostro esempio Fetch with init then Request (vedi Fetch Request init live) facciamo la stessa cosa eccetto che passiamo un oggetto per l'inizializzazione quando invochiamo fetch():

+ +
var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest,myInit).then(function(response) {
+  ...
+});
+ +

Si noti che si può passare l'oggetto per l'inizializzazione insieme al costruttore Request per ottenere lo stesso effetto, es.:

+ +
var myRequest = new Request('flowers.jpg', myInit);
+ +

Si può anche usare un oggetto letterale come headers in init.

+ +
var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+ +

Specificazioni

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificazioniStatusComment
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definito in un WindowOrWorkerGlobalScope parziale nella specifica più recente.
{{SpecName('Fetch','#dom-global-fetch','fetch()')}}{{Spec2('Fetch')}}Definizione iniziale
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Aggiunge l'istanza {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} com un valore possibile per init.credentials.
+ +

Compatibilità Browser

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/api/windoworworkerglobalscope/index.html b/files/it/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..f7151242c7 --- /dev/null +++ b/files/it/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,115 @@ +--- +title: WindowOrWorkerGlobalScope +slug: Web/API/WindowOrWorkerGlobalScope +tags: + - API + - DOM + - DOM API + - NeedsTranslation + - Service Worker + - TopicStub + - Window + - WindowOrWorkerGlobalScope + - Worker + - WorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{ApiRef()}}
+ +

The WindowOrWorkerGlobalScope mixin describes several features common to the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces. Each of these interfaces can, of course, add more features in addition to the ones listed below.

+ +
+

Note: WindowOrWorkerGlobalScope is a mixin and not an interface; you can't actually create an object of type WindowOrWorkerGlobalScope.

+
+ +

Properties

+ +

These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.

+ +
+
+
{{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 origin of the global scope, serialized as a string.
+
+
+ +

Methods

+ +

These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.

+ +
+
{{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("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.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', 'WindowOrWorkerGlobalScope mixin')}}{{Spec2('HTML WHATWG')}}This is where the main mixin is defined.
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definition of the fetch() method.
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Definition of the caches property.
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Definition of the indexedDB property.
{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'isSecureContext')}}{{Spec2('Secure Contexts')}}Definition of the isSecureContext property.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/it/web/api/windowtimers/clearinterval/index.html b/files/it/web/api/windowtimers/clearinterval/index.html new file mode 100644 index 0000000000..63b0682983 --- /dev/null +++ b/files/it/web/api/windowtimers/clearinterval/index.html @@ -0,0 +1,48 @@ +--- +title: WindowTimers.clearInterval() +slug: Web/API/WindowTimers/clearInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Interrompe l'azione ripetuta dall'utilizzo del comando {{domxref("window.setInterval", "setInterval")}}.

+ +

Sintassi

+ +
window.clearInterval(intervalID)
+
+ +

intervalID è un identificatore dell'azione ripetuta che vuoi cancellare. Questo ID viene passato con il return di setInterval().

+ +

Esempio

+ +

Vedi setInterval() example.

+ +

Specifiche

+ + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}{{Spec2('HTML WHATWG')}}
+ +

Vedi anche

+ + diff --git a/files/it/web/api/windowtimers/index.html b/files/it/web/api/windowtimers/index.html new file mode 100644 index 0000000000..d95ede2948 --- /dev/null +++ b/files/it/web/api/windowtimers/index.html @@ -0,0 +1,124 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Workers +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers contains utility methods to set and clear timers.

+ +

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 interface does not define any property, nor inherit any.

+ +

Methods

+ +

This interface does not inherit any method.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{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.04.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

See also

+ + diff --git a/files/it/web/api/worker/index.html b/files/it/web/api/worker/index.html new file mode 100644 index 0000000000..5b8c7518a7 --- /dev/null +++ b/files/it/web/api/worker/index.html @@ -0,0 +1,107 @@ +--- +title: Worker +slug: Web/API/Worker +tags: + - API + - DOM +translation_of: Web/API/Worker +--- +

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

+ +

L'interfaccia Worker delle Web Workers API rappresenta un processo in background che può essere facilmente generato e in grado di inviare messaggi al creatore. Per creare un worker basta specificare nel metodo costruttore Worker() lo script che sarà incaricato di eseguire.

+ +

I Workers saranno poi in grado di inizializzare ulteriori workers fintanto che questi workers hanno la stessa origine della pagina su cui sono ospitati (NB: l'annidamento di workers non è ancora implementato in Blink).  I workers possono tuttavia usare XMLHttpRequest per richiamare risorse esterne, a patto che gli attributi responseXML e channel di XMLHttpRequest restituiscano null.

+ +

Non tutte le interfacce nè i metodi sono disponibili nel contesto dello script interpretato da un Worker.

+ +

Se si vuole utilizzare i workers nelle estensioni per Firefox ed avere accesso a js-ctypes, bisogna utilizzare l'interfaccia {{ domxref("ChromeWorker") }}.

+ +

Costruttori

+ +
+
{{domxref("Worker.Worker", "Worker()")}}
+
Crea un  worker che eseguirà lo script specificato nella URL. I Workers possono essere anche invocati tramite Blobs.
+
+ +

Proprietà

+ +

Eredita proprietà dal suo parent, {{domxref("EventTarget")}}, e implementa quelle di {{domxref("AbstractWorker")}}.

+ +

Eventi gestiti

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Un {{ domxref("EventListener") }} invocato quando un {{domxref("ErrorEvent")}} di tipo error arriva al worker. Questo evento è ereditato da {{domxref("AbstractWorker")}}.
+
{{domxref("Worker.onmessage")}}
+
Un {{ domxref("EventListener") }} invocato quando  un {{domxref("MessageEvent")}} di tipo message arriva al worker — Per esempio quando un messaggio viene inviato al documento parent da un worker tramite {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Il messaggio viene salvato nella proprietà {{domxref("MessageEvent.data", "data")}} dell'evento.
+
{{domxref("Worker.onmessageerror")}}
+
Un {{domxref("EventHandler")}} che rappresenta il codice da invocare quando l'evento {{event("messageerror")}} è invocato.
+
+ +
+
+ +

Metodi

+ +

Eredita i metodi del suo parent, {{domxref("EventTarget")}}, e quelli di {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("Worker.postMessage()")}}
+
Invia un messaggio (any JavaScript object) al contesto interno del worker.
+
{{domxref("Worker.terminate()")}}
+
Termina immediatamente il worker troncando qualsiasi operazione in corso. Le istanze di ServiceWorker non supportano questo metodo.
+
+ +

Esempio

+ +

Il codice che segue mostra la creazione di un oggetto {{domxref("Worker")}} usando il costruttore {{domxref("Worker.Worker", "Worker()")}} e l'invio di un messaggio:

+ +
var myWorker = new Worker('worker.js');
+var first = document.querySelector('#number1');
+var second = document.querySelector('#number2');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Messaggio inviato al worker');
+}
+ +

Per un esempio completo: Esempio worker ( esegui worker).

+ +


+ Specifiche

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#worker", "Worker")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilità Browser

+ +

Il supporto dipende per ciascun tipo di worker. Controlla le pagine dei singoli worker per avere maggiori dettagli.

+ + + +

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

+ +

Cross-origin worker, comportamento in caso di errore

+ +

Nelle prime implementazioni browser caricare uno script cross-origin per un worker causava un errore SecurityError; nelle implementazioni piu' recenti invece viene generato un evento {{event("error")}} per rispettare le specifiche. Puoi trovare maggiori informazioni su come gestire queste situazioni qui: Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed.

+ +

Vedi Anche

+ + diff --git a/files/it/web/api/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..634bd2ea10 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/index.html @@ -0,0 +1,173 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX API HTTP XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +
{{outdated()}}
+ +

Questo oggetto è il cuore di AJAX: è infatti lo strumento che JavaScript utilizza per accedere a un documento XML.

+ +

Il W3C ha pubblicato una bozza di standard per questo oggetto il 5 aprile 2006.

+ +

Seguono alcuni link:

+ + + + + +
{{APIRef("XMLHttpRequest")}}
+ +

XMLHttpRequest è una API (interfaccia alla progammazione) la quale fornisce al client le funzionalità di trasferire bidirezionalmente dati tra esso ed il server in maniera sincrona od asincrona senza che il browser richieda al server una porzione di dati senza necessariamente effettuar l'aggiornamento della pagina.

+ +

Nonostante il nome dato, XMLHttpRequest, originariamente sviluppato da Microsoft e successivamente adottato dalle altre case di sviluppo browser attraverso il suo standard, supporta protocolli HTTP (inclusi quelli di tipo file ed ftp) oltre che l'XML.

+ +

Struttura di controllo

+ +
+
{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+
La struttura di controllo viene inizializzata con la funzione XMLHttpRequest() e necessita la sua chiamata prima di ogni altro suo metodo.
+
+ +

Proprietà

+ +

XMLHttpRequest eredita le proprietà di {{domxref("XMLHttpRequestEventTarget")}} e di {{domxref("EventTarget")}}:

+ +
+
{{domxref("XMLHttpRequest.onreadystatechange")}}
+
E' un {{domxref("EventHandler")}} chiamato al mutare di un readyState (stato di un evento).
+
{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+
Restituisce un unsigned short, rappresentante lo stato della richiesta.
+
{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+
Restituisce dati di tipo {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}},  oggetti JavaScript, od una {{domxref("DOMString")}}, a seconda del valore {{domxref("XMLHttpRequest.responseType")}}. la quale descrive l'entità del corpo della richiesta.
+
{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+
Restituisce una {{domxref("DOMString")}} la quale contiene l'esito della chiamata sotto forma testuale oppure null se la richiesta non ha riscontri o nel caso non sia stata ancora operata.
+
{{domxref("XMLHttpRequest.responseType")}}
+
E' un valore enumerato il quale definisce il tipo del risultato della chiamata.
+
{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+
Restituisce l'URL serializzato dell'esito della chiamata (in una stringa vuota se l'URL è vacante).
+
{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+
Restituisce un {{domxref("Documento")}} contenente l'esito della chiamata (di tipo null nei casi in cui la richiesta non abbia esito, non sia stata inviata, o non possa essere convertita in XML o HTML). Not available in workers.
+
{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+
Restituisce un dato di tipo unsigned short rappresentante lo stato dell'esito della chiamata.
+
{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+
Restituisce una {{domxref("DOMString")}} contentente l'esito (in forma di stringa) fornita dal server HTTP. A differenza di {{domxref("XMLHTTPRequest.status")}}, include l'intero testo del messaggio in risposta (es. "200 OK").
+
{{domxref("XMLHttpRequest.timeout")}}
+
Restituisce un unsigned long rappresentante il numero (espresso in millisecondi) rimanente alla chiamata prima che questa venga automaticamente soppressa.
+
{{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+
E' un {{domxref("EventHandler")}} (gestore di eventi) che può occorrere quando una richiesta termina in timeout. {{gecko_minversion_inline("12.0")}}
+
{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+
{{domxref("XMLHttpRequestUpload")}}, rappresenta un processo di upload.
+
{{domxref("XMLHttpRequest.withCredentials")}}
+
Fornisce uno stato {{jsxref("Boolean")}} che indica quando //that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies or authorization headers.
+
 
+
+

Proprietà non-standard

+
+
{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+
{{Interface("nsIChannel")}}. Definisce il canale utilizzato dall'oggetto quando effettua la chiamata.
+
{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+
Restituisce un dato boolenao, true nel caso la chiamata venga inviata priva di cookie e/o dati di autenticazione nell'header.
+
{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+
Restituisce un dato booleano true nel caso in cui gli stessi parametri di origine non siano comparati dalla chiamata.
+
{{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+
Restituisce un valore booleano indicante se l'oggetto rappresenta una chiamata attiva latente.
+
{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+
E' un ArrayBuffer. contentente il risultato della chiamata in forma di un array JavaScript tipizzato.
+
{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+
Questa funzione Gecko-only , booleana, è stata rimossa a partire da Firefox/Gecko 22. In sostituzione si veda Server-Sent Events, Web Sockets, o responseText per il monitoraggio dei progressi degli eventi.
+
+

Gestori degli eventi

+ +

onreadystatechange come proprietà dell'istanza XMLHttpRequest è supportata in ogni browser.

+ +

In virtù di ciò, un numero sempre maggiore di trigger degli eventi è stata implementata in vari browser (onload, onerror, onprogress, etc.). Ognuno di questi è supportato da Firefox, in particolare si veda nsIXMLHttpRequestEventTarget e Using XMLHttpRequest.

+ +

Molte versioni recenti di browser, Firefox e derivate incluse, supportano la ricezione degli eventi XMLHttpRequest mediante le API standard addEventListener in aggiunta alle proprietà aggiuntive applicate ai metodi dei gestori degli eventi.

+ +

Metodi

+
+
     {{domxref("XMLHttpRequest.abort()")}}
+
 
+
Interrompe la chiamata se è stata già inviata.
+
{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+
Restituisce tutti gli header in risposta, separati da CRLF, sottoforma di stringa o null se non viene ricevuto nessun risultato.
+
{{domxref("XMLHttpRequest.getResponseHeader()")}}
+
Restituisce la stringa contenente il testo dell'header specifico o null se anche il risultato non è stato ricevuto o l'header non esiste.
+
{{domxref("XMLHttpRequest.open()")}}
+
Inizializza una chiamata. Questa funzione è derivante da codice Javascript; per inizializzare una chiamata dal codice nativo si veda openRequest().
+
{{domxref("XMLHttpRequest.overrideMimeType()")}}
+
Revoca il MIME type inviato dal server.
+
{{domxref("XMLHttpRequest.send()")}}
+
Invia la richiesta. Se la richiesta è asincrona (come è di default) questo metodo risponde non appena terminato l'invio della richiesta attiva.
+
{{domxref("XMLHttpRequest.setRequestHeader()")}}
+
Stabilisce il valore di un header HTTP di richiesta. E' preferibile chiamare setRequestHeader()dopo open(), ma prima di send().
+
+

Metodi non-standard

+
+
{{domxref("XMLHttpRequest.init()")}}
+
Inizializza l'oggetto da usare in codice C++.
+
+
Attenzione: Questo metodo non deve essere eseguito da JavaScript.
+
+
{{domxref("XMLHttpRequest.openRequest()")}}
+
Inizializza una richiesta. Questo metodo è derivante da codice nativo; per inizializzare una richiesta da JavaScript si utilizzi invece open().
+
{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+
Una variante del metodo send() il quale invia dati binari.
+
+

Specifiche

+ + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, ultima versione
+
+
+ +

Compatibilità

+ +

 

+ + + +
{{Compat("api.XMLHttpRequest")}}
+ +

Voci correlate

+ + diff --git a/files/it/web/api/xmlhttprequest/onreadystatechange/index.html b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html new file mode 100644 index 0000000000..1bbfb02852 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/onreadystatechange/index.html @@ -0,0 +1,119 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +
{{APIRef}}
+ +

UN EventHandler  che è invocato ogni volta che l'attributo readyState cambia. la callback è invocata dal thread dell'interfaccia utente. 

+ +

La proprietà XMLHttpRequest.onreadystatechange  contiene l'event handler che deve essere invocato quando l'evento {{event("readystatechange")}} si verifica, ovvero ogni volta in cui la proprietà {{domxref("XMLHttpRequest.readyState", "readyState")}} del {{domxref("XMLHttpRequest")}} viene modificata.

+ +
+

Warning: This should not be used with synchronous requests and must not be used from native code. .

+
+ +

L'evento readystatechange non si verificherà se una richiesta XMLHttpRequest viene cancellata utilizzando il metodo abort().

+ +
+

UPDATE: it's firing in the latest version of browsers (Firefox 51.0.1, Opera 43.0.2442.991, Safari 10.0.3 (12602.4.8), Chrome 54.0.2840.71, Edge, IE11). Example here - just reaload page few times.

+
+ +

Syntax

+ +
XMLHttpRequest.onreadystatechange = callback;
+ +

Values

+ + + +

Example

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(method, url, true);
+xhr.onreadystatechange = function () {
+  if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+    console.log(xhr.responseText);
+  }
+};
+xhr.send();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatIe(7)}}[1]{{CompatVersionUnknown}}{{CompatSafari(1.2)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject().

diff --git a/files/it/web/api/xmlhttprequest/open/index.html b/files/it/web/api/xmlhttprequest/open/index.html new file mode 100644 index 0000000000..b4786aecc6 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/open/index.html @@ -0,0 +1,115 @@ +--- +title: XMLHttpRequest.open() +slug: Web/API/XMLHttpRequest/open +translation_of: Web/API/XMLHttpRequest/open +--- +

{{APIRef('XMLHttpRequest')}}

+ +

Il metodo XMLHttpRequest.open() inizializza una richiesta. Questo metodo è utilizzato da codice JavaScript; invece, per inizializzare una richiesta da codice nativo, usare openRequest().

+ +
Nota: Chiamare questo metodo da una richiesta già attiva (una in cui open() o openRequest() è stata già chiamata) è equivalente a chiamare abort().
+ +

Sintassi

+ +
XMLHttpRequest.open(metodo, url)
+XMLHttpRequest.open(metodo, url, async)
+XMLHttpRequest.open(metodo, url, async, utente)
+XMLHttpRequest.open(metodo, url, async, utente, password)
+
+ +

Parameters

+ +
+
metodo
+
Il metodo HTTP da utilizzare, come "GET", "POST", "PUT", "DELETE", ecc. Campo ignorato per URL non-HTTP(S).
+
url
+
{{domxref("DOMString")}} che rappresenta l'URL a cui inviare la richiesta.
+
async {{optional_inline}}
+
Un parametro opzionale Booleano, true in maniera predefinita, indicante se effettuare o meno l'operazione in modalità asincrona. Se questo valore è false, il metodo send() non ritornerà finchè la risposta non sarà ricevuta. Se true, la notifica di una transazione completata è fornita utilizzando gli event listener. Questo must essere true se l'attributo multipart è true, o partirà un eccezione. +
Nota: Da Gecko 30.0 {{geckoRelease("30.0")}}, le richieste sincrone sul thread principale sono state deprecate a causa di effetti negativi sull'esperienza utente.
+
+
utente {{optional_inline}}
+
Il valore opzionale del nome dell'utente da utilizzare per scopi di autenticazione; il valore predefinito è null.
+
password {{optional_inline}}
+
La password opzionale da utilizzare per scopi di autenticaziones; il valore predefinito è null.
+
+ +

Specifiche

+ + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilità fra browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{ CompatVersionUnknown}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{ CompatVersionUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{ CompatVersionUnknown}}{{ CompatVersionUnknown}}{{ CompatVersionUnknown}}
+
+ +

[1] Questa funzionalità è stata implementata attraverso ActiveXObject(). Internet Explorer implementa lo standard XMLHttpRequest dalla versione 7.

+ +

Vedi anche

+ +

Utilizzare XMLHttpRequest

diff --git a/files/it/web/api/xmlhttprequest/readystate/index.html b/files/it/web/api/xmlhttprequest/readystate/index.html new file mode 100644 index 0000000000..a37fa1e1db --- /dev/null +++ b/files/it/web/api/xmlhttprequest/readystate/index.html @@ -0,0 +1,152 @@ +--- +title: XMLHttpRequest.readyState +slug: Web/API/XMLHttpRequest/readyState +translation_of: Web/API/XMLHttpRequest/readyState +--- +

{{APIRef('XMLHttpRequest')}}

+ +

la proprietà XMLHttpRequest.readyState restituisce lo stato nel quale si trova il client di una richiesta XMLHttpRequest. Un client XHR si può trovare in uno degli stati seguenti:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueStateDescription
0UNSENTIl Client è stato creato, ma il metodo open() della XHR non è stato ancora invocato.
1OPENEDIl metodo open() è stato invocato.
2HEADERS_RECEIVEDIl metodo send() della XHR è stato invocato, e sono già disponibili lo status della risposta HTTP ed il suo header. 
3LOADINGSta avvenendo il download dei dati; responseText contiene dati parziali.
4DONEL'operazione è stata completata.
+ +
+
UNSENT
+
Il Client è stato creato, ma il metodo open() della XHR non è stato ancora invocato.
+
OPENED
+
Il metodo open() della XHR è stato invocato. In questo stato è possibile settare l' header della richiesta HTTP utilizzando il metodo setRequestHeader(); può essere invocato il metodo send(), che inizia il fetch della richiesta.
+
HEADERS_RECEIVED
+
Il metodo send() è stato invocato e sono stati ricevuto gli headers della risposta; è possibile conoscere il codice della risposta HTTP ed i suoi metadati.
+
LOADING
+
Sta avvenendo il download del body della risposta HTTP; se il responseType è "text" o vuoto, responseText conterrà un testo parziale.
+
DONE
+
L'operazione di fetch è terminata; Questo può significare sia che il trasferimento dei dati è stato un successo e questi sono completamente disponibili o che è fallito.
+
+ +
+

The state names are different in Internet Explorer. Instead of UNSENT, OPENED, HEADERS_RECEIVED, LOADING and DONE, the names READYSTATE_UNINITIALIZED (0), READYSTATE_LOADING (1), READYSTATE_LOADED (2), READYSTATE_INTERACTIVE (3) and READYSTATE_COMPLETE (4) are used.

+
+ +

Example

+ +
var xhr = new XMLHttpRequest();
+console.log('UNSENT', xhr.readyState); // readyState sarà pari a 0
+
+xhr.open('GET', '/api', true);
+console.log('OPENED', xhr.readyState); // readyState sarà pari a 1
+
+xhr.onprogress = function () {
+    console.log('LOADING', xhr.readyState); // readyState sarà pari a 3
+};
+
+xhr.onload = function () {
+    console.log('DONE', xhr.readyState); // readyState sarà pari a 4
+};
+
+xhr.send(null);
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#states')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}[1]{{CompatIe(7)}}{{CompatVersionUnknown}}{{CompatSafari("1.2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html new file mode 100644 index 0000000000..4f55ac07ff --- /dev/null +++ b/files/it/web/api/xmlhttprequest/usare_xmlhttprequest/index.html @@ -0,0 +1,741 @@ +--- +title: Usare XMLHttpRequest +slug: Web/API/XMLHttpRequest/Usare_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

Per inviare una richiesta HTTP, crea  un oggetto {{domxref("XMLHttpRequest")}}, apri un URL, ed invia la richiesta. Dopo che la transazione è completata, l'oggetto conterrà informazioni utili come il testo di risposta e lo stato HTTP. Questa pagina illustra alcuni dei più comuni e oscuri casi d'uso di questo potente oggetto XMLHttpRequest.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

Tipi di Richieste

+ +

Una richiesta inviata con XMLHttpRequest può essere restituita in due modi, sincrona o asincrona. Il tipo di richiesta viene deciso dall'argomento opzionale async (il terzo argomento) che viene impostato nel metodo open() di {{domxref("XMLHttpRequest.open()")}}. Se l'argomento è true o se non è specificato, il XMLHttpRequest è processato in maniera asincrona, in caso contrario è processato in maniera sincrona. Una discussione dettagliata è una dimostrazione di queste due tipologie di richieste possono essere trovate nella pagina richieste sincrone ed asincrone. In generale, dovresti usare raramente le richieste sincrone, se mai ne farai uso.

+ +
Nota: Da Gecko 30.0 {{ geckoRelease("30.0") }}, le richieste sincrone sul thread principale sono state deprecate a causa degli effetti negativi sull'esperienza utente.
+ +

Gestire le risposte

+ +

Ci sono vari tipi di attributi di risposta definite dallo standard W3C sul costruttore XMLHttpRequest. Questi sono in grado di fornire al client che effettua la richiesta importanti informazioni sullo stato della risposta. In alcuni casi in cui si lavora con risposte di tipo non testuale possono riguardare alcuni elementi di analisi e manipulazioni come evidenziato dai paragrafi seguenti.

+ +

Analizzare e modificare la proprietà  responseXML

+ +

Se si usa l'oggetto XMLHttpRequest per ricevere il contenuto di un documento XML remoto, la proprietà responseXML dell'oggetto stesso sarà assegnata a un oggetto DOM contentente un il documento XML a cui è stata effettuata una operazione di parsing. Se si lavora con tale proprietà può essere difficile analizzare e modificare tale proprietà. Di seguito sono riportate i quattro principali metodi per lavorare con tale documento XML:

+ +
    +
  1. Utilizzare XPath per indirizzare (cioè puntare a) parti di esso.
    2. +
  2. Usare JXON per convertire il documento in un albero JavaScript Object.
    3. +
  3. Effettuare il Parsing e la serializzazione XML manualmente su stringhe e oggetti.
    4. +
  4. Utilizzare un XMLSerializer per serializzare alberi DOM su stringhe o file.
    5. +
  5. RegExp possono essere utilizzate se si conosce sempre il contenuto del documento XML a priori. In tal caso, se si utilizzano delle espressioni regolari con coscienza dei ritorni di riga, può essere necessario o consigliato di rimuovere le interruzioni di riga. In ogni caso è sempre sconsigliato utilizzare questo metodo e di considerarlo solo come "ultima spiaggia" in quanto se il documento XML dovesse cambiare anche in modo irrisorio questa metodologia potrebbe fallire.
    6. +
+ +

Analizzare e manipolare una proprietà responseText contenentente un documento HTML

+ +
Nota: La W3C XMLHttpRequest specification permette il parse del codice HTML tramite la proprietà XMLHttpRequest.responseXML. SI legga l'articolo a riguardo HTML in XMLHttpRequest per dettagli.
+ +

Se si utilizza l'oggetto XMLHttpRequest per ottenere il contenuto di una pagina HTML remota, la proprietà responseText conterrà un amalgama di tutti i tag HTML. Ciò può essere difficile da manipolare e analizzare. Ci sono principalmente tre divere metodologie per analizzare questo insieme:

+ +
    +
  1. Utilizzare la proprietà XMLHttpRequest.responseXML.
    2. +
  2. Iniettare il contenuto nel corpo di un document fragment attraverso la proprietà fragment.body.innerHTML e navigare il codice DOM del fragment.
    3. +
  3. Ancora una volta RegExp possono essere utlizzate se si conosce sempre il contenuto della risposta HTML. Questo metodo è, comuqnue, sconsigliato perchè anche una piccola modifica del codice HTML sorgente potrebbe protare questa metodologia a fallire.
    4. +
+ +

Gestire dati binari

+ +

Nonostante l'oggetto XMLHttpRequest è principalmente utilizzato per ricevere e inviare dati testuali, può essere utilizzato per inviare e ricevere dati dal contenuto binario. Esistono svariati metodi ben testati per fare sì che l'oggetto in questione invii dati binari. Questi metodo prevedono l'utilizzo del metodo .overrideMimeType(...) sull'oggetto.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url, true);
+// riceve dei dati non porcessati come una stringa binaria
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

La XMLHttpRequest Level 2 Specification aggiunge un nuovo attributo responseType che permette di inviare e ricevere dati binari in modo molto più semplice.

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

Per più esempi si veda la pagina Sending and Receiving Binary Data.

+ +

Monitoraggio del progresso

+ +

L'oggetto XMLHttpRequest fornisce la possibilità di ascoltare svariati eventi che possono occorrere mentre la richiesta è processata. Questo inclulde periodici aggiornamenti sul progresso, notificazione di errori e così via.

+ +

Il supporto agli eventi di monitoraggio del progresso DOM dell'oggetto XMLHttpRequest ripetta le API specification progress events: tali eventi implementano l'interfaccia {{domxref("ProgressEvent")}}.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress, false);
+oReq.addEventListener("load", transferComplete, false);
+oReq.addEventListener("error", transferFailed, false);
+oReq.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total;
+    // ...
+  } else {
+    // Impossibile elaborare il progresso perche' non si conosce la grandezza totale
+  }
+}
+
+function transferComplete(evt) {
+  alert("Trasferimento completato!");
+}
+
+function transferFailed(evt) {
+  alert("E' avvenuto un errore nel trasferimento");
+}
+
+function transferCanceled(evt) {
+  alert("Il trasferimento è stato cancellato dall'utente");
+}
+ +

Le linee 3-6 aggiungono degli event listener per i vari eventi che sono inviati mentre si performa un trasferimento di dati con l'oggetto XMLHttpRequest.

+ +
Nota: Quando si assegnano degli event listeners è necessario farlo prima di chiamare il metodo open() sulla richiesta. Se ciò non viene effettuato gli eventi non vengono inviati.
+ +

L'event handler per il progresso, specificato dalla funzione updateProgress() in questo esempio, riceve il numero totale di byte da trasferire e il numero di byte trasferiti finora nei campi total e loaded rispettivamente. In ogni caso, se il campo lengthComputable risulta falsa, la lunghezza totale risulta sconosciuta e sarà riportata come zero.

+ +

Gli eventi di progresso esistono sia per il download che per l'upload. Gli eventi di download sono notificati sull'oggetto XMLHttpRequest stesso, come indicato dall'esempio sopra. Quelli di upload, invece, sono notificati sull'attributo XMLHttpRequest.upload come mostrato sotto:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress, false);
+oReq.upload.addEventListener("load", transferComplete, false);
+oReq.upload.addEventListener("error", transferFailed, false);
+oReq.upload.addEventListener("abort", transferCanceled, false);
+
+oReq.open();
+
+ +
Nota: Gli eventi di progresso non sono disponibili per il protocollo file://.
+ +
Nota: Correntemente ci sono dei bug aperti per gli eventi di progresso che affliggono la versione 25 di Firefox su OS X e Linux.
+ +
+

Nota: A partire da {{Gecko("9.0")}}, gli eventi di progresso possono essere lanciati per ogni parte di dato ricevuta, inclusa l'ultima parte dove l'ultimo pacchetto è ricevuto e la connesione chiusa prima che l'evento di progresso sia notificato. In questo caso l'evento di progresso è notificato automaticamente quando occorre l'evento di "load" per tale pacchetto. Questo permette di creare un monitoraggio affidabile solamente osservando gli eventi di progresso.

+
+ +
+

Nota: A partire da  {{Gecko("12.0")}}, se l'evento di progresso è chiamato con un responseType di tipo moz-blob, il valore di risposta sarà un {{domxref("Blob")}} contenente i dati ricevuti fino a quel punto.

+
+ +

Si puà anche rilevare tutti e tre le tipologie di terminazione del caricamento(abort, load o error) utilizzando l'evento loadend:

+ +
req.addEventListener("loadend", loadEnd, false);
+
+function loadEnd(e) {
+  alert("Trasferimento terminato (anche se non sappiamo come).");
+}
+
+ +

Si noti che non c'è modo di essere sicuri di conoscere con le informazioni ricevute dall'evento loadend quali condizioni hanno causato il termine dell'operazione. In ogni caso si può usare questo per gestire operazioni che devono essere eseguite al termine del trasferimento.

+ +

Inviare form e caricare file

+ +

Istanze di un oggetto XMLHttpRequest possono essere usate per inviare form in principalmente due modi:

+ + + +

Il secondo modo (utilizzando l'oggetto FormData) è il più semplice e veloce, ma ha lo svantaggio che i dati raccolto non possono essere trasformati in stringa.
+ Il primo modo, invece, è più complesso, ma è anche in cambio più potente e flessibile.

+ +

Usando l'oggetto XMLHttpRequest

+ +

Inviare form senza le API dell'oggetto FormData non richiede l'utilizzo di altre API tranne nel caso di FileReader nel caso si voglia caricare più di un file.

+ +

Una breve introduzione del metodo submit

+ +

Un html {{ HTMLElement("form") }} può essere inviata in quattro possibili modi:

+ + + +

Ora, si consideri di inviare una form contenente solo due campi, chiamati foo e baz. Se si sta utilizzando il metodo POST il server riceverà una stringa simile a una delle seguenti tre linee a seconda del tipo di encoding utilizzato:

+ + + +

Invece, se si utilizza un metodo GET una stringa simile alla seguente sarà semplicemente aggiunta all'URL:

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

Un piccolo framwork vanilla

+ +

Tutte queste cose sono eseguite automaticamente dal web browser ogni volta che si esegue il submit di una {{ HTMLElement("form") }}. Ma se si vuole fare lo stesso usando JavaScript bisogna istruire l'interprete su tutte le operazioni da eseguire. Inviare delle form in AJAX puro risulta troppo complesso per essere spiegato qui; per questa ragione abbiamo creato un framework completo (ma comunque puramente didattico) che possa essere usato in tutti e quattro i metodi di submit e anche per caricare dei file.

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

Per testarlo, create una pagina chiamata register.php (al quale fanno riferimento gli attributi action di queste form) e inserite il seguente contenuto.

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

La sintassi per attivare lo script è semplicemente:

+ +
AJAXSubmit(myForm);
+ +
Nota: Questo framework utilizza l'API FileReader per eseguire l'upload dei file. QUesta è una API recente e non ancora implementata nei browser come IE9 o inferiori. Per questa ragione l'upload AJAX-only è considerato una  tecnica sperimentale. Se non si ha bisogno dell'upload di file binari questo framework funzionera egregiamente nella maggior parte dei browser.
+ +
Nota: Il modo migliore per inviare dei contenuti binari è attraverso ArrayBuffers o Blobs attraverso il metodo send() e possibilmente il metodo readAsArrayBuffer() dell'API FileReader. Ma, siccome l'obiettivo di questo script è di fuonzionare con dei dati  stringifiabli, si è usato il metodo sendAsBinary() assieme al metodo readAsBinaryString() delle API FileReader. Per questo, lo script sopra funziona sono quando si stanno gestendo file di piccole dimensioni. Se non si intende caricare del contenuto binario, considerare anche l'utilizzo delle API FormData.
+ +

Usare oggetti FormData

+ +

Il costruttore FormData permette di compliare una serie di coppie chiave/valore da inviare utilizzando una XMLHttpRequest. Si utilizza principalmente per inviare dati in una form, ma può essere usato indipendentemente dalle form per inviare dei dati con chiavi. I dati trasmessi sono gli stessi del formato utilizzato dal metodo submit() che le form usano per inviare i dati se il tipo encoding indicato è "multipart/form-data". Gli oggetti FormData possono essere utilizzati in uno svariato numero possibile con una XMLHttpRequest. Per esempi o speigazioni di come utilizzare una FormData con XMLHttpRequest si veda la pagina Usare l'oggetto FormData. Per fini didattici di seguito una traduzione dell'esempio precedente modificato per accettare l'API delle FormData. Si noti la brevità del codice.

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script type="text/javascript">
+"use strict";
+
+function ajaxSuccess () {
+  alert(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action, true);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +
Nota: Come si è detto,gli oggetti {{domxref("FormData")}} non sono stringifiabli. Se si desidera porre in stringa dei dati inviati, utilizzare il precedente esempio in AJAX puro. Si noti che ci sono degli elementi file nel campo {{ HTMLElement("input") }}, quando si invia una form attraverso l'API FormData API non è necessario utilizzare le API FileReader: i file sono automaticamente caricati.
+ +

Get last modified date

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

Do something when last modified date changes

+ +

Let's create these two functions:

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

Test:

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

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

+ +

Cross-site XMLHttpRequest

+ +

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

+ +

Bypassing the cache

+ +

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

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

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

+ +

You can automatically adjust URLs using the following code:

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

Security

+ +

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

+ +

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

+ +

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

+ +

XMLHttpRequests being stopped

+ +

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

+ +

Using XMLHttpRequest from JavaScript modules / XPCOM components

+ +

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

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

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

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

See also

+ +
    +
  1. MDN AJAX introduction
    2. +
  2. HTTP access control
    3. +
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. +
  4. XMLHttpRequest - REST and the Rich User Experience
    5. +
  5. Microsoft documentation
    6. +
  6. Apple developers' reference
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest Object: W3C Specification
    9. +
  9. Web Progress Events specification
    10. +
  10. +
diff --git a/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html new file mode 100644 index 0000000000..bb54418a41 --- /dev/null +++ b/files/it/web/api/xmlhttprequest/xmlhttprequest/index.html @@ -0,0 +1,50 @@ +--- +title: XMLHttpRequest() +slug: Web/API/XMLHttpRequest/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/XMLHttpRequest +--- +
{{draft}}{{APIRef('XMLHttpRequest')}}
+ +

Il costruttore XMLHttpRequest() crea una nuova {{domxref("XMLHttpRequest")}}.

+ +

Per ulteriori dettagli sull'utilizzo di XMLHttpRequest, si veda Come usare XMLHttpRequest.

+ +

Sintassi

+ +
constrichiesta = new XMLHttpRequest();
+
+ +

Parametri

+ +

Nessuno.

+ +

Valore di ritorno

+ +

Un nuovo oggetto {{domxref("XMLHttpRequest")}}. Prima di chiamare {{domxref("XMLHttpRequest.send", "send()")}}, che invia la richiesta al server, l'oggetto va predisposto inizializzandolo, chiamando almeno {{domxref("XMLHttpRequest.open", "open()")}}.

+ +

Sintassi non-standard di Firefox

+ +

Firefox 16 ha aggiunto al costruttore un parametro non-standard che permette di abilitare la modalità anonima (si veda {{Bug("692677")}}). Assegnare il valore true alla flag mozAnon equivale all'atto pratico al costruttore AnonXMLHttpRequest() descritto nelle versioni precedenti delle specifiche di XMLHttpRequest.

+ +
constrichiesta = new XMLHttpRequest(dizParametri);
+ +

Parametri (non-standard)

+ +
+
objParameters {{gecko_minversion_inline("16.0")}}
+
Sono disponibili due flag: +
+
mozAnon
+
Booleano: assegnando true a questa flag il browser non esporrà né l'{{Glossary("origine")}} né le credenziali dell'utente durante il recupero delle risorse. Ciò significa soprattutto che non verrà inviato alcun {{Glossary("Cookie", "cookie")}} a meno di non aggiungerlo esplicitamente attraverso setRequestHeader.
+
mozSystem
+
Booleano: assegnando true a questa flag vengono permesse connessioni inter-sito senza il consenso del server di destinazione dato attraverso {{Glossary("CORS")}}. Richiede anche mozAnon: true, ovvero non si possono inviare cookie od altre credenziali dell'utente usando questo metodo. Questa flag funziona solo in app con privilegi, cioé sottoposte a riesame ({{Bug("692677")}}); non funziona su qualsivoglia pagine caricate da Firefox.
+
+
+
+ +

Voci correlate

+ + diff --git a/files/it/web/css/-moz-border-bottom-colors/index.html b/files/it/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..ea9b59f24a --- /dev/null +++ b/files/it/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,89 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

 

+ +

Nelle applicazioni di Mozilla come Firefox, la  proprietà di CSS -moz-border-bottom-colors imposta una lista di colori per il bordo inferiore.

+ +
/* Single <color> value */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Multiple <color> values */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Global values */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+
+ +

Quando un elemento ha un margine che è più grande di un singolo pixel CSS, tutta la linea dei pixel assume il colore accanto specificato in questa proprietà, dall'esterno verso l'interno.Questo elimina il bisogno di box annidati.Se il margine è più largo del numero dei colori specificati, la rimanente parte del margine è del colore specificato più interno. 

+ +

{{cssinfo}}

+ +

It does not apply

+ +
    +
  1. if {{Cssxref("border-style")}} is dashed or dotted.
    2. +
  2. to tables with border-collapse: collapse.
    3. +
+ +

Sintassi

+ +

Valori

+ +

Accetta una lista di colori separati dallo spazio.

+ +
+
<color>
+
+

Specifica il colore di una linea di pixel del margine inferiore. Il trasparente è valido.Vedi i valori {{cssxref("<color>")}} per le unità possibili.

+
+
none
+
Di default, nessun colore è applicato o è usato {{cssxref("border-color")}}, se specificato.
+
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempio

+ +
<div id="example">Example</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Specificazioni

+ +

QUesta proprietà non è parte di nessun specificazione.

+ +

Compatibilità dei browser

+ + + +

{{Compat("css.properties.-moz-border-bottom-colors")}}

+ +

See also

+ + diff --git a/files/it/web/css/-moz-font-language-override/index.html b/files/it/web/css/-moz-font-language-override/index.html new file mode 100644 index 0000000000..981b6e4d3b --- /dev/null +++ b/files/it/web/css/-moz-font-language-override/index.html @@ -0,0 +1,6 @@ +--- +title: '-moz-font-language-override' +slug: Web/CSS/-moz-font-language-override +translation_of: Web/CSS/font-language-override +--- +

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/it/web/css/-webkit-overflow-scrolling/index.html b/files/it/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..0c74ee6850 --- /dev/null +++ b/files/it/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,52 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - Safari + - WebKit +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La proprietà CSS -webkit-overflow-scrolling controlla se i dispositivi touch debbano usare o meno il momentum scrolling su di un dato elemento.

+ +

{{cssinfo}}

+ +

Parametri

+ +
+
auto
+
Usa lo scroll "regolare", dove il contenuto cessa immediatamente di scorrere nel momento in cui il dito viene sollevato dal touchscreen.
+
touch
+
Usa il momentum scrolling, dove il contenuto continua a scorrere per un pò dopo che la gesture di scroll è completata ed il dito è sollevato dal touchscreen.
+ La velocità e la durata dello scorrimento è direttamente proporzionale a quanto la gesture di scroll è vigorosa.
+ Inoltre viene creato un nuovo stacking context.
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempi

+ +
-webkit-overflow-scrolling: touch; /* Lo scorrimento continua per un pò */
+
+-webkit-overflow-scrolling: auto; /* Lo scorrimento si blocca immediatamente */
+
+ +

Specifiche

+ +

Non è parte di nessuna specifica.
+ Apple ne ha una descrizione nella reference CSS di Safari.

+ +

Compatibilità browser

+ + + +

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/css/@document/index.html b/files/it/web/css/@document/index.html new file mode 100644 index 0000000000..deea20d4cc --- /dev/null +++ b/files/it/web/css/@document/index.html @@ -0,0 +1,47 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - CSS + - CSS At-rule + - Reference +translation_of: Web/CSS/@document +--- +

{{ CSSRef() }} {{ SeeCompatTable() }}

+ +

Sommario

+ +

La regola @-moz-document è una at-rule che restringe il campo di funzionamento, delle regole al suo interno, a degli specifici URL. Il suo utilizzo risulta importante quando si vuole creare un solo file CSS per molte pagine web o si vuole modificare il CSS di base del FireFox.

+ +

Sintassi

+ +
@document url|url-prefix|domain(URL){ regole }
+ +

Esempi

+ +

Puoi usarlo nel file userContent.css:

+ +
@document url(http://www.w3.org/),
+               url-prefix(http://www.w3.org/Style/),
+               domain(mozilla.org)
+{
+  /* le regole CSS quì dentro verranno applicate a:
+     + La pagina "http://www.w3.org/".
+     + Tutte le pagine che cominciano per "http://www.w3.org/Style/"
+     + Tutte le pagine con dominio uguale a "mozilla.org" o che finisce con
+       ".mozilla.org"
+   */
+
+  /* esempio di codice che si applicherebbe a tali pagine */
+  body { color: purple; background: yellow; }
+}
+ +

Specifiche

+ + + +

Compatibilità Browser

+ +

Disponibile da Mozilla 1.8 / Firefox 1.5.

diff --git a/files/it/web/css/_colon_-moz-first-node/index.html b/files/it/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..9336079308 --- /dev/null +++ b/files/it/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,46 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-first-node' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-first-node applica le sue proprietà a tutti gli elementi che risultano essere "nodi primogeniti" di altri elementi. Differisce dal :first-child in quanto non valuta come primogeniti gli elementi che presentano del testo davanti a loro (non spazi vuoti).

+ +

Sintassi

+ +
elemento:-moz-first-node {proprietà di stile }
+
+ +

Esempi

+ +
span:-moz-first-node{
+    background-color: lime;
+}
+
+ +

...applicato a...

+ +
<div>
+  <span>Testo dello Span</span>
+  <span>Testo dello Span</span>
+</div>
+<div>
+  lettere<span>Testo dello Span</span>
+  <span>Testo dello Span</span>
+</div>
+
+ +

...risultato con :-moz-first-node...

+ +

Immagine:fchild1.jpg

+ +

...e con il :first-child...

+ +

Immagine:fchild2.jpg

diff --git a/files/it/web/css/_colon_-moz-last-node/index.html b/files/it/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..d064110bcc --- /dev/null +++ b/files/it/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,46 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-last-node applica le sue proprietà a tutti gli elementi che risultano essere "ultimi nodi" di altri elementi. Differisce dal :last-child in quanto non valuta come ultimi gli elementi che presentano del testo dopo di loro (non spazi vuoti).

+ +

Sintassi

+ +
elemento:-moz-last-node {proprietà di stile }
+
+ +

Esempi

+ +
span:-moz-last-node{
+    background-color: lime;
+}
+
+ +

...applicato a...

+ +
<div>
+  <span>Testo dello Span</span>
+  <span>Testo dello Span</span>
+</div>
+<div>
+  <span>Testo dello Span</span>
+  <span>Testo dello Span</span>lettere
+</div>
+
+ +

...risultato con :-moz-last-node...

+ +

Immagine:lchild1.jpg

+ +

...e con il :last-child...

+ +

Immagine:lchild2.jpg

diff --git a/files/it/web/css/_colon_-moz-list-bullet/index.html b/files/it/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..cc383ff3ef --- /dev/null +++ b/files/it/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,42 @@ +--- +title: ':-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Sommario

+ +

La pseudo-classe :-moz-list-bullet è usata per modificare il pallino degli elementi lista.

+ +

Sintassi

+ +
li::-moz-list-bullet {proprietà di stile }
+
+ +

Esempi

+ +
.liste li::-moz-list-bullet{ font-size:36px }
+
+ +

...applicato a...

+ +
<ul>
+<li>Number 1</li>
+<li>Number 2</li>
+<li>Number 3</li>
+</ul>
+<ul class="liste">
+<li>Number 1</li>
+<li>Number 2</li>
+<li>Number 3</li>
+</ul>
+
+ +

...risultato..

+ +

. Image:liug3.jpg

diff --git a/files/it/web/css/_colon_active/index.html b/files/it/web/css/_colon_active/index.html new file mode 100644 index 0000000000..450e457c4a --- /dev/null +++ b/files/it/web/css/_colon_active/index.html @@ -0,0 +1,128 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Layout + - Pseudo-class + - Web +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

La pseudo-classe CSS :active rappresenta un elemento (come un bottone) che viene attivato dall'utente. Quando si usa un mouse, l'«attivazione» inizia solitamente quando l'utente pressa il pulsante primario del mouse.

+ +
/* Seleziona qualsiasi <a> che viene attivato */
+a:active {
+  color: red;
+}
+ +

La pseudo-class :active è comunemente usata su elementi {{HTMLElement("a")}} e {{HTMLElement("button")}}. Altri obiettivi ordinari di questa pseudo-class sono gli elementi che contengono un elemento attivato, e gli elementi di form che vengono attivati attraverso le proprie {{HTMLElement("label")}} associate.

+ +

Gli stili definiti dalla pseudo-class :active saranno sovrascritti da qualsiasi pseudo-class successiva relativa a link ({{cssxref(":link")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) con almeno la stessa specificità. Per dare stile ai link in maniera appropriata, aggiungete la regola :active dopo tutte le altre regole relative ai link, così come definito dall'ordine LVHA: :link — :visited — :hover — :active.

+ +
Nota: Nei sistemi con mouse a più pulsanti, il CSS3 specifica che la pseudo-class :active deve essere applicata solo al pulsante primario; in un mouse per destrimani è generalmente il pulsante sinistro.
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempi

+ + + +

HTML

+ +
<p>Questo paragrafo contiene un link:
+  <a href="#">Questo link diventerà rosso quando viene cliccato.</a>
+  Il paragrafo avrà uno sfondo grigio mentre se se si clicca su di esso o sul link.
+</p>
+ +

CSS

+ +
a:link { color: blue; }          /* links non visitati  */
+a:visited { color: purple; }     /* links visitati  */
+a:hover { background: yellow; }  /* links su cui si passa sopra  */
+a:active { color: red; }         /* links attivi  */
+
+p:active { background: #eee; }   /* paragrafi attivi */
+ +

Risultato

+ +

{{EmbedLiveSample('Active_links')}}

+ +

Elementi form attivi

+ +

HTML

+ +
<form>
+  <label for="my-button">Mio bottone: </label>
+  <button id="my-button" type="button"> Prova a cliccare su di me o sulla mia label!</button>
+</form>
+ +

CSS

+ +
form:active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

Risultato

+ +

{{EmbedLiveSample('Active_form_elements')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Nessun Cambiamento.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Nessun Cambiamento.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Nessun Cambiamento.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

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

+
+ +

Vedi anche

+ + diff --git a/files/it/web/css/_colon_focus/index.html b/files/it/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..3540c46539 --- /dev/null +++ b/files/it/web/css/_colon_focus/index.html @@ -0,0 +1,117 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - ':focus' + - CSS + - Layout + - Pseudo-class + - Reference + - Riferimento + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

La pseudo-classe CSS :focus rappresenta un elemento (come l'input di un form) che ha ricevuto focus. Viene attivato di solito quando l'utente fa clic o tap su un elemento o lo seleziona con il tasto "tab" della tastiera.

+ +
/* Seleziona qualsiasi <input> che ha ricevuto focus */
+input:focus {
+  color: red;
+}
+ +
+

Nota: Questa pseudo-classe is applica solo all'elemento stesso che ha ricevuto il focus. Utilizzare {{CSSxRef(":focus-within")}} se si vuole selezionare un elemento che contiene un elemento che ha ricevuto il focus.

+
+ +

Sintassi

+ +
{{CSSSyntax}}
+ +

Esempio

+ +

HTML

+ +
<input class="red-input" value="I'll be red when focused."><br>
+<input class="blue-input" value="I'll be blue when focused.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

Risultato

+ +

{{EmbedLiveSample("Example")}}

+ +

Interessi per l'Accessibilità

+ +

Assicuratevi che l'indicatore visivo dello stato di focus possa essere visto da persone con problemi di vista. Ciò favorirà anche tutti coloro che utilizzano uno schermo in uno spazio molto illuminato (come all'aperto sotto il sole). Lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11 richiede che l'indicatore visivo del focus sia almeno di 3 ad 1.

+ + + +

:focus { outline: none; }

+ +

Non eliminate mai semplicemente l'outline del focus (indicatore visibile del focus) senza rimpiazzarlo con un outline che passi lo standard di contrasto non testuale WCAG 2.1 SC 1.4.11

+ + + +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}Definisce semantiche specifiche HTML.
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}Nessun cambiamento.
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}Nessun cambiamento.
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

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

+
+ +

Vedi anche

+ + diff --git a/files/it/web/css/_colon_hover/index.html b/files/it/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..3409a3d188 --- /dev/null +++ b/files/it/web/css/_colon_hover/index.html @@ -0,0 +1,99 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +translation_of: 'Web/CSS/:hover' +--- +
{{ CSSRef }}
+ +

La pseudo-classe CSS :hover corrisponde quando l'utente interagisce con un elemento utilizzando una periferica di puntamento, ma non necessariamente lo attiva. È generalmente innescato quando l'utente passa sopra un elemento con il cursore (puntatore del mouse).

+ +
/* Seleziona qualsiasi elemento <a> quando "hovered" */
+a:hover {
+  color: orange;
+}
+ +

Gli stili definiti dalla pseudo-classe :active saranno annullati da qualsiasi pseudo-classe relativa ai link susseguente ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) che abbia almeno uguale specificità. Per dare stile ai link nel modo appropriato, aggiungete la regola :hover dopo le regole :link e :visited ma prima di quella :active, così come definito nell'ordine LVHA: :link — :visited — :hover — :active.

+ +
Nota: La pseudo-classe :hover è problematica sugli schermo touch. A seconda del browser, la pseudo-classe :hover potrebbe non corrispondere mai, corrispondere solo per un attimo dopo il tocco di un elemento, oppure continuare a corrispondere anche dopo che l'utente ha finito di toccare e finché non tocca un altro elemento. Gli sviluppatori Web dovrebbero assicurarsi che il contenuto sia accessibile sui dispositivi con capacità di hovering limitate o inesistenti.
+ +

Sintassi

+ +
{{csssyntax}}
+ +

Esempi

+ +

Esempio base

+ +

HTML

+ +
<a href="#">Try hovering over this link.</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

Risultato

+ +

{{EmbedLiveSample("Basic_example")}}

+ + + +

Potete usare la pseudo-classe :hover per costruire una gallery di immagini con immagini a grandezza naturale che vengono mostrate solo quando il mouse si muove sopra un'anteprima. Provate questa demo per una possibile indicazione.

+ +
Nota: Per un effetto analogo, ma basato sulla pseudo-classe :checked (applicata a radiobox nascosti), vedete questa demo, presa dalla pagina di riferimento di :checked.
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificanCommentoFeedback
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-hover', ':hover') }}WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}Permete che :hover venga applicato ad ogni pseudo-elemento.CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}Definizione iniziale.
+ +

Compatibilità Browser

+ +
+ + +

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

+
+ +

Vedi anche

+ + diff --git a/files/it/web/css/_doublecolon_selection/index.html b/files/it/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..f6b264012b --- /dev/null +++ b/files/it/web/css/_doublecolon_selection/index.html @@ -0,0 +1,134 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}
+ +

Sommario

+ +

Lo pseudo-elemento CSS ::selection applica regole alla porzione di un documento che è stato evidenziato (es. con il mouse o con altri dispositivi di puntamento) dall'utente.

+ +

Solo un piccolo sottoinsieme di proprietà CSS possono essere usati in una regola che usa ::selection nel suo selettore: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("cursor")}}, {{cssxref("outline")}}, {{cssxref("text-decoration")}}, {{cssxref("text-emphasis-color")}} and {{cssxref("text-shadow")}}. Si noti, in particolare, che {{cssxref("background-image")}} viene ignorato, come qualsiasi altra proprietà.

+ +
+

text-shadow in ::selection è supportato da Chrome, Safari e Firefox 17+.

+
+ +
Benché presente nelle bozze dei selettori CSS di livello 3, questo pseudo-elemento fu rimosso durante la fase del Candidate Recommendation, in quanto il suo comportamento apparve come insufficiente, specialmente negli elementi nidificati, e la sua interoperabilità non venne raggiunta. (based on discussion in the W3C Style mailing list).
+
+Lo pseudo-elemento ::selection venne in seguito riaggiunto in Pseudo-Elements Level 4.
+ +

Esempio

+ +

Gecko è l'unico motore che richiede il prefisso. A causa del fatto che le regole di analisi CSS richiedono l'abbandono dell'intera regola quando si incontra uno pseudo-elemento non valido, devono essere scritte due regole distinte: ::-moz-selection, ::selection {...}. La regola verrà eliminata sui browser non-Gecko in quanto ::-moz-selection non è valido per questi ultimi.

+ +

HTML

+ +
<div>Ecco un po' di testo per testare la pseudo-classe di ::selection.</div>
+<p>Prova anche questo testo per <p></p>
+ +

CSS

+ +
/* rende giallo qualsiasi testo selezionato, su sfondo rosso  */
+::-moz-selection {
+  color: gold; background: red;
+}
+
+::selection {
+  color: gold; background: red;
+}
+
+/* rende bianco il testo selezionato, su sfondo nero */
+p::-moz-selection {
+  color: white;
+  background: black;
+}
+
+p::selection {
+  color: white;
+  background: black;
+}
+ +

Output

+ +

{{ EmbedLiveSample('Esempio', '', '', '', 'Web/CSS/::selection') }}

+ +

Specificazioni

+ + + + + + + + + + + + + + + + +
SpecificazioneStatusCommento
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition
+ +

Lo pseudo-elemento ::selection ma questo venne rimosso prima di poter raggiungere lo status di Recommendation. Venne in seguito riaggiunto come parte delle bozze degli pseudo-elementi di livello 4.

+ +

Compatibilità nei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base1{{CompatVersionUnknown}}1.0 {{property_prefix("-moz")}}[1]99.51.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Attualmente Gecko supporta solamente la versione prefissata ::-moz-selection. Sarà resa senza prefisso in {{bug(509958)}}.

diff --git a/files/it/web/css/attribute_selectors/index.html b/files/it/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..05617722a3 --- /dev/null +++ b/files/it/web/css/attribute_selectors/index.html @@ -0,0 +1,239 @@ +--- +title: Attribute selectors +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - Reference + - Selettori + - Selettori di attributo +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

Il selettore di attributo CSS corrisponde agli elementi in base alla presenza o al valore di un dato attributo.

+ +
/* Elemento <a> con un attributo title */
+a[title] {
+  color: purple;
+}
+
+/* Elemento <a> con un href uguale a "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Elemento <a> con un href contenente "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Elemento <a> con un href che finisce con ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Elemento <a> il cui attributo classe contiene la parola "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}
+ +

Sintassi

+ +
+
[attr]
+
Rappresenta elementi con un nome di attributo attr.
+
[attr=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è esattamente value.
+
[attr~=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è una lista di parole separate da spazi, una delle quali è esattamente value.
+
[attr|=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore può essere esattamente value o può iniziare con value immediatamente seguito da un trattino, - (U+002D). È spesso usato per corrispondenze di subcode di linguaggio.
+
[attr^=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è il prefisso (è preceduto da) di value.
+
[attr$=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore è il suffisso (è seguito da) di value.
+
[attr*=value]
+
Rappresenta elementi con un nome di attributo attr il cui valore contiene almeno una presenza di value all'interno della stringa.
+
[attr operator value i]
+
Aggiungere una i (o I) prima della parentesi di chiusura fa sì che il valore sia comparato senza distinzione tra maiuscole e minuscole (per caratteri entro il range ASCII).
+
[attr operator value s] {{Experimental_Inline}}
+
Aggiungere una s (o S) prima della parentesi di chiusura fa sì che il valore sia comparato con sensibilità alle maiuscole ( per caratteri entro il range ASCII).
+
+ +

Esempi

+ + + +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Link interni che iniziano con "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Link con "example" in qualsiasi punto dell'URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Link con "insensitive" in qualsiasi punto dell'URL,
+   a prescindere dalla capitalizzazione*/
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Link con "cAsE" in qualsiasi punto dell'URL,
+con precisa capitalizzazione */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Link che finiscono con ".org" */
+a[href$=".org"] {
+  color: red;
+}
+ +

HTML

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

Risultato

+ +

{{EmbedLiveSample("Links")}}

+ +

Linguaggi

+ +

CSS

+ +
/* Tutti i div con attributo `lang` sono bold. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Tutti i div senza un attributo `lang` sono italicized. */
+div:not([lang]) {
+  font-style: italic;
+}
+
+/* Tutti i div in Inglese US sono blu. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Tutti i div in Portoghese sono verdi. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Tutti i div in Cinese sono rossi, sia che siano
+   in cinese semplificato (zh-CN) o tradizionale (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Tutti i div con un
+   `data-lang` in Cinese tradizionale sono viola. */
+/* Nota: Gli attributi con trattino possono essere usati
+  senza virgolette */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

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

Risultati

+ +

{{EmbedLiveSample("Languages")}}

+ +

Liste ordinate HTML

+ +

La specifica HTML richiede che l'attributo {{htmlattrxref("type", "input")}} venga definito senza distinzione maiuscole-minuscole poiché esso è principalmente usato in elementi HTML {{HTMLElement("input")}}, provare ad usare selettori di attributo con l'attributo {{htmlattrxref("type", "ol")}} di un {{HTMLElement("ol", "ordered list")}} non funziona senza il modificatore case-sensitive.

+ +

CSS

+ +
/* I tipi di lista richiedono un modificatore sensibile alle maiuscole a causa di una stranezza nel modo in cui l'HTML gestisce l'attributo type. */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

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

Risultato

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}Aggiunge il modificatore per la selezione di valori ASCII case-sensitive e case-insensitive negli attributi.
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

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

+ +

Vedi anche

+ + diff --git a/files/it/web/css/background-attachment/index.html b/files/it/web/css/background-attachment/index.html new file mode 100644 index 0000000000..2f4615c65c --- /dev/null +++ b/files/it/web/css/background-attachment/index.html @@ -0,0 +1,135 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +translation_of: Web/CSS/background-attachment +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

Se è stata specificata una background-image, la proprietà background-attachment determina se l'immagine è fissa o può scorrere all'interno dell'elemento al quale è assegnata.

+ + + +

Sintassi

+ +
background-attachment: scroll | fixed | inherit
+
+ +

Valori

+ +
+
scroll 
+
Se scroll viene specificato, l'immagine di sfondo può scorrere all'interno dell'elemento al quale è assegnata
+
fixed 
+
Se fixed viene specificato, l'immagine di sfondo è fissa nell'elemento che la contiene
+
+ +

Esempi

+ +

Simple example

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Multiple background image support

+ +

This property supports multiple background images. You can specify a different <attachment> for each background, separated by commas. Each image is matched with the corresponding attachment type, from first specified to last.

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Multiple_background_image_support")}}

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Si veda anche

+ +

background, background-color, background-image, background-position, background-repeat

+ +
 
+ +

{{ languages( { "en": "en/CSS/background-attachment", "fr": "fr/CSS/background-attachment", "pl": "pl/CSS/background-attachment" } ) }}

diff --git a/files/it/web/css/background-color/index.html b/files/it/web/css/background-color/index.html new file mode 100644 index 0000000000..536eb0b3f1 --- /dev/null +++ b/files/it/web/css/background-color/index.html @@ -0,0 +1,86 @@ +--- +title: background-color +slug: Web/CSS/background-color +translation_of: Web/CSS/background-color +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background-color imposta il colore di sfondo di un elemento tramite un valore esadecimale, tramite un nome di colore valido in inglese, oppure tramite la parola chiave transparent o inherit.

+ + + +

Sintassi

+ +
background-color: color | transparent | inherit
+
+ +

Valori

+ +
+
color 
+
Il colore può essere specificato come valore RGB esadecimale, oppure utilizzando un nome di colore predefinito in inglese.
+
transparent 
+
Il valore iniziale di background-color è transparent, il che significa che l'elemento non ha un proprio colore, ma è trasparente.
+
+ +

Esempi

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Esempi","200","150")}}

+ + +

Specifiche

+ + + +

Si veda anche

+ +

background, background-attachment, background-image, background-position, background-repeat

+ +

{{ languages( { "de": "de/CSS/background-color", "en": "en/CSS/background-color", "es": "es/CSS/background-color", "fr": "fr/CSS/background-color", "ja": "ja/CSS/background-color", "pl": "pl/CSS/background-color" } ) }}

diff --git a/files/it/web/css/background-image/index.html b/files/it/web/css/background-image/index.html new file mode 100644 index 0000000000..f07e6d72f7 --- /dev/null +++ b/files/it/web/css/background-image/index.html @@ -0,0 +1,126 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS_1 + - CSS_2.1 + - CSS_3 +translation_of: Web/CSS/background-image +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background-image imposta l'immagine di sfondo di un elemento.

+ + + +

Sintassi

+ +
background-image:uri | none | inherit
+
+ +

Valori

+ +
+
uri 
+
L'indirizzo dell'immagine da utilizzare come sfondo
+
none 
+
Specifica che l'elemento non ha alcuna immagina di sfondo
+
+ +

Esempi

+ +

Note that the star image is partially transparent and is layered over the cat image.

+ +

HTML

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS

+ +
pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Esempi')}}

+ +

Note

+ +

Gli sviluppatori dovrebbero specificare la proprietà background-color, cioè un colore di sfondo che verrà mostrato se l'immagine non è disponibile. Le immagini di sfondo vengono mostrare sopra il colore di sfondo.

+ +

Specifiche

+ + + +

Browser Compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Vedi Anche

+ +

background

+ +

{{ languages( { "en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}

diff --git a/files/it/web/css/background-position/index.html b/files/it/web/css/background-position/index.html new file mode 100644 index 0000000000..2709f4f1b8 --- /dev/null +++ b/files/it/web/css/background-position/index.html @@ -0,0 +1,158 @@ +--- +title: background-position +slug: Web/CSS/background-position +translation_of: Web/CSS/background-position +--- +

 

+ +
+

Sommario

+ +
Edit section
+ +

background-position imposta la posizione iniziale dell'immagine di sfondo impostata.

+ + +
+ +
+

Sintassi

+ +
Edit section
+ +
background-position: [ <percentuale> | <lunghezza> | left | center | right  ]
+                     [ <percentuale> | <lunghezza> | top  | center | bottom ] ? ;
+
+ +
background-position: [ top | center | bottom ];
+
+ +
background-position: inherit;
+
+
+ +
+

Valori

+ +
Edit section
+ +
+
<percentuale>
+
Con un valore di '0% 0%', l'angolo in alto a sinistra dell'immagine è allineato con l'angolo in alto a sinistra dell'angolo del padding del box. Un valore di '100% 100%' posiziona l'angolo in basso a destra dell'immagine nell'angolo in basso a destra dell'area di padding del box. Con un valore, per esempio, di '14% 84%', l'angolo in alto a sinistra dell'immagine sarà al punto '14%; 84%' dell'area di padding del box.
+
<lunghezza>
+
Con un valore di '2cm 1cm', l'angolo in alto a sinistra dell'immagine si trova 2cm a destra e 1cm più in basso dell'angolo in alto a sinistra dell'area di padding del box.
+
top left e left top
+
Come '0% 0%'.
+
top, top center, e center top
+
Come '50% 0%'.
+
right top e top right
+
Come '100% 0%'.
+
left, left center, e center left
+
Come '0% 50%'.
+
center e center center
+
Come '50% 50%'.
+
right, right center, e center right
+
Come '100% 50%'.
+
bottom left e left bottom
+
Come '0% 100%'.
+
bottom, bottom center, e center bottom
+
Come '50% 100%'.
+
bottom right e right bottom
+
Come '100% 100%'.
+
+ +

Se viene specificato solo un valore, quello imposta la distanza orizzontale, e la posizione verticale si imposta a 50%. Al contrario, il primo valore specifica la posizione orizzontale. Sono possibili combinazioni di parole, lunghezze o percentuali, ma se si mischiano le parole con i valori, 'left' e 'right' potrebbero solo essere usati come primo valore (indicano una posizione orizzontale), mentre 'top' e 'bottom' solo per il secondo valore (indicano infatti una posizione verticale).

+
+ +
+

Esempi

+ +
Edit section
+ +
.exampleone {
+	background-image: url("logo.png");
+	background-position: top center;
+}
+
+.exampletwo {
+	background-image: url("logo.png");
+	background-position: 25% 75%;
+}
+
+.examplethree {
+	background-image: url("logo.png");
+	background-position: 2cm bottom;
+}
+
+.examplefour {
+	background-image: url("logo.png");
+	background-position: center 10%;
+}
+
+.examplefive {
+	background-image: url("logo.png");
+	background-position: 2cm 50%;
+}
+
+
+
+ +
+

Specifiche

+ +
Edit section
+ + +
+ +
+

Compatibilità tra browser

+ +
Edit section
+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+
+ +
+

Vedere anche

+ +
Edit section
+ +

background , background-attachment , background-color , background-image , background-position , background-repeat

+
+ +

 

diff --git a/files/it/web/css/background-repeat/index.html b/files/it/web/css/background-repeat/index.html new file mode 100644 index 0000000000..b8d0a25fd7 --- /dev/null +++ b/files/it/web/css/background-repeat/index.html @@ -0,0 +1,165 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +translation_of: Web/CSS/background-repeat +--- +

 

+ +
+

Sommario

+ +
Edit section
+ +

background-repeat specifica se e come lo sfondo deve essere ripetuto.

+ + +
+ +
+

Sintassi

+ +
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
+
+
+ +
+

Valori

+ +
Edit section
+ +
+
repeat
+
L'immagine viene ripetuta sia orizzontalmente che verticalmente
+
repeat-x
+
L'immagine viene ripetuta solo orizzontalmente
+
repeat-y
+
L'immagine viene ripetuta solo verticalmente
+
no-repeat
+
L'immagine non viene ripetuta: viene visualizzata una sola volta.
+
+ +

 

+
+

Esempi

+ +

HTML

+ +
<ol>
+    <li>no-repeat
+        <div class="one">&nbsp;</div>
+    </li>
+    <li>repeat
+        <div class="two">&nbsp;</div>
+    </li>
+    <li>repeat-x
+        <div class="three">&nbsp;</div>
+    </li>
+    <li>repeat-y
+        <div class="four">&nbsp;</div>
+    </li>
+    <li>repeat-x, repeat-y (multiple images)
+        <div class="five">&nbsp;</div>
+    </li>
+</ol>
+ +

CSS

+ +
/* Shared for all DIVS in example */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* background repeat CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Multiple images */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}
+ +

Result

+ +

In this example, each list item is matched with a different value of background-repeat.

+ +

{{EmbedLiveSample('Esempi', 240, 360)}}

+
+

Specifiche

+ +
Edit section
+ + +
+ +
+

Compatibilità tra browser

+ + +
Edit section
+ + + + + + + + + + + + + + + + + + + + + + + + +
Browser +

Versione più vecchia

+
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+
+ +
+

Vedere anche

+ + +
Edit section
+ +

background , background-attachment , background-color , background-image , background-position , background-repeat

+
+ +

 

diff --git a/files/it/web/css/background/index.html b/files/it/web/css/background/index.html new file mode 100644 index 0000000000..c76b5ad59b --- /dev/null +++ b/files/it/web/css/background/index.html @@ -0,0 +1,116 @@ +--- +title: background +slug: Web/CSS/background +translation_of: Web/CSS/background +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà background è una scorciatoia per impostare in un'unica riga i valori di altre proprietà inerenti allo sfondo. background può quindi essere utilizzata per impostare una o più tra le seguenti proprietà: background-attachment, background-color, background-image, background-position, background-repeat.

+ + + +

Sintassi

+ +
background: [background-color || background-image ||
+    background-repeat || background-attachment ||
+    background-position] | inherit]
+
+ +

Valori

+ +
+
background-color
+
si veda background-color.
+
background-image 
+
si veda background-image.
+
background-repeat 
+
si veda background-repeat.
+
background-attachment 
+
si veda background-attachment.
+
background-position 
+
si veda background-position.
+
+ +

Esempi

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Esempi")}}

+ +

Note

+ +

Data una dichiarazione valida, la proprietà background prima imposta le singole proprietà relative al background ai loro valori iniziali, poi assegna i valori esplicitamente indicati nella dichiarazione. Non occorre quindi definire un valore per ognuna delle singole proprietà, ma solo per quelle a cui si desidera assegnare un valore diverso da quello predefinito.

+ +

Specifiche

+ + + +

Compatibilità con i browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Si veda anche

+ +

background-attachment, background-color, background-image, background-position, background-repeat

+ +

Interwiki Language Links

+ +

 

+ +

{{ languages( { "de": "de/CSS/background", "en": "en/CSS/background", "es": "es/CSS/background", "fr": "fr/CSS/background", "ja": "ja/CSS/background", "ko": "ko/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background" } ) }}

diff --git a/files/it/web/css/border-bottom/index.html b/files/it/web/css/border-bottom/index.html new file mode 100644 index 0000000000..af2c2a213d --- /dev/null +++ b/files/it/web/css/border-bottom/index.html @@ -0,0 +1,99 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +translation_of: Web/CSS/border-bottom +--- +

 

+
+

Sommario

+

La proprietà border-bottom è una abbreviazione che imposta il valore di border-bottom-color , border-bottom-style , and border-bottom-width . These properties describe the bottom border of elements.

+ +
+
+

Sintassi

+ 
border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
+
+
+
+

Values

+
+
+ <border-width> 
+
+ Vedi border-bottom-width .
+
+ <border-style> 
+
+ Vedi border-bottom-style .
+
+ <border-color> 
+
+ Vedi border-bottom-color .
+
+
+
+

Esempi

+

Guarda gli esempi dal vivo

+ 
element {
+    border-bottom-width: 1px solid #000;
+}
+
+
+
+

Note

+

I tre valori della abbreviazione possono essere specificati in qualsiasi ordine, e uno o due di loro possono essere omessi.

+

Come per tutte le abbreviazioni, border-bottom imposta sempre il valore di tutte le proprietà che può impostare, anche se non sono specificate. Imposta quelle non specificate al loro valore predefinito. Questo vuol dire che:

+ 
  border-bottom-style: dotted;
+  border-bottom: thick green;
+

è attualmente uguale a:

+ 
  border-bottom-style: dotted;
+  border-bottom: none thick green;
+

e il valore di border-bottom-style dato prima di border-bottom viene ignorato.

+

Siccome il valore predefinito di border-bottom-style è none, se non si specifica la parte <border-style> del valore allora la proprietà non specifica nessun bordo.

+
+
+

Specifiche

+ +
+
+

Compatibilità tra browser

+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+
+
+

Vedere anche

+

border , border-bottom , border-bottom-width , border-bottom-style , border-bottom-color .

+
+

 

diff --git a/files/it/web/css/border-style/index.html b/files/it/web/css/border-style/index.html new file mode 100644 index 0000000000..6776c16da4 --- /dev/null +++ b/files/it/web/css/border-style/index.html @@ -0,0 +1,229 @@ +--- +title: border-style +slug: Web/CSS/border-style +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +
La proprietà border-style è una shorthand usata per modificare lo stile del bordo per tutti e quattro i lati dell'elemento.
+ +
+ +
/* Applicato a tutti 4 i lati */
+border-style: dashed;
+
+/* verticale | orrizzontale */
+border-style: dotted solid;
+
+/* superiore | orizzontale | inferiore */
+border-style: hidden double dashed;
+
+/* superiore | destra | inferiore | sinistra */
+border-style: none solid dotted dashed;
+
+/* Valori globali */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +
Nota: Il valore di default di border-style è none. Questo significa che se si cambia il {{ Cssxref("border-width") }} e il {{ Cssxref("border-color") }}, non si vedrà il bordo almeno che non si cambi questa proprietà in qualcosa che non sia none o hidden.
+ +

{{cssinfo}}

+ +

Sintassi

+ +

La proprietà border-style può essere specificata usando uno, due, tre o quattro valori.

+ + + +

Ogni valore è una keyword scelta dalla seguente lista.

+ +

Valori

+ +
+
<br-style>
+
E' una keyword che descrive lo stile del bordo inferiore (bottom). Può avere i seguenti valori: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
+ 		Come per la keyword hidden, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore none ha la priorità minore: significa che se è specificato qualche altro bordo, questo verrà mostrato.
hidden +
+ 		Come per la keyword hidden, nasconde il bordo. In questo caso, tranne se è impostata un' immagine di sfondo, il valore calcolato di {{ cssxref("border-width") }} sarà 0, anche se specificato altrimenti attraverso la proprietà. Nel caso di una cella in una tabella e border collapsing, il valore ha priorità maggiore: significa che se è specificato qualche altro bordo, questo non verrà mostrato.
dotted +
+ 		Mostra una serie di punti arrotondati. Lo spazio tra i punti non è definito nella specifica. Il raggio dei punti è calcolato metà di {{ cssxref("border-width") }}.
dashed +
+ 		Mostra una serie di di linee quadrettate. L'esatta dimensione e lunghezza dei segmenti non sono definiti nella specifica.
solid +
+ 		Mostra una singola dritta e solida linea.
double +
+ 		Mostra due linee dritte che vengono aggiunte all'ammontare di pixel definito come {{ cssxref("border-width") }} .
groove +
+ 		Mostra un bordo che porta ad un effetto intagliato. È l'opposto di ridge. 
ridge +
+ 		Mostra un bordo che porta ad un effetto 3D, come se venisse fuori dalla pagina. È l'opposto di  groove.
inset +
+ 		Mostra un bordo che fa apparire il box incassato.
+ E' l'opposto di outset. Quando viene applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come collapsed, questo valore si comporta come groove.
outset +
+ 		+

Mostra un bordo che fa apparire il box in 3D, in rilievo. E' l'opposto di inset. Quando applicato ad una cella in una tabella con {{ cssxref("border-collapse") }} come collapsed, questo valore si comporta come ridge.

+
+
+
+ +

Sintassi Formale

+ +
{{csssyntax}}
+ +

Esempi

+ +

Tabella con tutti i valori della proprietà

+ +

Ecco un esempio con tutti i valori che la proprietà può assumere

+ +

HTML

+ +
<table>
+    <tr>
+        <td class="b1">none</td>
+        <td class="b2">hidden</td>
+        <td class="b3">dotted</td>
+        <td class="b4">dashed</td>
+    </tr>
+    <tr>
+        <td class="b5">solid</td>
+        <td class="b6">double</td>
+        <td class="b7">groove</td>
+        <td class="b8">ridge</td>
+    </tr>
+    <tr>
+        <td class="b9">inset</td>
+        <td class="b10">outset</td>
+    </tr>
+</table>
+ +

CSS

+ +
/* Definizione stile tabella */
+table {
+    border-width: 3px;
+    background-color: #52E396;
+}
+tr, td {
+    padding: 2px;
+}
+
+/* border-style classi di esempio */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

Output

+ +

{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}

+ +

Specific​he

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}{{ Spec2('CSS3 Backgrounds') }}No change
{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}{{ Spec2('CSS2.1') }}Added hidden
{{ SpecName('CSS1', '#border-style', 'border-style') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-style")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/css/border/index.html b/files/it/web/css/border/index.html new file mode 100644 index 0000000000..2e903b8520 --- /dev/null +++ b/files/it/web/css/border/index.html @@ -0,0 +1,109 @@ +--- +title: border +slug: Web/CSS/border +translation_of: Web/CSS/border +--- +

 

+
+

Sommario

+
+ Edit section
+

La proprietà border è una abbreviazione per impostare in una sola volta i valori individuali di border. border può essere usata per impostare uno o più dei seguenti valori: border-width , border-style , border-color .

+ +
+
+

Sintassi

+
+ Edit section
+ 
border:  [ <border-width> || <border-style> || <border-color> ] | inherit
+
+
+
+

Valori

+
+ Edit section
+
+
+ border-width
+
+ Opzionale, se è assente viene usato il valore di default medium. Vedi border-width .
+
+ border-style 
+
+ Richiesto, se è assente viene usato il valore di default none. Vedi border-style .
+
+ border-color 
+
+ Opzionale, se è assente il valore di default è la proprietà color (colore di primo piano). Vedi border-color .
+
+
+
+

Esempi

+
+ Edit section
+

Guarda gli esempi dal vivo

+ 
element { border: dashed }          /* bordo tratteggiato di medio spessore, lo stesso colore del testo */
+element { border: dotted 1.5em }    /* bordo spesso 1.5em a punti, lo stesso colore del testo */
+element { border: solid red }       /* bordo rosso continuo di medio spessore */
+element { border: solid blue 10px } /* bordo continuo blu spesso 10px */
+
+
+
+

Note

+
+ Edit section
+

Mentre le proprietà border-width , border-style , e border-color accettano fino a quattro valori, questa proprietà accetta solo un valore per ciascuna.

+
+
+

Specifiche

+
+ Edit section
+ +
+
+

Compatibilità tra browser

+
+ Edit section
+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet Explorer4.0
Firefox1.0
Safari1.0
Opera3.5
+
+
+

Vedere anche

+
+ Edit section
+

border , border-width , border-style , border-color , margin , padding

+
+

 

diff --git a/files/it/web/css/cascade/index.html b/files/it/web/css/cascade/index.html new file mode 100644 index 0000000000..8ce2e4dafc --- /dev/null +++ b/files/it/web/css/cascade/index.html @@ -0,0 +1,149 @@ +--- +title: Cascade +slug: Web/CSS/Cascade +translation_of: Web/CSS/Cascade +--- +

{{ CSSRef() }}

+ +

The cascade is a fundamental feature of CSS. It is an algorithm defining how to combine properties values originating from different sources. It lies at the core of CSS as stressed by its name: Cascading Style Sheets.

+ +

What CSS entities participate in the cascade

+ +

Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like  {{ cssxref("@font-face")}} containing descriptors don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its font-family descriptor. If several @font-face with the same descriptor are defined, only the most adequate @font-face, as a whole, is considered.

+ +

If the declarations contained in most at-rules participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.

+ +

Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.

+ +

Origin of CSS declarations

+ +

The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:

+ + + +

Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.

+ +

Cascading order

+ +

The cascading algorithm determines how to find the value to apply for each property for each document element.

+ +
    +
  1. It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.
    2. +
  2. Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. The cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     OriginImportance
    1user agentnormal
    2user agent!important
    3usernormal
    4authornormal
    5CSS Animationssee below
    6author!important
    7user!important
    +
    3. +
  3. In case of equality, the specificity of a value is considered to choose one or the other.
    4. +
+ +

CSS animations and the cascade

+ +

CSS Animations, using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single @keyframes and never mixes several of them.

+ +

When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.

+ +

Also note that values within @keyframes at-rules overwrite all normal values but are overwritten by !important values.

+ +

Example

+ +

User-agent CSS:

+ +
li { margin-left: 10px }
+ +

Author CSS 1:

+ +
li { margin-left: 0 } /* This is a reset */
+ +

Author CSS 2:

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

User CSS:

+ +
.specific { margin-left: 1em }
+ +

HTML:

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

In this case, declarations inside li and .specific rules should apply. No declaration is marked as !important so the precedence order is author style sheets before user style sheets or user-agent stylesheet.

+ +

So three declarations are in competition:

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:

+ +
margin-left: 3px
+ +

Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.

+ +

See also

+ + diff --git a/files/it/web/css/color/index.html b/files/it/web/css/color/index.html new file mode 100644 index 0000000000..04a15799cc --- /dev/null +++ b/files/it/web/css/color/index.html @@ -0,0 +1,81 @@ +--- +title: color +slug: Web/CSS/color +translation_of: Web/CSS/color +--- +

 

+
+

Sommario

+
+ Edit section
+

La proprietà CSS color imposta il colore di primo piano del contenuto testuale di un elemento.

+ +
+
+

Sintassi

+
+ Edit section
+ 
color:  <color> | inherit
+
+
+

Valori

+
+ Edit section
+
+
+ <color>
+
+ La proprietà color accetta varie parole chiave e valori numerici. Vedi i valori di <color> per maggiori dettagli.
+
+
+
+

Esempi

+
+ Edit section
+

Tutti gli esempi seguenti rendono il testo rosso.

+ 
element { color: red }
+element { color: #f00 }
+element { color: #ff0000 }
+element { color: rgb(255,0,0) }
+element { color: rgb(100%, 0%, 0%) }
+element { color: hsl(0, 100%, 50%) }
+
+/* 50% translucent, support since Firefox 3 */
+element { color: rgba(255, 0, 0, 0.5) }
+element { color: hsla(0, 100%, 50%, 0.5) }
+
+
+

Specifiche

+
+ Edit section
+ +
+
+

Compatibilità tra browser

+
+
+ Edit section
+

La proprietà color è supportata molto bene da tutti i browser più comuni.
+ Una tabella di compatibilità tra browser è qui: <color> .

+
+
+

Vedere anche

+
+
+ Edit section
+ +
+

 

diff --git a/files/it/web/css/css_box_model/index.html b/files/it/web/css/css_box_model/index.html new file mode 100644 index 0000000000..65d01c1965 --- /dev/null +++ b/files/it/web/css/css_box_model/index.html @@ -0,0 +1,165 @@ +--- +title: CSS Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

CSS Box Model is a module of CSS that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model.

+ +

Reference

+ +

Properties

+ +

Properties controlling the flow of content in a box

+ +
+ +
+ +

Properties controlling the size of a box

+ +
+ +
+ +

Properties controlling the margins of a box

+ +
+ +
+ +

Properties controlling the paddings of a box

+ +
+ +
+ +

Other properties

+ +
+ +
+ +

Guides

+ +
+
Introduction to the CSS box model
+
Explains one of the fundamental concept of CSS: the box model. This model defines how CSS lays out elements, including their content, padding, border, and margin areas.
+
Mastering margin collapsing
+
Sometimes, two adjacent margins are collapsed into one. This article describes the rules that govern when and why this happens, and how to control it.
+
Visual formatting model
+
Explains the visual formatting model.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..6aa8f3ae9e --- /dev/null +++ b/files/it/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,68 @@ +--- +title: Introduzione al box model in CSS +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +tags: + - CSS + - CSS Box Model + - Guida +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +
Quando un browser presenta un documento HTML all'utente,  il motore del browser rappresenta ogni elemento del documento come un rettangolo, chiamato box, secondo lo standard del box model di CSS. Il codice CSS determina le dimensioni, la posizione e le proprietà (colore, background, spessore del bordo, ecc.) dei box.
+ +
 
+ +

Ogni box è composto da quattro parti (o aree), definite dai rispettivi limiti: il limite del contenuto, il limite del padding, il limite del bordo e il limite del margine.

+ +

CSS Box model

+ +

L'area del contenuto, circoscritta dal limite del contenuto, è dove si trova il contenuto vero e proprio dell'elemento, come testo, immagini o un video. Le sue dimensioni sono chiamate content width (o content-box width) e content height (o content-box height). Spesso ha un colore o una immagine di background.

+ +

Se la proprietà {{cssxref("box-sizing")}} è impostata su content-box ( valore di default), le dimensioni dell'area del contenuo si possono definire esplicitamente con le proprietà {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, e {{cssxref("max-height")}}.

+ +

L'area del padding, circoscritta dal limite del padding, estende l'area del contenuto per includere il padding dell'elemento. Le sue dimensioni sono chiamate padding-box width e padding-box height. Se l'area del contenuto ha un background, il background si estende all'area del padding.

+ +

lo spessore del padding è determinato tramite le proprietà {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, o usando la forma abbreviata {{cssxref("padding")}}.

+ +

L'area del bordo, circoscritta dal limite del bordo, estende l'area del padding per includere i bordi dell'elemento. Le sue dimensioni sono chiamate border-box width e border-box height.

+ +

Lo spessore dei bordi è determinato tramite la proprietà {{cssxref("border-width")}}, o usando la forma abbreviata {{cssxref("border")}}. Se la proprietà {{cssxref("box-sizing")}} è impostata su  border-box, le dimensioni dell'area del bordo possono essere definite esplicitamente usando le proprietà {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, e {{cssxref("max-height")}}.

+ +

L'area del margine, circoscritta dal limite del margine, estende l'area del bordo per includere uno spazio vuoto usato per separare l'elemento dagli elementi vicini. Le sue dimensioni sono chiamate margin-box width e margin-box height.

+ +

Le dimensioni dell'area del margine sono determinate tramite le proprietà {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}, o usando la forma abbreviata {{cssxref("margin")}}. Quando si verifica un caso di margini che collassano (margin collapsing), l'area del margine non è più chiaramente definita, perché i margini di due differenti box vengono condivisi.

+ +

Infine, si noti come negli elementi non-replaced (ossia elementi che hanno il contenuto inserito nell'HTML tra l'etichetta di apertura e chiusura dell'elemento, come <span>contenuto</span> anziché derivare il contenuto da una fonte esterna come src per le etichette <img>)  e con disposizione in linea (inline), la quantità di spazio che occupano (il loro contributo all'altezza della linea) è determinato dalla proprietà {{cssxref('line-height')}}, anche se i bordi e il padding sono comunque mostrati attorno al contenuto.

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificheStatoCommenti
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Descrizione più precisa, ma nessun cambio a livello pratico.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definizione iniziale.
+ +

Vedi anche

+ + diff --git a/files/it/web/css/css_flexible_box_layout/index.html b/files/it/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..fadc582c86 --- /dev/null +++ b/files/it/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +

{{CSSRef}}

+ +

CSS Flexible is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS flexible boxes
+
Step-by-step tutorial about how to build layouts using this feature.
+
Using flexbox to lay out Web applications
+
Tutorial explaining how to use flexbox in the specific context of Web applications.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}
+ 11.0		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

 

diff --git a/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html new file mode 100644 index 0000000000..9acef6a218 --- /dev/null +++ b/files/it/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html @@ -0,0 +1,394 @@ +--- +title: Using CSS flexible boxes +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

Il CSS3 Flexible Box, o flexbox, è un layout mode che prevede la disposizione di elementi su una pagina in modo tale che questi si comportino prevedibilmente quando la pagina di layout cambia di risoluzione o quando si cambia schermo . Per molti utilizzi, il flexible box model fornisce un miglioramento rispetto al block model in quanto non utilizza i floats, né il collasso dei margini nel contenuto flex con margini del proprio contenuto.

+ +

Molti designers troveranno il flexbox model facile da usare. Gli elementi figli in flexbox possono essere disposti in qualsiasi direzione e possono avere dimensioni flessibili per adattarsi allo spazio dello schermo. Il posizionamento degli elementi figli è quindi molto più facile, e i layout complessi possono essere realizzati più semplicemente e con codice più pulito, anche l'ordine di visualizzazione degli elementi è indipendente dal loro ordine nel codice sorgente. Questa indipendenza colpisce solo la resa visiva, non stravolgendo l'ordine del codice.

+ +
Nota: Anche CSS Flexible Boxes Layout specification è in fase Last Call Working Draft stage (vedi anche Latest Editor draft), non tutti i borwser hanno implementato completamente le funzioni del Flexbox. Detto questo, vi è un buon supporto su tutta la linea per flexbox. Guarda la tabella delle compatibilità su ogni proprietà per aggiornarti sullo stato di compatibilità.
+ +

Caratteristiche del flexible boxes

+ +

L'aspetto caratterizzante del layout flex è la possibilità di modificare larghezza e/o altezza  riempiendo bene lo spazio creato dai vari schermi di dispositivi. Un contenitore flessibile estende gli elementi per riempire lo spazio disponibile, o restringe per evitare overflow.

+ +

L'algoritmo del flexbox layout è direction-agnostic rispetto al block layout, che è vertically-based, o all'inline layout, che è horizontally-based. Mentre il block layout funziona bene per le pagine, non è sufficientemente adatto per sostenere componenti applicativi che devono modificare l'orientamento, ridimensionamento, larghezza, o restringimento causati dai diversi user agent, cambi da orizzontale a verticale, e così via. Il layout flexbox è più appropriato per alcuni utilizzi, come layouts su piccola scala, mentre il Grid layout (in fase di svliluppo)  è destinato ai layout di scala più ampia. Entrambi fanno parte di uno sforzo più ampio del CSS Working Group per fornire una maggiore interoperabilità delle applicazioni web con diversi user agents, diverse modalità di scrittura, e altre richieste di flessibilità.

+ +

Vocabolario del flexible boxes

+ +

Mentre la discussione di flexible boxes è libera da termini come assi horizontal/inline e  assi vertical/block , richiede comunque una nuova terminologia propria per descrivere il modello. Si consideri il seguente schema al momento di rivedere gli elementi di vocabolario qui sotto. Essa mostra un contenitore flessibile che ha un flex-direction di row, il che significa che gli elementi flessibili susseguono orizzontalmente attraverso l'asse principale secondo la modalità di scrittura stabilita, la direzione in cui il testo dell'elemento scorre, in questo caso da sinistra a destra.

+ +

flex_terms.png

+ +
+
Flex container
+
L'elemento principale in cui gli elementi di flessione sono contenuti. Un contenitore flex viene definito utilizzando i valori di flex o inline-flex della proprietà {{Cssxref ("visualizzazione")}} .
+
Flex item
+
+

Ciascun figlio di un contenitore flessibile diventa un elemento flessibile. Del testo direttamente contenuto in un contenitore flessibile è avvolto in un elemento flex anonimo.

+
+
Axes
+
+

Ogni flexible box di layout flessibile segue due assi. L'asse principale è l'asse lungo il quale gli elementi flessibili susseguono. L'asse trasversale è l'asse perpendicolare all'asse principale.

+ +
    +
  • Il flex-direction proprietà che stabilisce l'asse principale.
    • +
  • Il justify-content proprietà definisce come gli elementi flessibili siano disposti lungo l'asse principale sulla riga corrente.
    • +
  • La align-items proprietà che definisce di default per come i flex items sono disposti lungo l'asse trasversale sulla riga corrente.
    • +
  • La align-self proprietà che definisce come un singolo elemento flessibile sia allineato sull'asse principale, è sostituisce il valore predefinito da align-items.
    • +
+
+
Directions
+
+

La main start/main end e cross start/cross end lati del contenitore flex descrivono l'origine e la fine del flusso degli elementi flessibili. Seguono l'asse principale e l'asse trasversale del contenitore flex nel vettore stabilito dalla writing-mode (da sinistra a destra, da destra a sinistra, ecc).

+ +
    +
  • La order proprietà che assegna elementi a gruppi ordinati e determina quali elementi appaiono per primi.
    • +
  • La flex-flow proprietà shorthands la flex-direction e flex-wrap proprietà per layout the flex items.
    • +
+
+
Lines
+
+

Gli elementi Flex possono essere disposti su una singola linea o più linee in base alla proprietà flex-wrap, che controlla la direzione dell'asse trasversale e la direzione in cui le nuove righe sono ravvicinate.

+
+
Dimensions
+
+

gli elementi di height e width sono main size e cross size, che seguono rispettivamente l'asse principale e l'asse trasversale del contenitore flex.

+ + +
+
+ +

Scegliere un flexible box

+ +

Per scegliere un CSS da usare per assegnare uno stile agli elementi, imposta la proprietà display e prova:

+ +
display : flex
+ +

o

+ +
display : inline-flex
+ +

In questo modo definisce gli elementi come un contenitore flessibile e i figli come elementi flessibili. Il valore flex rende il contenitore flex un block-level element. IL valore inline-flex rende il contenitore flex come inline-level element.

+ +
Nota: Per il prefix tag, aggiungerlo sulla proprietà di visualizzazione, non sul selettore display. Per esempio, display : -webkit-flex.
+ +

Considerazione elementi flessibili

+ +

Il testo contenuto all'interno di un contenitore flessibile fa parte automaticamente di un elemento flex anonimo . Tuttavia, un elemento flex anonimo che contiene solo spazi vuoti non è considerato, come se fosse display: none.

+ +

Figli posizionati in modo assoluto di un contenitore flex sono posizionati in modo che la loro posizione iniziale sia determinata in riferimento al principale start content-box del loro contenitore flessibile.

+ +

Attualmente, a causa di un problema noto, specificando visibility: collapse su un elemento flessibile, questo viene visto come display: none, invece si ha il comportamento previsto con visibility: hidden. La soluzione prevista, fino a quando il problema non verrà risolto, è quello di usare visibility:hidden per gli elementi flessibili che dovrebbero comportarsi come visibility:collapse. Per ulteriori informazioni, vedi {{bug(783470)}}.

+ +

I margini di elementi flessibili non collassano. Usando i margini auto assorbono spazio extra nella direzione verticale o orizzontale e può essere utilizzato per l'allineamento o per separare gli elementi flessibili adiacenti. Vedi Aligning with 'auto' margins nel W3C Flexible Box Layout Model specification per maggiori dettagli.

+ +

To ensure a reasonable default minimum size for flex items, use min-width:auto and/or min-height:auto. For flex items, the auto attribute value calculates the minimum width/height of the item to be no less than the width/height of its content, guaranteeing that the item is rendered large enough to hold the content. See {{cssxref("min-width")}} and {{cssxref("min-height")}} for more details.

+ +

Nella proprietà di allineamento del Flexbox basta "true" per centrare, a differenza degli altri metodi CSS. Ciò significa che gli elementi flessibili rimarranno centrati, anche nel caso di overflow nel contenuto flessibile. Questo a volte può essere un problema, tuttavia, se l'overflow oltre il bordo superiore, o oltre il bordo sinistro (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), dove non si può scorrere in quell'area, anche se lì ci sono contenuti! In una futura relase, la proprietà di allinneamento sarà estesa un'opzione "safe". Per ora, se questo è un problema, si possono invece utilizzare i margini per ottenere la centratura, as they'll respond in a "safe" way and stop centering if they overflow. Invece di utilizzare align- properties, basta inserire auto margins sugli elementi flessibili che si desidera centrare. Invece della  justify- properties, inserire auto margins sui bordi esterni del primo e ultimo elemento flessibile all'interno del container flessibile. L' auto margins "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. Però, se si sta cercando di sostituire justify-content con margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

+ +

Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.

+ +

Flexible box properties

+ +

Proprietà non influenzate da flexible boxes

+ +

Perché il flexible boxes usa un diverso algoritmo di layout, alcune proprietà non sono sensate su un contenitore flessibile:

+ + + +

Esempi

+ +

Esempi base flex

+ +

Questo esempio di base mostra come applicare la "flessibilità" per un elemento e come gli elementi fratelli si comportano in uno stato flessibile.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex > div:nth-child(1){ background : #009246; }
+   .flex > div:nth-child(2){ background : #F1F2F1; }
+   .flex > div:nth-child(3){ background : #CE2B37; }
+
+   .flex > div:hover
+   {
+        width: 200px;
+   }
+
+   </style>
+
+ </head>
+ <body>
+  <p>Flexbox nuovo</p>
+  <div class="flex">
+    <div>uno</div>
+    <div>due</div>
+    <div>tre</div>
+  </div>
+ </body>
+</html>
+ +

Holy Grail Layout example

+ +

Questo esempio dimostra come FlexBox fornisce la possibilità di modificare dinamicamente il layout per diverse risoluzioni dello schermo. Il seguente diagramma illustra la trasformazione.

+ +

HolyGrailLayout.png

+ +

Qui è illustrato il caso in cui il layout di pagina adatto ad una finestra del browser deve essere ottimizzato per una finestra di smartphone. Gli elementi non solo riducono le dimensioni, ma anche disposizione. Flexbox lo rende molto semplice.

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main > nav, #main > aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ </style>
+  </head>
+  <body>
+ <header>header</header>
+ <div id='main'>
+    <article>article</article>
+    <nav>nav</nav>
+    <aside>aside</aside>
+ </div>
+ <footer>footer</footer>
+  </body>
+</html>
+ +

Prova

+ +

Ci sono diversi siti per la sperimentazione del flexBox:

+ + + +

Cose da tenere a mente

+ +

The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

+ +

Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

+ +

cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

+ +

Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10[5]
+ 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoMobile("22.0")}}		 +

1.0{{property_prefix("-moz")}}[2]
+ 1.1

+ 		2.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
+
+ +

[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.

+ +

[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

+ +

[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

+ +

[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

+ +

[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

+ +

See also

+ + diff --git a/files/it/web/css/css_positioning/index.html b/files/it/web/css/css_positioning/index.html new file mode 100644 index 0000000000..61afa2e242 --- /dev/null +++ b/files/it/web/css/css_positioning/index.html @@ -0,0 +1,63 @@ +--- +title: CSS Positioned Layout +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +
{{CSSRef}}
+ +

CSS Positioned Layout is a module of CSS that defines how to position elements on the page.

+ +

Reference

+ +

CSS properties

+ +
+ +
+ +

Guides

+ +
+
Understanding CSS z-index
+
Presents the notion of stacking context and explains how z-ordering works, with several examples.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
diff --git a/files/it/web/css/css_positioning/understanding_z_index/index.html b/files/it/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..554652f1b8 --- /dev/null +++ b/files/it/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,51 @@ +--- +title: Understanding CSS z-index +slug: Web/CSS/CSS_Positioning/Understanding_z_index +tags: + - Advanced + - CSS + - Guide + - NeedsTranslation + - Reference + - TopicStub + - Understanding_CSS_z-index + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +
{{cssref}}
+ +

In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

+ +
+

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

+
+ +

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS z-index property.

+ +

Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

+ +

This article will try to explain those rules, with some simplification and several examples.

+ +
    +
  1. Stacking without the z-index property: The stacking rules that apply when z-index is not used.
    2. +
  2. Stacking with floated blocks: How floating elements are handled with stacking.
    3. +
  3. Using z-index: How to use z-index to change default stacking.
    4. +
  4. The stacking context: Notes on the stacking context.
    5. +
  5. Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
    6. +
  6. Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
    7. +
  7. Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
    8. +
+ +
+

Original Document Information

+ + + +

Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.

+
diff --git a/files/it/web/css/cursor/index.html b/files/it/web/css/cursor/index.html new file mode 100644 index 0000000000..5284daf295 --- /dev/null +++ b/files/it/web/css/cursor/index.html @@ -0,0 +1,388 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Property + - Layout + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

Summary

+ +

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("cursor")}}
+
+ +

Values

+ +
+
<uri>
+
A url(…) or a comma separated list url(…), url(…), …, pointing to an image file. More than one {{cssxref("<uri>")}} may be provided as fallback, in case some cursor image types are not supported. A non-URL fallback (one ore more of the other values) must be at the end of the fallback list. See Using URL values for the cursor property for more details.
+
<x> <y> {{ experimental_inline() }}
+
Optional x- and y-coordinates. Two unit-less non-negative numbers less than 32.
+
Keyword values
+
+

Move mouse over value for testing:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryCSS value Description
Generalauto The browser determines the cursor to display based on the current context.
+ E.g. equivalent to text when hovering text.
defaultdefault.gifDefault cursor, typically an arrow.
none No cursor is rendered.
Links & statuscontext-menucontext-menu.pngA context menu is available under the cursor.
+ Only IE 10 and up have implemented this on Windows: {{ Bug("258960") }}.
helphelp.gifIndicating help is available.
pointerpointer.gifE.g. used when hovering over links, typically a hand.
progressprogress.gifThe program is busy in the background but the user can still interact with the interface (unlike for wait).
waitwait.gifThe program is busy (sometimes an hourglass or a watch).
Selectioncellcell.gifIndicating that cells can be selected.
crosshaircrosshair.gifCross cursor, often used to indicate selection in a bitmap.
texttext.gifIndicating text can be selected, typically an I-beam.
vertical-textvertical-text.gifIndicating that vertical text can be selected, typically a sideways I-beam.
Drag and dropaliasalias.gifIndicating an alias or shortcut is to be created.
copycopy.gifIndicating that something can be copied.
movemove.gifThe hovered object may be moved.
no-dropno-drop.gifCursor showing that a drop is not allowed at the current location.
+ {{ bug("275173") }} on Windows, "no-drop is the same as not-allowed".
not-allowednot-allowed.gifCursor showing that something cannot be done.
Resize & scrollingall-scrollall-scroll.gifCursor showing that something can be scrolled in any direction (panned).
+ {{ bug("275174") }} on Windows, "all-scroll is the same as move".
col-resizecol-resize.gifThe item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
row-resizerow-resize.gifThe item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
n-resizeExample of a resize towards the top cursorSome edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gifIndicates a bidirectional resize cursor.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
Zoomzoom-inzoom-in.gif +

Indicates that something can be zoomed (magnified) in or out.

+
zoom-outzoom-out.gif
Grabgrabgrab.gif +

Indicates that something can be grabbed (dragged to be moved).

+
grabbinggrabbing.gif
+
+
+ +

Examples

+ +
.foo { cursor: crosshair; }
+
+/* use prefixed-value if "zoom-in" isn't supported */
+.bar { cursor: -webkit-zoom-in;  cursor: zoom-in; }
+
+/* standard cursor value as fallback for url() must be provided (doesn't work without) */
+.baz { cursor: url(hyper.cur), auto }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}{{ Spec2('CSS3 Basic UI') }}Addition of several keywords and the positioning syntax for url().
{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChrome (WebKit)Firefox (Gecko)Internet ExplorerOperaSafari
auto, crosshair, default, move, text, wait, help,
+ n-resize, e-resize, s-resize, w-resize,
+ ne-resize, nw-resize, se-resize, sw-resize		1.01.0 (1.0)4.07.01.2
pointer, progress1.01.0 (1.0 | 1.7)6.07.x1.2 | 3.0
url() - See Using URL values1.0 (523)1.5 (1.8);
+ OS X: 4.0 (2.0)		6.0{{ CompatUnknown }}3.0
Positioning syntax for url() values {{ experimental_inline() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatNo }}{{ CompatUnknown }}{{ CompatVersionUnknown() }}
not-allowed, no-drop, vertical-text, all-scroll,
+ col-resize, row-resize		1.0 (522)1.5 (1.8)6.010.63.0
alias, cell, copy,
+ ew-resize, ns-resize, nesw-resize, nwse-resize		1.0 (522)1.5 (1.8)10.010.63.0
context-menuOS X, Linux: 1.0 (522)OS X, Linux: 1.5 (1.8)10.010.63.0
none5.0 (533)3.0 (1.9)9.0{{ CompatUnknown }}5.0
inherit1.01.08.09.01.2
zoom-in, zoom-out1.0 (522) {{ property_prefix("-webkit-") }}1.0 (1.4) {{ property_prefix("-moz-") }}
+ 24.0		{{ CompatNo }}11.63.0 {{ property_prefix("-webkit-") }}
grab, grabbing1.0; Windows: 22.0 {{ property_prefix("-webkit-") }}1.5 (1.8) {{ property_prefix("-moz-") }}
+ 27.0		{{ CompatNo }}{{ CompatUnknown }}4.0 {{ property_prefix("-webkit-") }}
+ +

See also

+ + diff --git "a/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" "b/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" new file mode 100644 index 0000000000..772fa80e13 --- /dev/null +++ "b/files/it/web/css/cursor/usare_valori_url_per_la_propriet\303\240_cursor/index.html" @@ -0,0 +1,40 @@ +--- +title: Usare valori URL per la proprietà cursor +slug: Web/CSS/cursor/Usare_valori_URL_per_la_proprietà_cursor +tags: + - CSS + - CSS_2.1 + - Sviluppo_Web + - Tutte_le_categorie +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

 

+

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) supportano l'uso di valori URL per la proprietà cursor CSS2. che permette di specificare immagini arbitrarie da usare come puntatori del mouse..

+

Sintassi

+

La sintassi per questa proprietà è:

+
cursor: [<url>,]* keyword;
+
+

Queso significa che zero o più URL possono essere specificati (separati da virgola), seguiti necessariamente da una delle keyword definite nella specifica CSS, come auto o pointer.

+

Ad esempio, la scrittura seguente è corretta:

+
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+

Si cercherà anzitutto di caricare foo.cur. Se il file non esiste oppure non è valido per altre rafgioni, si prova con bar.gif, e se anche questa non può essere usata, la scelta cadrà su auto.

+

il supporto della sintassi CSS3 per i valori cursor è stata aggiunta in Gecko 1.8beta3; funziona perciò in Firefox 1.5. Permette di specificare le coordinate dell'hotspot del puntatore, che verrà spostato dai bordi dell'immagine del puntatore. Se nono sono specificate, le coordinate dell'hotspot vengono lette dal file stesso (nel caso di CUR o XBM) o vengono definite come l'angolo in alto a sinistra dell'immagine. Un esempio della sintassi CSS3 è:

+
cursor: url(foo.png) 4 12, auto;
+
+

Il primo numero è l'ascissa (X), il secondo la ordinata (Y). L'esempio definirà l'hotspot come il pixel (4,12) a partire dall'alto a sinistra (0,0).

+

Limitazioni

+

Sono usabili tutti i formati immagine supportati da Gecko. Questo significa che possono essere usate immagini BMP, JPG, CUR, GIF, eccetera. In ogni caso, ANI non è supportato. Ed anche se viene secificata una GIF animata, il puntatore non diventerà animato. Questa limitazione verrà rimossa nelle prossime release.

+


+ Gecko non pone limiti alle dimensioni dei cursori. In ogni caso, ci si deve limitare ad una grandezza di 32x32 per la massima compatibilià con sistemi operativi e piattaforme. In particolare, puntatori più grandi di tale dimensioni non funzioneranno su Windows 9x (95,98, ME).

+

Non è supportata la translucenza per i puntatori su versioni di Windows precedenti ad XP. QUesta è una limitazione del sistema operativo. La trasparenza funziona su tutte le piattaforme.

+

Solo le versioni per Windows, OS/2 e Linux (con l'uso di GTK+ 2.4 o maggiore) di Mozilla supportano i valori URL per i puntatori. Il supporto per altre piattaforme potrà essere aggiunto in versioni future (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

+

Compatibilità con altri browsers

+

Anche Microsoft Internet Explorer supporta valori URI per la proprietà cursor. In ogni caso sono supportati solo i formati ANI e CUR.

+

La sintassi per la proprietà cursor è inoltre meno restrittiva. Questo significa che sia la scrittura:

+
cursor: url(foo.cur);
+
+

che:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

funzioneranno in MSIE, ma non nei browser Gecko. Per mantenere la compatibilità con Gecko e in accordo con le specifiche CSS, inserire sempre per prima la lista degli URI ed usare esattamente un valore keyword al termine.

diff --git a/files/it/web/css/flex-shrink/index.html b/files/it/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..81cc7cfd51 --- /dev/null +++ b/files/it/web/css/flex-shrink/index.html @@ -0,0 +1,120 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Flex + - Proprietà CSS +translation_of: Web/CSS/flex-shrink +--- +
{{CSSRef}}
+ +
 
+ +

La proprietà CSS flex-shrink setta il fattore di restringimento di un elemento flessibile. Se la dimensione di tutti gli elementi flessibili è maggiore del loro contenitore flessibile: gli elementi si restringono per adattarsi secondo il valore impostato di flex-shrink.

+ +
{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
+ + + +

Sintassi

+ +
/* <number> valori */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valori globali */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ +

La proprietà flex-shrink è specificata come un singolo <number>.

+ +

Valori

+ +
+
<number>
+
Guarda {{cssxref("<number>")}}. Non sono ammessi valori negativi.
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempio

+ +

HTML

+ +
+
<p>La larghezza del contenuto è di 500 px; la base flessibile degli articoli flessibili è 120 px.</p>
+<p>A, B, C hanno il valore flex-shrink:1 invece D ed E hanno flex-shrink:2 </p>
+<p>La larghezza di D ed E è minore delle altre.</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+
+
+ +

Result

+ +

{{EmbedLiveSample('Example', 500, 300)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificheStatoCommento
{{SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink')}}{{Spec2('CSS3 Flexbox')}}Definizione iniziale
+ +

{{cssinfo}}

+ +

Compatibilità dei browser

+ + + +

{{Compat("css.properties.flex-shrink")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/css/flex/index.html b/files/it/web/css/flex/index.html new file mode 100644 index 0000000000..a59a226f90 --- /dev/null +++ b/files/it/web/css/flex/index.html @@ -0,0 +1,200 @@ +--- +title: flex +slug: Web/CSS/flex +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

Sommario

+ +

La proprietà flex di CSS è una proprietà shorthand usata per modificare le dimensioni di un elemento flessibile e riempire gli spazi. Gli elementi flex possono essere usati per distribuire lo spazio in modo proporzionale, al loro allargarsi o al loro restringersi, per evitare sovrapposizioni o eccedenze.

+ +

{{cssinfo}}

+ +

Vedi L'Uso di flexible boxes per altre proprietà e informazioni.

+ +

Sintassi

+ +
/* 0 0 auto */
+flex: none;
+
+/* Un valore, numero senza unità: flex-grow */
+flex: 2;
+
+/* Un valore, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Due valori: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Due valori: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Tre valori: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valori globali */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

Valori

+ +
+
<'flex-grow'>
+
Il valore flex-grow appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.
+
<'flex-shrink'>
+
Il valore flex-shrink appartiene all'elemento flex. Vedi {{cssxref("<number>")}} per ulteriori dettagli. I valori negativi sono considerati invalidi. Quando non si inseriscono valori, quello predefinito è 1.
+
<'flex-basis'>
+
Il valore flex-basis appartiene all'elemento flex. Qualsiasi valore valido per width e heigth è accettato. La dimensione con valore 0 deve avere un'unità, per evitare di essere interpretata come un valore di flessibilità. Quando non si inseriscono valori, quello predefinito è 0%.
+
none
+
Questo valore viene interpretato come: 0 0 auto.
+
+

Sintassi formale

+
+
+ +
{{csssyntax}}
+ +

Example

+ +
#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container > .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container > .raw-item {
+	width: 5rem;
+}
+
+ +
<div id="flex-container">
+    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+    <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ + + +

Risultato

+ +

{{EmbedLiveSample('Example','100%','60')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}} (behind a pref) [1] [2]
+ {{CompatGeckoDesktop("20.0")}} [2][3]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}} [3][4]
+ 11.0 [3][4]		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1] Per attivare il supporto FlexBox per Firefox 18 e 19, l'utente deve cambiare la about: config preferenza "layout.css.flexbox.enabled" true.

+ +

[2] Multi-line flexbox sono supportate da Firefox 28.

+ +

[3] Internet Explorer 10-11 (ma non 12+) ignora l'uso di calc()nella flex-basis parte della sintassi di flex. Questo può essere aggirato con semplici proprietà. Vedi Flexbug #8 per maggiori informazioni.

+ +

[4] In Internet Explorer 10-11 (ma non 12+), una dichiarazione flessibile con un valore senza unità nella sua parte flex-base è considerato sintatticamente valido e sarà quindi ignorata. Una soluzione è quella di includere sempre una unità nella parte flex-base del valore di shorthand di flex. Vedi Flexbug #4 per ulteriori informazioni.

+ +

Guarda altro

+ + diff --git a/files/it/web/css/font-size-adjust/index.html b/files/it/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..8933c16794 --- /dev/null +++ b/files/it/web/css/font-size-adjust/index.html @@ -0,0 +1,114 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +translation_of: Web/CSS/font-size-adjust +--- +

il font-size-adjust nelle proprieta CSS, dice come  dovrebbe essere impostatala dimensione del font  scelto, in base all' altezza dei caratteri minuscoli piuttosto che le lettere maiuscole.

+ +
/* usa uno specifico font size */
+font-size-adjust: none;
+
+/* usa un dimensione font che dimezza le lettere
+minuscole rispetto al font in uso*/
+font-size-adjust: 0.5;
+
+/* Valori globali */
+font-size-adjust: inherit;
+font-size-adjust: initial;
+font-size-adjust: unset;
+
+ +

La proprieta è utilissima per la leggibilita dei fonts, specialmente alle piccole dimensioni, che è determinata piu dalla dimensione dei caratteri minuscoli che quelli maiuscoli. La leggibilita puo diventare un problema  quando la prima scelta {{ Cssxref("font-family") }} non è disponibile e la sua sostituzione porta una significativa differenza nell' aspetto in rapportato (tra la dimensione caratteri minuscoli e la dimensione del font).

+ +

Per usare questa proprieta in modo che sia comparibile con i browsers che non supportano il font-size-adjust, questa viene definita come un numero che  sarà moltiplicato per  la proprieta {{ Cssxref("font-size") }}. Questo significa che il valore specificato per la proprieta, deve essere normalmente il rapporto dell' aspetto del primo font scelto. Per esempio  un foglio di stile  che specifica :

+ +
font-size: 14px;
+font-size-adjust: 0.5;
+
+ +

...sta specificando che le lettere minuscole del font dovrebbero essere alte 7 pixel (0.5 × 14px).

+ +

{{cssinfo}}

+ +

Sintassi

+ +

Valori

+ +
+
none
+
Sceglie  la dimensione del font in base solo alla proprieta {{ Cssxref("font-size") }}.
+
{{cssxref("<numero>")}}
+
+

Sceglie la dimensione del font in modo che il minuscolo ( come determinato dalla  x-height del font ) sia  un  numero  di volte il {{ Cssxref("font-size") }}.

+ +

Il numero specificato dovrebbe normalmente avere il rapporto di aspetto (rapporto di x-height con il font size) della prima scelta nel {{ Cssxref("font-family") }}. Questo vuol dire che il primo font scelto, quando disponibile, apparira della stessa dimensione nei browsers se supportano o no il font-size-adjust.

+ +

0 genera un testo di altezza zero (testo nascosto).

+
+
+ +

Sintassi Formale

+ +
{{csssyntax}}
+ +

Esempi

+ +

HTML

+ +
<p class="times">Questo testo usa il font Times(10px), che è difficile da leggere nelle piccole dimensioni.</p>
+<p class="verdana">Questo testo usa il font Verdana(10px), che a delle lettere minuscole relativamente grandi.</p>
+<p class="adjtimes">Questo è il Times 10px, ma adesso corretto allo stesso rapporto di aspetto del Verdana.</p>
+ +

CSS

+ +
.times {
+  font-family: Times, serif;
+  font-size: 10px;
+}
+
+.verdana {
+  font-family: Verdana, sans-serif;
+  font-size: 10px;
+}
+
+.adjtimes {
+  font-family: Times, sans-serif;
+  font-size-adjust: 0.58;
+  font-size: 10px;
+}
+
+ +

Risultati

+ +

{{ EmbedLiveSample('Examples', 500, 200) }}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}{{ Spec2('CSS3 Fonts') }}Initial definition
+ +
+

The CSS property font-size-adjust was initially defined in CSS 2, but dropped in CSS 2.1. It has been newly defined in CSS 3.

+
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-size-adjust")}}

+ +
{{CSSRef}}
diff --git a/files/it/web/css/guida_di_riferimento_ai_css/index.html b/files/it/web/css/guida_di_riferimento_ai_css/index.html new file mode 100644 index 0000000000..c97a962ac6 --- /dev/null +++ b/files/it/web/css/guida_di_riferimento_ai_css/index.html @@ -0,0 +1,96 @@ +--- +title: Guida di riferimento ai CSS +slug: Web/CSS/Guida_di_riferimento_ai_CSS +tags: + - CSS + - Overview + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

Usate questo riferimento CSS per consultare un indice alfabetico di tutte le proprietà CSS standard, le pseudo-classi, pseudo-elementi, i tipi di dati, e le at-rules. Potete anche visualizzare i concetti chiave del CSS e una lista dei selettori organizzati per tipo. È anche inclusa un breve prontuario su DOM-CSS / CSSOM.

+ +

Sintassi di regola base

+ +

Sintassi di una regola di stile

+ +
regola-stile ::=
+    lista-selettori {
+      lista-proprietà
+    }
+
+ +

... dove :

+ +
lista-selettori ::=
+    selettore[:pseudo-classe] [::pseudo-elemento]
+    [, lista-selettori]
+
+lista-proprietà ::=
+    [proprietà : valore] [; lista-proprietà]
+
+ +

Consultate la lista dei selettori, pseudo-classi, e pseudo-elementi sotto. La sintassi per ogni valore specificato dipende dal tipo di dato definito per ogni proprietà specificata.

+ +

Esempi di regole di stile

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Per un'introduzione a livello principiante della sintassi dei selettori, consultate la nostra guida ai Selettori CSS. Siate consapevoli che ogni errore di sintassi in una definizione di regola invalida l'intera regola. Le regole invalidate vengono ignorate dal browser. Prendete nota ceh la definizione di una regola CSS è interamente basata su stringhe di testo (ASCII), dove DOM-CSS / CSSOM (il sistema di gestione delle regole) è basato su oggetti.

+ +

Sintassi at-rules

+ +

Poiché la struttura delle At-rules varia ampiamente, per piacere consultate At-rule per trovare la sintassi della regola specifica che volete.

+ +

Selettori

+ + + +

Concetti

+ + + +

Estensioni di Mozilla

+ + + +

{{ languages( { "de": "de/CSS_Referenz", "es": "es/Referencia_CSS", "fr": "fr/CSS/R\u00e9f\u00e9rence_CSS", "it": "it/Guida_di_riferimento_ai_CSS", "ja": "ja/CSS_Reference", "ko": "ko/CSS_Reference", "pl": "pl/Dokumentacja_CSS", "zh-cn": "cn/CSS_\u53c2\u8003" } ) }}

diff --git a/files/it/web/css/index.html b/files/it/web/css/index.html new file mode 100644 index 0000000000..4a4f4efb55 --- /dev/null +++ b/files/it/web/css/index.html @@ -0,0 +1,107 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Design + - Stile +translation_of: Web/CSS +--- +

Il Cascading Style Sheets (CSS) è un linguaggio per fogli di stile utilizzato per descrivere la presentazione di un documento scritto in HTML o XML (inclusi vari linguaggi XML quali SVG o XHTML). Il CSS descrive come gli elementi dovrebbero apparire su schermo, su carta, nel parlato o in altri media.

+ +

Il CSS è uno dei linguaggi fondamentali dell'open Web ed è standardizzato nei browser web secondo la specifica W3C. Sviluppato a livelli, il CSS1 è ora obsoleto, il CSS2.1 è raccomandato, e CSS3, ora diviso in moduli più piccoli, sta progredendo sulla via della standardizzazione.

+ +
+ +
+ +
+
+

Documentazione ed esercitazioni su CSS

+ +
+
Concetti chiave del CSS
+
Descrive la sintassi del linguaggio e introduce a elementi fondamentali quali specificità ed ereditarietà, il modello a box ed il collasso dei margini, impilamento e contesti di formattazione dei blocchi, o i valori iniziali, calcolati, utilizzati ed attuali. Sono anche definite entità quali le proprietà scorciatoia di CSS.
+
Scrivere CSS efficienti
+
Spiega come i motori dei fogli di stile realizzano il riscontro dei selettori e descrive le regole per la scrittura di CSS più efficienti.
+
Utilizzare le trasformazioni di CSS
+
Illustra le operazioni 2D che possono essere applicate a ogni elemento al fine di ruotarlo, inclinarlo o traslarlo.
+
Utilizzare le transizioni di CSS
+
Spiega come cambiare l'aspetto di un elemento utilizzado un'animazione graduale tra lo stato iniziale e il finale.
+
Utilizzare le animazioni di CSS
+
Descrive come definire le animazioni di un elemento ma anche come rilevare con Javascript se il browser le supporta.
+
Utilizzare i gradienti di CSS
+
Spiega come definire i gradienti, immagini composte di graduali variazioni dei colori.
+
Utilizzare l'impaginazione multicolonna di CSS
+
Illustra come effettuare l'impostazione di pagine a colonne multiple utilizzando l'impaginazione multicolonna di CSS Livello 3.
+
Utilizzare sfondi multipli di CSS
+
Descrive come definire parecchi sfondi sullo stesso elemento.
+
Scalare immagini di sfondo
+
Mostra come controllare il comportamento delle immagini di sfondo quando queste non riscontrano esattamente la dimensione del loro contenitore.
+
Utilizzare l'interrogazione del media di CSS
+
Presenta come selezionare i fogli di stile in base a dettagli del dispositivo di visualizzazione, come la dimensione dell'area disponibile, la sua risoluzione o se ha un touchscreen.
+
Utilizzare i contatori di CSS
+
Spiega come utilizzare numerazione e contatori automatici, essenzialmente utilizzati come contatori d'elenco.
+
Font e Tipografia
+
Informa sulla gestione dei propri font utilizzando {{ cssxref("@font-face") }} e il formato font WOFF.
+
Utilizzare i box flessibili di CSS
+
Descrive come utilizzare i box felssibili per la progettazione dell'impaginazione.
+
Il Rientro Coerente degli Elenchi
+
Cercare di cambiare il rientro delle liste con i CSS è più complicato di quanto sembri, ma solo perchè i browser conformi a CSS hanno intrapreso strade diverse sul rientro predefinito. Scopri come metterli tutti in riga.
+
+
Utilizzare le informazioni di stile dinamiche
+
Come ottenere informazioni sullo stile e manipolarlo via DOM.
+
+ +

Vedi Tutto...

+
+ +
+

Ottentere aiuto dalla comunità

+ +

Hai bisogno di aiuto su problemi relativi a CSS e non trovi la soluzione nella documentazione?

+ +
    +
  • Controlla le domande comuni su CSS che danno suggerimenti per risolvere i problemi comuni.
    • +
  • Vai su Stack Overflow, un sito collaborativo di Q&A in cui cercare risposte alla tue domande o, se non ne trovi, porre lì le tue domande.
    • +
  • Consulta il forum layout, che tratta CSS e HTML: + +
    • +
+ +

Non dimenticare la netiquette...

+ +

Strumenti che semplificano lo sviluppo in CSS

+ +
    +
  • Il Servizio di Validazione di CSS del W3C controlla se un dato CSS è valido. E' un'inestimabile strumento di debug.
    • +
  • L'estensione Firebug di FireFox, una popolare estensione che permette di modificare il CSS in uso sul sito che si sta visualizzando. Molto pratica per testare i cambiamenti, sebbene questa estensione faccia molto di più.
    • +
  • L'estensione Web Developer di FireFox permette anche di vedere e editare il CSS in uso sul sito visualizzato. Più semplice di Firebug, sebbene meno potente.
    • +
  • L'estensione EditCSS di FireFox permette di editare il CSS nella barra laterale.
    • +
+ +

Vedi Tutto...

+ + + + +
+
diff --git a/files/it/web/css/media_queries/index.html b/files/it/web/css/media_queries/index.html new file mode 100644 index 0000000000..aaa9a6ac17 --- /dev/null +++ b/files/it/web/css/media_queries/index.html @@ -0,0 +1,136 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +tags: + - CSS + - CSS3 Media Query + - Disegno Responsivo + - media query +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef("CSS3 Media Queries")}}
+ +

Le Media Queries sono un componente essenziale del disegno responsivo, che rende possibile adattare il codice CSS a differenti parametri e caratteristiche dei dispositivi con cui viene visualizzato un sito. Per esempio, una media query può applicare uno stile differente al sito se lo schermo del dispositivo è di dimensioni inferiori a un certo limite, o a seconda che l'utente stia usando il dispositivo in modalità portrait (visualizzazione verticale) o landscape (visualizzazione orizzontale).  La direttiva {{cssxref("@media")}} è usata per applicare stili condizionali a un documento.

+ +

Inoltre, la sintassi delle media queries è usata anche in altri contesti, come nell'attributo {{htmlattrxref("media", "source")}} di un elemento {{HTMLElement("source")}} , con il quale si può specificare quale sorgente usare per un elemento {{HTMLElement("picture")}}.

+ +

Esiste inoltre il metodo {{domxref("Window.matchMedia()")}} che si può usare per testare il rapporto tra lo schermo corrente e una media query. Puoi anche usare {{domxref("MediaQueryList.addListener()")}} per ricevere una notifica ogni volta che lo stato delle queries cambia. Con quesa funzionalità, il tuo sito o la tua applicazione possono rispondere a cambi nella configurazione, nell'orientamento o nello stato del dispositivo.

+ +

Puoi saperne di più su come usare le media queries programmaticamente nell'articolo Testing media queries.

+ +

Referenze

+ +

Direttive

+ +
+ +
+ +

Guide

+ +
+
Come usare le media queries
+
Introduzione alle media queries, alla loro sintassi, agli operatori e alle funzionalità usate per costruire espressioni di media query.
+
Come testare le media queries
+
Come testare le media queries dal tuo codice JavaScript, programmaticamente, per determinare lo stato del dispositivo, e implementare listeners che comunichino al tuo codice un cambio nei risultati delle media queries, come per esempio quando l'utente ruota lo schermo, causando un cambio di orientamento.
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Definizione iniziale
+ +

Compatibilità browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
BrowserChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto basico1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.7)}}9.09.21.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
BrowserAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
+ + + + + + + +
Supporto basico 
+ 		1.0{{CompatVersionUnknown}}{{CompatGeckoMobile(1.7)}}9.09.03.1
+
diff --git a/files/it/web/css/min-width/index.html b/files/it/web/css/min-width/index.html new file mode 100644 index 0000000000..881d345344 --- /dev/null +++ b/files/it/web/css/min-width/index.html @@ -0,0 +1,258 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - Proprietà CSS + - Riferimento +translation_of: Web/CSS/min-width +--- +
{{CSSRef}}
+ +

La proprietà CSS min-width imposta la larghezza minima di un elemento.  Questo evita che lo used value della proprietà {{ Cssxref("width") }} diventi più piccolo del valore specificato per min-width.

+ +
/* <length> value */
+min-width: 3.5em;
+
+/* <percentage> value */
+min-width: 10%;
+
+/* Keyword values */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* Global values */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+
+ +

La larghezza dell'elemento viene impostata al valore di min-width ogni volta che min-width risulta essere maggiore di {{ Cssxref("max-width") }} or {{Cssxref("width")}}.

+ +

{{cssinfo}}

+ +

Sintassi

+ +

Valori

+ +
+
{{cssxref("<length>")}}
+
La larghezza minima espressa come {{cssxref("<length>")}}. Valori negativi rendono la dichiarazione non valida.
+
 
+
{{cssxref("<percentage>")}}
+
La larghezza minima espressa come {{cssxref("<percentage>")}} della larghezza del contenitore. Valori negativi rendono la dichiarazione non valida.
+
+ +

Parole chiave

+ +
+
auto
+
La larghezza di default per oggetti di tipo flex, assegna un valore di default più ragionevole di 0 per gli altri layout.
+
max-content {{ experimental_inline() }}
+
La larghezza massima preferita (intrinsic).
+
min-content {{ experimental_inline() }}
+
La larghezza minima preferita (intrinsic).
+
fill-available{{ experimental_inline() }}
+
La larghezza del blocco contenitore sottratto de: il margine orizzontale, il bordo ed il padding. (Alcuni browsers usano un nome diverso per questa parola chiave, available.)
+
fit-content {{ experimental_inline() }}
+
Definito come min(max-content, max(min-content, fill-available)).
+
+ +

Sintassi formale

+ +
{{csssyntax}}
+ +

Esempi

+ +
table { min-width: 75%; }
+
+form { min-width: 0; }
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}{{ Spec2('CSS3 Sizing') }}Vengono aggiunte le parole chiave max-content, min-content, fit-content e fill-available. (I draft Box CSS3 e CSS3 Writing Modes definiscono queste keyword, ma vengono sostituiti da questa specifica.)
{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}{{ Spec2('CSS3 Flexbox') }}Viene aggiunta la keyword auto e viene utilizzata come valore iniziale.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}{{ Spec2('CSS3 Transitions') }}Definisce min-width come animabile.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}{{ Spec2('CSS2.1') }}Definizione iniziale.
+ +

Compatibilità dei browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.0 (1.0)7.04.02.0.2 (416), buggy before
si applica a <table> [1]{{ CompatNo() }}{{CompatNo}}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
max-content, min-content, fit-content, efill-available {{ experimental_inline() }}24.0 {{property_prefix("-webkit")}} [3]{{CompatNo}}{{ CompatGeckoDesktop("1.9") }} {{ property_prefix("-moz") }} [2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} [3]
auto21.0 [4]{{CompatUnknown}}{{ CompatGeckoDesktop("16.0") }} [4]
+ Removed in {{ CompatGeckoDesktop("22.0") }}
+ Reintroduced in {{CompatGeckoDesktop("34.0")}} with the new behavior defined by the spec.		{{ CompatNo() }}12.10 [6]{{ CompatNo() }}
auto as initial value{{obsolete_inline()}}21.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("18.0") }}
+ Removed in {{ CompatGeckoDesktop("22.0") }}		{{ CompatNo() }}12.10{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}[5]
applies to <table>[1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
max-content, min-content, fit-content, e fill-available {{ experimental_inline() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
auto come valore iniziale {{obsolete_inline()}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 descrive esplicitamente il comportamento di min-width con {{ HTMLElement("table") }} come indefinito. Quindi qualsiasi tipo di comportamento rispetta CSS2.1; le nuove specifiche CSS potrebbero definire questo comportamento, per cui al momento gli sviluppatori Web non dovrebbero fare affidamento su una specifica implementazione.

+ +

[2] Gecko implementa in via sperimentale le definizioni date in CSS3 Basic Box. Questa definisce la keyword available ma non fill-available. Inoltre la definizione di fit-content è più lasca di quella data da CSS3 Intrinsic.

+ +

[3] WebKit implementa una proposta precedente, la parola chiave intrinsic.

+ +

[4] Queste implementazioni realizzavano un comportamento leggermente più semplice per questa parola chiave: veniva impostata a min-content per gli oggetti di tipo flex, e 0 per qualsiasi altro elemento.

+ +

[5] In alcuni browsers in iOS, un elemento di tipo <button> nella sua configurazione nativa (default) non reagirà all'impostazione del valore min-width. Questo problema dipende dai pulsanti di tipo nativo. Uno <span> collocato dentro ad un pulsante nativo, mostrerà lo stesso problerma, nonostante venga impostato "display:inline-block". Quando altri parametri di stile vengono impostati ed il browser è costretto ad abbandonare il pulsante nativo, l'impostazione di min-width ha effetto.  

+ +

See also

+ + diff --git a/files/it/web/css/mozilla_extensions/index.html b/files/it/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..f2dca7f728 --- /dev/null +++ b/files/it/web/css/mozilla_extensions/index.html @@ -0,0 +1,336 @@ +--- +title: Mozilla Extensions +slug: Web/CSS/Mozilla_Extensions +tags: + - CSS + - CSS Reference + - 'CSS:Mozilla Extensions' + - NeedsContent + - NeedsTechnicalReview + - Tutte_le_categorie +translation_of: Web/CSS/Mozilla_Extensions +--- +

 

+
+

Traduzione a tempo perso ! Non essendo presente la traduzione mi dedicherò a tempo perso in questo progetto, quindi se mancano molte traduzioni non fatemene una colpa.

+ Zibibbo84 10:30, 11 ott 2007 (PDT) ;)
+

Mozilla supporta alcune estensioni del CSS le quali hanno il prefisso '-moz'. Queste consentono di modificare alcune proprietà delle pagine web in modo non tradizionale, per facilitare l'utente nello sviluppo dei suoi progetti.

+

Alcune di queste proprietà sono state inserite successivamente nel CSS , quindi possono presentarsi differenze nell'utilizzo delle proprietà standard e delle -moz.

+

Alcune di queste proprietà non standard possono essere applicate solo su elementi di tipo XUL.

+

At-rules

+ +

Pseudo-elements and pseudo-classes

+ +

Properties

+ + + + + +

Values

+

Probabilmente documentate nelle pagine delle proprietà standard.

+ + + +

Note: Tutti questi valori sono da considerare disapprovati. E' preferibile usare overflow-x and overflow-y, nonostante non rimpiazzino l'ultimo di questi.

+ + + + + + + + + + + +

Others

+ + + +

Talk:Mozilla CSS Extensions

+

{{ Bug(311415) }} implemented -moz-intrinsic, -moz-min-intrinsic, -moz-shrink-wrap, -moz-fill values for {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, and {{ Cssxref("max-width") }} properties.

+

{{ languages( { "en": "en/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "fr": "fr/R\u00e9f\u00e9rence_CSS/Extensions_Mozilla", "pl": "pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" } ) }}

diff --git a/files/it/web/css/object-fit/index.html b/files/it/web/css/object-fit/index.html new file mode 100644 index 0000000000..1421cd58c8 --- /dev/null +++ b/files/it/web/css/object-fit/index.html @@ -0,0 +1,161 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

La proprietà CSS object-fit istruisce il browser su come deve ridimensionare il contenuto di un elemento incluso, come avviene per i tag {{HTMLElement("img")}} o {{HTMLElement("video")}}, per adattarlo al suo contenitore.

+ +

Per modificare l'allineamento dell'elemento ridimensionato rispetto al suo contenitore puoi usare la proprietà {{cssxref("object-position")}}.

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ + + +

Sintassi

+ +

La proprietà object-fit viene specificata usando uno dei seguenti valori.

+ +

Valori

+ +
+
contain
+
L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento e il suo contenitore non sono identici si avrà come risultato l'effetto "letterboxed".
+
cover
+
L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà ritagliato per adattarsi.
+
fill
+
L'elemento viene ridimensionato per riempire completamente il suo contenitore. Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà deformato per adattarsi.
+
none
+
L'elemento non viene ridimensionato.
+
scale-down
+
L'elemento viene ridimensionto come se none o contain fossero specificati, ma con la differenza che si ottiene sempre un oggetto più piccolo.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Esempi

+ +

HTML

+ +
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+
+</div>
+ +

CSS

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

Risultato

+ +

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

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Initial definition
+ +

{{cssinfo}}

+ +

Compatibilità browser

+ + + +

{{Compat("css.properties.object-fit")}}

+ +

Guarda anche

+ + diff --git a/files/it/web/css/pseudo-classes/index.html b/files/it/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..935d570c71 --- /dev/null +++ b/files/it/web/css/pseudo-classes/index.html @@ -0,0 +1,167 @@ +--- +title: Pseudo-classes +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Panoramica + - Pseudo-class + - Riferimento + - Selettori +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

Una pseudo-classe CSS è una parola chiave aggiunta ad un selettore la quale specifica lo stato speciale degli elementi selezionati. Ad esempio, {{CSSxRef(":hover")}} può essere usato per cambiare il colore di un pulsate quando il puntatore dell'utente vi passa sopra.

+ +
/* Qualsiasi button sopra al quale passa il cursore dell'utente*/
+button:hover {
+  color: blue;
+}
+ +

La pseudo-classi permettono di applicare uno stile ad un elemento non solo in relazione al contenuto dell'alberatura del documento, ma anche in relazione a fattori esterni come la storia della navigazione ({{CSSxRef(":visited")}}, per esempio), lo stato del suo contenuto (come {{CSSxRef(":checked")}} su determinati elementi di form), oppure la posizione del mouse (come {{CSSxRef(":hover")}}), il quale permette di sapere se il mouse si trova su un elemento o no.

+ +
+

Nota: Al contrario delle pseudo-classi, gli pseudo-elementi possono essere usati per dare stile a parti specifiche di un elemento.

+
+ +

Sintassi

+ +
selector:pseudo-class {
+  property: value;
+}
+
+ +

Come per una classe regolare, è possibile concatenare insieme quante più pseudo-classi volute in un selettore.

+ +

Indice delle pseudo-classi standard

+ +
+ +
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Definito :fullscreen.
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}Definisce quando particolari selettori corrisponde ad elementi HTML.
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Definiti :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() e :where().
+ Cambiato il comportamento di :empty {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.
+ Nessun cambiamento significativo per le altre pseudo-classi definite nel {{SpecName("CSS3 Selectors")}} e {{SpecName("HTML5 W3C")}} (sebbene il significato semantico non sia stato preso in considerazione).
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}Copia della sezione pertinente dalla specifica canonica HTML (WHATWG).
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}Definiti :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, ma senza l'associazione di significato semantico.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Definiti :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty e :not().
+ Definita la sintassi di :enabled, :disabled, :checked, e :indeterminate, ma senza l'associazione di significato semantico.
+ Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS2.1')}}.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}Definiti :lang(), :first-child, :hover, e :focus.
+ Nessun cambiamento significativo per le pseudo-classi definite nel {{SpecName('CSS1')}}.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definiti :link, :visited e :active, ma senza l'associazione di significato semantico.
+ +

Vedi anche

+ + diff --git a/files/it/web/css/ricette_layout/index.html b/files/it/web/css/ricette_layout/index.html new file mode 100644 index 0000000000..bbdee7472e --- /dev/null +++ b/files/it/web/css/ricette_layout/index.html @@ -0,0 +1,60 @@ +--- +title: Ricette per layout in CSS +slug: Web/CSS/Ricette_layout +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

Lo scopo del ricettario per layout in CSS è quello di raccogliere schemi per layouts utili per le tue pagine. In aggiunta a ricevere codice per iniziare i propri progetti, queste ricette sottolineano le differenti modalità e decisioni nel design di layouts messe a disposizione per sviluppatori.

+ +
+

Nota: Se sei nuovo a sviluppare layouts in CSS consigliamo dare un ochhiata al nostro CSS layout learning module, che darà le basi per fare pieno uso delle seguenti ricette.

+
+ +

Le Ricette

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RicettaDescrizioneMetodi di layout
Oggetti mediaUna scatola con due colonne avente un immagine su un lato e del testo descrittivo nell'altro, p.es: un post su facebook o un tweet.CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
ColonneQuando scegliere un layout a più colonne, un flexbox o una griglia per le colonneCSS Grid, Multicol, Flexbox
Centrare un elementoCome centrare un oggetto orizzontalmente e verticalmenteFlexbox, Box Alignment
Note a piè di pagina appiccicoseCreare una nota a piè di pagina che sta alla fine del container o del punto di vista attuale quando il contenuto è più corto. CSS Grid, Flexbox
Navigazione divisaUno schema nel quale alcuni link sono visualmente separati da altri.Flexbox, {{cssxref("margin")}}
Navigazione a bricioleCreare una lista di links che perrmette il visitatore di navigare inditro nella gerarchia della pagina.Flexbox
+ +

Contribuire al ricettario

+ +

Come  con tutto il MDM ci piacerebbe se contribuisci ricette nello stesso formato a quelle mostrate sopra. Guarda questa pagina per trovare un template e delle linee guida per scrivere il tuo esempio.

diff --git a/files/it/web/css/selettore_figli_diretti/index.html b/files/it/web/css/selettore_figli_diretti/index.html new file mode 100644 index 0000000000..cf2903dbc9 --- /dev/null +++ b/files/it/web/css/selettore_figli_diretti/index.html @@ -0,0 +1,121 @@ +--- +title: Selettore di Figli Diretti +slug: Web/CSS/selettore_figli_diretti +tags: + - compinatori css + - selettore di figli diretti +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +
Il combinatore ">" separa due selettori selezionando solo quegli elementi selezionati con il secondo selettore che sono figli diretti del primo selettore.
+ +
 
+ +
Al contrario, quando due selettori sono combinati con il selettore discendente, vengono selezionati tutti gli elementi che soddisfano il secondo selettore per il quale esiste un elemento antenato definito dal primo selettore, indipendentemente dal numero di "salti" attraverso l'albero DOM.
+ +
 
+ +

Sintassi

+ +
selettore1 > selettore2 {stili CSS }
+
+ +

Esempio

+ +
span { background-color: white; }
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +
<div>
+  <span>Span 1. In the div.
+    <span>Span 2. In the span that's in the div.</span>
+  </span>
+  <span>Span 3. In the div</span>
+</div>
+
+<span>Span 4. Not in a div at all.</span>
+
+ +

{{EmbedLiveSample("Example", 200, 100)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}No change
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Compatibilità tra i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/it/web/css/text-align/index.html b/files/it/web/css/text-align/index.html new file mode 100644 index 0000000000..281bf0d8fa --- /dev/null +++ b/files/it/web/css/text-align/index.html @@ -0,0 +1,108 @@ +--- +title: text-align +slug: Web/CSS/text-align +translation_of: Web/CSS/text-align +--- +

<< Guida di riferimento ai CSS

+ +

Sommario

+ +

La proprietà text-align indica come le linee di testo devono essere allineate tra loro. text-align non influisce sull'allineamento degli altri elementi, solo del loro contenuto in-line.

+ + + +

Sintassi

+ +
text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+
+ +

Valori

+ + + +

Esempi

+ +
p.left { text-align: left; }
+
+p.right { text-align: right; }
+
+ +

Esempi Live

+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; }

+e le altre righe di codice...
+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; margin: 1em auto; }

+e le altre righe di codice...
+ +
div { text-align:-moz-center; text-align:-webkit-center; border:solid; } + +

p { background:gold; width:22em; }

+e le altre righe di codice...
+ +

Note

+ + + +

Specifiche

+ + + +

Compatibilità coi browser

+ + + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione minima supportata
Firefox (Gecko)1.0
Internet Explorer3
Netscape4
Opera3.5
+ +

Vedi anche

+ +

text-indent, text-align, text-decoration, letter-spacing, word-spacing, text-transform, white-space, white-space-collapse, text-rendering, text-wrap, text-shadow, margin, margin-left, margin-right, vertical-align,

+ +

{{ languages( { "en": "en/CSS/text-align", "fr": "fr/CSS/text-align" } ) }}

diff --git a/files/it/web/css/text-shadow/index.html b/files/it/web/css/text-shadow/index.html new file mode 100644 index 0000000000..fa04ed546b --- /dev/null +++ b/files/it/web/css/text-shadow/index.html @@ -0,0 +1,122 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +translation_of: Web/CSS/text-shadow +--- +

 

+
+

Introdotto in Gecko 1.9.1

+
+ Si applica a Firefox 3.5, Thunderbird 3 e superiori
+
+

 

+
+

Sommario

+
+ Edit section
+

La proprietà CSS text-shadow accetta una lista di effetti di ombreggiatura separata da virgole, che viene applicata al testo e alle  text-decoration dell'elemento.

+ +
+
+

Sintassi

+
+ Edit section
+ 
text-shadow: none | [<shadow>,]* <shadow>
+
+  dove <shadow> è:
+
+[ <colore> <lunghezza> <lunghezza> <lunghezza>? | <lunghezza> <lunghezza> <lunghezza>? <colore>? ]
+
+
+

Valori

+
+ Edit section
+
+
+ <colore>
+
+ Opzionale, prima o dopo i valori di <lunghezza> . Se il <colore> non è specificato, viene usato un colore predefinito. Gecko/Firefox usa il valore della proprietà color dell'elemento. Gli altri browser potrebbero comportarsi diversamente. +
+ Nota: Specifica un colore per la compatibilità tra browser.
+
+
+ <lunghezza> <lunghezza>
+
+ Vedi <length> per le possibili unità di misura.
+ Questi valori di <lunghezza> stabiliscono la distanza dell'ombreggiatura. Il primo parametro <lunghezza> specifica la distanza orizzontale. Valori negativi spostano l'ombreggiatura a sinistra del testo. Il secondo parametro <lunghezza> specifica la distanza verticale. Valori negativi spostano l'ompreggiatura sopra il testo. Se entrambi i valori sono 0 l'ombreggiatura si sposta dietro al testo (e potrebbe generare un effetto di sfocato se è specificato il terzo parametro <lunghezza>).
+
+
+
+ <lunghezza>
+
+ Opzionale. Il terzo parametro <lunghezza> specifica il raggio dell'effetto sfocato. Se non viene specificato, è 0. Più alto è il valore, più grande è l'effetto sfocato, quindi l'ombreggiatura diventa più estesa e più chiara.
+
+
+
+

Examples

+
+ Edit section
+

Esempio 1 Esempio 2 da Bugzilla

+ 
  h1 { text-shadow: black 0 0 0.4em; }
+
+ 
  h2 { text-shadow: red 2px 2px 2px, blue 4px 4px 2px, 6px 6px, green 8px 8px; }
+
+
+
+

Specifiche

+
+ Edit section
+

Nota: text-shadow era stata definita impropriamente in CSS2 e scartata in CSS2.1. La specifica Text di CSS3 ha migliorato la sintassi.

+ +
+
+

Compatibilità tra browser

+
+ Edit section
+ + + + + + + + + + + + + + + + + + + + + + + +
BrowserVersione più vecchia
Internet ExplorerNo
+ La versione 5.5  supporta il Filter Shadow e DropShadow
Firefox (Gecko)3.5 (1.9.1)
Opera9.5
Safari (WebKit)1.1 (100), ombreggiature multiple dalla versione 4.0 (528)
+

Al momento di scrittura:

+ +
+
+

Vedere anche

+
+ Edit section
+

-moz-box-shadow

+
+

 

diff --git a/files/it/web/css/transition-timing-function/index.html b/files/it/web/css/transition-timing-function/index.html new file mode 100644 index 0000000000..c99e5f5678 --- /dev/null +++ b/files/it/web/css/transition-timing-function/index.html @@ -0,0 +1,634 @@ +--- +title: transition-timing-function +slug: Web/CSS/transition-timing-function +translation_of: Web/CSS/transition-timing-function +--- +

{{ CSSRef("CSS Transitions") }}

+ +

Sommario

+ +

La proprietà CSS transition-timing-function è usata per descrivere come gli stati intermedi delle proprietà CSS vengono modificati quando viene calcolato il risultato di un effetto di transizione. Ti permette di definire una curva di accelerazione, in modo che la velocità della transizione possa variare nell'arco della sua durata.

+ +

Questa curva di accelerazione viene definita utilizzando uno {{cssxref("<timing-function>")}} per ogni proprietà che ottiene una transizione.

+ +

È possibile specificare un numero arbitrario di funzioni di temporizzazione; ciasuna di queste sarà applicata alla corrispondente proprietà seguendo le specifiche in {{ cssxref("transition-property") }}, dove in questo caso si comporta come la lista principale.

+ +

Se ci sono meno funzione specificate rispetto alle proprietà presenti nella lista, i valori mancanti saranno impostati a quello iniziale (ease). Se ci sono più funzioni di temporizzazione, i valori verranno applicati seguendo la lista principale e i valori in eccesso verranno semplicemente scartati. In entrambi i casi entrambe le dichiarazioni sono considerate valide.

+ +

{{cssinfo}}

+ +

Sintassi

+ +
Formal syntax: {{csssyntax("transition-timing-function")}}
+
+ +
transition-timing-function: ease
+transition-timing-function: ease-in
+transition-timing-function: ease-out
+transition-timing-function: ease-in-out
+transition-timing-function: linear
+transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
+transition-timing-function: step-start
+transition-timing-function: step-end
+transition-timing-function: steps(4, end)
+
+transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+transition-timing-function: inherit
+
+ +

Valori

+ +
+
<timing-function>
+
Ciascun {{cssxref("<timing-function>")}} rappresenta una funzione di temporizzazione che dovrà essere linkata alla corrispondente proprietà che avrà la transizione, come definito in {{ cssxref("transition-property") }}.
+
+ +

Esempi

+ +
+
+

transition-timing-function: ease

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: ease-in

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easein",275,150)}}
+
+ +
+

transition-timing-function: ease-out

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easeout",275,150)}}
+
+ +
+

transition-timing-function: ease-in-out

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_easeinout",275,150)}}
+
+
+ +
+

transition-timing-function: linear

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-start

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-start;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-start;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepstart",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ +
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+
+ +
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#transition-timing-function', 'transition-timing-function') }}{{ Spec2('CSS3 Transitions') }} 
+ +

Compatibilità tra Browser

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("2.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1011.6{{ property_prefix("-o") }}
+ 12.10 #		{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("2.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+
+ +

Vedi Anche

+ + diff --git a/files/it/web/css/type_selectors/index.html b/files/it/web/css/type_selectors/index.html new file mode 100644 index 0000000000..91e6b48de9 --- /dev/null +++ b/files/it/web/css/type_selectors/index.html @@ -0,0 +1,78 @@ +--- +title: Type selectors +slug: Web/CSS/Type_selectors +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+ +

Il selettore di tipo CSS identifica gli elementi in base al nome del nodo. In altre parole, seleziona tutti gli elementi di un dato tipo entro il documento.

+ +
/* Tutti gli elemnti <a>. */
+a {
+  color: red;
+}
+ +

Sintassi

+ +
element { style properties }
+
+ +

Esempio

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Here's a span with some text.</span>
+<p>Here's a p with some text.</p>
+<span>Here's a span with more text.</span>
+
+ +

Risultato

+ +

{{EmbedLiveSample('Example', '100%', 150)}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommento
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}Nessun cambiamento
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}Nessun cambiamento
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

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

diff --git a/files/it/web/css/universal_selectors/index.html b/files/it/web/css/universal_selectors/index.html new file mode 100644 index 0000000000..6c247e09da --- /dev/null +++ b/files/it/web/css/universal_selectors/index.html @@ -0,0 +1,105 @@ +--- +title: Universal selectors +slug: Web/CSS/Universal_selectors +tags: + - CSS + - Reference + - Selettori +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

Il selettore universale CSS (*) corrisponde ad elementi di qualsiasi tipo.

+ +
/* Seleziona tutti gli elementi */
+* {
+  color: green;
+}
+ +

A partire dal CSS3, l'asterisco può essere usato in combinazione con {{cssxref("CSS_Namespaces", "namespaces")}}:

+ + + +

Sintassi

+ +
* { style properties }
+ +

L'asterisco è opzionale con i selettori semplici. Per esempio, *.warning e .warning sono equivalenti.

+ +

Esempio

+ +

CSS

+ +
* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* Aggiungi clear automatico al fratello immediatamente successivo dopo un elemento flottante */
+.floating + * {
+  clear: left;
+}
+
+ +

HTML

+ +
<p class="warning">
+  <span lang="en-us">Uno span verde</span> in un paragrafo rosso.
+</p>
+<p id="maincontent" lang="en-gb">
+  <span class="warning">Uno span rosso</span> in un paragrafo verde.
+</p>
+ +

Risultati

+ +

{{EmbedLiveSample('Examples')}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatusCommenti
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}Nessun cambiamento
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}Definisce il comportamento relativo ai namespace e aggiunge il consiglio per cui omettere il selettore sia consentito nell'ambito degli pseudo-elementi
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}Definizione iniziale
+ +

Compatibilità Browser

+ + + +

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

diff --git a/files/it/web/css/word-break/index.html b/files/it/web/css/word-break/index.html new file mode 100644 index 0000000000..0af1a85bd0 --- /dev/null +++ b/files/it/web/css/word-break/index.html @@ -0,0 +1,131 @@ +--- +title: word-break +slug: Web/CSS/word-break +translation_of: Web/CSS/word-break +--- +
{{CSSRef}}
+ +

Riassunto

+ +

La proprietà CSS word-break è usata per specificare come (e se) andare a capo in mezzo alle parole.

+ +
{{cssinfo}}
+ +

Sintassi

+ +
Sintassi Formale: {{csssyntax("word-break")}}
+
+ +
word-break: normal
+word-break: break-all
+word-break: keep-all
+
+word-break: inherit
+
+ +

Valore

+ +
+
normal
+
Usa le regole di a-capo predefinite.
+
break-all
+
Gli a-capo possono essere inseriti tra due caratteri qualsiasi nel testo non-CJK (Cinese/Giapponese/Coreano).
+
keep-all
+
Non permettere a-capo in mezzo ad una parola nei testi CJK.  Il comportamento nei testi non-CJK è lo stesso di normal.
+
+ +

Esempi

+ +

{{todo}}

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('CSS3 Text', '#word-break', 'word-break')}}{{Spec2('CSS3 Text')}} 
+ +

Compatibilità con i browser

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base1.0{{CompatGeckoDesktop("15.0")}}5.5 [1]{{CompatNo}}{{CompatVersionUnknown}}
keep-all{{CompatNo}} [2]{{CompatGeckoDesktop("15.0")}}5.5{{CompatNo}}{{CompatNo}} [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}18.0{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
keep-all{{CompatNo}} [2]{{CompatNo}} [2]{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}} [2]
+
+ +

[1] IE8 ha introdotto -ms-word-break come sinonimo di word-break. Si sconsiglia di usare il prefisso -ms- .

+ +

[2] Vedi {{webkitbug("123782")}}.

diff --git a/files/it/web/css/z-index/index.html b/files/it/web/css/z-index/index.html new file mode 100644 index 0000000000..7f58297a34 --- /dev/null +++ b/files/it/web/css/z-index/index.html @@ -0,0 +1,192 @@ +--- +title: z-index +slug: Web/CSS/z-index +translation_of: Web/CSS/z-index +--- +
{{CSSRef}}
+ +
La Proprietà CSS z-index specifica lo z-order di un elemento posizionato e dei suoi discendenti. Nel caso di elementi che si sovrappongono, quelli con un valore di z-order maggiore sono sovrapposti a quelli con un valore più basso.
+ +
+ +
/* Keyword value */
+z-index: auto;
+
+/* <integer> values */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* Negative values to lower the priority */
+
+/* Global values */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+
+ +

Per una box posizionata (ovvero con valore qualsiasi di position che non sia static) la proprietà z-index indica;

+ +
    +
  1.  Il livello di sovrapposizione della box nello stacking context corrente.
    2. +
  2.  Se la box stabilisce uno stacking context locale.
    3. +
+ +
<div class="container">
+<div class="block position1 text-top">z-index: auto</div>
+<div class="block position2 text-top">z-index: auto</div>
+<div class="block position3 text-top">z-index: auto</div>
+</div>
+
+<div class="container">
+<div class="block position1 text-bottom" style="z-index:3">z-index: 3</div>
+<div class="block position2 text-bottom" style="z-index:2">z-index: 2</div>
+<div class="block position3 text-bottom" style="z-index:1">z-index: 1</div>
+</div>
+ +
+
* {
+  box-sizing: border-box;
+}
+
+.container {
+  display: inline-block;
+  width: 250px;
+  position: relative;
+}
+
+.block {
+  width: 150px;
+  height: 75px;
+  position: absolute;
+  font-family: monospace;
+  background-color: #E5E8FC;
+  border: solid 5px #112382;
+}
+
+.text-top {
+  padding: 0.5em 0 5em .5em;
+}
+
+.text-bottom {
+  padding: 4em 0 1.5em .5em;
+}
+
+.position1 {
+  top: 0;
+  left: 0;
+}
+
+.position2 {
+  top: 30px;
+  left: 30px;
+}
+
+.position3 {
+  top: 60px;
+  left: 60px;
+}
+
+ +

{{EmbedLiveSample("z-index", 1200, 160, "", "", "example-outcome-frame")}}

+ +

L'esempio sopra mostra l'effetto di z-index. Sulla sinistra abbiamo disegnato tre boxes, facendole sovrapporre usando absolute positioning. Per default, gli elementi sono sovrapposti seguendo l'ordine dichiarato nel codice HTML. Sulla destra abbiamo lo stesso markup, ma a differenza dell'ordine di default usiamo lo z-index. 

+ +

{{cssinfo}}

+ +

Sintassi

+ +

La proprieta z-index e' specificata anche con le chiavi auto o <integer>.

+ +

Valori

+ +
+
auto
+
La box non stabilisce una nuova stacking context locale. Il livello di sovrapposizione della box generata e' lo stesso del livello di sovrapposizione del suo genitore
+
<integer>
+
Questo {{cssxref("<integer>")}} e' il livello di sovrapposizione della box generata nel corrente stacking context. La box stabilisce anche una locale stacking context in cui il suo livello di sovrapposizione e' 0. Questo significa che gli z-indexes dei discendenti non sono confrontati con gli z-indexes degli elementi all'esterno di questo elemento.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
<div class="dashed-box">Dashed box
+  <span class="gold-box">Gold box</span>
+  <span class="green-box">Green box</span>
+</div>
+
+ +

CSS

+ +
.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Examples', '550', '200', '') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}Defines z-index as animatable.
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.z-index")}}

+ +

See also

+ + diff --git a/files/it/web/esempi_di_tecnologie_web_open/index.html b/files/it/web/esempi_di_tecnologie_web_open/index.html new file mode 100644 index 0000000000..2244c73297 --- /dev/null +++ b/files/it/web/esempi_di_tecnologie_web_open/index.html @@ -0,0 +1,136 @@ +--- +title: Esempi di tecnologie web open +slug: Web/Esempi_di_tecnologie_web_open +translation_of: Web/Demos_of_open_web_technologies +--- +

Mozilla supporta un'ampia varietà di emozionanti tecnologie web open, e noi ne incoraggiamo l'uso. In questa pagina sono contenuti collegamenti a degli interessanti esempi di queste tecnologie.

+ +

Se sei al corrente di esempi ben fatti o di applicazioni che fanno uso di tecnologia web open, per favore aggiungi un link nella sezione appropriata.

+ +

Grafica 2D

+ +

Canvas

+ + + +

SVG

+ + + +

Video

+ + + +

Grafica 3D

+ +

WebGL

+ + + +

Realtà Virtuale

+ + + +

CSS

+ + + +

Trasformazioni

+ + + +

Giochi

+ + + +

HTML

+ + + +

Web APIs

+ + + +

Notifications API

+ + + + + +

Web Audio API

+ + + +

File API

+ + + +

Web Workers

+ + diff --git a/files/it/web/events/domcontentloaded/index.html b/files/it/web/events/domcontentloaded/index.html new file mode 100644 index 0000000000..9b2cf7467e --- /dev/null +++ b/files/it/web/events/domcontentloaded/index.html @@ -0,0 +1,75 @@ +--- +title: DOMContentLoaded event +slug: Web/Events/DOMContentLoaded +tags: + - Evento + - Referenza + - Web + - eventi +translation_of: Web/API/Window/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

L'evento DOMContentLoaded si attiva quando il documento HTML iniziale è stato completamente caricato e analizzato, senza attendere che i fogli di stile, le immagini e i sottoframe finiscano di caricarsi.

+ + + + + + + + + + + + + + + + + + + + +
BubblingSì
CancellabileSì (anche se specificato come evento semplice che non è cancellabile)
Interfaccia{{domxref("Event")}}
Proprietà dell'handlerNessuna
+ +

L'obiettivo originale per questo evento è il Document che è stato caricato. È possibile ascoltare questo evento nell'interfaccia Window per gestirlo nelle fasi di capturing o bubbling. Per i dettagli completi su questo evento, consulta la pagina sull'evento Document: DOMContentLoaded.

+ +

Un evento diverso, load, dovrebbe essere utilizzato solo per rilevare una pagina completamente caricata. È un errore comune utilizzare load dove DOMContentLoaded sarebbe più appropriato.

+ +

Esempi

+ +

Utilizzo di base

+ +
document.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM completamente caricato e analizzato');
+});
+
+ +

Specifiche

+ + + + + + + + + + + + +
SpecificaStato
{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilità con i browser

+ + + +

{{Compat("api.Window.DOMContentLoaded_event")}}

+ +

Vedi anche

+ + diff --git a/files/it/web/events/index.html b/files/it/web/events/index.html new file mode 100644 index 0000000000..c492f87dd4 --- /dev/null +++ b/files/it/web/events/index.html @@ -0,0 +1,2310 @@ +--- +title: Event reference +slug: Web/Events +tags: + - NeedsTranslation + - TopicStub + - events +translation_of: Web/Events +--- +

DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions used to get additional information about what happened. Events can represent everything from basic user interactions to automated notifications of things happening in the rendering model.

+ +

This article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific browsers; for example, Mozilla-specific events are listed so that add-ons can use them to interact with the browser.

+ +

Standard events

+ +

These events are defined in official Web specifications, and should be common across browsers. Each event is listed along with the interface representing the object sent to recipients of the event (so you can find information about what data is provided with each event) as well as a link to the specification or specifications that define the event.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("abort")}}{{domxref("UIEvent")}}DOM L3The loading of a resource has been aborted.
abort{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been terminated (not due to an error).
abort{{domxref("Event")}}IndexedDBA transaction has been aborted.
{{event("afterprint")}}{{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document has started printing or the print preview has been closed.
{{event("animationend")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has completed.
{{event("animationiteration")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation is repeated.
{{event("animationstart")}}{{domxref("AnimationEvent")}}CSS AnimationsA CSS animation has started.
{{event("audioprocess")}}{{domxref("AudioProcessingEvent")}}{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}The input buffer of a {{domxref("ScriptProcessorNode")}} is ready to be processed.
{{event("audioend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has finished capturing audio for speech recognition.
{{event("audiostart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The user agent has started to capture audio for speech recognition.
{{event("beforeprint")}} {{gecko_minversion_inline("6")}}{{domxref("Event")}}HTML5The associated document is about to be printed or previewed for printing.
{{event("beforeunload")}}{{domxref("BeforeUnloadEvent")}}HTML5  
{{event("beginEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element begins.
blocked IndexedDBAn open connection to a database is blocking a versionchange transaction on the same database.
{{event("blur")}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (does not bubble).
{{event("boundary")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a word or sentence boundary
{{event("cached")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been downloaded, and the application is now cached.
{{event("canplay")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("canplaythrough")}}{{domxref("Event")}}HTML5 mediaThe user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
{{event("change")}}{{domxref("Event")}}DOM L2, HTML5The change event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.
{{event("chargingchange")}}{{domxref("Event")}}Battery statusThe battery begins or stops charging.
{{event("chargingtimechange")}}{{domxref("Event")}}Battery statusThe chargingTime attribute has been updated.
{{event("checking")}}{{domxref("Event")}}OfflineThe user agent is checking for an update, or attempting to download the cache manifest for the first time.
{{event("click")}}{{domxref("MouseEvent")}}DOM L3A pointing device button has been pressed and released on an element.
close{{domxref("Event")}}WebSocketA WebSocket connection has been closed.
complete IndexedDB 
{{event("complete")}}{{domxref("OfflineAudioCompletionEvent")}}{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}The rendering of an {{domxref("OfflineAudioContext")}} is terminated.
{{event("compositionend")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text has been completed or canceled.
{{event("compositionstart")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
{{event("compositionupdate")}}{{gecko_minversion_inline("9")}}{{domxref("CompositionEvent")}}DOM L3A character is added to a passage of text being composed.
{{event("contextmenu")}}{{domxref("MouseEvent")}}HTML5The right button of the mouse is clicked (before the context menu is displayed).
{{event("copy")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been added to the clipboard.
{{event("cut")}}{{domxref("ClipboardEvent")}}ClipboardThe text selection has been removed from the document and added to the clipboard.
{{event("dblclick")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is clicked twice on an element.
{{event("devicelight")}}{{domxref("DeviceLightEvent")}}Ambient Light EventsFresh data is available from a light sensor.
{{event("devicemotion")}}{{domxref("DeviceMotionEvent")}}Device Orientation EventsFresh data is available from a motion sensor.
{{event("deviceorientation")}}{{domxref("DeviceOrientationEvent")}}Device Orientation EventsFresh data is available from an orientation sensor.
{{event("deviceproximity")}}{{domxref("DeviceProximityEvent")}}Proximity EventsFresh data is available from a proximity sensor (indicates an approximated distance between the device and a nearby object).
{{event("dischargingtimechange")}}{{domxref("Event")}}Battery statusThe dischargingTime attribute has been updated.
DOMActivate {{deprecated_inline}}{{domxref("UIEvent")}}DOM L3A button, link or state changing element is activated (use {{event("click")}} instead).
DOMAttributeNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an attribute changed (use mutation observers instead).
DOMAttrModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A text or another CharacterData has changed (use mutation observers instead).
{{event("DOMContentLoaded")}}{{domxref("Event")}}HTML5The document has finished loading (but not its dependent resources).
DOMElementNameChanged {{deprecated_inline}}{{domxref("MutationNameEvent")}}DOM L3 RemovedThe name of an element changed (use mutation observers instead).
DOMFocusIn {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has received focus (use {{event("focus")}} or {{event("focusin")}} instead).
DOMFocusOut {{deprecated_inline}}{{domxref("FocusEvent")}}DOM L3An element has lost focus (use {{event("blur")}} or {{event("focusout")}} instead).
DOMNodeInserted {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified {{deprecated_inline}}{{domxref("MutationEvent")}}DOM L3A change happened in the document (use mutation observers instead).
{{event("downloading")}}{{domxref("Event")}}OfflineThe user agent has found an update and is fetching it, or is downloading the resources listed by the cache manifest for the first time.
{{event("drag")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged (every 350ms).
{{event("dragend")}}{{domxref("DragEvent")}}HTML5A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{event("dragenter")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection enters a valid drop target.
{{event("dragleave")}}{{domxref("DragEvent")}}HTML5A dragged element or text selection leaves a valid drop target.
{{event("dragover")}}{{domxref("DragEvent")}}HTML5An element or text selection is being dragged over a valid drop target (every 350ms).
{{event("dragstart")}}{{domxref("DragEvent")}}HTML5The user starts dragging an element or text selection.
{{event("drop")}}{{domxref("DragEvent")}}HTML5An element is dropped on a valid drop target.
{{event("durationchange")}}{{domxref("Event")}}HTML5 mediaThe duration attribute has been updated.
{{event("emptied")}}{{domxref("Event")}}HTML5 mediaThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{event("end_(SpeechRecognition)","end")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has disconnected.
{{event("end_(SpeechSynthesis)","end")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName("Web Speech API")}}The utterance has finished being spoken.
{{event("ended")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because the end of the media was reached.
{{event("ended_(Web_Audio)", "ended")}}{{domxref("Event")}}{{SpecName("Web Audio API")}} 
{{event("endEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element ends.
{{event("error")}}{{domxref("UIEvent")}}DOM L3A resource failed to load.
{{event("error")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has failed.
{{event("error")}}{{domxref("Event")}}OfflineAn error occurred while downloading the cache manifest or updating the content of the application.
{{event("error")}}{{domxref("Event")}}WebSocketA WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
{{event("error")}}{{domxref("Event")}}Server Sent EventsAn event source connection has been failed.
{{event("error")}}{{domxref("Event")}}IndexedDBA request caused an error and failed.
{{event("error_(SpeechRecognitionError)","error")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}A speech recognition error occurs.
{{event("error_(SpeechSynthesisError)","error")}}{{domxref("SpeechSynthesisErrorEvent")}}{{SpecName('Web Speech API')}}An error occurs that prevents the utterance from being successfully spoken.
{{event("focus")}}{{domxref("FocusEvent")}}DOM L3An element has received focus (does not bubble).
{{event("focusin")}}{{domxref("FocusEvent")}}DOM L3An element is about to receive focus (bubbles).
{{event("focusout")}}{{domxref("FocusEvent")}}DOM L3An element is about to lose focus (bubbles).
{{event("fullscreenchange")}}{{domxref("Event")}}Full ScreenAn element was turned to fullscreen mode or back to normal mode.
{{event("fullscreenerror")}}{{domxref("Event")}}Full ScreenIt was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{event("gamepadconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been connected.
{{event("gamepaddisconnected")}}{{domxref("GamepadEvent")}}GamepadA gamepad has been disconnected.
{{event("gotpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement receives pointer capture.
{{event("hashchange")}}{{domxref("HashChangeEvent")}}HTML5The fragment identifier of the URL has changed (the part of the URL after the #).
{{event("lostpointercapture")}}{{domxref("PointerEvent")}}Pointer EventsElement lost pointer capture.
{{event("input")}}{{domxref("Event")}}HTML5The value of an element changes or the content of an element with the attribute contenteditable is modified.
{{event("invalid")}}{{domxref("Event")}}HTML5A submittable element has been checked and doesn't satisfy its constraints.
{{event("keydown")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down.
{{event("keypress")}}{{domxref("KeyboardEvent")}}DOM L3A key is pressed down and that key normally produces a character value (use input instead).
{{event("keyup")}}{{domxref("KeyboardEvent")}}DOM L3A key is released.
{{event("languagechange")}}{{domxref("Event")}}{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }} 
{{event("levelchange")}}{{domxref("Event")}}Battery statusThe level attribute has been updated.
{{event("load")}}{{domxref("UIEvent")}}DOM L3A resource and its dependent resources have finished loading.
load{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgression has been successful.
{{event("loadeddata")}}{{domxref("Event")}}HTML5 mediaThe first frame of the media has finished loading.
{{event("loadedmetadata")}}{{domxref("Event")}}HTML5 mediaThe metadata has been loaded.
{{event("loadend")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has stopped (after "error", "abort" or "load" have been dispatched).
{{event("loadstart")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestProgress has begun.
{{event("mark")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a named SSML "mark" tag.
message{{domxref("MessageEvent")}}WebSocketA message is received through a WebSocket.
message{{domxref("MessageEvent")}}Web WorkersA message is received from a Web Worker.
message{{domxref("MessageEvent")}}Web MessagingA message is received from a child (i)frame or a parent window.
message{{domxref("MessageEvent")}}Server Sent EventsA message is received through an event source.
{{event("message_(ServiceWorker)","message")}}{{domxref("ServiceWorkerMessageEvent")}} or {{domxref("ExtendableMessageEvent")}}, depending on context.Service WorkersA message is received from a service worker, or a message is received in a service worker from another context.
{{event("mousedown")}}{{domxref("MouseEvent")}}DOM L3A pointing device button (usually a mouse) is pressed on an element.
{{event("mouseenter")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached.
{{event("mouseleave")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached.
{{event("mousemove")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved over an element.
{{event("mouseout")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached or off one of its children.
{{event("mouseover")}}{{domxref("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{event("mouseup")}}{{domxref("MouseEvent")}}DOM L3A pointing device button is released over an element.
{{event("nomatch")}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a final result with no significant recognition.
{{event("notificationclick")}}{{domxref("NotificationEvent")}}{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}A system notification spawned by {{domxref("ServiceWorkerRegistration.showNotification()")}} has been clicked.
{{event("noupdate")}}{{domxref("Event")}}OfflineThe manifest hadn't changed.
{{event("obsolete")}}{{domxref("Event")}}OfflineThe manifest was found to have become a 404 or 410 page, so the application cache is being deleted.
{{event("offline")}}{{domxref("Event")}}HTML5 offlineThe browser has lost access to the network.
{{event("online")}}{{domxref("Event")}}HTML5 offlineThe browser has gained access to the network (but particular websites might be unreachable).
open{{domxref("Event")}}WebSocketA WebSocket connection has been established.
open{{domxref("Event")}}Server Sent EventsAn event source connection has been established.
{{event("orientationchange")}}{{domxref("Event")}}Screen OrientationThe orientation of the device (portrait/landscape) has changed
{{event("pagehide")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed from.
{{event("pageshow")}}{{domxref("PageTransitionEvent")}}HTML5A session history entry is being traversed to.
{{event("paste")}}{{domxref("ClipboardEvent")}}ClipboardData has been transferred from the system clipboard to the document.
{{event("pause")}}{{domxref("Event")}}HTML5 mediaPlayback has been paused.
{{event("pause_(SpeechSynthesis)", "pause")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance is paused part way through.
{{event("pointercancel")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer is unlikely to produce any more events.
{{event("pointerdown")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer enters the active buttons state.
{{event("pointerenter")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved inside the hit-testing boundary.
{{event("pointerleave")}}{{domxref("PointerEvent")}}Pointer EventsPointing device is moved out of the hit-testing boundary.
{{event("pointerlockchange")}}{{domxref("Event")}}Pointer LockThe pointer was locked or released.
{{event("pointerlockerror")}}{{domxref("Event")}}Pointer LockIt was impossible to lock the pointer for technical reasons or because the permission was denied.
{{event("pointermove")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer changed coordinates.
{{event("pointerout")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device moved out of hit-testing boundary or leaves detectable hover range.
{{event("pointerover")}}{{domxref("PointerEvent")}}Pointer EventsThe pointing device is moved into the hit-testing boundary.
{{event("pointerup")}}{{domxref("PointerEvent")}}Pointer EventsThe pointer leaves the active buttons state.
{{event("play")}}{{domxref("Event")}}HTML5 mediaPlayback has begun.
{{event("playing")}}{{domxref("Event")}}HTML5 mediaPlayback is ready to start after having been paused or delayed due to lack of data.
{{event("popstate")}}{{domxref("PopStateEvent")}}HTML5A session history entry is being navigated to (in certain cases).
{{event("progress")}}{{domxref("ProgressEvent")}}Progress and XMLHttpRequestIn progress.
progress{{domxref("ProgressEvent")}}OfflineThe user agent is downloading resources listed by the manifest.
{{event("push")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A Service Worker has received a push message.
{{event("pushsubscriptionchange")}}{{domxref("PushEvent")}}{{SpecName("Push API")}}A PushSubscription has expired.
{{event("ratechange")}}{{domxref("Event")}}HTML5 mediaThe playback rate has changed.
{{event("readystatechange")}}{{domxref("Event")}}HTML5 and XMLHttpRequestThe readyState attribute of a document has changed.
{{event("repeatEvent")}}{{domxref("TimeEvent")}}SVGA SMIL animation element is repeated.
{{event("reset")}}{{domxref("Event")}}DOM L2, HTML5A form is reset.
{{event("resize")}}{{domxref("UIEvent")}}DOM L3The document view has been resized.
{{event("resourcetimingbufferfull")}}{{domxref("Performance")}}Resource TimingThe browser's resource timing buffer is full.
{{event("result")}}{{domxref("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
{{event("resume")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}A paused utterance is resumed.
{{event("scroll")}}{{domxref("UIEvent")}}DOM L3The document view or an element has been scrolled.
{{event("seeked")}}{{domxref("Event")}}HTML5 mediaA seek operation completed.
{{event("seeking")}}{{domxref("Event")}}HTML5 mediaA seek operation began.
{{event("select")}}{{domxref("UIEvent")}}DOM L3Some text is being selected.
{{event("selectstart")}}{{domxref("Event")}}{{ SpecName('Selection API')}}A selection just started.
{{event("selectionchange")}}{{domxref("Event")}}{{ SpecName('Selection API')}}The selection in the document has been changed.
{{event("show")}}{{domxref("MouseEvent")}}HTML5A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute
{{event("soundend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has stopped being detected.
{{event("soundstart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has been detected.
{{event("speechend")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Speech recognised by the speech recognition service has stopped being detected.
{{event("speechstart")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}Sound that is recognised by the speech recognition service as speech has been detected.
{{event("stalled")}}{{domxref("Event")}}HTML5 mediaThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{event("start_(SpeechRecognition)","start")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
{{event("start_(SpeechSynthesis)","start")}}{{domxref("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance has begun to be spoken.
{{event("storage")}}{{domxref("StorageEvent")}}Web StorageA storage area (localStorage or sessionStorage) has changed.
{{event("submit")}}{{domxref("Event")}}DOM L2, HTML5A form is submitted.
success{{domxref("Event")}}IndexedDBA request successfully completed.
{{event("suspend")}}{{domxref("Event")}}HTML5 mediaMedia data loading has been suspended.
{{event("SVGAbort")}}{{domxref("SVGEvent")}}SVGPage loading has been stopped before the SVG was loaded.
{{event("SVGError")}}{{domxref("SVGEvent")}}SVGAn error has occurred before the SVG was loaded.
{{event("SVGLoad")}}{{domxref("SVGEvent")}}SVGAn SVG document has been loaded and parsed.
{{event("SVGResize")}}{{domxref("SVGEvent")}}SVGAn SVG document is being resized.
{{event("SVGScroll")}}{{domxref("SVGEvent")}}SVGAn SVG document is being scrolled.
{{event("SVGUnload")}}{{domxref("SVGEvent")}}SVGAn SVG document has been removed from a window or frame.
{{event("SVGZoom")}}{{domxref("SVGZoomEvent")}}SVGAn SVG document is being zoomed.
{{event("timeout")}}{{domxref("ProgressEvent")}}XMLHttpRequest 
{{event("timeupdate")}}{{domxref("Event")}}HTML5 mediaThe time indicated by the currentTime attribute has been updated.
{{event("touchcancel")}}{{domxref("TouchEvent")}}Touch EventsA touch point has been disrupted in an implementation-specific manners (too many touch points for example).
{{event("touchend")}}{{domxref("TouchEvent")}}Touch EventsA touch point is removed from the touch surface.
{{event("touchenter")}}{{domxref("TouchEvent")}}Touch Events RemovedA touch point is moved onto the interactive area of an element.
{{event("touchleave")}}{{domxref("TouchEvent")}}Touch Events RemovedA touch point is moved off the interactive area of an element.
{{event("touchmove")}}{{domxref("TouchEvent")}}Touch EventsA touch point is moved along the touch surface.
{{event("touchstart")}}{{domxref("TouchEvent")}}Touch EventsA touch point is placed on the touch surface.
{{event("transitionend")}}{{domxref("TransitionEvent")}}CSS TransitionsA CSS transition has completed.
{{event("unload")}}{{domxref("UIEvent")}}DOM L3The document or a dependent resource is being unloaded.
{{event("updateready")}}{{domxref("Event")}}OfflineThe resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache.
upgradeneeded IndexedDBAn attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created.
{{event("userproximity")}}{{domxref("UserProximityEvent")}}{{SpecName("Proximity Events")}}Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
{{event("voiceschanged")}}{{domxref("Event")}}{{SpecName('Web Speech API')}}The list of {{domxref("SpeechSynthesisVoice")}} objects that would be returned by the {{domxref("SpeechSynthesis.getVoices()")}} method has changed (when the {{event("voiceschanged")}} event fires.)
versionchange IndexedDBA versionchange transaction completed.
{{event("visibilitychange")}}{{domxref("Event")}}Page visibilityThe content of a tab has become visible or has been hidden.
{{event("volumechange")}}{{domxref("Event")}}HTML5 mediaThe volume has changed.
{{event("waiting")}}{{domxref("Event")}}HTML5 mediaPlayback has stopped because of a temporary lack of data.
{{event("wheel")}}{{gecko_minversion_inline("17")}}{{domxref("WheelEvent")}}DOM L3A wheel button of a pointing device is rotated in any direction.
+ +

Non-standard events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("afterscriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script has been executed.
{{event("beforescriptexecute")}}{{domxref("Event")}}Mozilla SpecificA script is about to be executed.
{{event("beforeinstallprompt")}}{{domxref("Event")}}Chrome specificA user is prompted to save a web site to a home screen on mobile.
{{event("cardstatechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.cardState")}} property changes value.
{{event("change")}}{{domxref("DeviceStorageChangeEvent")}}Firefox OS specificThis event is triggered each time a file is created, modified or deleted on a given storage area.
{{event("connectionInfoUpdate")}} Firefox OS specificThe informations about the signal strength and the link speed have been updated.
{{event("cfstatechange")}} Firefox OS specificThe call forwarding state changes.
{{event("datachange")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object changes values.
{{event("dataerror")}} Firefox OS specificThe {{domxref("MozMobileConnection.data")}} object receive an error from the RIL.
{{event("DOMMouseScroll")}}{{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{event("wheel")}} instead)
dragdrop {{deprecated_inline}}DragEventMozilla specificAn element is dropped (use {{event("drop")}} instead).
dragexit {{deprecated_inline}}DragEventMozilla specificA drag operation is being ended(use {{event("dragend")}} instead).
draggesture {{deprecated_inline}}DragEventMozilla specificThe user starts dragging an element or text selection (use {{event("dragstart")}} instead).
{{event("icccardlockerror")}} Firefox OS specificthe {{domxref("MozMobileConnection.unlockCardLock()")}} or {{domxref("MozMobileConnection.setCardLock()")}} methods fails.
{{event("iccinfochange")}} Firefox OS specificThe {{domxref("MozMobileConnection.iccInfo")}} object changes.
{{event("localized")}} Mozilla SpecificThe page has been localized using data-l10n-* attributes.
{{event("mousewheel")}}{{deprecated_inline}} IE inventedThe wheel button of a pointing device is rotated.
{{event("MozAudioAvailable")}}{{domxref("Event")}}Mozilla specificThe audio buffer is full and the corresponding raw samples are available.
MozBeforeResize {{obsolete_inline}} Mozilla specificA window is about to be resized.
{{event("mozbrowseractivitydone")}} Firefox OS Browser API-specificSent when some activity has been completed (complete description TBD.)
{{event("mozbrowserasyncscroll")}} Firefox OS Browser API-specificSent when the scroll position within a browser {{HTMLElement("iframe")}} changes.
{{event("mozbrowseraudioplaybackchange")}} Firefox OS Browser API-specificSent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.
{{event("mozbrowsercaretstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.
{{event("mozbrowserclose")}} Firefox OS Browser API-specificSent when window.close() is called within a browser {{HTMLElement("iframe")}}.
{{event("mozbrowsercontextmenu")}} Firefox OS Browser API-specificSent when a browser {{HTMLElement("iframe")}} try to open a context menu.
{{event("mozbrowserdocumentfirstpaint")}} Firefox OS Browser API-specificSent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.
{{event("mozbrowsererror")}} Firefox OS Browser API-specificSent when an error occured while trying to load a content within a browser iframe
{{event("mozbrowserfindchange")}} Firefox OS Browser API-specificSent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see HTMLIFrameElement search methods.)
{{event("mozbrowserfirstpaint")}} Firefox OS Browser API-specificSent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from about:blank.)
{{event("mozbrowsericonchange")}} Firefox OS Browser API-specificSent when the favicon of a browser iframe changes.
{{event("mozbrowserlocationchange")}} Firefox OS Browser API-specificSent when an browser iframe's location changes.
{{event("mozbrowserloadend")}} Firefox OS Browser API-specificSent when the browser iframe has finished loading all its assets.
{{event("mozbrowserloadstart")}} Firefox OS Browser API-specificSent when the browser iframe starts to load a new page.
{{event("mozbrowsermanifestchange")}} Firefox OS Browser API-specificSent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.
{{event("mozbrowsermetachange")}} Firefox OS Browser API-specificSent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.
{{event("mozbrowseropensearch")}} Firefox OS Browser API-specificSent when a link to a search engine is found.
{{event("mozbrowseropentab")}} Firefox OS Browser API-specificSent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.)
{{event("mozbrowseropenwindow")}} Firefox OS Browser API-specificSent when {{domxref("window.open()")}} is called within a browser iframe.
{{event("mozbrowserresize")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}}'s window size has changed.
{{event("mozbrowserscroll")}} Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}} content scrolls.
{{event("mozbrowserscrollareachanged")}} Firefox OS Browser API-specificSent when the available scrolling area  in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)
{{event("mozbrowserscrollviewchange")}} Firefox OS Browser API-specificSent when asynchronous scrolling (i.e. APCZ) starts or stops.
{{event("mozbrowsersecuritychange")}} Firefox OS Browser API-specificSent when the SSL state changes within a browser iframe.
{{event("mozbrowserselectionstatechanged")}} Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{event("mozbrowsercaretstatechanged")}} instead.
{{event("mozbrowsershowmodalprompt")}} Firefox OS Browser API-specificSent when {{domxref("window.alert","alert()")}}, {{domxref("window.confirm","confirm()")}} or {{domxref("window.prompt","prompt()")}} are called within a browser iframe
{{event("mozbrowsertitlechange")}} Firefox OS Browser API-specificSent when the document.title changes within a browser iframe.
{{event("mozbrowserusernameandpasswordrequired")}} Firefox OS Browser API-specificSent when an HTTP authentification is requested.
{{event("mozbrowservisibilitychange")}} Firefox OS Browser API-specificSent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{domxref("HTMLIFrameElement.setVisible","setVisible()")}}.
{{event("MozGamepadButtonDown")}} To be specifiedA gamepad button is pressed down.
{{event("MozGamepadButtonUp")}} To be specifiedA gamepad button is released.
{{event("MozMousePixelScroll")}} {{deprecated_inline}} Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)
{{event("MozOrientation")}} {{deprecated_inline}} Mozilla specificFresh data is available from an orientation sensor (see deviceorientation).
{{event("MozScrolledAreaChanged")}}{{domxref("UIEvent")}}Mozilla specificThe document view has been scrolled or resized.
{{event("moztimechange")}} Mozilla specificThe time of the device has been changed.
MozTouchDown {{deprecated_inline}} Mozilla specificA touch point is placed on the touch surface (use touchstart instead).
MozTouchMove {{deprecated_inline}} Mozilla specificA touch point is moved along the touch surface (use touchmove instead).
MozTouchUp {{deprecated_inline}} Mozilla specificA touch point is removed from the touch surface (use touchend instead).
{{event("alerting")}}{{domxref("CallEvent")}}To be specifiedThe correspondent is being alerted (his/her phone is ringing).
{{event("busy")}}{{domxref("CallEvent")}}To be specifiedThe line of the correspondent is busy.
{{event("callschanged")}}{{domxref("CallEvent")}}To be specifiedA call has been added or removed from the list of current calls.
onconnected {{event("connected")}}{{domxref("CallEvent")}}To be specifiedA call has been connected.
{{event("connecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to connect.
{{event("delivered")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been successfully delivered.
{{event("dialing")}}{{domxref("CallEvent")}}To be specifiedThe number of a correspondent has been dialed.
{{event("disabled")}} Firefox OS specificWifi has been disabled on the device.
{{event("disconnected")}}{{domxref("CallEvent")}}To be specifiedA call has been disconnected.
{{event("disconnecting")}}{{domxref("CallEvent")}}To be specifiedA call is about to disconnect.
{{event("enabled")}} Firefox OS specificWifi has been enabled on the device.
{{event("error_(Telephony)","error")}}{{domxref("CallEvent")}}To be specifiedAn error occurred.
{{event("held")}}{{domxref("CallEvent")}}To be specifiedA call has been held.
{{event("holding")}}{{domxref("CallEvent")}}To be specifiedA call is about to be held.
{{event("incoming")}}{{domxref("CallEvent")}}To be specifiedA call is being received.
{{event("received")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been received.
{{event("resuming")}}{{domxref("CallEvent")}}To be specifiedA call is about to resume.
{{event("sent")}}{{domxref("SMSEvent")}}To be specifiedAn SMS has been sent.
{{event("statechange")}}{{domxref("CallEvent")}}To be specifiedThe state of a call has changed.
{{event("statuschange")}} Firefox OS specificThe status of the Wifi connection changed.
{{event("overflow")}}{{domxref("UIEvent")}}Mozilla specificAn element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).
{{event("smartcard-insert")}} Mozilla specificA smartcard has been inserted.
{{event("smartcard-remove")}} Mozilla specificA smartcard has been removed.
{{event("stkcommand")}} Firefox OS specificThe STK Proactive Command is issued from ICC.
{{event("stksessionend")}} Firefox OS specificThe STK Session is terminated by ICC.
text Mozilla SpecificA generic composition event occurred.
{{event("underflow")}}{{domxref("UIEvent")}}Mozilla specificAn element is no longer overflowed by its content (only works for elements styled with overflow != visible).
uploadprogress {{deprecated_inline}}{{domxref("ProgressEvent")}}Mozilla SpecificUpload is in progress (see {{event("progress")}}).
+

{{event("ussdreceived")}}

+ 		 Firefox OS specificA new USSD message is received
{{event("voicechange")}} Firefox OS specificThe {{domxref("MozMobileConnection.voice")}} object changes values.
+ +

Mozilla-specific events

+ +
+

Note: those events are never exposed to web content and can only be used in chrome content context.

+
+ +

XUL events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{event("broadcast")}} XULAn observer noticed a change to the attributes of a watched broadcaster.
{{event("CheckboxStateChange")}} XULThe state of a checkbox has been changed either by a user action or by a script (useful for accessibility).
close XULThe close button of the window has been clicked.
{{event("command")}} XULAn element has been activated.
{{event("commandupdate")}} XULA command update occurred on a commandset element.
{{event("DOMMenuItemActive")}} XULA menu or menuitem has been hovered or highlighted.
{{event("DOMMenuItemInactive")}} XULA menu or menuitem is no longer hovered or highlighted.
{{event("popuphidden")}}PopupEventXULA menupopup, panel or tooltip has been hidden.
{{event("popuphiding")}}PopupEventXULA menupopup, panel or tooltip is about to be hidden.
{{event("popupshowing")}}PopupEventXULA menupopup, panel or tooltip is about to become visible.
{{event("popupshown")}}PopupEventXULA menupopup, panel or tooltip has become visible.
{{event("RadioStateChange")}} XULThe state of a radio has been changed either by a user action or by a script (useful for accessibility).
{{event("ValueChange")}} XULThe value of an element has changed (a progress bar for example, useful for accessibility).
+ +

Add-on-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
MozSwipeGesture Addons specificA touch point is swiped across the touch surface
MozMagnifyGestureStart Addons specificTwo touch points start to move away from each other.
MozMagnifyGestureUpdate Addons specificTwo touch points move away from each other (after a MozMagnifyGestureStart).
MozMagnifyGesture Addons specificTwo touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).
MozRotateGestureStart Addons specificTwo touch points start to rotate around a point.
MozRotateGestureUpdate Addons specificTwo touch points rotate around a point (after a MozRotateGestureStart).
MozRotateGesture Addons specificTwo touch points rotate around a point (after a sequence of MozRotateGestureUpdate).
MozTapGesture Addons specificTwo touch points are tapped on the touch surface.
MozPressTapGesture Addons specificA "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).
MozEdgeUIGesture Addons specificA touch point is swiped across the touch surface to invoke the edge UI (Win8 only).
MozAfterPaint Addons specificContent has been repainted.
DOMPopupBlocked Addons specificA popup has been blocked
DOMWindowCreated Addons specificA window has been created.
DOMWindowClose Addons specificA window is about to be closed.
DOMTitleChanged Addons specifcThe title of a window has changed.
DOMLinkAdded Addons specifcA link has been added a document.
DOMLinkRemoved Addons specifcA link has been removed inside from a document.
DOMMetaAdded Addons specificA meta element has been added to a document.
DOMMetaRemoved Addons specificA meta element has been removed from a document.
DOMWillOpenModalDialog Addons specificA modal dialog is about to open.
DOMModalDialogClosed Addons specificA modal dialog has been closed.
DOMAutoComplete Addons specificThe content of an element has been auto-completed.
DOMFrameContentLoaded Addons specificThe frame has finished loading (but not its dependent resources).
AlertActive Addons specificA notification element is shown.
AlertClose Addons specificA notification element is closed.
fullscreen Addons specificBrowser fullscreen mode has been entered or left.
sizemodechange Addons specificWindow has entered/left fullscreen mode, or has been minimized/unminimized.
MozEnteredDomFullscreen Addons specificDOM fullscreen mode has been entered.
SSWindowClosing Addons specificThe session store will stop tracking this window.
SSTabClosing Addons specificThe session store will stop tracking this tab.
SSTabRestoring Addons specificA tab is about to be restored.
SSTabRestored Addons specificA tab has been restored.
SSWindowStateReady Addons specificA window state has switched to "ready".
SSWindowStateBusy Addons specificA window state has switched to "busy".
tabviewsearchenabled Addons specificThe search feature of Panorama has been activated
tabviewsearchdisabled Addons specificThe search feature of Panorama has been deactivated
tabviewframeinitialized Addons specificThe frame container of Panorama has been initialized
tabviewshown Addons specificThe Panorama tab has been shown
tabviewhidden Addons specificThe Panorama tab has been hidden
TabOpen Addons specificA tab has been opened.
TabClose Addons specificA tab has been closed.
TabSelect Addons specificA tab has been selected.
TabShow Addons specificA tab has been shown.
TabHide Addons specificA tab has been hidden.
TabPinned Addons specificA tab has been pinned.
TabUnpinned Addons specificA tab has been unpinned.
+ +

Developer tool-specific events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
CssRuleViewRefreshed devtools specificThe "Rules" view of the style inspector has been updated.
CssRuleViewChanged devtools specificThe "Rules" view of the style inspector has been changed.
CssRuleViewCSSLinkClicked devtools specificA link to a CSS file has been clicked in the "Rules" view of the style inspector.
+ +

Categories

+ +

Animation events

+ +

{{event("animationend")}}, {{event("animationiteration")}}, {{event("animationstart")}}, {{event("beginEvent")}}, {{event("endEvent")}}, {{event("repeatEvent")}}

+ +

Battery events

+ +

{{event("chargingchange")}} {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} {{event("levelchange")}}

+ +

Call events

+ +

{{event("alerting")}}, {{event("busy")}}, {{event("callschanged")}} {{event("cfstatechange")}}, {{event("connected")}}, {{event("connecting")}}, {{event("dialing")}}, {{event("disconnected")}}, {{event("disconnecting")}}, {{event("error_(Telephony)","error")}}, {{event("held")}}, {{event("holding")}}, {{event("incoming")}}, {{event("resuming")}}, {{event("statechange")}}, {{event("voicechange")}}

+ +

CSS events

+ +

CssRuleViewRefreshed, CssRuleViewChanged, CssRuleViewCSSLinkClicked, {{event("transitionend")}}

+ +

Database events

+ +

abort, blocked, complete, {{event("error")}} (link), success, upgradeneeded, versionchange

+ +

Document events

+ +

DOMLinkAdded, DOMLinkRemoved, DOMMetaAdded, DOMMetaRemoved, DOMWillOpenModalDialog, DOMModalDialogClosed, {{event("unload")}}

+ +

DOM mutation events

+ +

DOMAttributeNameChanged, DOMAttrModified, DOMCharacterDataModified, {{event("DOMContentLoaded")}}, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified

+ +

Drag events

+ +

{{event("drag")}}, dragdrop, {{event("dragend")}}, {{event("dragenter")}}, dragexit, draggesture, {{event("dragleave")}}, {{event("dragover")}}, {{event("dragstart")}}, {{event("drop")}}

+ +

Element events

+ +

{{event("invalid")}}, {{event("overflow")}}, {{event("underflow")}}, DOMAutoComplete, {{event("command")}}, {{event("commandupdate")}}

+ +

Focus events

+ +

{{event("blur")}}, {{event("change")}}, DOMFocusIn, DOMFocusOut, {{event("focus")}}, {{event("focusin")}}, {{event("focusout")}}

+ +

Form events

+ +

{{event("reset")}}, {{event("submit")}}

+ +

Frame events

+ +

{{event("mozbrowserclose")}}, {{event("mozbrowsercontextmenu")}}, {{event("mozbrowsererror")}}, {{event("mozbrowsericonchange")}}, {{event("mozbrowserlocationchange")}}, {{event("mozbrowserloadend")}}, {{event("mozbrowserloadstart")}}, {{event("mozbrowseropenwindow")}}, {{event("mozbrowsersecuritychange")}}, {{event("mozbrowsershowmodalprompt")}} (link), {{event("mozbrowsertitlechange")}}, DOMFrameContentLoaded

+ +

Input device events

+ +

{{event("click")}}, {{event("contextmenu")}}, {{event("DOMMouseScroll")}}, {{event("dblclick")}}, {{event("gamepadconnected")}}, {{event("gamepaddisconnected")}}, {{event("keydown")}}, {{event("keypress")}}, {{event("keyup")}}, {{event("MozGamepadButtonDown")}}, {{event("MozGamepadButtonUp")}}, {{event("mousedown")}}, {{event("mouseenter")}}, {{event("mouseleave")}}, {{event("mousemove")}}, {{event("mouseout")}}, {{event("mouseover")}}, {{event("mouseup")}}, {{event("mousewheel")}}, {{event("MozMousePixelScroll")}}, {{event("pointerlockchange")}}, {{event("pointerlockerror")}},{{event("wheel")}}

+ +

Media events

+ +

{{event("audioprocess")}}, {{event("canplay")}}, {{event("canplaythrough")}}, {{event("durationchange")}}, {{event("emptied")}}, {{event("ended")}}, {{event("ended_(Web_Audio)", "ended")}}, {{event("loadeddata")}}, {{event("loadedmetadata")}}, {{event("MozAudioAvailable")}}, {{event("pause")}}, {{event("play")}}, {{event("playing")}}, {{event("ratechange")}}, {{event("seeked")}}, {{event("seeking")}}, {{event("stalled")}}, {{event("suspend")}}, {{event("timeupdate")}}, {{event("volumechange")}}, {{event("waiting")}}, {{event("complete")}}

+ + + +

{{event("DOMMenuItemActive")}}, {{event("DOMMenuItemInactive")}}

+ +

Network events

+ +

{{event("datachange")}}, {{event("dataerror")}}, {{event("disabled")}}, {{event("enabled")}}, {{event("offline")}}, {{event("online")}}, {{event("statuschange")}}, {{event("connectionInfoUpdate")}},

+ +

Notification events

+ +

AlertActive, AlertClose

+ +

Pointer events

+ +

{{event("pointerover")}}, {{event("pointerenter")}}, {{event("pointerdown")}}, {{event("pointermove")}}, {{event("pointerup")}}, {{event("pointercancel")}}, {{event("pointerout")}}, {{event("pointerleave")}}, {{event("gotpointercapture")}}, {{event("lostpointercapture")}}

+ + + +

{{event("popuphidden")}}, {{event("popuphiding")}}, {{event("popupshowing")}}, {{event("popupshown")}}, DOMPopupBlocked

+ +

Printing events

+ +

{{event("afterprint")}}, {{event("beforeprint")}}

+ +

Progress events

+ +

abort, {{event("error")}}, load, {{event("loadend")}}, {{event("loadstart")}}, {{event("progress")}}, progress, {{event("timeout")}}, uploadprogress

+ +

Resource events

+ +

{{event("abort")}}, {{event("cached")}}, {{event("error")}}, {{event("load")}}

+ +

Script events

+ +

{{event("afterscriptexecute")}}, {{event("beforescriptexecute")}}

+ +

Sensor events

+ +

{{event("compassneedscalibration")}}, {{event("devicelight")}}, {{event("devicemotion")}}, {{event("deviceorientation")}}, {{event("deviceproximity")}}, {{event("MozOrientation")}}, {{event("orientationchange")}}, {{event("userproximity")}}

+ +

Session history events

+ +

{{event("pagehide")}}, {{event("pageshow")}}, {{event("popstate")}}

+ +

Smartcard events

+ +

{{event("icccardlockerror")}}, {{event("iccinfochange")}}, {{event("smartcard-insert")}}, {{event("smartcard-remove")}}, {{event("stkcommand")}}, {{event("stksessionend")}}, {{event("cardstatechange")}}

+ +

SMS and USSD events

+ +

{{event("delivered")}}, {{event("received")}}, {{event("sent")}}, {{event("ussdreceived")}}

+ +

Storage events

+ +

{{event("change")}} (see {{anch("Non-standard events")}}), {{event("storage")}}

+ +

SVG events

+ +

{{event("SVGAbort")}}, {{event("SVGError")}}, {{event("SVGLoad")}}, {{event("SVGResize")}}, {{event("SVGScroll")}}, {{event("SVGUnload")}}, {{event("SVGZoom")}}

+ +

Tab events

+ +

tabviewsearchenabled, tabviewsearchdisabled, tabviewframeinitialized, tabviewshown, tabviewhidden, TabOpen, TabClose, TabSelect, TabShow, TabHide, TabPinned, TabUnpinned, SSTabClosing, SSTabRestoring, SSTabRestored, {{event("visibilitychange")}}

+ +

Text events

+ +

{{event("compositionend")}}, {{event("compositionstart")}}, {{event("compositionupdate")}}, {{event("copy")}}, {{event("cut")}}, {{event("paste")}}, {{event("select")}}, text

+ +

Touch events

+ +

MozEdgeUIGesture, MozMagnifyGesture, MozMagnifyGestureStart, MozMagnifyGestureUpdate, MozPressTapGesture, MozRotateGesture, MozRotateGestureStart, MozRotateGestureUpdate, MozSwipeGesture, MozTapGesture, MozTouchDown, MozTouchMove, MozTouchUp, {{event("touchcancel")}}, {{event("touchend")}}, {{event("touchenter")}}, {{event("touchleave")}}, {{event("touchmove")}}, {{event("touchstart")}}

+ +

Update events

+ +

{{event("checking")}}, {{event("downloading")}}, {{event("error")}}, {{event("noupdate")}}, {{event("obsolete")}}, {{event("updateready")}}

+ +

Value change events

+ +

{{event("broadcast")}}, {{event("CheckboxStateChange")}}, {{event("hashchange")}}, {{event("input")}}, {{event("RadioStateChange")}}, {{event("readystatechange")}}, {{event("ValueChange")}}

+ +

View events

+ +

fullscreen, {{event("fullscreenchange")}}, {{event("fullscreenerror")}}, MozEnteredDomFullscreen, {{event("MozScrolledAreaChanged")}}, {{event("resize")}}, {{event("scroll")}}, sizemodechange

+ +

Websocket events

+ +

close, {{event("error")}}, message, open

+ +

Window events

+ +

DOMWindowCreated, DOMWindowClose, DOMTitleChanged, MozBeforeResize {{obsolete_inline}}, SSWindowClosing, SSWindowStateReady, SSWindowStateBusy, close

+ +

Uncategorized events

+ +

{{event("beforeunload")}}, {{event("localized")}}, message, message, message, MozAfterPaint, {{event("moztimechange")}}, open, {{event("show")}}

+ +

See also

+ + diff --git a/files/it/web/events/load/index.html b/files/it/web/events/load/index.html new file mode 100644 index 0000000000..2939f32c27 --- /dev/null +++ b/files/it/web/events/load/index.html @@ -0,0 +1,123 @@ +--- +title: load +slug: Web/Events/load +tags: + - CompatibilitàBrowser + - Evento +translation_of: Web/API/Window/load_event +--- +

L'evento load si attiva quando una risorsa e le sue risorse dipendenti hanno completato il caricamento.

+ +

Esempi

+ +

Window

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("Tutte le risorse hanno terminato il caricamento!");
+  });
+</script>
+ +

L'elemento script

+ +
<script>
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Lo script ha terminato il caricamento e l'esecuzione");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+</script>
+ +

Info generali

+ +
+
Specifica
+
DOM L3
+
Interfaccia
+
UIEvent
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Window, Document, Element
+
Azione predefinita
+
Nessuna.
+
+ +

Proprietà

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ProprietàTipoDescrizione
target {{readonlyInline}}{{domxref("EventTarget")}}Il target dell'evento (l'obiettivo più in alto nell'albero del DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Il tipo di evento.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Se l'evento normalmente bolle o no.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Se l'evento è cancellabile o meno.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window del documento)
detail {{readonlyInline}}long (float)0
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}}Questo collega alla sezione nei passaggi che vengono eseguiti alla fine del caricamento di un documento. gli eventi di "caricamento" vengono attivati anche a molti elementi. E nota che ci sono molti punti nelle specifiche che fanno riferimento a cose che possono "ritardare l'evento load".
+ +

Eventi correlati

+ + diff --git a/files/it/web/guide/ajax/index.html b/files/it/web/guide/ajax/index.html new file mode 100644 index 0000000000..5f8b87ee74 --- /dev/null +++ b/files/it/web/guide/ajax/index.html @@ -0,0 +1,57 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - Tutte_le_categorie +translation_of: Web/Guide/AJAX +--- +

+

+
AJAX:Iniziare
Una introduzione ad AJAX.
+

Asynchronous JavaScript and XML (AJAX) non è di per sè una tecnologia, ma è un termine che descrive un "nuovo" approccio all'utilizzo di diverse tecnologie esistenti, compresi: HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT e l'oggetto XMLHttpRequest. Grazie all'utilizzo di queste tecnologie in combinazione con il modello AJAX, le applicazioni web possono eseguire aggiornamenti rapidi e incrementali dell'interfaccia utente senza ricaricare nel browser l'intera pagina. Questo rende l'applicazione più performante e più reattiva alle azioni dell'utente.
+Il W3C ha pubblicato una bozza di standard per l'oggetto XMLHttpRequest. +

+ + + + +
+

Documentazione

+
AJAX:Iniziare +
Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per cominciare. +
+
Compatibilità di AJAX +
Quali browser supportano AJAX? +
+
Ajax: A New Approach to Web Applications (EN) +
Jesse James Garrett, di adaptive path, ha scritto questa introduzione ad AJAX nel febbraio 2005. +
+
A Simpler Ajax Path (EN) +
"E' facile avvalersi dell'oggetto XMLHttpRequest per costruire un'applicazione web che si comporti come un'applicazione desktop utilizzando però strumenti come i web forms per ricevere input dagli utenti." +
+
Fixing the Back Button and Enabling Bookmarking for AJAX Apps (EN) +
Mike Stenhouse ha realizzato questo articolo che esamina nel dettaglio alcuni metodi che è possibile utilizzare per risolvere i problemi relativi al bottone "Indietro" e ai Bookmark nelle applicazioni AJAX. +
+
Ajax Mistakes (EN) +
Alex Bosworth ha scritto questo articolo che evidenzia alcuni errori comuni degli sviluppatori AJAX.
+		 +

Strumenti

+ +

Argomenti correlati

+ +
+

Interwiki Language Links +

{{ languages( { "ca": "ca/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }} diff --git a/files/it/web/guide/ajax/iniziare/index.html b/files/it/web/guide/ajax/iniziare/index.html new file mode 100644 index 0000000000..f473f64d1e --- /dev/null +++ b/files/it/web/guide/ajax/iniziare/index.html @@ -0,0 +1,252 @@ +--- +title: Iniziare +slug: Web/Guide/AJAX/Iniziare +tags: + - AJAX + - Tutte_le_categorie +translation_of: Web/Guide/AJAX/Getting_Started +--- +

 

+ +

Questo articolo spiega le fondamenta di AJAX e fornisce due semplici esempi per iniziare.

+ +

Cos'è AJAX?

+ +

AJAX (Asynchronous JavaScript and XML) è un termine coniato recentemente per descrivere due utili funzionalità che sono presenti nei browser da anni, ma che sono state sottovalutate dalla maggioranza degli sviluppatori web fino a quando, di recente, alcune applicazioni come Gmail, Google suggest e Google Maps le hanno portate in auge.

+ +

Le funzionalità di cui stiamo parlando sono:

+ + + +

Passo 1 – Dì "per favore", o Come fare una richiesta HTTP

+ +

Per effettuare una richiesta HTTP al server utilizzando JavaScript, si utilizza un'istanza di una classe che fornisce detta funzionalità. Tale classe è stata introdotta originariamente in Internet Explorer come oggetto ActiveX e si chiamava XMLHTTP. Successivamente Mozilla, Safari e altri browser hanno implementato la classe XMLHttpRequest, che supporta gli stessi metodi e le stesse proprietà della classe di Microsoft.

+ +

Il risultato è che per creare un'istanza (oggetto) da tale classe che funzioni sui diversi browser, occorre scrivere un codice simile al seguente:

+ +
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +

(Per scopi illustrativi, il codice qui riportato è una versione leggermente semplificata del codice generalmente utilizzato per creare un'istanza XMLHTTP. Per un esempio più pratico, si veda il Passo 3 di questo articolo)

+ +

Certe versioni di alcuni browser della famiglia Mozilla, non si comportano correttamente nel caso in cui la risposta del server non contiene un'intestazione HTTP mime-type. Per ovviare a questo problema, è possibile utilizzare un metodo aggiuntive per sovrascrivere l'header inviato dal server, nel caso non sia presente o non sia impostato a text/xml.

+ +
http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+
+ +

Dopodichè occorre decidere cosa fare con la risposta inviata dal server. Quindi bisogna dire all'oggetto XMLHttpRequest quale funzione JavaScript elaborerà il codice XML. Questo si fa impostando la proprietà onreadystatechange dell'oggetto con il nome della funzione JavaScript, in questo modo:

+ +

http_request.onreadystatechange = nomeFunzione;

+ +

Si noti che non ci sono parentesi dopo il nome della funzione e non viene passato alcun parametro, perchè si sta semplicemente assegnando un riferimento alla funzione, non la si sta ancora chiamando. Inoltre, invece di passare il nome di una funzione, si potrebbe utilizzare la tecnica JavaScript di definire funzioni "al volo" e di definire le azioni che elaboreranno la risposta XML, in questo modo:

+ +
http_request.onreadystatechange = function(){
+    // azioni da eseguire...
+};
+
+ +

Dopo aver dichiarato ciò che accadrà quando si riceverà la risposta dal server, occorre inviare la richiesta. Bisogna chiamare i metodi open() e send() della classe che esegue le richieste, in questo modo:

+ +
http_request.open('GET', 'http://www.esempio.org/qualsiasi.file', true);
+http_request.send(null);
+
+ + + +

Il parametro del metodo send() è costituito dai dati che si vogliono inviare al server se la richiesta è di tipo POST. I dati vengono passati sotto forma di querystring, così:

+ +

nome1=valore1&nome2=valore2&ecc=ecc

+ +

Si noti che se si desidera inviare i dati come POST, occorre modificare il tipo MIME della richiesta con la riga seguente:

+ +
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

In caso contrario, il server ignorerà la richiesta.

+ +

Step 2 – "Via!" o Come gestire la risposta del server

+ +

Come si è detto, all'atto di inviare la richiesta, si è fornito il nome della funzione JavaScript che deve elaborare la risposta.

+ +

http_request.onreadystatechange = nomeFunzione;

+ +

Ma cosa dovrebbe fare questa funzione? Primo, la funzione deve controllare lo stato della richiesta. Se lo stato ha un valore di 4, significa che la risposta è stata ricevuta per intero e si può continuare l'elaborazione:

+ +

 

+ +
if (http_request.readyState == 4) {
+    // tutto a posto, la risposta è stata ricevuta
+} else {
+    // non sono ancora pronto
+}
+
+ +

Ecco la lista completa dei possibili valori di readyState:

+ + + +

(Fonte) (1)

+ +

Bisognerà poi controllare il codice di stato della risposta HTTP. Tutti i codici possibili sono elencati nel sito del W3C. Per i nostri scopi, ci interessa soltanto il codice 200 OK.

+ +
if (http_request.status == 200) {
+    // perfetto!
+} else {
+    // c'è stato un problema nella richiesta,
+    // per esempio un codice di errore 404 (Not Found)
+    // o 500 (Internal Server Error)
+}
+
+ +

Una volta controllati lo stato della richiesta e il codice di stato HTTP della risposta, sarà lo sviluppatore a decidere cosa desidera fare con i dati ricevuti dal server. Per accedere ad essi, vi sono due possibilità:

+ + + +

Passo 3 - "Tutti insieme ora!", Un semplice esempio

+ +

Vediamo ora tutti gli elementi esaminati finora combinati insieme. Il seguente JavaScript richiede un documento HTML (test.html), che contiene il testo "Sono un test.", e farà un alert() coi contenuti di questo file.

+ +
<script type="text/javascript" language="javascript">
+
+
+
+    function eseguiRichiesta(url) {
+
+        var http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Vedi note sotto
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Giving up :( Non riesco a creare una istanza XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = function() { alertContents(http_request); };
+        http_request.open('GET', url, true);
+        http_request.send(null);
+
+    }
+
+    function alertContents(http_request) {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Si è verificato un problema con la richiesta');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="eseguiRichiesta('test.html')">
+        Fai una richiesta
+</span>
+
+ +

In questo esempio:

+ + + +

Si può provare questo esempio qui e si può leggere il file "test.html" qui.

+ +

Nota: La riga di codice http_request.overrideMimeType('text/xml'); causa degli errori nella Console JavaScript di Firefox 1.5 o superiore nel caso che la pagina chiamata non sia costituita da XML ben formato (come in questo caso). Questo comportamento è corretto ed è documentato qui: https://bugzilla.mozilla.org/show_bug.cgi?id=311724 - l'articolo verrà rivisto per correggere questo errore.

+ +

Nota 2: se si invia una richiesta con una porzione di codice che restituisce XML e non un file XML statico, bisogna impostare alcune intestazioni nella risposta perchè la pagina funzioni anche su Internet Explorer. Se non si imposta l'intestazione Content-Type: application/xml, IE lancia un errore JavaScript 'Object Expected' appena si cerca di accedere a un elemento XML. Se non si imposta l'intestazione Cache-Control: no-cache, il browser registra la risposta nella cache e non rieseguirà più la richiesta, il che fa impazzire molti sviluppatori in fase di debugging.

+ +

Nota 3: se la variabile http_request è globale, se vi sono altre funzioni che chiamano makeRequest(), possono sovrasciversi a vicenda. Per evitare questo problema, occorre dichiarare questa variabile come locale e passarla alla funzione alertContent().

+ +

Nota 4: nel registrare la funzione callback per onreadystatechange non è possibile passare alcun argomento:

+ +
http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (richiesta simultanea)
+http_request.onreadystatechange = alertContents(http_request); //2 (non funziona)
+http_request.onreadystatechange = alertContents;  //3 (variabile globale)
+
+ +

Il metodo 1 permette di elaborare diverse richieste simultaneamente. Il metodo 2 non funziona. Il metodo 3 è da utilizzare se http_request è una variabile globale.

+ +

Passo 4 - "Gli X-Files", o Elaborare la risposta XML

+ +

Nell'esempio precedente, dopo che la risposta HTTP è stata ricevuta si è utilizzata la proprietà reponseText dell'oggetto richiesta, che conteneva i contenuti del file <tt>test.html</tt>. Proveremo ora a utilizzare la proprietà responseXML.

+ +

Prima di tutto, occorre creare un documento XML valido che verrà chiamato in seguito. Il documento (<tt>test.xml</tt>) contiene quanto segue:

+ +
<?xml version="1.0" ?>
+<root>
+    Sono un test.
+</root>
+
+ +

Nello script occorre cambiare soltanto la riga seguente:

+ +
...
+onclick="eseguiRichiesta('test.xml')">
+...
+
+ +

In alertContents(), bisogna poi sostituire la riga alert(http_request.responseText); con:

+ +
var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

Questo codice prende l'oggetto XMLDocument fornito da responseXML e utilizza i metodi DOM per accedere ai dati contenuti nel documento XML. Si può vedere test.xml qui. Si può vedere in azione questa versione dello script qui.

+ +

Per ulteriori dettagli sui metodi DOM, si vedano i documenti sull'Implementazione DOM di Mozilla.

+ +
+

La bozza di standard del W3C indica i seguenti valori per la proprietà readystate:

+ + + +

Fonte

+ +

{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }}

diff --git a/files/it/web/guide/api/index.html b/files/it/web/guide/api/index.html new file mode 100644 index 0000000000..3f571c0cb8 --- /dev/null +++ b/files/it/web/guide/api/index.html @@ -0,0 +1,26 @@ +--- +title: Guide to Web APIs +slug: Web/Guide/API +tags: + - API + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide/API +--- +

Here you'll find links to each of the guides introducing and explaining each of the APIs that make up the Web development architecture.

+ + +

Web APIs from A to Z

+ +

{{ListGroups}}

+ +

See also

+ + diff --git a/files/it/web/guide/css/index.html b/files/it/web/guide/css/index.html new file mode 100644 index 0000000000..20621b40b0 --- /dev/null +++ b/files/it/web/guide/css/index.html @@ -0,0 +1,23 @@ +--- +title: CSS developer guide +slug: Web/Guide/CSS +tags: + - CSS + - Guide + - Landing + - NeedsTranslation + - TopicStub +translation_of: Learn/CSS +--- +

{{draft}}

+

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or other markup languages such as SVG. CSS describes how the structured elements in the document are to be rendered on screen, on paper, in speech, or on other media. The ability to adjust the document's presentation depending on the output medium is a key feature of CSS.

+

CSS is one of the core languages of the open Web and has a standardized W3C specification.

+

{{LandingPageListSubpages}}

+

Pages elsewhere

+

Here are other pages related to CSS that should be linked to from here.

+

See also

+ diff --git a/files/it/web/guide/graphics/index.html b/files/it/web/guide/graphics/index.html new file mode 100644 index 0000000000..7221d89ec7 --- /dev/null +++ b/files/it/web/guide/graphics/index.html @@ -0,0 +1,58 @@ +--- +title: Graphics on the Web +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Grafica + - HTML5 + - SVG + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +

I moderni Siti Web e Applicazioni, spesso necessitano di mostrare una grafica. Mostrare delle immagini statiche, può essere fatto facilmente usando l'elemento immagine {{HTMLElement("img")}} , Oppure settando lo sfondo di elementi HTML usando la proprietà dello sfondo css {{cssxref("background-image")}}. Spesso è possibile creare anche grafici "al volo", oppure manipolare immagini dopo averle fatte.Questi articoli forniscono infomazioni su come si può ottenere questo risultato

+ +
+
+

Grafiche 2D

+ +
+
Canvas
+
L'elemento {{HTMLElement("canvas")}} fornisce APIs per disegnare grafica 2D usando JavaScript.
+
SVG
+
La Grafica a Vettori Scalabile (SVG) consente di usare linee, curve, e altre forme geometriche per realizzare grafica. Evitando l'utilizzo di bitmaps, potete creare immagini che scalano in modo pulito ad ogni dimensione.
+
+ +

 

+ +

 

+ +

 

+ +

 

+ +

View All...

+
+ +
+

Grafiche 3D

+ +
+
WebGL
+
Una guida per come iniziare con WebGL, L' API di grafica 3D per il Web. Questa tecnologia consente un uso standard delle OpenGL.Ad esempio un contenuto Web
+
+ +

Video

+ +
+
Usare  l'audio e il video HTML5
+
Incorporare un video in un documento HTML e controllare la riproduzione.
+
WebRTC
+
L'acronimo RTC in WebRTC sta per Real-Time Communications, technology (Comunicazioni in Tempo Reali) che abilitano lo streaming audio/video e la condivisione di dati tra i browser e i clienti (peers).
+
+
+
+ +

 

diff --git a/files/it/web/guide/html/categorie_di_contenuto/index.html b/files/it/web/guide/html/categorie_di_contenuto/index.html new file mode 100644 index 0000000000..94eae32320 --- /dev/null +++ b/files/it/web/guide/html/categorie_di_contenuto/index.html @@ -0,0 +1,141 @@ +--- +title: Categorie di contenuto +slug: Web/Guide/HTML/Categorie_di_contenuto +translation_of: Web/Guide/HTML/Content_categories +--- +

Ciascun elemento HTML deve rispettare le regole che definiscono che tipo di contenuto può avere. Queste regole sono raggruppate in modelli di contenuto comuni a diversi elementi. Ogni elemento HTML appartiene a nessuno, uno, o diversi modelli di contenuto, ognuno dei quali possiede regole che devono essere seguite in un documento conforme HTML.

+ +

Vi sono tre tipi di categorie di contenuto:

+ + + +
Content_categories_venn.png
+ +

Categorie di contenuto principale

+ +

Contenuto di Metadati

+ +

Gli elementi appartenenti alla categoria dei metadati modificano la presentazione o il comportamento del resto del documento, impostano collegamenti ad altri documenti, o comunicano altre informazioni non in linea.

+ +

Gli elementi che appartengono a questa categoria sono {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} e {{HTMLElement("title")}}.

+ +

Contenuto di flusso

+ +

Gli elementi che appartengono alla catogoria dei contenuti di flusso tipicamente contengono testo o altri contenuti. Essi sono: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e Text.

+ +

Pochi altri elementi appartengono a questa categoria, ma solo in determinale condizioni:

+ + + +

Contenuto di sezione

+ +

Gli elementi che appartengono ai modelli di contenuti di sezione creano una sezione nell'attuale contorno che definisce gli'ambiti degli elementi  {{HTMLElement("header")}} , degli elementi {{HTMLElement("footer")}} , e dei contenuti di intestazione.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} e {{HTMLElement("section")}}. 

+ +
+

Nota: non confondere questo modello di contenuto con la categoria  sezione radice , che isola il suo contenuto dal regolare contorno.

+
+ +

Contenuto di intestazione

+ +

Il contenuto di intestazione definisce il titolo della sezione, se contrassegnato da un esplicito elemento di contenuto di intestazione  o implicitamente definito da un contenuto di intestazione.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} e {{HTMLElement("hgroup")}}.

+ +
+

Nota: Consideralo possibilmente come un contenuto di intestazione, l' {{HTMLElement("header")}} non è un contenuto di intestazione.

+
+ +

Contenuto di enunciazione

+ +

Il contenuto di enunciazione definisce il testo e la marcatura che essa contiene.Si appropria del contenuto di Enunciazione dei paragrafi.

+ +

Elementi appartenenti a questa categoria sono {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} e il puro text (che non consiste soltanto nello spazio bianco dei caratteri).

+ +

Molte altri elementi appartengono da questa categoria,ma solo se vengono soddisfatte delle specifiche condizioni:

+ + + +

Contenuto integrato

+ +

Il contenuto integrato importa un'altra risorsa o inserisce contenuto da un'altro linguaggio di marcatura o un namespace nel documento.Elementi che appartengono a questa categoria includono: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("svg")}}, {{HTMLElement("video")}}.

+ +

Contenuto interattivo

+ +

Il contenuto interattivo include elementi che sono speficatamente progettati per l'interazione dell'utente. Elementi che provengono da questa categoria includono: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+ Alcuni elementi appartengono a questa categoria solo sotto  specifiche condizioni:

+ + + +

Contenuto modulo-associato

+ +

Il contento modulo-associato comprende elementi che ha un modulo beneficiario ,mostrato attraverso l'attributo form.Un beneficiario di un modulo  è o l'elemento contenente {{HTMLElement("form")}} o è l' elemento che ha id specificato nell'attributo form.

+ + + +

 Questa categoria contiene diverse altre sotto-categorie:

+ +
+
elencati
+
Elementi che sono elencati nel elementi.modulo ed il fieldset.Collezioni di elementi IDL. Contiene{{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
l'abilità labelable
+
Elementi che possono essere associati con elementi {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
Dati Inviabili tramite un form
+
Elementi che possono essere usati per costruire il modulo dati quando il modulo é stato inviato. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
reset dei dati di un form
+
Elementi che possono essere usati per portare il form al reset delle impostazioni originarie.Contiene {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, e {{HTMLElement("textarea")}}.
+
+ +

Modello di contenuto trasparente

+ +

Se un elemento ha un modello di contenuto trasparente,allora i suoi contenuti possono essere strutturati come quelli validi in  HTML5, perfino se l'elemento trasparente era stato rimosso e rimpiazzato da elemento figlio.

+ +

Per esempio, gli elementi {{HTMLElement("del")}} e {{HTMLELement("ins")}}sono trasparenti:

+ +
<p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p>
+
+ +

Se quegli elementi verranno rimossi, questo frammento potrebbe essere ancora un valido HTML (anche se non in corretto italiano).

+ +
<p>Tratteniamo queste verità per essere<del><em>consacrate &amp; innegabili</em></del> <ins>chiare</ins>.</p>
+ +

Altri modelli di contenuto

+ +

Sezione radice.

diff --git a/files/it/web/guide/html/editable_content/index.html b/files/it/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..e878289a2c --- /dev/null +++ b/files/it/web/guide/html/editable_content/index.html @@ -0,0 +1,216 @@ +--- +title: Making content editable +slug: Web/Guide/HTML/Editable_content +translation_of: Web/Guide/HTML/Editable_content +--- +

Inprogress! In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.

+ +

How does it work?

+ +

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

+ +

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

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

Here's the above HTML in action:

+ +

{{ EmbedLiveSample('How_does_it_work') }}

+ +

Executing commands

+ +

When an HTML element has contenteditable set to true, the {{ domxref("document.execCommand()") }} method is made available. This lets you run commands to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using contentEditable, calling execCommand() will affect the currently active editable element.

+ +

Differences in markup generation

+ +

Use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).

+ +

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

+ +

Try it out in the above example.

+ +
+

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

+
+ +

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

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

Security

+ +

For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using about:config:

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

Example: A simple but complete rich text editor

+ +
+
<!doctype html>
+<html>
+<head>
+<title>Rich Text Editor</title>
+<script type="text/javascript">
+var oDoc, sDefTxt;
+
+function initDoc() {
+  oDoc = document.getElementById("textBox");
+  sDefTxt = oDoc.innerHTML;
+  if (document.compForm.switchMode.checked) { setDocMode(true); }
+}
+
+function formatDoc(sCmd, sValue) {
+  if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
+}
+
+function validateMode() {
+  if (!document.compForm.switchMode.checked) { return true ; }
+  alert("Uncheck \"Show HTML\".");
+  oDoc.focus();
+  return false;
+}
+
+function setDocMode(bToSource) {
+  var oContent;
+  if (bToSource) {
+    oContent = document.createTextNode(oDoc.innerHTML);
+    oDoc.innerHTML = "";
+    var oPre = document.createElement("pre");
+    oDoc.contentEditable = false;
+    oPre.id = "sourceText";
+    oPre.contentEditable = true;
+    oPre.appendChild(oContent);
+    oDoc.appendChild(oPre);
+  } else {
+    if (document.all) {
+      oDoc.innerHTML = oDoc.innerText;
+    } else {
+      oContent = document.createRange();
+      oContent.selectNodeContents(oDoc.firstChild);
+      oDoc.innerHTML = oContent.toString();
+    }
+    oDoc.contentEditable = true;
+  }
+  oDoc.focus();
+}
+
+function printDoc() {
+  if (!validateMode()) { return; }
+  var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
+  oPrntWin.document.open();
+  oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
+  oPrntWin.document.close();
+}
+</script>
+<style type="text/css">
+.intLink { cursor: pointer; }
+img.intLink { border: 0; }
+#toolBar1 select { font-size:10px; }
+#textBox {
+  width: 540px;
+  height: 200px;
+  border: 1px #000000 solid;
+  padding: 12px;
+  overflow: scroll;
+}
+#textBox #sourceText {
+  padding: 0;
+  margin: 0;
+  min-width: 498px;
+  min-height: 200px;
+}
+#editMode label { cursor: pointer; }
+</style>
+</head>
+<body onload="initDoc();">
+<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
+<input type="hidden" name="myDoc">
+<div id="toolBar1">
+<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option selected>- formatting -</option>
+<option value="h1">Title 1 &lt;h1&gt;</option>
+<option value="h2">Title 2 &lt;h2&gt;</option>
+<option value="h3">Title 3 &lt;h3&gt;</option>
+<option value="h4">Title 4 &lt;h4&gt;</option>
+<option value="h5">Title 5 &lt;h5&gt;</option>
+<option value="h6">Subtitle &lt;h6&gt;</option>
+<option value="p">Paragraph &lt;p&gt;</option>
+<option value="pre">Preformatted &lt;pre&gt;</option>
+</select>
+<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- font -</option>
+<option>Arial</option>
+<option>Arial Black</option>
+<option>Courier New</option>
+<option>Times New Roman</option>
+</select>
+<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- size -</option>
+<option value="1">Very small</option>
+<option value="2">A bit small</option>
+<option value="3">Normal</option>
+<option value="4">Medium-large</option>
+<option value="5">Big</option>
+<option value="6">Very big</option>
+<option value="7">Maximum</option>
+</select>
+<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- color -</option>
+<option value="red">Red</option>
+<option value="blue">Blue</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
+<option class="heading" selected>- background -</option>
+<option value="red">Red</option>
+<option value="green">Green</option>
+<option value="black">Black</option>
+</select>
+</div>
+<div id="toolBar2">
+<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
+<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
+<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
+<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
+<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
+<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
+<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
+<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
+<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
+<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
+<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
+<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
+<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
+<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
+<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
+<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
+<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
+<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
+<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
+<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
+</div>
+<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
+<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
+<p><input type="submit" value="Send" /></p>
+</form>
+</body>
+</html>
+
+
+ +
Note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
+ +

See also

+ + diff --git a/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html new file mode 100644 index 0000000000..0beccd9e00 --- /dev/null +++ b/files/it/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html @@ -0,0 +1,420 @@ +--- +title: Rich-Text Editing in Mozilla +slug: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla +--- +

Introduzione

+ +

Mozilla 1.3 introduce un'implementazione della caratteristica designMode di Microsoft® Internet Explorer. In Mozilla 1.3, il supporto al rich-text editing supporta la caratteristica designMode che trasforma i documenti HTML in editor rich-text. Partendo da Firefox 3, Mozilla supporta anche l'attributo contentEditable di Internet Explorer che permette a qualsiasi elemento di diventare un elemento modificabile o non (la seconda caratteristica viene usata per prevenire cambiamenti ad un elemento che non deve essere modificato).

+ +

Impostare il Rich-Text Editing

+ +

Il Rich-text editing viene inizializzato tramite la proprietà designMode di un documento ad "On", come un documento all'interno di un iframe. Una volta che designMode viene impostato ad "On", il documento diventa un'area di rich-text editing e l'utente può digitare dentro questa come se fosse una textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.

+ +

Allo stesso modo, impostando contentEditable a "true" ti permette di rendere modificabili singoli elementi di un documento.

+ +

Eseguire i Comandi

+ +

Quando un documento HTML viene impostato come modificabile con designMode, l'oggetto document rilascia il metodo  execCommand, la quale permette di eseguire dei comandi per manipolare il contenuto dell'area modificabile. Molti comandi agiscono sulla selezione del testo nel documento (grassetto, corsivo, ecc), mentre altri inseriscono nuovi elementi (collegamenti) o agisco su un'intera riga (indentazione). Quando si usa contentEditable, il metodo execCommand coinvolgerà l'attuale elemento attivo modificabile.

+ +
execCommand(Stringa nomeComando, Booleano mostraUIPredefinita, Stringa valoreArgomento)
+
+ +

Argomenti

+ +
+
+
Stringa nomeComando
+
il nome del comando
+
+
+ +
+
+
Booleano mostraUIPredefinita
+
se l'interfaccia utente standard deve essere visualizzata. Questa caratteristica non è implementata in Mozilla.
+
+
+ +
+
+
Stringa valoreArgomento
+
alcuni comandi (come insertimage) richiedono un valore per un argomento extra (l'indirizzo dell'immagine). Passa un argomento oppure null, se l'argomento non è necessario.
+
+
+ +

Comandi

+ +
+
+
backColor
+
Cambia il colore di sfondo del documento. In modalità styleWithCss invece, questo agisce sul colore di sfondo del blocco che lo contiene. Richiede un valore esadecimale do un colore da passare come argomento. (Internet Explorer usa questo comando per impostare il colore di sfondo del testo.)
+
+
+ +
+
+
bold
+
Attiva o disattiva il grassetto sulla selezione corrente o alla posizione del cursore. (Internet Explorer usa il tag STRONG al posto di B.)
+
+
+ +
+
+
contentReadOnly
+
Rende il contenuto del documento modificabile o di sola lettura. Richiede una valore booleano true/false da passare come argomento. (Non è supportato da Internet Explorer.)
+
+
+ +
+
+
copy
+
Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
createLink
+
Crea un collegamento dalla selezione, solo se esiste la selezione. Richiede una stringa contenente l'indirizzo del collegamento da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)
+
+
+ +
+
+
cut
+
+ +
+
Copia l'attuale selezione del testo negli appunti. I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
decreaseFontSize
+
Aggiunge un tag SMALL attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
delete
+
Cancella la selezione corrente.
+
+
+ +
+
+
fontName
+
Cambia il carattere alla selezione o alla posizione del cursore. Richiede una stringa, con il nome di un font ("Arial" per esempio) da passare come argomento.
+
+
+ +
+
+
fontSize
+
Cambia la dimensione del testo nella selezione o alla posizione del cursore. Richiede una dimensione HTML (1-7) da passare come argomento.
+
+
+ +
+
+
foreColor
+
Cambia il colore del testo alla selezione on alla posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento.
+
+
+ +
+
+
formatBlock
+
Aggiunge un tag di blocco-stile attorno alla selezione o alla posizione del cursore. Richiede una stringa con il nome del tag da passare come argomento. Praticamente possono essere usati tutti i blocchi di stile (es. "H1", "EM", "BUTTON", "TEXTAREA"). (Internet Explorer supporta soltanto i tags di intestazione H1 - H6, ADDRESS, e PRE, e devono essere racchiusi all'interno dei delimitatori < >, quindi l'argomento dovrà essere passato come "<H1>".)
+
+
+ +
+
+
heading
+
Aggiunge un'intestazione attorno la selezione o sulla riga in cui è posizionato il cursore. Richiede una stringa con il nome del tag da passare come argomento (es. "H1", "H6"). (Non supportato da Internet Explorer.)
+
+
+ +
+
+
hiliteColor
+
Cambia il colore di sfondo della selezione o della posizione del cursore. Richiede una stringa con il valore esadecimale del colore da passare come argomento. UseCSS deve essere attivata per usare questa funzione. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
increaseFontSize
+
Aggiunge il tag BIG attorno alla selezione o alla posizione del cursore. (Non supportato da Internet Explorer.)
+
+
+ +
+
+
indent
+
Aumenta il rientro dell'elemento all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertHorizontalRule
+
Inserisce una horizontal rule alla posizione del cursore (elimina la selezione).
+
+
+ +
+
+
insertHTML
+
Inserisce una stringa HTML alla posizione del cursore (elimina la selezione). Richiede una stringa HTML valida da passare come argomento. (Non supportata da Internet Explorer.)
+
+
+ +
+
+
insertImage
+
Inserisce un'immagine alla posizione del cursore (elimina la selezione). Richiede una stringa contenente l'indirizzo dell'immagine da passare come argomento. L'indirizzo deve contenere almeno un unico carattere, che può essere uno spazio bianco. (Internet Explorer creerà un link con un valore null.)
+
+
+ +
+
+
insertOrderedList
+
Crea un elenco numerato all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertUnorderedList
+
Crea un elenco puntato all'interno della selezione corrente o alla posizione del cursore.
+
+
+ +
+
+
insertParagraph
+
Inserisce una paragrafo attorno alla selezione o alla riga corrente. (Internet Explorer inserisce un paragrafo alla posizione del cursore e cancella la selezione.)
+
+
+ +
+
+
italic
+
Attiva o disattiva il corsivo sulla selezione o alla posizione del cursore. (Internet Explorer usa il tag EM al posto di I.)
+
+
+ +
+
+
justifyCenter
+
Allinea al centro la selezione o la posizione del cursore.
+
+
+ +
+
+
justifyLeft
+
Allinea a sinistra la selezione o la posizione del cursore.
+
+
+ +
+
+
justifyRight
+
Allinea a destra la selezione o la posizione del cursore.
+
+
+ +
+
+
outdent
+
Diminuisce il rientro dell'elemento sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
paste
+
Incolla il contenuto degli appunti alla posizione del cursore (sostituisce la selezione corrente). I permessi per usare questo comando devo essere abilitati nel file di configurazione user.js. Vedi 
+
+
+ +
+
+
redo
+
Ripristina il comando precedentemente annullato.
+
+
+ +
+
+
removeFormat
+
Rimuove tutta la formattazione dalla selezione corrente.
+
+
+ +
+
+
selectAll
+
Seleziona tutto il contenuto dell'area modificabile.
+
+
+ +
+
+
strikeThrough
+
Attiva o disattiva il testo barrato sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
subscript
+
Attiva o disattiva subscript sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
superscript
+
Attiva o disattiva superscript sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
underline
+
Attiva o disattiva la sottolineatura sulla selezione o alla posizione del cursore.
+
+
+ +
+
+
undo
+
Annulla l'ultimo comando eseguito.
+
+
+ +
+
+
unlink
+
Rimuove il collegamento dal collegamento selezionato.
+
+
+ +
+
+
useCSS {{ Deprecated_inline() }}
+
Attiva o disattiva l'uso di tags HTML tags o CSS per la generazione del markup. Richiede una valore booleano true/false come argomento. NOTA: Questo argomento è invertito (es. usa false per usare il CSS, true per usare l'HTML). (Non supportato da Internet Explorer.) Questo comando è diventato deprecato; in alternativa usa il comando styleWithCSS.
+
+
+ +
+
+
styleWithCSS
+
Sostituisce il comando useCSS; l'argomento, a differenza del comando useCSS, l'argomento lavora come ci si aspetta, es. passato true modifica/genera attributi style nel markup, false genera elementi di formattazione.
+
+
+ +

Differenze con Internet Explorer

+ +

Una delle maggiori differenze tra Mozilla e Internet Explorer che coinvolgono designMode è il codice generato nel documento modificabile: while Internet Explorer uses HTML tags (em, i, ecc), Mozilla 1.3 will generate by default spans with inline style rules. Il comando  useCSS può essere usato per attivare o disattivare la creazione di markup HTML o CSS.

+ +

Figure 1 : Generated HTML differences

+ +
Mozilla:
+<span style="font-weight: bold;">I love geckos.</span>
+<span style="font-weight: bold; font-style: italic;
+    text-decoration: underline;">Dinosaurs are big.</span>
+
+Internet Explorer:
+<STRONG>I love geckos.</STRONG>
+<STRONG><EM><U>Dinosaurs are big.</U></EM></STRONG>
+
+ +

Un'altra differenza tra Mozilla e IE è il modo in cui si accede all'oggetto document di un iframe, con la quale viene usato in congiunzione con designMode. Mozilla usa il modo standard fornito da W3C, IFrameElement.contentDocument, mentre IE richiede IFrameElement.document.

+ +

DevEdge fornisce una classe JavaScript, xbDesignMode, il cui scopo è quello di racchiudere le caratteristiche di designMode in una classe che nasconde le differenze tra IE e Mozilla.

+ +


+ Gestione degli Eventi Disabilitati

+ +

Una significante differenza per Mozilla è che una volta che viene impostato il documento a designMode, tutti gli eventi sul determinato documento vengono disabilitati. Tuttavia, disattivato il designMode (come ora è possibile in Mozilla 1.5) gli eventi diventeranno attivi di nuovo.

+ +

Maggiori informazioni possono essere trovato nella sezione Rich text editing dell'articolo Convertire le applicazioni da Internet Explorer a Mozilla.

+ +

Esempi

+ +

Nota: I files di esempio sono stati trasferiti su un'altro sito. In questo momento non sono disponibili. --fumble 18:13, 24 Apr 2005 (PDT)

+ +

Esempio 1

+ +

Il primo esempio è un documento HTML impostato con designMode a "On". In Mozilla 1.3, questo rende l'intero documento modificabile. Tuttavia, Internet Explorer, non permette a javascript di cambiare il designMode del documento corrente. Per farlo funzionare in Internet Explorer, l'attributo contentEditable del tag body necessita di essere impostato a "true".

+ +

Figura 2 : Primo esempio

+ +
HTML:
+<body contentEditable="true" onload="load()">
+
+JavaScript:
+function load(){
+  window.document.designMode = "On";
+}
+
+ +

Esempio 2

+ +

Il secondo esempio è una semplice pagina in rich text editing, dove il testo può essere trasformato in grassetto/corsivo/sottolineato, possono essere aggiunti nuovi collegamenti e si può cambiare il colore del testo. La pagina di esempio consiste in un iframe, la quale sarà l'area rich-text, nonché gli elementi che consento di effettuare modifiche base al testo come grassetto/corsivo/colore del testo.

+ +

Figura 3 : Impostazione del rich-text editing

+ +
HTML:
+<body onload="load()">
+
+JavaScript:
+function load(){
+  getIFrameDocument("editorWindow").designMode = "On";
+}
+
+function getIFrameDocument(aID){
+  // se esiste contentDocument, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    return document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    return document.frames[aID].document;
+  }
+}
+
+ +

L'esempio contiene una funzione doRichEditCommand che rende semplice l'esecuzione dei comandi nel documento dell'iframe e mantiene pulito il codice HTML. La funzione esegue il comando richiesto tramite execCommand() e dopodiché imposta il focus di nuovo al documento modificabile, come anche cliccando su di un pulsante imposterà il focus su pulsante stesso, la quale interromperà il flusso di modifica.

+ +

Figura 4 : Esecuzione dei comandi Rich Editing

+ +
HTML:
+<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>
+
+JavaScript:
+function doRichEditCommand(aName, aArg){
+  getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
+  document.getElementById('editorWindow').contentWindow.focus()
+}
+
+ +

Risorse

+ + diff --git a/files/it/web/guide/index.html b/files/it/web/guide/index.html new file mode 100644 index 0000000000..db55293bd5 --- /dev/null +++ b/files/it/web/guide/index.html @@ -0,0 +1,39 @@ +--- +title: Guida Web developer +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +

Questi articoli forniscono informazioni utili per l'utilizzo di specifiche tecnologie e API.

+ +
+
+ +
+
+ +

Guarda anche

+ + diff --git a/files/it/web/guide/woff/index.html b/files/it/web/guide/woff/index.html new file mode 100644 index 0000000000..c3fb596778 --- /dev/null +++ b/files/it/web/guide/woff/index.html @@ -0,0 +1,99 @@ +--- +title: Il Formato Open di Font per il Web (WOFF) +slug: Web/Guide/WOFF +translation_of: Web/Guide/WOFF +--- +

WOFF (Web Open Font Format, Formato Font per il Web Open) e un nuovo formato di font per il web sviluppato da Mozilla in collaborazione con Type Supply, LettError, e altre organizzazioni. Usa una versione compressa della stessa struttura sfnt basata su tabelle di TrueType, OpenType e Open Font Format, ma aggiunge alcuni metadati e strutture dati ad uso privato, compresi alcuni campi predefiniti che permettono di fornire informazioni di licenza se lo si desidera.

+ +

Usare WOFF comporta principalmente tre benefici:

+ +
    +
  1. I dati del font sono compressi, quindi i siti che usano WOFF usano meno banda e si caricheranno più in fretta rispetto a quelli che usano equivalenti non compressi come TrueType o OpenType.
    2. +
  2. Molti produttori di font che non intendono dare in licenza i propri font in formato TrueType o OpenType per l'uso nel web, daranno in licenza i font in formato WOFF. Questo migliora la disponibilità di font ai designer di siti web.
    3. +
  3. I produttori di browser (sia proprietari che liberi) apprezzano il formato WOFF, che ha quindi il potenziale per diventare un formato per i font realmente universale e interoperabile, a differenza degli attuali formati per i font.
    4. +
+ +

Usare WOFF

+ +

Puoi usare la proprietà CSS {{cssxref("@font-face")}} per utilizzare i font WOFF per il testo nei contenuti web. Funziona esattamente come i formati OpenType e TrueType, eccetto per il fatto che molto probabilmente renderà lo scaricamento molto più efficiente grazie alla compressione.

+ +

Strumenti per lavorare con i font WOFF

+ +

Sono disponibili Strumenti per lavorare con i font WOFF. sfnt2woff e woff2sfnt convertono da WOFF a OpenType e viceversa.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('WOFF1.0', '', '')}}{{Spec2('WOFF1.0')}}Specifica iniziale.
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaratteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base6.0{{CompatGeckoDesktop("1.9.1")}}9.011.105.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaratteristicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vedi anche

+ + diff --git a/files/it/web/html/attributi/index.html b/files/it/web/html/attributi/index.html new file mode 100644 index 0000000000..7bb21c96a2 --- /dev/null +++ b/files/it/web/html/attributi/index.html @@ -0,0 +1,590 @@ +--- +title: Attributi +slug: Web/HTML/Attributi +translation_of: Web/HTML/Attributes +--- +

Gli elementi in HTML hanno attributi; questi sono valori addizionali che configurano l'elemento o modificano in vari modi il suo comportamento.

+

Lista degli attributi

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nome dell'attributoElementi supportatiDescrizione
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista di tipi che il server accetta, normalmente un file di tipo type.
accept-charset{{ HTMLElement("form") }}Lista delle codifiche di caratteri supportate.
accesskeyAttributo globaleDefinisce una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento.
action{{ HTMLElement("form") }}L' URI di un programma che processa le informazioni inviate per mezzo di un modulo.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Specifica l'allineamento orizzontale dell'elemento.
alt +

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

+ 		Testo alternativo in caso un immagine non possa essere visualizzata.
async{{ HTMLElement("script") }}Indica che lo script deve essere eseguito in modalità asincrona.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica che i controlli in questo modulo possono, di defaut, avere il loro valore completato automaticamente dal browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}L'elemento riceve il focus automaticamente dopo il caricamento della pagina.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}L'audio o il video devo partire appena possibile.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Colore di sottofondo dell'elemento.

+

Nota: Questo è un attibuto ereditato. Utilizzare la proprietà {{ Cssxref("background-color") }} in sostituzione.

+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

La larghezza del bordo.

+

Nota: Questo è un attributo ereditato. Utilizzare la proprietà  CSS {{ Cssxref("border") }} in sostituzione.

+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contiene l'intervallo di tempo del media già bufferizzato.
challenge{{ HTMLElement("keygen") }}Una stringa che viene presentata con la chiave pubblica.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Dichiara la codifica di caratteri della pagina o dello script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica che l'elemento deve essere conrollato al caricamento della pagina.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contiene un URI che punta alla sorgente di quanto citato o modificato.
classAttributo globaleUsato spesso con i CSS per modellare elementi con proprietà comuni.
code{{ HTMLElement("applet") }}Specifica l'URL del file class della applet che deve essere caricato ed eseguito.
codebase{{ HTMLElement("applet") }}Questo attibuto fornisce l'URL assoluto o relativo della directory dove il file .class dell'applet  referenziata dall'attributo code è memorizzato.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Questo attributo imposta il colore del testo utilizzando un nome colore o specificando il suo valore in formato esadecimale #RRGGBB.

+

Note: Questo è un attributo ereditato. Utilizzare la proprietà CSS {{ Cssxref("color") }} in sostituzione.

+
cols{{ HTMLElement("textarea") }}Definisce il numero delle colonne in un'area di testo.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'attributo colspan definisce il numero delle colonne nelle quali una cella dovrebbe espandersi.
content{{ HTMLElement("meta") }}Un valore associato con http-equiv o name a seconda del contesto.
contenteditableAttributo globaleIndica che il contenuto dell'elemento è editabile.
contextmenuAttributo globaleDefinisce l'ID di un elemento {{ HTMLElement("menu") }} che servirà come menù contestuale dell'elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica che il browser deve visualizzare i controlli di playack per l'utente.
coords{{ HTMLElement("area") }}Una serie di valori che specificano le coordinate di un area selezionabile all'interno di una regione.
data{{ HTMLElement("object") }}Specifica l'URL della risorsa.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indica data e ora associate con l'elemento.
default{{ HTMLElement("track") }}Indica che la traccia deve essere abilitata a meno che le preferenze dell'utente indichino diversamente.
defer{{ HTMLElement("script") }}Indicano che lo script deve essere eseguito dopo che la pagina è stata analizzata.
dirAttributo globaleDefinisce la direzione del testo. I valori permessi sono ltr (Left-To-Right: da sinistra a destra) or rtl (Right-To-Left: da destra a sinistra)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica che l'utente non può interagire con l'elemento.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica che il collegamento ipertestuale è da utilizzare per scaricare una risorsa.
draggableAttributo globaleDefinisce l'elemeno come trascinabile.
dropzoneAttributo globaleIndica che l'elemento consente l'eliminazione dei contenuti da esso.
enctype{{ HTMLElement("form") }}Definisce il tipo di contenuto dei dati del form quando il method è POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Descrive elementi che appartengono a questo.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicano il form al quale l'elemento si riferisce.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}L'ID che gli elementi <th> applicano a quest'ultimi.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Note: In qualche caso, come per {{ HTMLElement("div") }}, questo attributo è ereditato, e quindi deve essere usata la proprietà CSS {{ Cssxref("height") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, l'altezza deve essere specificata con questo attributo.
hiddenGlobal attributeIndica la rilevanza di un elemento.
high{{ HTMLElement("meter") }}Indica il limite inferiore del range superiore
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} L'URL di una risorsa collegata.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la lingua della risorsa collegata.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}Spefifica una figura che rappresenta il comando.
idAttributo globaleSpesso utilizzato con CSS per applicare uno stile ad uno specifico elemento. Il valore di questo attributo deve essere unico.
ismap{{ HTMLElement("img") }}Indica che l'immagine è una parte della mappa immagine lato server.
itempropAttributo globale 
keytype{{ HTMLElement("keygen") }}Specifica il tipo della chiave da generata.
kind{{ HTMLElement("track") }}Specifica il tipo della traccia di testo.
label{{ HTMLElement("track") }}Specifica un titolo leggibile dall'utente della traccia di testo.
langAttributo globaleDefinisce la lingua usata nell'elemento.
language{{ HTMLElement("script") }}Definisce la lingua dello script usato nell'elemento.
list{{ HTMLElement("input") }}Identifica una lista di opzioni predefinite da suggerire all'utente.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica che il media deve essere riprodotto dall'inizio quando terminato.
low{{ HTMLElement("meter") }}Indica il valore limite superiore del campo inferiore.
manifest{{ HTMLElement("html") }}Specifica l'URL del manifesto della cache del documento.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica il valore massimo consentito.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Definisce il numero massimo di caratteri consentiti nell'elemento.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Specifica un suggerimento del media per il quale è stata disegnata la risorsa.
method{{ HTMLElement("form") }}Definisce il metodo HTTP da usare alla sottomissione del form. Può essere GET (default) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica il valore minimo consentito.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica che possono essere inseriti valori multipi come input ad un tipo email o file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nome dell'elemento. E' ad esempio utilizzato dal server per identificare i campi nel form suttomesso.
novalidate{{ HTMLElement("form") }}Questo attributo indica che il form non deve essere validato alla sottomissione.
open{{ HTMLElement("details") }}Indica se i dettagli verranno visualizzati al caricamento della pagina.
optimum{{ HTMLElement("meter") }}Indica il valore numerico ottimale.
pattern{{ HTMLElement("input") }}Definisce un'espressione regolare con la quale validare il valore dell'elemento.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Fornisce un suggerimento all'utente circa cosa può essere inserito nel campo.
poster{{ HTMLElement("video") }}Un URL che indica un fotogramma da mostrare finché l'utente esegue o cerca.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica se l'intera risorsa, parte di essa o niente deve essere precaricata.
pubdate{{ HTMLElement("time") }}Indica che queste data e ora sono dati dell'elemento progenitore più vicino {{ HTMLElement("article") }}.
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica se l'elemento è editabile.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Specifica la relazione dell'oggetto obbiettivo con l'oggetto di collegamento.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica se questo elemento deve essere compilato o meno.
reversed{{ HTMLElement("ol") }}Indica se l'elenco deve essere visualizzato in ordine decrescente anzichè ascendente.
rows{{ HTMLElement("textarea") }}Definisce il numero di righe in area di testo.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Definisce il numero di righe sopra le quali si estende la cella della tabella.
sandbox{{ HTMLElement("iframe") }} 
spellcheckAttributo globaleIndica se il controllo ortografico è consentito per l'elemento.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}Definisce un valore che sarà selezionato al caricamento della pagina.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Definisce la larghezza dell'elemento (in pixel). Se l'attributo type dell'elemento è text o password rappresenta il numero di caratteri.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}L'URL del contenuto incorporabile.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}Definisce il primo numero se diverso da 1.
step{{ HTMLElement("input") }} 
styleAttributo globaleDefinisce gli stili CSS che sovrasteranno gli stili precedentemente impostati.
summary{{ HTMLElement("table") }} 
tabindexAttributo globaleSovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato al posto suo.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleAttributo globaleTesto da visualizzare in un suggerimento quando si passa sopra all'elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Definisce il tipo dell'elemento.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Definisce un valore di default che verrà visualizzato nell'elemento al caricamento della pagina.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}Nota: In qualche caso, come per {{ HTMLElement("div") }}, questo è un attributo ereditato, quindi deve essere utilizzata la proprietà CSS {{ Cssxref("width") }} in sostituzione. In altri casi, come per {{ HTMLElement("canvas") }}, la larghezza deve essere specificata con questo attributo.
wrap{{ HTMLElement("textarea") }}Indica se il testo deve essere circondato.
+

Attributi di contenuto contro attributi IDL

+

In HTML, molti attributi hanno due facce: l'attributo di contenuto e l'attributo IDL.

+

L'attributo del contenuto è quello che viene impostato nel contenuto (il codice HTML) e può essere impostato o ricavato tramite {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. L'attributo di contenuto è sempre una stringa, anche quando il valore aspettato dovrebbe essere un intero. Ad esempio, per impostare il maxlength di un elemento {{HTMLElement("input")}} a 42 usando l'attributo di contenuto, occorre chiamare setAttribute("maxlength", "42") su quell'elemento.

+

L'attributo IDL è conosciuto anche come proprietà JavaScript. Questi attributi possono essere letti o impostati utilizzando proprietà JavaScript come element.foo. L'attributo IDL utilizzerà sempre (ma potrebbe trasformare) l'attributo di contenuto sottostante per ritornare un valore quando viene richiesto e salverà qualcosa nell'attributo di contenuto quando viene impostato. In altre parole, l'attributo IDL riflette, essenzialmente, l'attributo di contenuto.

+

Il più delle volte, l'attributo IDL ritornerà i loro valori così come sono realmente utilizzati. Ad esempio, il type di default per gli elementi {{HTMLElement("input")}} è "text", se viene impostato come input.type="foobar", l'elemento <input> sarà di tipo testo (nell'apparenza e nel comportamento) ma il valore dell'attributo di contenuto "type" sarà "foobar". Tuttavia, l'attributo IDL type ritornerà la stringa "text".

+

Gli attributi IDL non sono sempre stringhe; ad esempio, input.maxlength è un numero (un long segnato). Quando viene utilizzato l'attributo IDL, viene letto o impostato il valore del tipo desiderato, quindi input.maxlength ritornerà sempre un numero e quando si imposta input.maxlength ,esso vuole un numero. Se viene passato un altro tipo, sarà automaticamente convertito in numero così come specificato dalle regole Javascript standard per la conversione di tipo.

+

L'attributo IDL può riflettere altri tipi come long senza segno, URL, valori booleani, etc. Sfortunatamente, non ci sono regole chiare e il modo con il quale si comportano gli attributi IDL in congiunzione con il loro contenuto corrispondente dipenda dall'attributo stesso. Il più delle volte, seguirà le norme stabilite nelle specifiche, ma a volte no. Le specifiche HTML tentano di renderlo il più possibile facile per gli sviluppatori, ma per varie ragioni (soprattutto storiche), alcuni attributi  si comportano stranamente (select.size, ad esempio) e occorre leggere le specifiche per comprendere esattamente il loro comportamento.

+

Vedi anche

+ +

{{ languages( { "fr": "fr/HTML/Attributs", "en": "en/HTML/Attributes", "ja": "ja/HTML/Attributes" } ) }}

diff --git a/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html new file mode 100644 index 0000000000..217e9191d7 --- /dev/null +++ b/files/it/web/html/canvas/drawing_graphics_with_canvas/index.html @@ -0,0 +1,161 @@ +--- +title: Drawing graphics with canvas +slug: Web/HTML/Canvas/Drawing_graphics_with_canvas +translation_of: Web/API/Canvas_API/Tutorial +--- +
+

Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive Canvas tutorial, this page should probably be redirected there as it's now redundant but some information may still be relevant.

+
+

Introduction

+

With Firefox 1.5, Firefox includes a new HTML element for programmable graphics. <canvas> is based on the WHATWG canvas specification, which itself is based on Apple's <canvas> implemented in Safari. It can be used for rendering graphs, UI elements, and other custom graphics on the client.

+

<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts. We'll focus on the 2D rendering context. For 3D graphics, you should use the WebGL rendering context.

+

The 2D Rendering Context

+

A Simple Example

+

To start off, here's a simple example that draws two intersecting rectangles, one of which has alpha transparency:

+
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+
+ +

{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}

+

The draw function gets the canvas element, then obtains the 2d context. The ctx object can then be used to actually render to the canvas. The example simply fills two rectangles, by setting fillStyle to two different colors using CSS color specifications and calling fillRect. The second fillStyle uses rgba() to specify an alpha value along with the color.

+

The fillRect, strokeRect, and clearRect calls render a filled, outlined, or clear rectangle. To render more complex shapes, paths are used.

+

Using Paths

+

The beginPath function starts a new path, and moveTo, lineTo, arcTo, arc, and similar methods are used to add segments to the path. The path can be closed using closePath. Once a path is created, you can use fill or stroke to render the path to the canvas.

+
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right ->
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+
+ +

{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}

+

Calling fill() or stroke() causes the current path to be used. To be filled or stroked again, the path must be recreated.

+

Graphics State

+

Attributes of the context such as fillStyle, strokeStyle, lineWidth, and lineJoin are part of the current graphics state. The context provides two methods, save() and restore(), that can be used to move the current state to and from the state stack.

+

A More Complicated Example

+

Here's a little more complicated example, that uses paths, state, and also introduces the current transformation matrix. The context methods translate(), scale(), and rotate() all transform the current matrix. All rendered points are first transformed by this matrix.

+
function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "black";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // note that all other translates are relative to this one
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // unnecessary
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+
+ +

{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}

+

This defines two methods, drawBowtie and dot, that are called 4 times. Before each call, translate() and rotate() are used to set up the current transformation matrix, which in turn positions the dot and the bowtie. dot renders a small black square centered at (0, 0). That dot is moved around by the transformation matrix. drawBowtie renders a simple bowtie path using the passed-in fill style.

+

As matrix operations are cumulative, save() and restore() are used around each set of calls to restore the original canvas state. One thing to watch out for is that rotation always occurs around the current origin; thus a translate() rotate() translate() sequence will yield different results than a translate() translate() rotate() series of calls.

+

Compatibility With Apple <canvas>

+

For the most part, <canvas> is compatible with Apple's and other implementations. There are, however, a few issues to be aware of, described here.

+

Required </canvas> tag

+

In the Apple Safari implementation, <canvas> is an element implemented in much the same way <img> is; it does not have an end tag. However, for <canvas> to have widespread use on the web, some facility for fallback content must be provided. Therefore, Mozilla's implementation has a required end tag.

+

If fallback content is not needed, a simple <canvas id="foo" ...></canvas> will be fully compatible with both Safari and Mozilla -- Safari will simply ignore the end tag.

+

If fallback content is desired, some CSS tricks must be employed to mask the fallback content from Safari (which should render just the canvas), and also to mask the CSS tricks themselves from IE (which should render the fallback content).

+
canvas {
+  font-size: 0.00001px !ie;
+}
+

Additional Features

+

Rendering Web Content Into A Canvas

+
+ This feature is only available for code running with Chrome privileges. It is not allowed in normal HTML pages. Read why.
+

Mozilla's canvas is extended with the drawWindow() method. This method draws a snapshot of the contents of a DOM window into the canvas. For example,

+
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+
+

would draw the contents of the current window, in the rectangle (0,0,100,200) in pixels relative to the top-left of the viewport, on a white background, into the canvas. By specifying "rgba(255,255,255,0)" as the color, the contents would be drawn with a transparent background (which would be slower).

+

It is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.

+

With this method, it is possible to fill a hidden IFRAME with arbitrary content (e.g., CSS-styled HTML text, or SVG) and draw it into a canvas. It will be scaled, rotated and so on according to the current transformation.

+

Ted Mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of web pages, and the source is available for reference.

+
+ Note: Using canvas.drawWindow() while handling a document's onload event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the MozAfterPaint event to successfully draw HTML content into a canvas on page load.
+

See also

+ diff --git a/files/it/web/html/canvas/index.html b/files/it/web/html/canvas/index.html new file mode 100644 index 0000000000..dcded63973 --- /dev/null +++ b/files/it/web/html/canvas/index.html @@ -0,0 +1,73 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +

Aggiunto con HTML5, HTML {{ HTMLElement("canvas") }} è un elemento che può essere usato per disegnare elementi grafici tramite script (di solito JavaScript). Per esempio, può essere usato per disegnare grafici, creare composizioni fotografiche, creare animazioni e perfino realizzare elvaborazioni video in tempo reale.

+ +

Le applicazioni Mozilla supportano <canvas> a partire da Gecko 1.8 (cioè Firefox 1.5). L'elemento è stato originariamente introdotto da Apple per OS X Dashboard e Safari. Internet Explorer supporta <canvas> dalla versione 9; per versioni precedenti di IE, una pagina può aggiungere il supporto per <canvas> includendo lo script del progetto Explorer Canvas di Google. Anche Google Chrome e Opera 9 supportano <canvas>.

+ +

L'elemento <canvas> è utilizzato anche da WebGL per la grafica 3D con accellerazione hardware nelle pagine web.

+ + + + + + + + +
+

Documentazione

+ +
+
Specifiche
+
L'elemento <canvas> è parte delle specifiche 1.0 della WhatWG per le applicazioni  Web, anche conosciute come HTML5.
+
Esecitazione sui canvas
+
Un'esercitazione completa che copre sia l'utilizzo base  che le caratteristiche avanzate di <canvas>.
+
Frammenti di codice: Canvas
+
Qualche frammento di codice per gli sviluppatori di estensioni che coinvolge <canvas>.
+
Esempi di canvas
+
Alcune dimostraioni sui <canvas>.
+
Disegnare oggetti DOM in un canvas
+
Come disegnare contenuto DOM, come elementi HTML, in un canvas.
+
Un semplice raycaster
+
Una demo di animazione ray-tracing utilizzando il canvas.
+
Interfacce dei Canvas nel DOM
+
Interfacce dei Canvas nel DOM implementate in Gecko.
+
+ +

Vedi tutto...

+ 		+

Comunità

+ +

Guarda i forum di Mozilla...{{DiscussionList("dev-tech-html","mozilla.dev.tech.html")}}
+ Canvas-Developers Yahoo Group

+ +

Risorse

+ + + +

Librerie

+ +
    +
  • libCanvas è un potente e leggero framework per canvas
    • +
  • Processing.js implementzione del linguaggio di visualizzazione Processing
    • +
  • EaselJS è una libreria con un'API simile a Flash
    • +
  • PlotKit è una libreria per la creazione di grafici e diagrammi
    • +
  • Rekapi è un'API per le animazioni Canvas basata sui keyframe
    • +
  • PhiloGL è un framework WebGL per la visualizzazione di dati, programmazione creativa e lo sviluppo di giochi.
    • +
  • JavaScript InfoVis Toolkit crea visualizzazioni di dati interattive per il Web con Canvas 2D
    • +
  • Frame-Engine è un framework per lo sviluppo di applicazioni e giochi
    • +
+ + + + +
+ +
{{ HTML5ArticleTOC() }}
diff --git a/files/it/web/html/element/a/index.html b/files/it/web/html/element/a/index.html new file mode 100644 index 0000000000..c47883b767 --- /dev/null +++ b/files/it/web/html/element/a/index.html @@ -0,0 +1,457 @@ +--- +title: +slug: Web/HTML/Element/a +tags: + - Ancora + - Collegamento + - Elemento + - HTML + - Link + - Web +translation_of: Web/HTML/Element/a +--- +

Sommario

+ +

L' elemento HTML <a> (o l' elemento Ancora HTML) definisce un collegamento ipertestuale, il nome dell' obbiettivo di destinazione per un collegamento ipertestuale, o entrambi.

+ + + +

Attributi

+ +

Questo elemento include gli attributi globali.

+ +
+
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
+
Questi attributi definiscono la codifica dei caratteri della risorsa linkata. Il valore è una lista di caratteri delimitata da spazi- e/o virgole - fissa come definito in RFC 2045. Il valore di default è ISO-8859-1.
+
+
+

Nota: Questo attributo è obsoleto in HTML5 e non dovrebbe essere usato. Per ottenere un effetto simile, usare l'header HTTP Content-Type sulla risorsa linkata.

+
+
+
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Per l' uso con le forme degli oggetti, questo attibuto usa una lista di numeri separata da virgole per definire le coordinate dell'oggetto nella pagina. Il valore di questo attributo dipende dal valore dell'attributo {{htmlattrxref("shape", "a")}}.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+

Valore dell'attributo {{htmlattrxref("shape", "a")}}

+ 		Formato delle coordinateSignificato
circle +

x,y,z 

+ 		+
    +
  • x e y indicano le coordinate (in pixel) del centro della circonferenza;
    • +
  • z indica la lunghezza del raggio.
    • +
+
rectx,y,w,h +
    +
  • x e y indicano le coordinate dell'angolo superiore sinistro del rettangolo;
    • +
  • w e h indicano rispettivamente la larghezza e l'altezza del rettangolo.
    • +
+
polygonx1,y1,x2,y2,... +
    +
  • Ogni coppia di coordinate x,y definisce un punto del poligono; due punti consecutivi (o l'ultimo e il primo) vengono uniti da una linea.
    • +
+
+
+
{{htmlattrdef("datafld")}} {{Non-standard_inline}}
+
Questo attributo specifica il nome della colonna di tale oggetto origine dati che fornisce i dati associati.
+
+
+

Nota:

+ + +
+
+
{{htmlattrdef("datasrc")}} {{Non-standard_inline}}
+
Questo attributo indica l'ID oggetto origine dei dati che fornisce i dati e che è legato a questo elemento.
+
+
+

Nota:

+ + +
+
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
Questo attributo, se presente, indica che l' autore intende che il collegamento ipertestuale debba essere usato per scaricare una risorsa. Se l' attributo ha un valore, il browser dovrebbe interpretarlo come il nome del file da salvare in un file system locale. Non ci sono restrizioni sui valori consentiti, ma dovresti considerare che la maggior parte dei file system hanno delle limitazioni per quanto riguarda quale punteggiatura è supportata nei nomi del file, ed i browser sono predisposti ad aggiustare il nome del file di conseguenza.
+
+
+

Nota:

+ +
    +
  • Può essere usato con URL blob: e data:, così da poter scaricare contenuti generati usando JavaScript (ad esempio un'immagine creata in un applicazione di disegno).
    • +
  • Se è presente l'header HTTP Content-Disposition e propone un diverso nome per il file, l'header ha la priorità su questo attributo.
    • +
  • Se l'header HTTP Content-Disposition ha valore inline, in Firefox l'header ha la precedenza, mentre in Chrome l'attributo download.
    • +
  • In Firefox 20 questo attributo è rispettato solo per link a risorse provenienti dalla stessa origine.
    • +
+
+
+
{{htmlattrdef("href")}}
+
Questo è l'unico attributo richiesto per ancore che definiscono un collegamento ipertestuale. Esso indica il link obbiettivo, sia esso un URL o un frammento di URL. Un frammento di URL è un nome (un {{htmlattrxref("id")}}) preceduto da un cancelletto (#), che specifica la posizione dell'obbiettivo nel documento corrente. Gli URL non sono limitati ai documenti web basati sul protocollo HTTP: possono essere usati con altri protocolli supportati dal browser, come file, ftp, e mailto.
+
+
+

Nota: Puoi usare il frammento apposito "top" per creare un collegamento per tornare in cima alla pagina; ad esempio <a href="#top">Torna all'inizio</a>. Questo comportamento è specificato in HTML5.

+
+
+
{{htmlattrdef("hreflang")}}
+
Questo attributo indica la lingua della risorsa linkata. È puramente informativo. I valori permessi sono determinati dallo standard BCP47 per l'HTML5 e dallo standard RFC1766 per l'HTML4. Usa questo attributo solo se è presente anche l' attributo {{htmlattrxref("href", "a")}}.
+
{{htmlattrdef("media")}} {{HTMLVersionInline(5)}}
+
Questo attributo specifica in quali dispositivi utilizzare il link. Il suo valore deve essere una media query. Questo attributo è utile principalmente quando vi è un collegamento ad un foglio di stile esterno che consente allo user agent di scegliere il più adatto per il dispositivo in uso.
+
+
+

Nota:

+ +
    +
  • In HTML 4 sono accettate solo descrizioni letterali (separate da uno spazio) del supporto, vale a dire media types and groups: print, screen, aural, braille, ... HTML 5 estende questo ad ogni tipo di media query, ossia un'estensione dei valori consentiti in HTML 4.
    • +
  • I browser che non supportano le Media Queries CSS3 potrebbero non riconoscere il collegamento adeguato; non dimenticare di impostare collegamenti alternativi, usando l'insieme ristretto di media queries definite in HTML 4.
    • +
+
+
+
{{htmlattrdef("methods")}} {{Non-standard_inline}}
+
Il valore di questo attributo fornisce informazioni sulle funzioni che possono essere eseguite su un oggetto. I valori generalmente sono dati dal protocollo HTTP quando viene utilizzato, ma potrebbe (per ragioni simili a quelle per l'attributo title) essere utile includere informazioni consultive in anticipo nel collegamento. Ad esempio, il browser potrebbe scegliere un rendering diverso di un collegamento in funzione dei metodi specificati, qualcosa che è ricercabile potrebbe avere un'icona diversa, o un link esterno potrebbe essere intrerpretato con l'indicazione di lasciare il sito corrente. Questo attributo non è ben compreso o supportato neanche dal browser che lo ha definito, Internet Explorer 4. Methods Property (MSDN)
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Questo attributo è richiesto in un ancora che definisce una destinazione all'interno di una pagina. Il valore per il name è simile al valore per l' attributo id e deve essere un identificatore alfanumerico e univoco nel documento. Secondo la specifica specifiche HTML 4.01, l' id e il name possono entrambi essere applicati all'elemento <a>, finchè hanno lo stesso valore.
+
+
+

Nota: Questo attributo è obsoleto in HTML5, usare l' attributo globale id.

+
+
+
{{htmlattrdef("ping")}} {{HTMLVersionInline(5)}}
+
Se questo attributo è presente, viene mandata una notifica all'URL specificato quando l'utente segue il link.
+
{{htmlattrdef("rel")}}
+
Questo attributo specifica la relazione tra l'oggetto di destinazione e il collegamento stesso. Il suo valore è una lista di tipi di link separati da spazi. La relazione predefinita è void, ossia nessuna.
+
Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Questo attributo specifica un collegamento inverso, la relazione inversa dell' attributo rel. È utile per indicare l'origine un oggetto, ad esempio il suo autore.
+
+ +
+
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Questo attributo è utilizzato per definire una regione selezionabile per un collegamento ipertestuale associata con una figura per creare una mappa immagine. I valori per l' attributo sono circle (cerchio), default (l'intera area a disposizione) polygon (poligono) e rect (rettangolo). Le coordinate della mappa sono definite dall'attributo {{htmlattrxref("coords", "a")}}.
+
{{htmlattrdef("target")}}
+
Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (browsing context) (per esempio un'ettichetta, una finestra o un frame in linea). Le seguenti parole chiave hanno uno speciale significato: +
    +
  • _self: Carica il documento nello stesso frame. Questo è il valore predefinito.
    • +
  • _blank: Carica il documento in una nuova finestra.
    • +
  • _parent: Carica il documento nel frameset genitore del frame corrente. Se non c'è il genitore, questa opzione si comporta allo stesso modo di _self.
    • +
  • _top: Carica il documento dentro la finestra originale completa (la scheda del browser), cancellando gli altri frame. Se non c'è il genitore, questa opzione si comporta allo stesso modo di _self.
    • +
+ Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.
+
{{htmlattrdef("type")}}
+
Questo attributo specifica il tipo della risorsa linkata, sotto forma di tipo MIME. Solitamente è fornito solo come informazione secondaria, ma in futuro i browser potrebbero aggiungere un'icona che identifichi i tipi di file (ad esempio un piccolo altoparlante quando il tipo è audio/wav). Per una lista completa dei tipi MIME supportati, vedere http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. +
 
+ +
Usare questo attributo solo se è presente anche l'attributo {{htmlattrxref("href", "a")}}.
+
+
{{htmlattrdef("urn")}} {{Non-standard_inline}}
+
Questo attributo presumibilmente supportato da Microsoft riferisce un nome uniforme di risorsa (uniform resource name (URN)) con il collegamento. Mentre era basato su lavori standard anni addietro, il significato di URN non è più ben definito, quindi questo attributo è insignificante. urn Property (MSDN)
+
+ +

Esempi

+ +

Collegamento ad un file esterno

+ +
<a href="http://www.mozilla.com/">Link esterno</a>
+
+ +

Risultato

+ +

Link esterno

+ +

Creare un'immagine cliccabile

+ +

Questo link aprirà la pagina https://developer.mozilla.org/ in una nuova finestra, per via dell'attributo {{htmlattrxref("target", "a", "target=\"_blank\"")}}.

+ +
<a href="https://developer.mozilla.org/" target="_blank">
+  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN">
+</a>
+
+ +

Risultato

+ +

MDN

+ + + +

Spesso si creano collegamenti o pulsanti che aprono il programma di email dell'utente. Per questo si usano i link mailto.

+ +

Per altri dettagli riguardanti  lo schema URL mailto, come ad esempio includere l'oggetto, del testo o altro contenuto, vedere i link Email o lo standard RFC 6068.

+ +
<a href="mailto:nowhere@mozilla.org">Invia un'email a nowhere</a>
+ +

Risultato

+ +

Invia un'email a nowhere

+ +

Usare l'attributo download per scaricare un <canvas> come PNG.

+ +

Se si vuole permettere all'utente di scaricare un elemento {{HTMLElement("canvas")}} sotto forma di immagine, si può creare un link con l'attributo {{htmlattrxref("download", "a")}} e il contenuto del <canvas> come URL del file:

+ +
<!-- HTML -->
+<canvas id="my-canvas"></canvas>
+<a id="download-image" download="disegno.png">Scarica l'immagine</a>
+
+ +
// JavaScript
+var link = document.querySelector("#download-image");
+var canvas = document.querySelector("#my-canvas");
+link.addEventListener("click"; function () {
+  link.href = canvas.toDataURL();
+}, false);
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-a-element.html#the-a-element', '<a>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{htmlattrxref("download","a")}}14{{CompatGeckoDesktop("20.0")}}{{CompatNo}}15{{CompatNo}}
{{htmlattrxref("ping", "a")}}{{CompatVersionUnknown}}Disabilitato di default{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
href="#top"{{CompatVersionUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{htmlattrxref("download","a")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("20.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
{{htmlattrxref("ping", "a")}} Disabilitato di default   
+
+ +

 

+ +

Nota riguardo a Gecko

+ + + +

Click e focus

+ +

Un link ottiene il focus quando vi si clicca sopra in vari browser (come comportamento predefinito).

+ +

Cliccando su un {{HTMLElement("a")}} gli si assegna il focus?

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browser DesktopWindows 8.1OS X 10.9
Firefox 30.0SìSì
Chrome ≥39 (Chromium bug 388666)SìSì
Safari 7.0.5N.a.Solo quando ha l'attributo {{htmlattrxref("tabindex")}}
Internet Explorer 11SìN.a.
Opera 12SìSì
+ +

Toccando un {{HTMLElement("a")}} gli si assegna il focus?

+ + + + + + + + + + + + + + + + + + + + + +
Browser MobiliiOS 7.1.2Android 4.4.4
Safari MobileSolo quando ha l'attributo {{htmlattrxref("tabindex")}}N.a.
Chrome 35???Solo quando ha l'attributo {{htmlattrxref("tabindex")}}
+ +

Note

+ +

Le seguenti sono chiavi di associazione riservate per due dei maggiori browser e non devono essere usate come valori di accesso: a, c, e, f, g, h, v, freccia sinistra e freccia destra.

+ +

L' HTML 3.2 definisce solo gli attributi name, href, rel, rev, e title.

+ +

L' attributo target non è definito nei browser che non supportano i frame, come Netscape 1. Inoltre, target non è consentito se si utilizza la variante rigorosa (strict) dell'XHTML, ma è limitata al frameset o alla forma "di transizione" (transitional).

+ +

Raccomandazioni JavaScript

+ +

Succede spesso che un tag {{HTMLElement("a")}} sia usato con l'evento onclick. Per evitare che la pagina venga ricaricata, l'attributo {{htmlattrxref("href", "a")}} viene spesso impostato a "#" o a "javascript:void(0)". Entrambi questi valori possono portare ad errori inaspettati quando si copiano e aprono link in una nuova scheda e/o finestra. Bisogna essere consapevoli di questo per ragioni di usabilità, e quando gli utenti usano il tag di ancoraggio, bisogna cercare di prevenire i comportamenti di default.

+ +

Vedi anche

+ + + +
{{HTMLRef}}
diff --git a/files/it/web/html/element/abbr/index.html b/files/it/web/html/element/abbr/index.html new file mode 100644 index 0000000000..5ab07d12b7 --- /dev/null +++ b/files/it/web/html/element/abbr/index.html @@ -0,0 +1,142 @@ +--- +title: +slug: Web/HTML/Element/abbr +translation_of: Web/HTML/Element/abbr +--- +

Sommario

+ +

L' elemento HTML <abbr> (o elemento HTML di abbreviazione) rappresenta un' abbreviazione e opzionalmente fornisce una descrizione completa. Se presente, l' attributo title deve contenere la descrizione completa e nient' altro.

+ +
+

Note d' uso: Quando presente, il numero grammaticale del testo presente nell' attributo title deve corrispondere a quello contentuto nell' elemento <abbr>. Questo è il caso di lingue con più di due numeri grammaticali (ad esempio, l' arabo non ha solo singolare e plurale, ma anche duale).

+
+ + + +

Attributi

+ +

Questo elemento include solo gli attributi globali.

+ +

Si usa l' attributo title per definire la descrizione completa dell' abbreviazione. Molti user agent lo presentano come un suggerimento.

+ +

Stile di default

+ +

Lo scopo di questo elemento è puramente per convenienza dell'autore e tutti i browser lo visualizzano in linea (display: inline) di default, sebbene lo stile di defaul vari da un browser all' altro:

+ + + +

Viene quindi fortemente raccomandato agli autori di siti web di on affidarsi allo stile di default. Ricorda che questo elemento non viene supportato da IE in tutte le versioni precedenti a IE7. Per queste versioni di IE che non permettono l'uso di stili per elementi sconosciuti, lo script seguente si rende necessario per ovviare a questo problema:

+ +
<!--[if lte IE 6]>
+  <script>
+    document.createElement("abbr");
+  </script>
+<![endif]-->
+ +

Esempio

+ +
<p>Tony Blair is the prime minister of the <abbr title="United Kingdom">UK</abbr></p>
+
+ +

Risultato

+ +

Image:Abbr.gif

+ +

Tony Blair is the prime minister of the UK

+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-abbr-element.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base2.0{{CompatGeckoDesktop(1.0)}}7.01.3{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vedi anche

+ + + +{{HTMLRef}} diff --git a/files/it/web/html/element/acronym/index.html b/files/it/web/html/element/acronym/index.html new file mode 100644 index 0000000000..57180f14e3 --- /dev/null +++ b/files/it/web/html/element/acronym/index.html @@ -0,0 +1,118 @@ +--- +title: +slug: Web/HTML/Element/acronym +translation_of: Web/HTML/Element/acronym +--- +
{{obsolete_header}}
+ +

Sommario

+ +

L'elemento HTML <acronym> permette all'autore di indicare che una sequenza di caratteri è un acronimo o un'abbreviazione.

+ +
+

Nota: Questo elemento è stato rimosso in HTML5. Gli sviluppatori dovrebbero usare l'elemento {{HTMLElement("abbr")}}.

+
+ +

Attributi

+ +

Questo elemento supporta solo gli attributi globali, comuni a tutti gli elementi.

+ +

Interfaccia DOM

+ +

Questo elemento implementa l'interfaccia {{domxref("HTMLElement")}}.

+ +
Nota: Fino a Geko 1.9.2, Firefox implementava l'interfaccia {{domxref("HTMLSpanElement")}}.
+ +

Esempio

+ +
<p>Il <acronym title="World Wide Web">WWW</acronym> è solo uno dei componenti di Internet.</p>
+
+ +

Aspetto predefinito

+ +

Dato che questo tag serve solo per la comodità dell'autore, il suo aspetto di default cambia in ogni browser:

+ +
    +
  • In alcuni browser, come Internet Explorer, questo elemento appare esattamente come uno {{HTMLElement("span")}}.
    • +
  • Opera, Firefox e alcuni altri browser aggiungono una linea di puntini sotto il contenuto dell'elemento.
    • +
  • Alcuni browser non solo aggiungono una lina di puntini, ma ne mostrano anche il contenuto in maiuscolo. Per evitare questo comportamento, si può usare la proprietà CSS {{cssxref("font-variant")}}: none.
    • +
+ +

Qundi è particolarmente consigliato agli sviluppatori di non affidarsi allo stile predefinito.

+ +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommento
{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Supporto di base{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

Vedi anche

+ +
    +
  • L'elemento HTML {{HTMLElement("abbr")}}.
    • +
+ +
{{HTMLRef}}
diff --git a/files/it/web/html/element/address/index.html b/files/it/web/html/element/address/index.html new file mode 100644 index 0000000000..efc68172a4 --- /dev/null +++ b/files/it/web/html/element/address/index.html @@ -0,0 +1,120 @@ +--- +title:
+slug: Web/HTML/Element/address +translation_of: Web/HTML/Element/address +--- +

Sommario

+

L'elemento HTML <address> (indirizzo) può essere usato dagli autori per fornire informazioni di contatto per il più vicino {{HTMLElement("article")}} oppure per il progenitore {{HTMLElement("body")}}; in quest'ultimo caso, viene applicato all'intero documento.

+
+

Note d'uso:

+
    +
  • Per rappresentare un indirizzo arbitrario, che non sia relativo alle informazioni di contatto, si usa l'elemento {{HTMLElement("p")}}  anzichè l'elemento <address>.
    • +
  • Questo elemento non deve contenere ulteriori informazioni oltre a quelle di contatto, come la data di pubblicazione (che appartiene all'elemento {{HTMLElement("time")}}).
    • +
  • Tipicamente un elemento <address> può essere eventualmente posto dentro l'elemento {{HTMLElement("footer")}} della sezione corrente.
    • +
+
+
    +
  • Aree tematiche Contenuti del flusso, contenuto tangibile.
    • +
  • Contenuto consentito Contenuti del flusso, ma senza elementi <address> nidificati, no contenuti di intestazione ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no contenuti di sezione ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), e no negli elementi {{HTMLElement("header")}} o {{HTMLElement("footer")}}.
    • +
  • Omissione TagNessuno, sia il tag di apertura, sia quello di chiusura sono obbligatori.
    • +
  • Elementi padre consentiti Qualsiasi elemento che accetta contenuti del flusso.
    • +
  • Interfaccia DOM {{domxref("HTMLElement")}} Prima di Gecko 2.0 (Firefox 4), Gecko implementava questo elemento usanto l'interfaccia {{domxref("HTMLSpanElement")}}
    • +
+

Attributi

+

Questo elemento include solo attributi globali.

+

Esempio

+
  <address>
+    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
+    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
+    You may also want to visit us:<br>
+    Mozilla Foundation<br>
+    1981 Landings Drive<br>
+    Building K<br>
+    Mountain View, CA 94043-0801<br>
+    USA
+  </address>
+
+

Il codice HTML sopra visualizzerà:

+

Image:HTML-address.png

+

Sebbene l'elemento indirizzo visualizzi il testo con gli stessi stili di default degli elementi {{HTMLElement("i")}} o {{HTMLElement("em")}}, esso risulta più appropriato da utilizzare quando si tratta di informazioni di contatto per come convoglia informazioni semantiche addizionali.

+

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-address-element.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}} 
+

Compatilità dei Browser

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}1.05.121.0
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

Vedi anche

+
    +
  • Altri elementi relativi alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};
    • +
  • Sections and outlines of an HTML5 document.
    • +
+

{{HTMLRef}}

diff --git a/files/it/web/html/element/applet/index.html b/files/it/web/html/element/applet/index.html new file mode 100644 index 0000000000..aa16b21fa8 --- /dev/null +++ b/files/it/web/html/element/applet/index.html @@ -0,0 +1,120 @@ +--- +title: +slug: Web/HTML/Element/applet +translation_of: Web/HTML/Element/applet +--- +
{{obsolete_header}}
+ +

Sommario

+ +

L'elemento HTML <applet> serve a includere un'applet Java.

+ +
+

Nota: Questo elemento è stato rimosso in HTML5. Gli sviluppatori dovrebbero usare l'elemento più generico {{HTMLElement("object")}}.

+
+ +

Attributi

+ +
+
{{htmlattrdef("align")}}
+
Questo attributo specifica la posizione dell'applet nella pagina relativamente al contenuto intorno ad essa. La specifica HTML 4.01 definisce i valori bottom, left, middle, right e top; Microsoft e Netscape supportano anche i valori absbottom, absmiddle, baseline, center e texttop.
+
{{htmlattrdef("alt")}}
+
Questo attributo definisce un testo da mostrare nei browser che non supportano Java. Ricordare che anche il contenuto dell'elemento <applet> potrebbe essere mostrato come testo alternativo.
+
{{htmlattrdef("archive")}}
+
Questo attributo è un riferimento a una versione compressa dell'applet, che potrebbe aiutare a ridurre il tempo necessario al download.
+
{{htmlattrdef("code")}}
+
Questo attributo specifica l'URL del file principale dell'applet da eseguire. I file delle Applet devono avere l'estensione .class. L'URL specificato può essere relativo all'attributo codebase.
+
{{htmlattrdef("codebase")}}
+
Questo attributo l'URL (assoluto o relativo) della cartella che contiene i file .class specificati nell'attributo code.
+
{{htmlattrdef("datafld")}}
+
Questo attributo, supportato a partire dalla versione 4 di Internet Explorer, specifica il nome della colonna dell'oggetto di origine che fornisce i dati associati. Questo attributo potrebbe essere usato per specificare i vari elementi {{HTMLElement("param")}} passati all'applet Java.
+
{{htmlattrdef("datasrc")}}
+
Come datafld, questo attributo è usato per associare i dati in Internet Explorer 4. Indica l'id dell'oggetto di origine che fornisce i dati associati agli elementi {{HTMLElement("param")}} associati all'applet.
+
{{htmlattrdef("height")}}
+
Questo attributo specifica l'altezza dell'applet, in pixel.
+
{{htmlattrdef("hspace")}}
+
Questo attributo specifica quanto spazio, in pixel, lasciare ai lati dell'applet.
+
{{htmlattrdef("mayscript")}}
+
In Netscape, questo attributo permette l'accesso all'applet da parte degli scipt inclusi nella pagina.
+
{{htmlattrdef("name")}}
+
Questo attributo assegna un nome all'applet, cos' che possa essere identificata da altri script.
+
{{htmlattrdef("object")}}
+
Questo attributo specifica l'URL della rappresentazione serializzata dell'applet.
+
{{htmlattrdef("src")}}
+
Questo attributo, definito a partire dalla versione 4 di Internet Explorer, specifica l'URL di un file associato all'applet. Il suo significato e il suo utilizzo è poco chiaro e non è parte di nessuno standard HTML.
+
{{htmlattrdef("vspace")}}
+
+
Questo attributo specifica quanto spazio, in pixel, lasciare sopra e sotto l'applet.
+
+
{{htmlattrdef("width")}}
+
Questo attributo specifica la larghezza dell'applet, in pixel.
+
+ +

Esempio

+ +
<applet code="gioco.class" align="left" archive="gioco.zip" height="250" width="350">
+  <param name="difficoltà" value="facile">
+  <b>Per usare questo gioco è necessario Java.</b>
+</applet>
+
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Supporto di base{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Note

+ +
    +
  • La specifica del W3C scoraggia l'uso del tag <applet> in favore dell'elemento {{HTMLElement("object")}}.
    • +
  • Questo elemento è deprecato nella versione strict dell'HTML 4.01 e obsoleto in HTML 5.
    • +
+ +
{{HTMLRef}}
diff --git a/files/it/web/html/element/area/index.html b/files/it/web/html/element/area/index.html new file mode 100644 index 0000000000..04e90cebd6 --- /dev/null +++ b/files/it/web/html/element/area/index.html @@ -0,0 +1,191 @@ +--- +title: +slug: Web/HTML/Element/area +translation_of: Web/HTML/Element/area +--- +

Sommario

+ +

L'elemento HTML <area> definisce una regione accessibile su di un immagine, e opzionalmente viene associata con un collegamento ipertestuale. Questo elemento è usato solo con l'elemento {{HTMLElement("map")}}.

+ +
    +
  • Aree tematiche Contenuti di flusso, contenuto delle espressioni.
    • +
  • Contenuto consentito Vuoto; è un elemento nullo.
    • +
  • Omissione Tag Nessuna, sia il tag di apertura, sia quello di chiusura sono obbligatori.
    • +
  • Elementi padre consentiti Qualsiasi elemento che accetta contenuto delle espressioni. L'elemento <area> deve avere un antenato {{HTMLElement("map")}}, ma che non necessita essere un genitore diretto.
    • +
  • Interfaccia DOM {{domxref("HTMLAreaElement")}}
    • +
+ +

Attributi

+ +

Questo elemento include gli attributi globali.

+ +
+
{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Specifica un acceleratore per la navigazione da tastiera per l'elemento. Premendo ALT, o una chiave simile, e contemporaneamente uno specifico carattere, si seleziona il comportamento correlato con quella specifica sequenza digitata. Chi disegna la pagina deve evitare sequenze riservate al browser. Questo attributo è globale a partire dalle specifiche HTML5.
+
+ +
+
{{htmlattrdef("alt")}}
+
Una stringa di testo alternativa da visualizzare sui browser che non mostrano le immagini. Il testo dovrebbe essere tale da garantire all'utente lo stesso tipo di scelte che avrebbe visualizzando l'immagine senza il testo alternativo. In HTML4, questo attributo è necessario, ma potrebbe essere anche una stringa vuota (""). In HTML5, questo attributo è richiesto solo se presente l'attributo href.
+
+ +
+
{{htmlattrdef("coords")}}
+
Una serie di valori che specificano le coordinate di una regione selezionabile. Il numero ed il significato dei valori dipendono dal valore specificato per l'attributo shape. Per un rect o forma rettangolare, il valore di coords consiste in due coppie x,y: sinistra, su, destra e giù. Per un circle o forma circolare, i valori sono x,y,r dove x,y è la coppia di coordinate che specifica il centro del cerchio e r è il valore del raggio. Per un poly o forma poligonale, il valore è un insieme di coppie x,y per ogni punto nel poligono: x1,y1,x2,y2,x3,y3, ecc... In HTML4, i valori sono il numero di pixels o una percentuale, se il numero è seguito dal relativo simbolo (%); in HTML5, i valori sono il numero dei pixel CSS.
+
+ +
+
{{htmlattrdef("href")}}
+
L'obiettivo del collegamento ipertestuale dell'area. Il suo valore è un URL valido. In HTML4, sia questo che l'attibuto nohref devono essere presenti nell'elemento. In HTML5, questo attributo può essere omesso; se così fosse, l'elemento area non rappresenta un collegamento ipertestuale.
+
+ +
+
{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}
+
Indica la lingua della risorsa linkata. I valori consentiti sono determinati dal BCP47. Questo attributo si può utilizzare se contestualmente presente l'attributo href.
+
+ +
+
{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Definisce un nome per l'area selezionabile così da poterci eseguire uno script da parte dei vecchi browser.
+
+ +
+
{{htmlattrdef("media")}} {{HTMLVersionInline("5")}}
+
Un suggerimento in merito al mezzo di comunicazione per il quale la risorsa è stata disegnata, ad esempio print (stampa) o screen. (schermo). Se omesso, di default viene settato su all (tutti). Utilizzare questo attributo solo se contestualmente presente href.
+
+ +
+
{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Indica che non esiste un collegamento ipertestuale in associazione all'area. O questo attributo o l'attributo href deve essere presente nell'elemento. +
+

Note d'uso: Questo attributo è obsoleto in HTML5, in quanto è sufficiente omettere l'attributo href.

+
+
+
+ +
+
{{htmlattrdef("rel")}} {{HTMLVersionInline("5")}}
+
Per le ancore che contengono l' attributo href, questo attributo specifica la relazione tra l' oggetto di destinazione e l' oggetto del collegamento. Il valore è una lista di valori di relazione separata da spazi. I valori e la loro semantica saranno registrati da qualche autorità che potrebbe avere senso per l' autore del documento. La relazione di default, se nessun altra è stata impostata, è void (vuoto/nullo). Usare questo attributo solo se presente l' attributo href.
+
{{htmlattrdef("shape")}}
+
La forma della regione selezionabile associata. Le specifiche per l'HTML 5 e l'HTML 4 definiscono i valori rect, che definisce una regione rettangolare; circle, che definisce una regione circolare; poly, che definisce un generico poligono; e default, che indica l'intera regione al di là della forma definita. Molti browser, in particolare Internet Explorer 4 e superiori, supportano circ, polygon, e rectangle come valori validi per shape; questi valori sono {{Non-standard_inline}}.
+
+ +
+
{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} only, {{obsolete_inline("5.0")}}
+
Un valore numerico che specifica la posizione nella tabulazione ordinata definita nel browser. Questo è un attributo globale in HTML5.
+
+ +
+
{{htmlattrdef("target")}}
+
Questo attributo specifica dove deve essere visualizzata la risorsa linkata. In HTML4, questo è il nome, o una parola chiave, per una cornice (frame). In HTML5, è il nome, o parola chiave, di un contesto di navigazione (browsing context )(per esempio, ettichetta, finestra o frame in linea). Le seguenti parole chiave hanno uno speciale significato: +
    +
  • _self: Carica la risposta nella medesima cornice HTML4 (o contesto di navigazione HTML5) come quella attuale. Questo valore è impostato di default se l' attributo non è specificato.
    • +
  • _blank: Carica la risposta in una nuova finestra senza nome nella finestra HTML4 o un nuovo contesto di navigazione HTML5.
    • +
  • _parent: Carica la risposta nel frameset genitore del frame corrente in HTML4 oppure il contesto di navigazione genitore del corrente in HTML5. Se non ci fosse il genitore, questa opzione si comporta allo stesso modo di _self.
    • +
  • _top: In HTML4: Carica la risposta dentro la finestra originale completa, cancellando gli altri frame. In HTML5: Carica la risposta nel primo livello del contesto di navigazione (cioè, il contesto di navigazione che è un antenato di quello corrente, e non ha padre). Se non ha padre, il comportamento di questa opzione coincide con _self.
    • +
+ Usa questo attributo solo se presente l' attributo href.
+
{{htmlattrdef("type")}}
+
Questo attributo specifica il tipo di supporto, sotto forma di un tipo MIME per la destinazione del collegamento. In generale, questo è fornito esclusivamente come informazione consultiva; tuttavia, in futuro un browser potrebbe aggiungere una picco icona per i tipi multimediali. Per esempio, un browser potrebbe aggiungere una piccola icona con un microfono queando il tipo è settato come audio/wav. Per una lista completa dei tipi MIME riconosciuti, consulta http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Usa questo attributo solo se presente l' attributo href.
+
+ +

Esempio

+ +
<map name="primary">
+  <area shape="circle" coords="200,250,25" href="another.htm" />
+  <area shape="default" nohref />
+</map>
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-area-element.html#the-area-element', '<area>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilità dei Browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunzionalitàAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Supporto di base{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Note

+ +
    +
  • Nelle specifiche HTML 3.2, 4.0, e 5, il tag di chiusura </area> è proibito.
    • +
  • Le specifiche XHTML 1.0 richiedono una barra finale: <area />.
    • +
  • Gli attributi id, class, e style hanno il medesimo significato attribuito nelle specifiche HTML 4, ma vengono definiti solo da Netscape e Microsoft.
    • +
  • I browser Netscape di livello 1 non interpretano l'attributo target quando riferito ad un frame.
    • +
  • HTML 3.2 definisce solo alt, coords, href, nohref, e shape.
    • +
+ +

{{HTMLRef}}

diff --git a/files/it/web/html/element/article/index.html b/files/it/web/html/element/article/index.html new file mode 100644 index 0000000000..cdf8b222dc --- /dev/null +++ b/files/it/web/html/element/article/index.html @@ -0,0 +1,119 @@ +--- +title:
+slug: Web/HTML/Element/article +translation_of: Web/HTML/Element/article +--- +

L'elemento HTML <article> rappresenta una composizione autocontenuta in un documento, una pagina, un'applicazione, o un sito, intesa per essere distribuita indipendentemente o riutilizzata, per esempio, nell'aggregazione. Esempi sono un articolo su un forum, un articolo di rivista o di giornale, un articolo su un blog, un commento inserito da un utente, un widget o un gadget interattivi, o qualsiasi altro contenuto indipendente. Ogni <article> dovrebbe essere identificato, generalmente, includendo un'intestazione (elementi h1-h6) come figlia dell'elemento <article>.

+ +
+

Note d'uso:

+ +
    +
  • Quando un elemento <article> è annidato, l'elemento più interno rappresenta un articolo collegato all'elemento più esterno. Per esempio, i commenti di un articolo su un blog possono essere elementi <article> annidati nell'elemento <article> che rappresenta il post sul blog.
    • +
  • Le informazioni sull'autore di un elemento <article> possono essere fornite attraverso l'elemento {{HTMLElement("address")}}, ma non si applicano agli elementi<article> annidati.
    • +
  • La data e l'ora di pubblicazione di un elemento <article> possono essere descritte usando l'attributo {{htmlattrxref("pubdate", "time")}} di un elemento {{HTMLElement("time")}}.
    • +
+
+ +
    +
  • Categorie di contenuti flow content, sectioning content, palpable content.
    • +
  • Contenuti consentitiflow content.
    • +
  • Omissione del tag {{no_tag_omission}}
    • +
  • Elementi genitore permessiQualsiasi elemento che accetti contenuto di flusso. Notare che un elemento <article> non deve essere un discendente di un elemento {{HTMLElement("address")}}.
    • +
  • Interfaccia DOM {{domxref("HTMLElement")}}
    • +
+ +

Attributi

+ +

Questo elemento include solamente gli attributi globali.

+ +

Esempio

+ +
<article>
+  <h4>Un articolo veramente fantastico</h4>
+  <p>Un sacco di testo fantastico.</p>
+</article>
+
+ +

Specifiche

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('HTML WHATWG', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilità con i browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunzionalitàChromeFirefox (Gecko)Internet ExplorerOperaSafari
Supporto di base5{{CompatGeckoDesktop("2.0")}}9.011.104.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Supporto di base2.2{{CompatGeckoMobile("2.0")}}9.011.05.0 (iOS 4.2)
+
+ +

Vedi anche

+ +
    +
  • Altri elementi correlati alle sezioni: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
    • +
  • Sezioni e indici nei documenti HTML5.
    • +
+ +

{{ HTMLRef }}

diff --git a/files/it/web/html/element/aside/index.html b/files/it/web/html/element/aside/index.html new file mode 100644 index 0000000000..0aa21273e5 --- /dev/null +++ b/files/it/web/html/element/aside/index.html @@ -0,0 +1,134 @@ +--- +title: