From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/abstractworker/index.html | 130 ++ files/es/web/api/ambient_light_events/index.html | 114 ++ files/es/web/api/analysernode/index.html | 218 ++++ .../web/api/animation/animaci\303\263n/index.html" | 106 ++ files/es/web/api/animation/cancel/index.html | 119 ++ files/es/web/api/animation/effect/index.html | 104 ++ files/es/web/api/animation/finish/index.html | 147 +++ files/es/web/api/animation/id/index.html | 110 ++ files/es/web/api/animation/index.html | 147 +++ files/es/web/api/animation/oncancel/index.html | 115 ++ files/es/web/api/animation/onfinish/index.html | 131 ++ files/es/web/api/animation/pause/index.html | 106 ++ files/es/web/api/animation/play/index.html | 149 +++ files/es/web/api/animation/playbackrate/index.html | 162 +++ files/es/web/api/animation/playstate/index.html | 158 +++ files/es/web/api/animation/ready/index.html | 122 ++ files/es/web/api/animation/reverse/index.html | 136 ++ files/es/web/api/animation/starttime/index.html | 138 +++ files/es/web/api/animation/terminado/index.html | 120 ++ files/es/web/api/animation/tiempoactual/index.html | 114 ++ files/es/web/api/animation/timeline/index.html | 111 ++ .../api/animationevent/animationname/index.html | 101 ++ files/es/web/api/animationevent/index.html | 186 +++ .../web/api/api_de_almacenamiento_web/index.html | 146 +++ .../usando_la_api_de_almacenamiento_web/index.html | 272 ++++ files/es/web/api/api_del_portapapeles/index.html | 76 ++ files/es/web/api/attr/index.html | 194 +++ files/es/web/api/audiobuffer/index.html | 108 ++ files/es/web/api/audionode/index.html | 154 +++ .../baseaudiocontext/createbiquadfilter/index.html | 130 ++ files/es/web/api/baseaudiocontext/index.html | 293 +++++ .../es/web/api/batterymanager/charging/index.html | 28 + .../web/api/batterymanager/chargingtime/index.html | 26 + .../api/batterymanager/dischargingtime/index.html | 29 + files/es/web/api/batterymanager/index.html | 127 ++ files/es/web/api/batterymanager/level/index.html | 22 + .../api/batterymanager/onchargingchange/index.html | 20 + .../api/batterymanager/onlevelchange/index.html | 20 + files/es/web/api/beforeunloadevent/index.html | 70 ++ files/es/web/api/blob/blob/index.html | 75 ++ files/es/web/api/blob/index.html | 194 +++ files/es/web/api/blob/type/index.html | 121 ++ files/es/web/api/blobbuilder/index.html | 193 +++ files/es/web/api/body/formdata/index.html | 72 ++ files/es/web/api/body/index.html | 99 ++ files/es/web/api/body/json/index.html | 82 ++ files/es/web/api/cachestorage/index.html | 198 +++ files/es/web/api/cachestorage/keys/index.html | 74 ++ .../web/api/cameracapabilities/effects/index.html | 37 + .../api/cameracapabilities/fileformats/index.html | 37 + .../api/cameracapabilities/flashmodes/index.html | 37 + files/es/web/api/cameracapabilities/index.html | 86 ++ .../maxexposurecompensation/index.html | 33 + .../cameracapabilities/maxfocusareas/index.html | 33 + .../tutorial/compositing/ejemplo/index.html | 295 +++++ .../api/canvas_api/tutorial/compositing/index.html | 117 ++ files/es/web/api/canvasimagesource/index.html | 42 + .../api/canvasrenderingcontext2d/arc/index.html | 226 ++++ .../canvasrenderingcontext2d/beginpath/index.html | 180 +++ .../canvasrenderingcontext2d/clearrect/index.html | 203 +++ .../canvasrenderingcontext2d/drawimage/index.html | 232 ++++ .../canvasrenderingcontext2d/fillrect/index.html | 169 +++ .../getimagedata/index.html | 103 ++ .../es/web/api/canvasrenderingcontext2d/index.html | 519 ++++++++ .../canvasrenderingcontext2d/linecap/index.html | 131 ++ .../api/canvasrenderingcontext2d/rotate/index.html | 137 ++ .../api/canvasrenderingcontext2d/save/index.html | 91 ++ files/es/web/api/childnode/after/index.html | 181 +++ files/es/web/api/childnode/before/index.html | 175 +++ files/es/web/api/childnode/index.html | 180 +++ files/es/web/api/childnode/remove/index.html | 94 ++ files/es/web/api/childnode/replacewith/index.html | 141 +++ .../api/clipboardevent/clipboarddata/index.html | 58 + files/es/web/api/clipboardevent/index.html | 67 + files/es/web/api/closeevent/index.html | 237 ++++ files/es/web/api/comment/index.html | 75 ++ files/es/web/api/console/assert/index.html | 140 +++ files/es/web/api/console/count/index.html | 168 +++ files/es/web/api/console/dir/index.html | 119 ++ files/es/web/api/console/dirxml/index.html | 103 ++ files/es/web/api/console/error/index.html | 179 +++ files/es/web/api/console/index.html | 254 ++++ files/es/web/api/console/info/index.html | 163 +++ files/es/web/api/console/log/index.html | 190 +++ files/es/web/api/console/tabla/index.html | 212 ++++ files/es/web/api/console/time/index.html | 122 ++ files/es/web/api/console/timeend/index.html | 57 + files/es/web/api/console/trace/index.html | 132 ++ files/es/web/api/console/warn/index.html | 63 + files/es/web/api/constraint_validation/index.html | 154 +++ files/es/web/api/crypto/index.html | 66 + files/es/web/api/crypto/subtle/index.html | 51 + files/es/web/api/css_object_model/index.html | 129 ++ files/es/web/api/cssrule/csstext/index.html | 22 + files/es/web/api/cssrule/index.html | 95 ++ .../es/web/api/cssrule/parentstylesheet/index.html | 27 + files/es/web/api/cssstyledeclaration/index.html | 73 ++ files/es/web/api/cssstylerule/index.html | 105 ++ .../web/api/cssstylerule/selectortext/index.html | 23 + .../es/web/api/cssstylesheet/deleterule/index.html | 21 + files/es/web/api/cssstylesheet/index.html | 64 + .../es/web/api/cssstylesheet/insertrule/index.html | 119 ++ .../es/web/api/cssstylesheet/ownerrule/index.html | 19 + .../api/customelementregistry/define/index.html | 239 ++++ files/es/web/api/customelementregistry/index.html | 101 ++ files/es/web/api/customevent/index.html | 94 ++ files/es/web/api/datatransfer/index.html | 378 ++++++ .../api/detecting_device_orientation/index.html | 278 +++++ files/es/web/api/devicemotionevent/index.html | 73 ++ files/es/web/api/document/abrir/index.html | 109 ++ files/es/web/api/document/adoptnode/index.html | 61 + files/es/web/api/document/alinkcolor/index.html | 36 + files/es/web/api/document/anchors/index.html | 95 ++ files/es/web/api/document/applets/index.html | 30 + files/es/web/api/document/async/index.html | 33 + files/es/web/api/document/bgcolor/index.html | 39 + files/es/web/api/document/body/index.html | 39 + files/es/web/api/document/characterset/index.html | 36 + files/es/web/api/document/clear/index.html | 31 + files/es/web/api/document/close/index.html | 27 + files/es/web/api/document/contenttype/index.html | 25 + files/es/web/api/document/crearatributo/index.html | 91 ++ .../api/document/createdocumentfragment/index.html | 119 ++ files/es/web/api/document/createelement/index.html | 180 +++ .../es/web/api/document/createelementns/index.html | 168 +++ files/es/web/api/document/createrange/index.html | 42 + .../es/web/api/document/createtextnode/index.html | 78 ++ files/es/web/api/document/defaultview/index.html | 35 + files/es/web/api/document/designmode/index.html | 56 + files/es/web/api/document/dir/index.html | 76 ++ files/es/web/api/document/doctype/index.html | 65 + .../es/web/api/document/documentelement/index.html | 42 + files/es/web/api/document/documenturi/index.html | 121 ++ .../web/api/document/documenturiobject/index.html | 39 + .../es/web/api/document/dragover_event/index.html | 338 +++++ files/es/web/api/document/embeds/index.html | 48 + files/es/web/api/document/evaluate/index.html | 211 ++++ files/es/web/api/document/execcommand/index.html | 288 +++++ .../es/web/api/document/exitfullscreen/index.html | 75 ++ .../es/web/api/document/getelementbyid/index.html | 200 +++ .../api/document/getelementsbyclassname/index.html | 96 ++ .../web/api/document/getelementsbyname/index.html | 81 ++ .../api/document/getelementsbytagname/index.html | 104 ++ .../api/document/getelementsbytagnamens/index.html | 107 ++ files/es/web/api/document/getselection/index.html | 12 + files/es/web/api/document/hasfocus/index.html | 23 + files/es/web/api/document/head/index.html | 83 ++ files/es/web/api/document/height/index.html | 44 + files/es/web/api/document/hidden/index.html | 43 + files/es/web/api/document/importnode/index.html | 84 ++ files/es/web/api/document/index.html | 390 ++++++ files/es/web/api/document/keydown_event/index.html | 178 +++ files/es/web/api/document/keyup_event/index.html | 149 +++ .../web/api/document/pointerlockelement/index.html | 105 ++ files/es/web/api/document/queryselector/index.html | 136 ++ .../web/api/document/queryselectorall/index.html | 179 +++ files/es/web/api/document/readystate/index.html | 104 ++ .../es/web/api/document/registerelement/index.html | 115 ++ files/es/web/api/document/scripts/index.html | 84 ++ files/es/web/api/document/scroll_event/index.html | 104 ++ files/es/web/api/document/stylesheets/index.html | 21 + files/es/web/api/document/url/index.html | 71 ++ files/es/web/api/document/write/index.html | 76 ++ files/es/web/api/document/writeln/index.html | 40 + .../example/index.html | 40 + files/es/web/api/documentfragment/index.html | 129 ++ .../checkinstalled/index.html | 49 + .../getinstalled/index.html | 40 + .../es/web/api/domapplicationsregistry/index.html | 89 ++ .../api/domapplicationsregistry/install/index.html | 90 ++ .../installpackage/index.html | 36 + files/es/web/api/domerror/index.html | 130 ++ files/es/web/api/domparser/index.html | 227 ++++ .../web/api/domstring/cadenas_binarias/index.html | 31 + files/es/web/api/domstring/index.html | 60 + files/es/web/api/dragevent/index.html | 110 ++ files/es/web/api/element/accesskey/index.html | 22 + files/es/web/api/element/animate/index.html | 208 ++++ files/es/web/api/element/attachshadow/index.html | 158 +++ files/es/web/api/element/attributes/index.html | 157 +++ files/es/web/api/element/classlist/index.html | 215 ++++ files/es/web/api/element/classname/index.html | 130 ++ files/es/web/api/element/click_event/index.html | 280 +++++ files/es/web/api/element/clientheight/index.html | 61 + files/es/web/api/element/clientleft/index.html | 58 + files/es/web/api/element/clienttop/index.html | 54 + files/es/web/api/element/clientwidth/index.html | 60 + files/es/web/api/element/closest/index.html | 145 +++ .../es/web/api/element/computedstylemap/index.html | 99 ++ files/es/web/api/element/currentstyle/index.html | 80 ++ files/es/web/api/element/getattribute/index.html | 48 + .../web/api/element/getattributenodens/index.html | 38 + .../api/element/getboundingclientrect/index.html | 98 ++ files/es/web/api/element/getclientrects/index.html | 54 + .../api/element/getelementsbyclassname/index.html | 112 ++ .../api/element/getelementsbytagname/index.html | 50 + .../api/element/getelementsbytagnamens/index.html | 128 ++ files/es/web/api/element/hasattribute/index.html | 123 ++ files/es/web/api/element/id/index.html | 119 ++ files/es/web/api/element/index.html | 539 ++++++++ files/es/web/api/element/innerhtml/index.html | 151 +++ .../api/element/insertadjacentelement/index.html | 115 ++ .../web/api/element/insertadjacenthtml/index.html | 99 ++ files/es/web/api/element/localname/index.html | 152 +++ files/es/web/api/element/matches/index.html | 120 ++ .../es/web/api/element/mousedown_event/index.html | 223 ++++ files/es/web/api/element/name/index.html | 79 ++ files/es/web/api/element/namespaceuri/index.html | 125 ++ .../web/api/element/ongotpointercapture/index.html | 133 ++ .../api/element/onlostpointercapture/index.html | 132 ++ files/es/web/api/element/onwheel/index.html | 31 + files/es/web/api/element/outerhtml/index.html | 143 +++ files/es/web/api/element/prefix/index.html | 115 ++ files/es/web/api/element/queryselector/index.html | 187 +++ .../es/web/api/element/removeattribute/index.html | 41 + .../web/api/element/requestfullscreen/index.html | 104 ++ files/es/web/api/element/runtimestyle/index.html | 82 ++ files/es/web/api/element/scrollheight/index.html | 212 ++++ files/es/web/api/element/scrollintoview/index.html | 151 +++ files/es/web/api/element/scrollleft/index.html | 153 +++ files/es/web/api/element/scrolltop/index.html | 69 ++ files/es/web/api/element/scrolltopmax/index.html | 80 ++ files/es/web/api/element/scrollwidth/index.html | 119 ++ files/es/web/api/element/setattribute/index.html | 88 ++ files/es/web/api/element/setattributens/index.html | 33 + files/es/web/api/element/setcapture/index.html | 86 ++ files/es/web/api/element/shadowroot/index.html | 83 ++ files/es/web/api/element/tagname/index.html | 44 + files/es/web/api/element/wheel_event/index.html | 320 +++++ files/es/web/api/elementoshtmlparavideo/index.html | 202 +++ files/es/web/api/event/bubbles/index.html | 47 + files/es/web/api/event/cancelable/index.html | 38 + files/es/web/api/event/createevent/index.html | 34 + files/es/web/api/event/currenttarget/index.html | 75 ++ files/es/web/api/event/defaultprevented/index.html | 81 ++ files/es/web/api/event/event/index.html | 80 ++ files/es/web/api/event/index.html | 185 +++ files/es/web/api/event/initevent/index.html | 42 + files/es/web/api/event/preventdefault/index.html | 95 ++ files/es/web/api/event/stoppropagation/index.html | 103 ++ files/es/web/api/event/target/index.html | 138 +++ files/es/web/api/event/type/index.html | 103 ++ files/es/web/api/eventlistener/index.html | 44 + files/es/web/api/eventsource/index.html | 168 +++ files/es/web/api/eventsource/onopen/index.html | 127 ++ .../api/eventtarget/addeventlistener/index.html | 335 +++++ .../web/api/eventtarget/dispatchevent/index.html | 35 + files/es/web/api/eventtarget/index.html | 119 ++ .../api/eventtarget/removeeventlistener/index.html | 217 ++++ .../web/api/fetch_api/conceptos_basicos/index.html | 73 ++ files/es/web/api/fetch_api/index.html | 81 ++ .../web/api/fetch_api/utilizando_fetch/index.html | 377 ++++++ files/es/web/api/fetchevent/index.html | 176 +++ files/es/web/api/file/filename/index.html | 35 + files/es/web/api/file/index.html | 112 ++ files/es/web/api/file/lastmodifieddate/index.html | 101 ++ files/es/web/api/file/name/index.html | 70 ++ files/es/web/api/file/type/index.html | 72 ++ .../using_files_from_web_applications/index.html | 372 ++++++ .../es/web/api/file/webkitrelativepath/index.html | 132 ++ files/es/web/api/fileerror/index.html | 193 +++ files/es/web/api/filereader/index.html | 182 +++ files/es/web/api/filereader/onload/index.html | 29 + .../api/filereader/readasarraybuffer/index.html | 37 + .../es/web/api/filereader/readasdataurl/index.html | 68 + files/es/web/api/filereader/readastext/index.html | 109 ++ files/es/web/api/filereader/result/index.html | 107 ++ files/es/web/api/filesystem/index.html | 118 ++ files/es/web/api/fullscreen_api/index.html | 297 +++++ files/es/web/api/gamepad_api/index.html | 95 ++ files/es/web/api/gamepadbutton/index.html | 90 ++ files/es/web/api/geolocation/clearwatch/index.html | 134 ++ .../api/geolocation/getcurrentposition/index.html | 130 ++ files/es/web/api/geolocation/index.html | 114 ++ .../web/api/geolocation/watchposition/index.html | 138 +++ files/es/web/api/geolocationcoordinates/index.html | 113 ++ .../api/geolocationcoordinates/latitude/index.html | 97 ++ files/es/web/api/geolocationposition/index.html | 63 + files/es/web/api/globaleventhandlers/index.html | 272 ++++ .../web/api/globaleventhandlers/onblur/index.html | 90 ++ .../api/globaleventhandlers/onchange/index.html | 97 ++ .../web/api/globaleventhandlers/onclick/index.html | 139 +++ .../web/api/globaleventhandlers/onclose/index.html | 52 + .../web/api/globaleventhandlers/onerror/index.html | 65 + .../web/api/globaleventhandlers/onfocus/index.html | 94 ++ .../web/api/globaleventhandlers/oninput/index.html | 86 ++ .../api/globaleventhandlers/onkeydown/index.html | 93 ++ .../web/api/globaleventhandlers/onkeyup/index.html | 100 ++ .../web/api/globaleventhandlers/onload/index.html | 51 + .../onloadedmetadata/index.html | 48 + .../api/globaleventhandlers/onresize/index.html | 71 ++ .../api/globaleventhandlers/onscroll/index.html | 80 ++ .../api/globaleventhandlers/onselect/index.html | 74 ++ .../globaleventhandlers/onselectstart/index.html | 98 ++ .../api/globaleventhandlers/onsubmit/index.html | 125 ++ .../globaleventhandlers/ontouchstart/index.html | 126 ++ .../api/globaleventhandlers/onunload/index.html | 45 + files/es/web/api/headers/index.html | 135 ++ files/es/web/api/history/index.html | 86 ++ files/es/web/api/history/length/index.html | 56 + files/es/web/api/history/pushstate/index.html | 96 ++ files/es/web/api/htmlanchorelement/index.html | 279 +++++ files/es/web/api/htmlaudioelement/index.html | 77 ++ .../api/htmlcanvaselement/getcontext/index.html | 284 +++++ .../es/web/api/htmlcanvaselement/height/index.html | 121 ++ files/es/web/api/htmlcanvaselement/index.html | 249 ++++ .../es/web/api/htmlcanvaselement/toblob/index.html | 261 ++++ .../web/api/htmlcanvaselement/todataurl/index.html | 159 +++ .../es/web/api/htmlcanvaselement/width/index.html | 119 ++ files/es/web/api/htmlcollection/index.html | 99 ++ .../getdistributednodes/index.html | 95 ++ files/es/web/api/htmlcontentelement/index.html | 110 ++ .../web/api/htmlcontentelement/select/index.html | 95 ++ files/es/web/api/htmldivelement/index.html | 125 ++ .../es/web/api/htmlelement/change_event/index.html | 143 +++ files/es/web/api/htmlelement/click/index.html | 88 ++ .../web/api/htmlelement/contenteditable/index.html | 57 + files/es/web/api/htmlelement/dataset/index.html | 132 ++ files/es/web/api/htmlelement/focus/index.html | 164 +++ files/es/web/api/htmlelement/index.html | 402 ++++++ files/es/web/api/htmlelement/innertext/index.html | 84 ++ .../es/web/api/htmlelement/input_event/index.html | 329 +++++ .../es/web/api/htmlelement/offsetheight/index.html | 65 + files/es/web/api/htmlelement/offsetleft/index.html | 141 +++ .../es/web/api/htmlelement/offsetparent/index.html | 52 + files/es/web/api/htmlelement/offsettop/index.html | 61 + .../es/web/api/htmlelement/offsetwidth/index.html | 62 + files/es/web/api/htmlelement/style/index.html | 52 + files/es/web/api/htmlformelement/index.html | 109 ++ files/es/web/api/htmlformelement/reset/index.html | 59 + files/es/web/api/htmlheadelement/index.html | 72 ++ files/es/web/api/htmlhtmlelement/index.html | 121 ++ files/es/web/api/htmlimageelement/image/index.html | 46 + files/es/web/api/htmlimageelement/index.html | 344 +++++ files/es/web/api/htmlinputelement/index.html | 673 ++++++++++ .../api/htmlinputelement/invalid_event/index.html | 108 ++ .../es/web/api/htmlinputelement/select/index.html | 51 + files/es/web/api/htmllabelelement/index.html | 82 ++ files/es/web/api/htmllielement/index.html | 118 ++ .../api/htmlmediaelement/canplay_event/index.html | 109 ++ files/es/web/api/htmlmediaelement/index.html | 231 ++++ .../htmlmediaelement/loadeddata_event/index.html | 130 ++ files/es/web/api/htmlmediaelement/pause/index.html | 52 + .../es/web/api/htmlmediaelement/paused/index.html | 56 + files/es/web/api/htmlmediaelement/play/index.html | 124 ++ .../htmlmediaelement/timeupdate_event/index.html | 82 ++ .../api/htmlselectelement/checkvalidity/index.html | 53 + files/es/web/api/htmlselectelement/index.html | 152 +++ .../htmlselectelement/setcustomvalidity/index.html | 52 + .../getdistributednodes/index.html | 93 ++ files/es/web/api/htmlshadowelement/index.html | 117 ++ files/es/web/api/htmlstyleelement/index.html | 125 ++ files/es/web/api/htmltableelement/align/index.html | 40 + files/es/web/api/htmltableelement/index.html | 72 ++ .../web/api/htmltableelement/insertrow/index.html | 144 +++ files/es/web/api/idbcursor/continue/index.html | 194 +++ files/es/web/api/idbcursor/index.html | 194 +++ files/es/web/api/idbdatabase/index.html | 258 ++++ .../es/web/api/idbdatabase/transaction/index.html | 229 ++++ files/es/web/api/idbobjectstore/add/index.html | 193 +++ files/es/web/api/idbobjectstore/index.html | 207 ++++ files/es/web/api/imagebitmap/index.html | 65 + .../web/api/imagebitmaprenderingcontext/index.html | 37 + files/es/web/api/index.html | 37 + .../index.html | 216 ++++ files/es/web/api/indexeddb_api/index.html | 144 +++ .../api/indexeddb_api/usando_indexeddb/index.html | 1308 ++++++++++++++++++++ .../web/api/intersection_observer_api/index.html | 638 ++++++++++ .../api/keyboardevent/getmodifierstate/index.html | 253 ++++ files/es/web/api/keyboardevent/index.html | 441 +++++++ files/es/web/api/keyboardevent/key/index.html | 212 ++++ files/es/web/api/keyboardevent/metakey/index.html | 131 ++ files/es/web/api/keyboardevent/which/index.html | 62 + files/es/web/api/location/index.html | 212 ++++ files/es/web/api/location/origin/index.html | 56 + files/es/web/api/location/reload/index.html | 75 ++ .../web/api/mediadevices/getusermedia/index.html | 300 +++++ files/es/web/api/mediadevices/index.html | 172 +++ .../web/api/mediaquerylist/addlistener/index.html | 148 +++ files/es/web/api/mediaquerylist/index.html | 178 +++ files/es/web/api/mediaquerylist/matches/index.html | 108 ++ .../api/mediaquerylist/removelistener/index.html | 149 +++ files/es/web/api/mediasource/index.html | 182 +++ .../web/api/mediastreamaudiosourcenode/index.html | 129 ++ files/es/web/api/mediastreamtrack/index.html | 181 +++ files/es/web/api/messageevent/index.html | 195 +++ files/es/web/api/mimetype/index.html | 97 ++ files/es/web/api/mouseevent/index.html | 298 +++++ .../web/api/mouseevent/initmouseevent/index.html | 60 + files/es/web/api/mouseevent/shiftkey/index.html | 126 ++ files/es/web/api/mozsocial/closepanel/index.html | 19 + files/es/web/api/mozsocial/getattention/index.html | 19 + files/es/web/api/mozsocial/getworker/index.html | 19 + files/es/web/api/mozsocial/index.html | 44 + files/es/web/api/mozsocial/isvisible/index.html | 22 + .../es/web/api/mozsocial/openchatwindow/index.html | 26 + files/es/web/api/mozsocial/openpanel/index.html | 30 + files/es/web/api/mutationobserver/index.html | 330 +++++ .../mutationobserver/mutationobserver/index.html | 98 ++ .../es/web/api/mutationobserver/observe/index.html | 95 ++ files/es/web/api/navigator/donottrack/index.html | 111 ++ files/es/web/api/navigator/getusermedia/index.html | 184 +++ files/es/web/api/navigator/id/index.html | 16 + files/es/web/api/navigator/index.html | 141 +++ files/es/web/api/navigator/mozsocial/index.html | 48 + .../navigator/registerprotocolhandler/index.html | 33 + .../web-based_protocol_handlers/index.html | 132 ++ files/es/web/api/navigator/vibrate/index.html | 82 ++ .../hardwareconcurrency/index.html | 69 ++ .../web/api/navigatorconcurrenthardware/index.html | 71 ++ .../navigatorgeolocation/geolocation/index.html | 106 ++ files/es/web/api/navigatorgeolocation/index.html | 106 ++ files/es/web/api/navigatorlanguage/index.html | 148 +++ .../web/api/navigatorlanguage/language/index.html | 133 ++ .../eventos_online_y_offline/index.html | 91 ++ files/es/web/api/navigatoronline/index.html | 133 ++ files/es/web/api/navigatoronline/online/index.html | 166 +++ .../es/web/api/network_information_api/index.html | 93 ++ files/es/web/api/node/appendchild/index.html | 113 ++ files/es/web/api/node/childnodes/index.html | 103 ++ files/es/web/api/node/clonenode/index.html | 91 ++ files/es/web/api/node/contains/index.html | 56 + files/es/web/api/node/elementopadre/index.html | 46 + files/es/web/api/node/haschildnodes/index.html | 73 ++ files/es/web/api/node/index.html | 371 ++++++ files/es/web/api/node/insertarantes/index.html | 172 +++ files/es/web/api/node/issamenode/index.html | 110 ++ files/es/web/api/node/lastchild/index.html | 65 + files/es/web/api/node/namespaceuri/index.html | 145 +++ files/es/web/api/node/nextsibling/index.html | 87 ++ files/es/web/api/node/nodename/index.html | 107 ++ files/es/web/api/node/nodetype/index.html | 95 ++ files/es/web/api/node/nodevalue/index.html | 86 ++ files/es/web/api/node/nodoprincipal/index.html | 33 + files/es/web/api/node/ownerdocument/index.html | 118 ++ files/es/web/api/node/parentnode/index.html | 105 ++ files/es/web/api/node/previoussibling/index.html | 63 + files/es/web/api/node/removechild/index.html | 94 ++ files/es/web/api/node/replacechild/index.html | 73 ++ files/es/web/api/node/textcontent/index.html | 98 ++ files/es/web/api/nodelist/foreach/index.html | 132 ++ files/es/web/api/nodelist/index.html | 123 ++ .../es/web/api/nondocumenttypechildnode/index.html | 132 ++ .../nextelementsibling/index.html | 113 ++ .../previouselementsibling/index.html | 160 +++ files/es/web/api/notification/body/index.html | 63 + files/es/web/api/notification/dir/index.html | 59 + files/es/web/api/notification/icon/index.html | 58 + files/es/web/api/notification/index.html | 430 +++++++ files/es/web/api/notification/onclick/index.html | 61 + .../es/web/api/notification/permission/index.html | 191 +++ .../api/notification/requestpermission/index.html | 143 +++ files/es/web/api/notifications_api/index.html | 198 +++ .../usando_la_api_de_notificaciones/index.html | 294 +++++ files/es/web/api/parentnode/append/index.html | 134 ++ .../api/parentnode/childelementcount/index.html | 126 ++ files/es/web/api/parentnode/children/index.html | 157 +++ .../api/parentnode/firstelementchild/index.html | 143 +++ files/es/web/api/parentnode/index.html | 151 +++ .../web/api/parentnode/lastelementchild/index.html | 146 +++ files/es/web/api/payment_request_api/index.html | 136 ++ files/es/web/api/performance/clearmarks/index.html | 95 ++ .../web/api/performance/clearmeasures/index.html | 96 ++ files/es/web/api/performance/index.html | 142 +++ files/es/web/api/performance/memory/index.html | 42 + files/es/web/api/performance/navigation/index.html | 58 + files/es/web/api/performance/now/index.html | 166 +++ files/es/web/api/performance/timeorigin/index.html | 48 + files/es/web/api/performance/timing/index.html | 57 + files/es/web/api/performancenavigation/index.html | 87 ++ files/es/web/api/positionoptions/index.html | 109 ++ files/es/web/api/push_api/index.html | 175 +++ .../web/api/push_api/using_the_push_api/index.html | 432 +++++++ files/es/web/api/pushmanager/index.html | 161 +++ .../web/api/pushmanager/permissionstate/index.html | 111 ++ .../supportedcontentencodings/index.html | 43 + files/es/web/api/randomsource/index.html | 110 ++ .../obtenervaloresaleatorios/index.html | 75 ++ files/es/web/api/range/collapsed/index.html | 35 + .../api/range/commonancestorcontainer/index.html | 35 + files/es/web/api/range/getclientrects/index.html | 103 ++ files/es/web/api/range/index.html | 108 ++ files/es/web/api/range/intersectsnode/index.html | 48 + files/es/web/api/range/setstart/index.html | 120 ++ files/es/web/api/request/headers/index.html | 68 + files/es/web/api/request/index.html | 170 +++ files/es/web/api/response/index.html | 128 ++ files/es/web/api/response/ok/index.html | 66 + files/es/web/api/response/response/index.html | 75 ++ files/es/web/api/response/status/index.html | 73 ++ .../cantrickleicecandidates/index.html | 87 ++ files/es/web/api/rtcpeerconnection/index.html | 444 +++++++ files/es/web/api/rtcrtpreceiver/index.html | 72 ++ files/es/web/api/screen/index.html | 89 ++ files/es/web/api/selection/addrange/index.html | 46 + files/es/web/api/selection/anchornode/index.html | 27 + files/es/web/api/selection/anchoroffset/index.html | 27 + files/es/web/api/selection/collapse/index.html | 50 + .../es/web/api/selection/collapsetoend/index.html | 27 + .../web/api/selection/collapsetostart/index.html | 29 + files/es/web/api/selection/containsnode/index.html | 49 + .../api/selection/deletefromdocument/index.html | 31 + files/es/web/api/selection/extend/index.html | 41 + files/es/web/api/selection/focusnode/index.html | 25 + files/es/web/api/selection/focusoffset/index.html | 27 + files/es/web/api/selection/getrangeat/index.html | 49 + files/es/web/api/selection/index.html | 105 ++ files/es/web/api/selection/iscollapsed/index.html | 25 + files/es/web/api/selection/rangecount/index.html | 28 + .../web/api/selection/removeallranges/index.html | 27 + files/es/web/api/selection/removerange/index.html | 45 + .../web/api/selection/selectallchildren/index.html | 45 + files/es/web/api/selection/tostring/index.html | 48 + files/es/web/api/service_worker_api/index.html | 311 +++++ .../using_service_workers/index.html | 526 ++++++++ files/es/web/api/serviceworkercontainer/index.html | 127 ++ .../api/serviceworkercontainer/register/index.html | 92 ++ .../web/api/serviceworkerregistration/index.html | 145 +++ files/es/web/api/simple_push_api/index.html | 235 ++++ files/es/web/api/storage/clear/index.html | 131 ++ files/es/web/api/storage/getitem/index.html | 139 +++ files/es/web/api/storage/index.html | 162 +++ files/es/web/api/storage/length/index.html | 117 ++ files/es/web/api/storage/localstorage/index.html | 135 ++ files/es/web/api/storage/removeitem/index.html | 142 +++ files/es/web/api/storage/setitem/index.html | 136 ++ .../es/web/api/storagemanager/estimate/index.html | 90 ++ files/es/web/api/storagemanager/index.html | 55 + files/es/web/api/storagemanager/persist/index.html | 59 + .../es/web/api/storagemanager/persisted/index.html | 59 + files/es/web/api/stylesheet/disabled/index.html | 20 + files/es/web/api/stylesheet/href/index.html | 38 + files/es/web/api/stylesheet/index.html | 50 + files/es/web/api/stylesheet/media/index.html | 24 + files/es/web/api/stylesheet/ownernode/index.html | 35 + .../web/api/stylesheet/parentstylesheet/index.html | 24 + files/es/web/api/stylesheet/title/index.html | 13 + files/es/web/api/stylesheet/type/index.html | 17 + files/es/web/api/subtlecrypto/digest/index.html | 135 ++ files/es/web/api/subtlecrypto/encrypt/index.html | 142 +++ files/es/web/api/subtlecrypto/index.html | 290 +++++ files/es/web/api/svgpoint/index.html | 13 + .../web/api/texttrack/cuechange_event/index.html | 109 ++ files/es/web/api/texttrack/index.html | 102 ++ files/es/web/api/touchevent/index.html | 190 +++ files/es/web/api/uievent/index.html | 158 +++ files/es/web/api/uievent/pagex/index.html | 102 ++ files/es/web/api/url/createobjecturl/index.html | 148 +++ files/es/web/api/url/host/index.html | 62 + files/es/web/api/url/index.html | 217 ++++ files/es/web/api/url/port/index.html | 55 + files/es/web/api/url/url/index.html | 99 ++ files/es/web/api/urlsearchparams/index.html | 204 +++ .../api/urlsearchparams/urlsearchparams/index.html | 78 ++ files/es/web/api/using_the_browser_api/index.html | 159 +++ .../checking_authenticity_with_password/index.html | 30 + files/es/web/api/web_crypto_api/index.html | 85 ++ files/es/web/api/web_speech_api/index.html | 121 ++ .../uso_de_la_web_speech_api/index.html | 301 +++++ files/es/web/api/web_workers_api/index.html | 226 ++++ files/es/web/api/webgl_api/index.html | 98 ++ .../index.html | 276 +++++ .../animating_objects_with_webgl/index.html | 119 ++ .../animating_textures_in_webgl/index.html | 106 ++ .../tutorial/getting_started_with_webgl/index.html | 106 ++ files/es/web/api/webgl_api/tutorial/index.html | 42 + .../objetos_3d_utilizando_webgl/index.html | 133 ++ .../index.html | 91 ++ .../wtilizando_texturas_en_webgl/index.html | 209 ++++ files/es/web/api/webrtc_api/index.html | 126 ++ files/es/web/api/webrtc_api/protocols/index.html | 38 + files/es/web/api/websocket/close_event/index.html | 72 ++ files/es/web/api/websocket/index.html | 356 ++++++ files/es/web/api/websocket/onerror/index.html | 50 + .../escribiendo_servidor_websocket/index.html | 244 ++++ .../index.html | 246 ++++ files/es/web/api/websockets_api/index.html | 172 +++ .../index.html | 197 +++ files/es/web/api/webvr_api/index.html | 256 ++++ .../api/webvr_api/using_the_webvr_api/index.html | 448 +++++++ files/es/web/api/webvtt_api/index.html | 903 ++++++++++++++ files/es/web/api/wheelevent/deltay/index.html | 95 ++ files/es/web/api/wheelevent/index.html | 174 +++ files/es/web/api/window/alert/index.html | 69 ++ .../es/web/api/window/applicationcache/index.html | 30 + .../web/api/window/cancelanimationframe/index.html | 118 ++ files/es/web/api/window/close/index.html | 76 ++ files/es/web/api/window/closed/index.html | 65 + files/es/web/api/window/confirm/index.html | 64 + files/es/web/api/window/crypto/index.html | 88 ++ .../es/web/api/window/devicepixelratio/index.html | 91 ++ files/es/web/api/window/dialogarguments/index.html | 14 + files/es/web/api/window/document/index.html | 46 + files/es/web/api/window/frameelement/index.html | 106 ++ files/es/web/api/window/fullscreen/index.html | 43 + .../es/web/api/window/getcomputedstyle/index.html | 26 + files/es/web/api/window/getselection/index.html | 53 + .../es/web/api/window/hashchange_event/index.html | 194 +++ files/es/web/api/window/history/index.html | 39 + files/es/web/api/window/index.html | 412 ++++++ files/es/web/api/window/innerheight/index.html | 79 ++ files/es/web/api/window/localstorage/index.html | 148 +++ files/es/web/api/window/location/index.html | 274 ++++ files/es/web/api/window/locationbar/index.html | 66 + files/es/web/api/window/matchmedia/index.html | 67 + files/es/web/api/window/menubar/index.html | 42 + files/es/web/api/window/moveby/index.html | 70 ++ files/es/web/api/window/navigator/index.html | 60 + files/es/web/api/window/offline_event/index.html | 70 ++ files/es/web/api/window/open/index.html | 663 ++++++++++ files/es/web/api/window/opener/index.html | 28 + files/es/web/api/window/outerheight/index.html | 114 ++ files/es/web/api/window/outerwidth/index.html | 105 ++ files/es/web/api/window/print/index.html | 58 + files/es/web/api/window/prompt/index.html | 82 ++ .../api/window/requestanimationframe/index.html | 153 +++ .../web/api/window/requestidlecallback/index.html | 126 ++ files/es/web/api/window/scroll/index.html | 84 ++ files/es/web/api/window/scrollby/index.html | 85 ++ files/es/web/api/window/scrollto/index.html | 50 + files/es/web/api/window/scrollx/index.html | 124 ++ files/es/web/api/window/scrolly/index.html | 61 + files/es/web/api/window/sessionstorage/index.html | 143 +++ files/es/web/api/window/showmodaldialog/index.html | 95 ++ files/es/web/api/window/sidebar/index.html | 56 + files/es/web/api/window/statusbar/index.html | 72 ++ files/es/web/api/window/url/index.html | 101 ++ files/es/web/api/windowbase64/atob/index.html | 111 ++ .../base64_codificando_y_decodificando/index.html | 345 ++++++ files/es/web/api/windowbase64/index.html | 108 ++ files/es/web/api/windoweventhandlers/index.html | 184 +++ .../windoweventhandlers/onbeforeunload/index.html | 81 ++ .../windoweventhandlers/onhashchange/index.html | 165 +++ .../api/windoweventhandlers/onpopstate/index.html | 74 ++ .../windoworworkerglobalscope/caches/index.html | 127 ++ .../createimagebitmap/index.html | 108 ++ .../api/windoworworkerglobalscope/fetch/index.html | 177 +++ .../web/api/windoworworkerglobalscope/index.html | 169 +++ .../windoworworkerglobalscope/indexeddb/index.html | 141 +++ .../issecurecontext/index.html | 86 ++ .../web/api/windowtimers/clearinterval/index.html | 43 + .../web/api/windowtimers/cleartimeout/index.html | 63 + files/es/web/api/windowtimers/index.html | 118 ++ .../es/web/api/windowtimers/setinterval/index.html | 692 +++++++++++ .../es/web/api/windowtimers/settimeout/index.html | 340 +++++ files/es/web/api/worker/index.html | 155 +++ files/es/web/api/worker/postmessage/index.html | 206 +++ files/es/web/api/worker/terminate/index.html | 107 ++ files/es/web/api/xmlhttprequest/abort/index.html | 120 ++ .../es/web/api/xmlhttprequest/formdata/index.html | 84 ++ files/es/web/api/xmlhttprequest/index.html | 428 +++++++ .../xmlhttprequest/onreadystatechange/index.html | 109 ++ .../web/api/xmlhttprequest/responsetext/index.html | 104 ++ .../index.html | 232 ++++ files/es/web/api/xmlhttprequest/timeout/index.html | 67 + .../xmlhttprequest/using_xmlhttprequest/index.html | 447 +++++++ .../web/api/xmlhttprequesteventtarget/index.html | 68 + .../xmlhttprequesteventtarget/onload/index.html | 55 + 658 files changed, 82469 insertions(+) create mode 100644 files/es/web/api/abstractworker/index.html create mode 100644 files/es/web/api/ambient_light_events/index.html create mode 100644 files/es/web/api/analysernode/index.html create mode 100644 "files/es/web/api/animation/animaci\303\263n/index.html" create mode 100644 files/es/web/api/animation/cancel/index.html create mode 100644 files/es/web/api/animation/effect/index.html create mode 100644 files/es/web/api/animation/finish/index.html create mode 100644 files/es/web/api/animation/id/index.html create mode 100644 files/es/web/api/animation/index.html create mode 100644 files/es/web/api/animation/oncancel/index.html create mode 100644 files/es/web/api/animation/onfinish/index.html create mode 100644 files/es/web/api/animation/pause/index.html create mode 100644 files/es/web/api/animation/play/index.html create mode 100644 files/es/web/api/animation/playbackrate/index.html create mode 100644 files/es/web/api/animation/playstate/index.html create mode 100644 files/es/web/api/animation/ready/index.html create mode 100644 files/es/web/api/animation/reverse/index.html create mode 100644 files/es/web/api/animation/starttime/index.html create mode 100644 files/es/web/api/animation/terminado/index.html create mode 100644 files/es/web/api/animation/tiempoactual/index.html create mode 100644 files/es/web/api/animation/timeline/index.html create mode 100644 files/es/web/api/animationevent/animationname/index.html create mode 100644 files/es/web/api/animationevent/index.html create mode 100644 files/es/web/api/api_de_almacenamiento_web/index.html create mode 100644 files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html create mode 100644 files/es/web/api/api_del_portapapeles/index.html create mode 100644 files/es/web/api/attr/index.html create mode 100644 files/es/web/api/audiobuffer/index.html create mode 100644 files/es/web/api/audionode/index.html create mode 100644 files/es/web/api/baseaudiocontext/createbiquadfilter/index.html create mode 100644 files/es/web/api/baseaudiocontext/index.html create mode 100644 files/es/web/api/batterymanager/charging/index.html create mode 100644 files/es/web/api/batterymanager/chargingtime/index.html create mode 100644 files/es/web/api/batterymanager/dischargingtime/index.html create mode 100644 files/es/web/api/batterymanager/index.html create mode 100644 files/es/web/api/batterymanager/level/index.html create mode 100644 files/es/web/api/batterymanager/onchargingchange/index.html create mode 100644 files/es/web/api/batterymanager/onlevelchange/index.html create mode 100644 files/es/web/api/beforeunloadevent/index.html create mode 100644 files/es/web/api/blob/blob/index.html create mode 100644 files/es/web/api/blob/index.html create mode 100644 files/es/web/api/blob/type/index.html create mode 100644 files/es/web/api/blobbuilder/index.html create mode 100644 files/es/web/api/body/formdata/index.html create mode 100644 files/es/web/api/body/index.html create mode 100644 files/es/web/api/body/json/index.html create mode 100644 files/es/web/api/cachestorage/index.html create mode 100644 files/es/web/api/cachestorage/keys/index.html create mode 100644 files/es/web/api/cameracapabilities/effects/index.html create mode 100644 files/es/web/api/cameracapabilities/fileformats/index.html create mode 100644 files/es/web/api/cameracapabilities/flashmodes/index.html create mode 100644 files/es/web/api/cameracapabilities/index.html create mode 100644 files/es/web/api/cameracapabilities/maxexposurecompensation/index.html create mode 100644 files/es/web/api/cameracapabilities/maxfocusareas/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/compositing/index.html create mode 100644 files/es/web/api/canvasimagesource/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/arc/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/beginpath/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/clearrect/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/drawimage/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/linecap/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/rotate/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/save/index.html create mode 100644 files/es/web/api/childnode/after/index.html create mode 100644 files/es/web/api/childnode/before/index.html create mode 100644 files/es/web/api/childnode/index.html create mode 100644 files/es/web/api/childnode/remove/index.html create mode 100644 files/es/web/api/childnode/replacewith/index.html create mode 100644 files/es/web/api/clipboardevent/clipboarddata/index.html create mode 100644 files/es/web/api/clipboardevent/index.html create mode 100644 files/es/web/api/closeevent/index.html create mode 100644 files/es/web/api/comment/index.html create mode 100644 files/es/web/api/console/assert/index.html create mode 100644 files/es/web/api/console/count/index.html create mode 100644 files/es/web/api/console/dir/index.html create mode 100644 files/es/web/api/console/dirxml/index.html create mode 100644 files/es/web/api/console/error/index.html create mode 100644 files/es/web/api/console/index.html create mode 100644 files/es/web/api/console/info/index.html create mode 100644 files/es/web/api/console/log/index.html create mode 100644 files/es/web/api/console/tabla/index.html create mode 100644 files/es/web/api/console/time/index.html create mode 100644 files/es/web/api/console/timeend/index.html create mode 100644 files/es/web/api/console/trace/index.html create mode 100644 files/es/web/api/console/warn/index.html create mode 100644 files/es/web/api/constraint_validation/index.html create mode 100644 files/es/web/api/crypto/index.html create mode 100644 files/es/web/api/crypto/subtle/index.html create mode 100644 files/es/web/api/css_object_model/index.html create mode 100644 files/es/web/api/cssrule/csstext/index.html create mode 100644 files/es/web/api/cssrule/index.html create mode 100644 files/es/web/api/cssrule/parentstylesheet/index.html create mode 100644 files/es/web/api/cssstyledeclaration/index.html create mode 100644 files/es/web/api/cssstylerule/index.html create mode 100644 files/es/web/api/cssstylerule/selectortext/index.html create mode 100644 files/es/web/api/cssstylesheet/deleterule/index.html create mode 100644 files/es/web/api/cssstylesheet/index.html create mode 100644 files/es/web/api/cssstylesheet/insertrule/index.html create mode 100644 files/es/web/api/cssstylesheet/ownerrule/index.html create mode 100644 files/es/web/api/customelementregistry/define/index.html create mode 100644 files/es/web/api/customelementregistry/index.html create mode 100644 files/es/web/api/customevent/index.html create mode 100644 files/es/web/api/datatransfer/index.html create mode 100644 files/es/web/api/detecting_device_orientation/index.html create mode 100644 files/es/web/api/devicemotionevent/index.html create mode 100644 files/es/web/api/document/abrir/index.html create mode 100644 files/es/web/api/document/adoptnode/index.html create mode 100644 files/es/web/api/document/alinkcolor/index.html create mode 100644 files/es/web/api/document/anchors/index.html create mode 100644 files/es/web/api/document/applets/index.html create mode 100644 files/es/web/api/document/async/index.html create mode 100644 files/es/web/api/document/bgcolor/index.html create mode 100644 files/es/web/api/document/body/index.html create mode 100644 files/es/web/api/document/characterset/index.html create mode 100644 files/es/web/api/document/clear/index.html create mode 100644 files/es/web/api/document/close/index.html create mode 100644 files/es/web/api/document/contenttype/index.html create mode 100644 files/es/web/api/document/crearatributo/index.html create mode 100644 files/es/web/api/document/createdocumentfragment/index.html create mode 100644 files/es/web/api/document/createelement/index.html create mode 100644 files/es/web/api/document/createelementns/index.html create mode 100644 files/es/web/api/document/createrange/index.html create mode 100644 files/es/web/api/document/createtextnode/index.html create mode 100644 files/es/web/api/document/defaultview/index.html create mode 100644 files/es/web/api/document/designmode/index.html create mode 100644 files/es/web/api/document/dir/index.html create mode 100644 files/es/web/api/document/doctype/index.html create mode 100644 files/es/web/api/document/documentelement/index.html create mode 100644 files/es/web/api/document/documenturi/index.html create mode 100644 files/es/web/api/document/documenturiobject/index.html create mode 100644 files/es/web/api/document/dragover_event/index.html create mode 100644 files/es/web/api/document/embeds/index.html create mode 100644 files/es/web/api/document/evaluate/index.html create mode 100644 files/es/web/api/document/execcommand/index.html create mode 100644 files/es/web/api/document/exitfullscreen/index.html create mode 100644 files/es/web/api/document/getelementbyid/index.html create mode 100644 files/es/web/api/document/getelementsbyclassname/index.html create mode 100644 files/es/web/api/document/getelementsbyname/index.html create mode 100644 files/es/web/api/document/getelementsbytagname/index.html create mode 100644 files/es/web/api/document/getelementsbytagnamens/index.html create mode 100644 files/es/web/api/document/getselection/index.html create mode 100644 files/es/web/api/document/hasfocus/index.html create mode 100644 files/es/web/api/document/head/index.html create mode 100644 files/es/web/api/document/height/index.html create mode 100644 files/es/web/api/document/hidden/index.html create mode 100644 files/es/web/api/document/importnode/index.html create mode 100644 files/es/web/api/document/index.html create mode 100644 files/es/web/api/document/keydown_event/index.html create mode 100644 files/es/web/api/document/keyup_event/index.html create mode 100644 files/es/web/api/document/pointerlockelement/index.html create mode 100644 files/es/web/api/document/queryselector/index.html create mode 100644 files/es/web/api/document/queryselectorall/index.html create mode 100644 files/es/web/api/document/readystate/index.html create mode 100644 files/es/web/api/document/registerelement/index.html create mode 100644 files/es/web/api/document/scripts/index.html create mode 100644 files/es/web/api/document/scroll_event/index.html create mode 100644 files/es/web/api/document/stylesheets/index.html create mode 100644 files/es/web/api/document/url/index.html create mode 100644 files/es/web/api/document/write/index.html create mode 100644 files/es/web/api/document/writeln/index.html create mode 100644 files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html create mode 100644 files/es/web/api/documentfragment/index.html create mode 100644 files/es/web/api/domapplicationsregistry/checkinstalled/index.html create mode 100644 files/es/web/api/domapplicationsregistry/getinstalled/index.html create mode 100644 files/es/web/api/domapplicationsregistry/index.html create mode 100644 files/es/web/api/domapplicationsregistry/install/index.html create mode 100644 files/es/web/api/domapplicationsregistry/installpackage/index.html create mode 100644 files/es/web/api/domerror/index.html create mode 100644 files/es/web/api/domparser/index.html create mode 100644 files/es/web/api/domstring/cadenas_binarias/index.html create mode 100644 files/es/web/api/domstring/index.html create mode 100644 files/es/web/api/dragevent/index.html create mode 100644 files/es/web/api/element/accesskey/index.html create mode 100644 files/es/web/api/element/animate/index.html create mode 100644 files/es/web/api/element/attachshadow/index.html create mode 100644 files/es/web/api/element/attributes/index.html create mode 100644 files/es/web/api/element/classlist/index.html create mode 100644 files/es/web/api/element/classname/index.html create mode 100644 files/es/web/api/element/click_event/index.html create mode 100644 files/es/web/api/element/clientheight/index.html create mode 100644 files/es/web/api/element/clientleft/index.html create mode 100644 files/es/web/api/element/clienttop/index.html create mode 100644 files/es/web/api/element/clientwidth/index.html create mode 100644 files/es/web/api/element/closest/index.html create mode 100644 files/es/web/api/element/computedstylemap/index.html create mode 100644 files/es/web/api/element/currentstyle/index.html create mode 100644 files/es/web/api/element/getattribute/index.html create mode 100644 files/es/web/api/element/getattributenodens/index.html create mode 100644 files/es/web/api/element/getboundingclientrect/index.html create mode 100644 files/es/web/api/element/getclientrects/index.html create mode 100644 files/es/web/api/element/getelementsbyclassname/index.html create mode 100644 files/es/web/api/element/getelementsbytagname/index.html create mode 100644 files/es/web/api/element/getelementsbytagnamens/index.html create mode 100644 files/es/web/api/element/hasattribute/index.html create mode 100644 files/es/web/api/element/id/index.html create mode 100644 files/es/web/api/element/index.html create mode 100644 files/es/web/api/element/innerhtml/index.html create mode 100644 files/es/web/api/element/insertadjacentelement/index.html create mode 100644 files/es/web/api/element/insertadjacenthtml/index.html create mode 100644 files/es/web/api/element/localname/index.html create mode 100644 files/es/web/api/element/matches/index.html create mode 100644 files/es/web/api/element/mousedown_event/index.html create mode 100644 files/es/web/api/element/name/index.html create mode 100644 files/es/web/api/element/namespaceuri/index.html create mode 100644 files/es/web/api/element/ongotpointercapture/index.html create mode 100644 files/es/web/api/element/onlostpointercapture/index.html create mode 100644 files/es/web/api/element/onwheel/index.html create mode 100644 files/es/web/api/element/outerhtml/index.html create mode 100644 files/es/web/api/element/prefix/index.html create mode 100644 files/es/web/api/element/queryselector/index.html create mode 100644 files/es/web/api/element/removeattribute/index.html create mode 100644 files/es/web/api/element/requestfullscreen/index.html create mode 100644 files/es/web/api/element/runtimestyle/index.html create mode 100644 files/es/web/api/element/scrollheight/index.html create mode 100644 files/es/web/api/element/scrollintoview/index.html create mode 100644 files/es/web/api/element/scrollleft/index.html create mode 100644 files/es/web/api/element/scrolltop/index.html create mode 100644 files/es/web/api/element/scrolltopmax/index.html create mode 100644 files/es/web/api/element/scrollwidth/index.html create mode 100644 files/es/web/api/element/setattribute/index.html create mode 100644 files/es/web/api/element/setattributens/index.html create mode 100644 files/es/web/api/element/setcapture/index.html create mode 100644 files/es/web/api/element/shadowroot/index.html create mode 100644 files/es/web/api/element/tagname/index.html create mode 100644 files/es/web/api/element/wheel_event/index.html create mode 100644 files/es/web/api/elementoshtmlparavideo/index.html create mode 100644 files/es/web/api/event/bubbles/index.html create mode 100644 files/es/web/api/event/cancelable/index.html create mode 100644 files/es/web/api/event/createevent/index.html create mode 100644 files/es/web/api/event/currenttarget/index.html create mode 100644 files/es/web/api/event/defaultprevented/index.html create mode 100644 files/es/web/api/event/event/index.html create mode 100644 files/es/web/api/event/index.html create mode 100644 files/es/web/api/event/initevent/index.html create mode 100644 files/es/web/api/event/preventdefault/index.html create mode 100644 files/es/web/api/event/stoppropagation/index.html create mode 100644 files/es/web/api/event/target/index.html create mode 100644 files/es/web/api/event/type/index.html create mode 100644 files/es/web/api/eventlistener/index.html create mode 100644 files/es/web/api/eventsource/index.html create mode 100644 files/es/web/api/eventsource/onopen/index.html create mode 100644 files/es/web/api/eventtarget/addeventlistener/index.html create mode 100644 files/es/web/api/eventtarget/dispatchevent/index.html create mode 100644 files/es/web/api/eventtarget/index.html create mode 100644 files/es/web/api/eventtarget/removeeventlistener/index.html create mode 100644 files/es/web/api/fetch_api/conceptos_basicos/index.html create mode 100644 files/es/web/api/fetch_api/index.html create mode 100644 files/es/web/api/fetch_api/utilizando_fetch/index.html create mode 100644 files/es/web/api/fetchevent/index.html create mode 100644 files/es/web/api/file/filename/index.html create mode 100644 files/es/web/api/file/index.html create mode 100644 files/es/web/api/file/lastmodifieddate/index.html create mode 100644 files/es/web/api/file/name/index.html create mode 100644 files/es/web/api/file/type/index.html create mode 100644 files/es/web/api/file/using_files_from_web_applications/index.html create mode 100644 files/es/web/api/file/webkitrelativepath/index.html create mode 100644 files/es/web/api/fileerror/index.html create mode 100644 files/es/web/api/filereader/index.html create mode 100644 files/es/web/api/filereader/onload/index.html create mode 100644 files/es/web/api/filereader/readasarraybuffer/index.html create mode 100644 files/es/web/api/filereader/readasdataurl/index.html create mode 100644 files/es/web/api/filereader/readastext/index.html create mode 100644 files/es/web/api/filereader/result/index.html create mode 100644 files/es/web/api/filesystem/index.html create mode 100644 files/es/web/api/fullscreen_api/index.html create mode 100644 files/es/web/api/gamepad_api/index.html create mode 100644 files/es/web/api/gamepadbutton/index.html create mode 100644 files/es/web/api/geolocation/clearwatch/index.html create mode 100644 files/es/web/api/geolocation/getcurrentposition/index.html create mode 100644 files/es/web/api/geolocation/index.html create mode 100644 files/es/web/api/geolocation/watchposition/index.html create mode 100644 files/es/web/api/geolocationcoordinates/index.html create mode 100644 files/es/web/api/geolocationcoordinates/latitude/index.html create mode 100644 files/es/web/api/geolocationposition/index.html create mode 100644 files/es/web/api/globaleventhandlers/index.html create mode 100644 files/es/web/api/globaleventhandlers/onblur/index.html create mode 100644 files/es/web/api/globaleventhandlers/onchange/index.html create mode 100644 files/es/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/es/web/api/globaleventhandlers/onclose/index.html create mode 100644 files/es/web/api/globaleventhandlers/onerror/index.html create mode 100644 files/es/web/api/globaleventhandlers/onfocus/index.html create mode 100644 files/es/web/api/globaleventhandlers/oninput/index.html create mode 100644 files/es/web/api/globaleventhandlers/onkeydown/index.html create mode 100644 files/es/web/api/globaleventhandlers/onkeyup/index.html create mode 100644 files/es/web/api/globaleventhandlers/onload/index.html create mode 100644 files/es/web/api/globaleventhandlers/onloadedmetadata/index.html create mode 100644 files/es/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/es/web/api/globaleventhandlers/onscroll/index.html create mode 100644 files/es/web/api/globaleventhandlers/onselect/index.html create mode 100644 files/es/web/api/globaleventhandlers/onselectstart/index.html create mode 100644 files/es/web/api/globaleventhandlers/onsubmit/index.html create mode 100644 files/es/web/api/globaleventhandlers/ontouchstart/index.html create mode 100644 files/es/web/api/globaleventhandlers/onunload/index.html create mode 100644 files/es/web/api/headers/index.html create mode 100644 files/es/web/api/history/index.html create mode 100644 files/es/web/api/history/length/index.html create mode 100644 files/es/web/api/history/pushstate/index.html create mode 100644 files/es/web/api/htmlanchorelement/index.html create mode 100644 files/es/web/api/htmlaudioelement/index.html create mode 100644 files/es/web/api/htmlcanvaselement/getcontext/index.html create mode 100644 files/es/web/api/htmlcanvaselement/height/index.html create mode 100644 files/es/web/api/htmlcanvaselement/index.html create mode 100644 files/es/web/api/htmlcanvaselement/toblob/index.html create mode 100644 files/es/web/api/htmlcanvaselement/todataurl/index.html create mode 100644 files/es/web/api/htmlcanvaselement/width/index.html create mode 100644 files/es/web/api/htmlcollection/index.html create mode 100644 files/es/web/api/htmlcontentelement/getdistributednodes/index.html create mode 100644 files/es/web/api/htmlcontentelement/index.html create mode 100644 files/es/web/api/htmlcontentelement/select/index.html create mode 100644 files/es/web/api/htmldivelement/index.html create mode 100644 files/es/web/api/htmlelement/change_event/index.html create mode 100644 files/es/web/api/htmlelement/click/index.html create mode 100644 files/es/web/api/htmlelement/contenteditable/index.html create mode 100644 files/es/web/api/htmlelement/dataset/index.html create mode 100644 files/es/web/api/htmlelement/focus/index.html create mode 100644 files/es/web/api/htmlelement/index.html create mode 100644 files/es/web/api/htmlelement/innertext/index.html create mode 100644 files/es/web/api/htmlelement/input_event/index.html create mode 100644 files/es/web/api/htmlelement/offsetheight/index.html create mode 100644 files/es/web/api/htmlelement/offsetleft/index.html create mode 100644 files/es/web/api/htmlelement/offsetparent/index.html create mode 100644 files/es/web/api/htmlelement/offsettop/index.html create mode 100644 files/es/web/api/htmlelement/offsetwidth/index.html create mode 100644 files/es/web/api/htmlelement/style/index.html create mode 100644 files/es/web/api/htmlformelement/index.html create mode 100644 files/es/web/api/htmlformelement/reset/index.html create mode 100644 files/es/web/api/htmlheadelement/index.html create mode 100644 files/es/web/api/htmlhtmlelement/index.html create mode 100644 files/es/web/api/htmlimageelement/image/index.html create mode 100644 files/es/web/api/htmlimageelement/index.html create mode 100644 files/es/web/api/htmlinputelement/index.html create mode 100644 files/es/web/api/htmlinputelement/invalid_event/index.html create mode 100644 files/es/web/api/htmlinputelement/select/index.html create mode 100644 files/es/web/api/htmllabelelement/index.html create mode 100644 files/es/web/api/htmllielement/index.html create mode 100644 files/es/web/api/htmlmediaelement/canplay_event/index.html create mode 100644 files/es/web/api/htmlmediaelement/index.html create mode 100644 files/es/web/api/htmlmediaelement/loadeddata_event/index.html create mode 100644 files/es/web/api/htmlmediaelement/pause/index.html create mode 100644 files/es/web/api/htmlmediaelement/paused/index.html create mode 100644 files/es/web/api/htmlmediaelement/play/index.html create mode 100644 files/es/web/api/htmlmediaelement/timeupdate_event/index.html create mode 100644 files/es/web/api/htmlselectelement/checkvalidity/index.html create mode 100644 files/es/web/api/htmlselectelement/index.html create mode 100644 files/es/web/api/htmlselectelement/setcustomvalidity/index.html create mode 100644 files/es/web/api/htmlshadowelement/getdistributednodes/index.html create mode 100644 files/es/web/api/htmlshadowelement/index.html create mode 100644 files/es/web/api/htmlstyleelement/index.html create mode 100644 files/es/web/api/htmltableelement/align/index.html create mode 100644 files/es/web/api/htmltableelement/index.html create mode 100644 files/es/web/api/htmltableelement/insertrow/index.html create mode 100644 files/es/web/api/idbcursor/continue/index.html create mode 100644 files/es/web/api/idbcursor/index.html create mode 100644 files/es/web/api/idbdatabase/index.html create mode 100644 files/es/web/api/idbdatabase/transaction/index.html create mode 100644 files/es/web/api/idbobjectstore/add/index.html create mode 100644 files/es/web/api/idbobjectstore/index.html create mode 100644 files/es/web/api/imagebitmap/index.html create mode 100644 files/es/web/api/imagebitmaprenderingcontext/index.html create mode 100644 files/es/web/api/index.html create mode 100644 files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html create mode 100644 files/es/web/api/indexeddb_api/index.html create mode 100644 files/es/web/api/indexeddb_api/usando_indexeddb/index.html create mode 100644 files/es/web/api/intersection_observer_api/index.html create mode 100644 files/es/web/api/keyboardevent/getmodifierstate/index.html create mode 100644 files/es/web/api/keyboardevent/index.html create mode 100644 files/es/web/api/keyboardevent/key/index.html create mode 100644 files/es/web/api/keyboardevent/metakey/index.html create mode 100644 files/es/web/api/keyboardevent/which/index.html create mode 100644 files/es/web/api/location/index.html create mode 100644 files/es/web/api/location/origin/index.html create mode 100644 files/es/web/api/location/reload/index.html create mode 100644 files/es/web/api/mediadevices/getusermedia/index.html create mode 100644 files/es/web/api/mediadevices/index.html create mode 100644 files/es/web/api/mediaquerylist/addlistener/index.html create mode 100644 files/es/web/api/mediaquerylist/index.html create mode 100644 files/es/web/api/mediaquerylist/matches/index.html create mode 100644 files/es/web/api/mediaquerylist/removelistener/index.html create mode 100644 files/es/web/api/mediasource/index.html create mode 100644 files/es/web/api/mediastreamaudiosourcenode/index.html create mode 100644 files/es/web/api/mediastreamtrack/index.html create mode 100644 files/es/web/api/messageevent/index.html create mode 100644 files/es/web/api/mimetype/index.html create mode 100644 files/es/web/api/mouseevent/index.html create mode 100644 files/es/web/api/mouseevent/initmouseevent/index.html create mode 100644 files/es/web/api/mouseevent/shiftkey/index.html create mode 100644 files/es/web/api/mozsocial/closepanel/index.html create mode 100644 files/es/web/api/mozsocial/getattention/index.html create mode 100644 files/es/web/api/mozsocial/getworker/index.html create mode 100644 files/es/web/api/mozsocial/index.html create mode 100644 files/es/web/api/mozsocial/isvisible/index.html create mode 100644 files/es/web/api/mozsocial/openchatwindow/index.html create mode 100644 files/es/web/api/mozsocial/openpanel/index.html create mode 100644 files/es/web/api/mutationobserver/index.html create mode 100644 files/es/web/api/mutationobserver/mutationobserver/index.html create mode 100644 files/es/web/api/mutationobserver/observe/index.html create mode 100644 files/es/web/api/navigator/donottrack/index.html create mode 100644 files/es/web/api/navigator/getusermedia/index.html create mode 100644 files/es/web/api/navigator/id/index.html create mode 100644 files/es/web/api/navigator/index.html create mode 100644 files/es/web/api/navigator/mozsocial/index.html create mode 100644 files/es/web/api/navigator/registerprotocolhandler/index.html create mode 100644 files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html create mode 100644 files/es/web/api/navigator/vibrate/index.html create mode 100644 files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html create mode 100644 files/es/web/api/navigatorconcurrenthardware/index.html create mode 100644 files/es/web/api/navigatorgeolocation/geolocation/index.html create mode 100644 files/es/web/api/navigatorgeolocation/index.html create mode 100644 files/es/web/api/navigatorlanguage/index.html create mode 100644 files/es/web/api/navigatorlanguage/language/index.html create mode 100644 files/es/web/api/navigatoronline/eventos_online_y_offline/index.html create mode 100644 files/es/web/api/navigatoronline/index.html create mode 100644 files/es/web/api/navigatoronline/online/index.html create mode 100644 files/es/web/api/network_information_api/index.html create mode 100644 files/es/web/api/node/appendchild/index.html create mode 100644 files/es/web/api/node/childnodes/index.html create mode 100644 files/es/web/api/node/clonenode/index.html create mode 100644 files/es/web/api/node/contains/index.html create mode 100644 files/es/web/api/node/elementopadre/index.html create mode 100644 files/es/web/api/node/haschildnodes/index.html create mode 100644 files/es/web/api/node/index.html create mode 100644 files/es/web/api/node/insertarantes/index.html create mode 100644 files/es/web/api/node/issamenode/index.html create mode 100644 files/es/web/api/node/lastchild/index.html create mode 100644 files/es/web/api/node/namespaceuri/index.html create mode 100644 files/es/web/api/node/nextsibling/index.html create mode 100644 files/es/web/api/node/nodename/index.html create mode 100644 files/es/web/api/node/nodetype/index.html create mode 100644 files/es/web/api/node/nodevalue/index.html create mode 100644 files/es/web/api/node/nodoprincipal/index.html create mode 100644 files/es/web/api/node/ownerdocument/index.html create mode 100644 files/es/web/api/node/parentnode/index.html create mode 100644 files/es/web/api/node/previoussibling/index.html create mode 100644 files/es/web/api/node/removechild/index.html create mode 100644 files/es/web/api/node/replacechild/index.html create mode 100644 files/es/web/api/node/textcontent/index.html create mode 100644 files/es/web/api/nodelist/foreach/index.html create mode 100644 files/es/web/api/nodelist/index.html create mode 100644 files/es/web/api/nondocumenttypechildnode/index.html create mode 100644 files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html create mode 100644 files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html create mode 100644 files/es/web/api/notification/body/index.html create mode 100644 files/es/web/api/notification/dir/index.html create mode 100644 files/es/web/api/notification/icon/index.html create mode 100644 files/es/web/api/notification/index.html create mode 100644 files/es/web/api/notification/onclick/index.html create mode 100644 files/es/web/api/notification/permission/index.html create mode 100644 files/es/web/api/notification/requestpermission/index.html create mode 100644 files/es/web/api/notifications_api/index.html create mode 100644 files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html create mode 100644 files/es/web/api/parentnode/append/index.html create mode 100644 files/es/web/api/parentnode/childelementcount/index.html create mode 100644 files/es/web/api/parentnode/children/index.html create mode 100644 files/es/web/api/parentnode/firstelementchild/index.html create mode 100644 files/es/web/api/parentnode/index.html create mode 100644 files/es/web/api/parentnode/lastelementchild/index.html create mode 100644 files/es/web/api/payment_request_api/index.html create mode 100644 files/es/web/api/performance/clearmarks/index.html create mode 100644 files/es/web/api/performance/clearmeasures/index.html create mode 100644 files/es/web/api/performance/index.html create mode 100644 files/es/web/api/performance/memory/index.html create mode 100644 files/es/web/api/performance/navigation/index.html create mode 100644 files/es/web/api/performance/now/index.html create mode 100644 files/es/web/api/performance/timeorigin/index.html create mode 100644 files/es/web/api/performance/timing/index.html create mode 100644 files/es/web/api/performancenavigation/index.html create mode 100644 files/es/web/api/positionoptions/index.html create mode 100644 files/es/web/api/push_api/index.html create mode 100644 files/es/web/api/push_api/using_the_push_api/index.html create mode 100644 files/es/web/api/pushmanager/index.html create mode 100644 files/es/web/api/pushmanager/permissionstate/index.html create mode 100644 files/es/web/api/pushmanager/supportedcontentencodings/index.html create mode 100644 files/es/web/api/randomsource/index.html create mode 100644 files/es/web/api/randomsource/obtenervaloresaleatorios/index.html create mode 100644 files/es/web/api/range/collapsed/index.html create mode 100644 files/es/web/api/range/commonancestorcontainer/index.html create mode 100644 files/es/web/api/range/getclientrects/index.html create mode 100644 files/es/web/api/range/index.html create mode 100644 files/es/web/api/range/intersectsnode/index.html create mode 100644 files/es/web/api/range/setstart/index.html create mode 100644 files/es/web/api/request/headers/index.html create mode 100644 files/es/web/api/request/index.html create mode 100644 files/es/web/api/response/index.html create mode 100644 files/es/web/api/response/ok/index.html create mode 100644 files/es/web/api/response/response/index.html create mode 100644 files/es/web/api/response/status/index.html create mode 100644 files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html create mode 100644 files/es/web/api/rtcpeerconnection/index.html create mode 100644 files/es/web/api/rtcrtpreceiver/index.html create mode 100644 files/es/web/api/screen/index.html create mode 100644 files/es/web/api/selection/addrange/index.html create mode 100644 files/es/web/api/selection/anchornode/index.html create mode 100644 files/es/web/api/selection/anchoroffset/index.html create mode 100644 files/es/web/api/selection/collapse/index.html create mode 100644 files/es/web/api/selection/collapsetoend/index.html create mode 100644 files/es/web/api/selection/collapsetostart/index.html create mode 100644 files/es/web/api/selection/containsnode/index.html create mode 100644 files/es/web/api/selection/deletefromdocument/index.html create mode 100644 files/es/web/api/selection/extend/index.html create mode 100644 files/es/web/api/selection/focusnode/index.html create mode 100644 files/es/web/api/selection/focusoffset/index.html create mode 100644 files/es/web/api/selection/getrangeat/index.html create mode 100644 files/es/web/api/selection/index.html create mode 100644 files/es/web/api/selection/iscollapsed/index.html create mode 100644 files/es/web/api/selection/rangecount/index.html create mode 100644 files/es/web/api/selection/removeallranges/index.html create mode 100644 files/es/web/api/selection/removerange/index.html create mode 100644 files/es/web/api/selection/selectallchildren/index.html create mode 100644 files/es/web/api/selection/tostring/index.html create mode 100644 files/es/web/api/service_worker_api/index.html create mode 100644 files/es/web/api/service_worker_api/using_service_workers/index.html create mode 100644 files/es/web/api/serviceworkercontainer/index.html create mode 100644 files/es/web/api/serviceworkercontainer/register/index.html create mode 100644 files/es/web/api/serviceworkerregistration/index.html create mode 100644 files/es/web/api/simple_push_api/index.html create mode 100644 files/es/web/api/storage/clear/index.html create mode 100644 files/es/web/api/storage/getitem/index.html create mode 100644 files/es/web/api/storage/index.html create mode 100644 files/es/web/api/storage/length/index.html create mode 100644 files/es/web/api/storage/localstorage/index.html create mode 100644 files/es/web/api/storage/removeitem/index.html create mode 100644 files/es/web/api/storage/setitem/index.html create mode 100644 files/es/web/api/storagemanager/estimate/index.html create mode 100644 files/es/web/api/storagemanager/index.html create mode 100644 files/es/web/api/storagemanager/persist/index.html create mode 100644 files/es/web/api/storagemanager/persisted/index.html create mode 100644 files/es/web/api/stylesheet/disabled/index.html create mode 100644 files/es/web/api/stylesheet/href/index.html create mode 100644 files/es/web/api/stylesheet/index.html create mode 100644 files/es/web/api/stylesheet/media/index.html create mode 100644 files/es/web/api/stylesheet/ownernode/index.html create mode 100644 files/es/web/api/stylesheet/parentstylesheet/index.html create mode 100644 files/es/web/api/stylesheet/title/index.html create mode 100644 files/es/web/api/stylesheet/type/index.html create mode 100644 files/es/web/api/subtlecrypto/digest/index.html create mode 100644 files/es/web/api/subtlecrypto/encrypt/index.html create mode 100644 files/es/web/api/subtlecrypto/index.html create mode 100644 files/es/web/api/svgpoint/index.html create mode 100644 files/es/web/api/texttrack/cuechange_event/index.html create mode 100644 files/es/web/api/texttrack/index.html create mode 100644 files/es/web/api/touchevent/index.html create mode 100644 files/es/web/api/uievent/index.html create mode 100644 files/es/web/api/uievent/pagex/index.html create mode 100644 files/es/web/api/url/createobjecturl/index.html create mode 100644 files/es/web/api/url/host/index.html create mode 100644 files/es/web/api/url/index.html create mode 100644 files/es/web/api/url/port/index.html create mode 100644 files/es/web/api/url/url/index.html create mode 100644 files/es/web/api/urlsearchparams/index.html create mode 100644 files/es/web/api/urlsearchparams/urlsearchparams/index.html create mode 100644 files/es/web/api/using_the_browser_api/index.html create mode 100644 files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html create mode 100644 files/es/web/api/web_crypto_api/index.html create mode 100644 files/es/web/api/web_speech_api/index.html create mode 100644 files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html create mode 100644 files/es/web/api/web_workers_api/index.html create mode 100644 files/es/web/api/webgl_api/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html create mode 100644 files/es/web/api/webrtc_api/index.html create mode 100644 files/es/web/api/webrtc_api/protocols/index.html create mode 100644 files/es/web/api/websocket/close_event/index.html create mode 100644 files/es/web/api/websocket/index.html create mode 100644 files/es/web/api/websocket/onerror/index.html create mode 100644 files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html create mode 100644 files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html create mode 100644 files/es/web/api/websockets_api/index.html create mode 100644 files/es/web/api/websockets_api/writing_websocket_client_applications/index.html create mode 100644 files/es/web/api/webvr_api/index.html create mode 100644 files/es/web/api/webvr_api/using_the_webvr_api/index.html create mode 100644 files/es/web/api/webvtt_api/index.html create mode 100644 files/es/web/api/wheelevent/deltay/index.html create mode 100644 files/es/web/api/wheelevent/index.html create mode 100644 files/es/web/api/window/alert/index.html create mode 100644 files/es/web/api/window/applicationcache/index.html create mode 100644 files/es/web/api/window/cancelanimationframe/index.html create mode 100644 files/es/web/api/window/close/index.html create mode 100644 files/es/web/api/window/closed/index.html create mode 100644 files/es/web/api/window/confirm/index.html create mode 100644 files/es/web/api/window/crypto/index.html create mode 100644 files/es/web/api/window/devicepixelratio/index.html create mode 100644 files/es/web/api/window/dialogarguments/index.html create mode 100644 files/es/web/api/window/document/index.html create mode 100644 files/es/web/api/window/frameelement/index.html create mode 100644 files/es/web/api/window/fullscreen/index.html create mode 100644 files/es/web/api/window/getcomputedstyle/index.html create mode 100644 files/es/web/api/window/getselection/index.html create mode 100644 files/es/web/api/window/hashchange_event/index.html create mode 100644 files/es/web/api/window/history/index.html create mode 100644 files/es/web/api/window/index.html create mode 100644 files/es/web/api/window/innerheight/index.html create mode 100644 files/es/web/api/window/localstorage/index.html create mode 100644 files/es/web/api/window/location/index.html create mode 100644 files/es/web/api/window/locationbar/index.html create mode 100644 files/es/web/api/window/matchmedia/index.html create mode 100644 files/es/web/api/window/menubar/index.html create mode 100644 files/es/web/api/window/moveby/index.html create mode 100644 files/es/web/api/window/navigator/index.html create mode 100644 files/es/web/api/window/offline_event/index.html create mode 100644 files/es/web/api/window/open/index.html create mode 100644 files/es/web/api/window/opener/index.html create mode 100644 files/es/web/api/window/outerheight/index.html create mode 100644 files/es/web/api/window/outerwidth/index.html create mode 100644 files/es/web/api/window/print/index.html create mode 100644 files/es/web/api/window/prompt/index.html create mode 100644 files/es/web/api/window/requestanimationframe/index.html create mode 100644 files/es/web/api/window/requestidlecallback/index.html create mode 100644 files/es/web/api/window/scroll/index.html create mode 100644 files/es/web/api/window/scrollby/index.html create mode 100644 files/es/web/api/window/scrollto/index.html create mode 100644 files/es/web/api/window/scrollx/index.html create mode 100644 files/es/web/api/window/scrolly/index.html create mode 100644 files/es/web/api/window/sessionstorage/index.html create mode 100644 files/es/web/api/window/showmodaldialog/index.html create mode 100644 files/es/web/api/window/sidebar/index.html create mode 100644 files/es/web/api/window/statusbar/index.html create mode 100644 files/es/web/api/window/url/index.html create mode 100644 files/es/web/api/windowbase64/atob/index.html create mode 100644 files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html create mode 100644 files/es/web/api/windowbase64/index.html create mode 100644 files/es/web/api/windoweventhandlers/index.html create mode 100644 files/es/web/api/windoweventhandlers/onbeforeunload/index.html create mode 100644 files/es/web/api/windoweventhandlers/onhashchange/index.html create mode 100644 files/es/web/api/windoweventhandlers/onpopstate/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/caches/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/fetch/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/indexeddb/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html create mode 100644 files/es/web/api/windowtimers/clearinterval/index.html create mode 100644 files/es/web/api/windowtimers/cleartimeout/index.html create mode 100644 files/es/web/api/windowtimers/index.html create mode 100644 files/es/web/api/windowtimers/setinterval/index.html create mode 100644 files/es/web/api/windowtimers/settimeout/index.html create mode 100644 files/es/web/api/worker/index.html create mode 100644 files/es/web/api/worker/postmessage/index.html create mode 100644 files/es/web/api/worker/terminate/index.html create mode 100644 files/es/web/api/xmlhttprequest/abort/index.html create mode 100644 files/es/web/api/xmlhttprequest/formdata/index.html create mode 100644 files/es/web/api/xmlhttprequest/index.html create mode 100644 files/es/web/api/xmlhttprequest/onreadystatechange/index.html create mode 100644 files/es/web/api/xmlhttprequest/responsetext/index.html create mode 100644 files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html create mode 100644 files/es/web/api/xmlhttprequest/timeout/index.html create mode 100644 files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html create mode 100644 files/es/web/api/xmlhttprequesteventtarget/index.html create mode 100644 files/es/web/api/xmlhttprequesteventtarget/onload/index.html (limited to 'files/es/web/api') diff --git a/files/es/web/api/abstractworker/index.html b/files/es/web/api/abstractworker/index.html new file mode 100644 index 0000000000..f3f50ecf38 --- /dev/null +++ b/files/es/web/api/abstractworker/index.html @@ -0,0 +1,130 @@ +--- +title: AbstractWorker +slug: Web/API/AbstractWorker +translation_of: Web/API/AbstractWorker +--- +

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

+ +

La interfaz AbstractWorker de la API de Web Workers es una interfaz abstracta que define propiedades métodos comunes a toda clase de workers, no sólo al {{domxref("Worker")}} básico sino también el {{domxref("ServiceWorker")}} y el {{domxref("SharedWorker")}}.
+ Al ser una clase abstracta, usted no interactúa directamente con el AbstractWorker.

+ +

Propiedades

+ +

La interfaz AbstractWorker no hereda ninguna propiedad.

+ +

Gestor de eventos

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Es un {{ domxref("EventListener") }} el cual es invocado siempre que un {{domxref("ErrorEvent")}} de tipo error se gatilla através del worker.
+
+ +

Métodos

+ +

La interfaz AbstractWorker no implementa o hereda ningún método.

+ +

Ejemplo

+ +

Note que usted no estará usando la interfaz AbstractWorker diractamente en su código — cuando es invocada, {{domxref("Worker")}} y {{domxref("SharedWorker")}} heredan sus propiedades.

+ +

El siguiente fragmento de código muestra la creación de un objeto {{domxref("Worker")}} usando el constructor {{domxref("Worker.Worker", "Worker()")}} , junto con la forma de uso del objeto creado:

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Mensaje enviado al worker');
+}
+ +

El código del worker se carga desde el archivo "worker.js". Éste código asume que hay un elemento del tipo {{HTMLElement("input")}} representado como first; un gestor de evento para el evento {{domxref("change")}} se define para que cuando el usuario cambie el valor de first, un mensaje se enviará al worker haciendoselo saber.

+ +

Para ejemplos completos, visitar:

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("HTML WHATWG")}}No existen cambios para {{SpecName("Web Workers")}}.
{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("Web Workers")}}Definición inicial.
+ +

Compatibilidad en Navegadores

+ +
{{CompatibilityTable()}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome(4)}}{{CompatGeckoDesktop("1.9.1")}}1010.64
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.4{{CompatGeckoMobile("1.9.1")}}1.0.11011.55.1
+
+ +

Vease también

+ + diff --git a/files/es/web/api/ambient_light_events/index.html b/files/es/web/api/ambient_light_events/index.html new file mode 100644 index 0000000000..4ea45847c0 --- /dev/null +++ b/files/es/web/api/ambient_light_events/index.html @@ -0,0 +1,114 @@ +--- +title: Luz Ambiental Eventos +slug: Web/API/Ambient_Light_Events +translation_of: Web/API/Ambient_Light_Events +--- +
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
+ +

Los eventos de luz ambiental son una forma práctica de hacer una página web o una aplicación al tanto de cualquier cambio en la intensidad de la luz. Se les permite reaccionar a un cambio de este tipo, por ejemplo, cambiando el contraste de color de la interfaz de usuario (UI) o cambiando la exposición necesaria para tomar una foto.

+ +

Eventos de luz

+ +

Cuando el sensor de luz de un dispositivo detecta un cambio en el nivel de luz, notifica al navegador de ese cambio. Cuando el navegador recibe dicha notificación, se dispara un {{domxref ( "DeviceLightEvent")}} evento que proporciona información sobre la intensidad de la luz exacta.

+ +

Este evento puede ser capturado en el plano objeto de la ventana mediante el uso de la {{domxref ( "EventTarget.addEventListener", "addEventListener")}} El método (usando el {{event( "devicelight")}} nombre del evento) o adjuntando una controlador de eventos al {{domxref ( "window.ondevicelight")}} propiedad.

+ +

Una vez capturado, el objeto de evento da acceso a la intensidad de la luz expresada en lux a través de la {{domxref ( "DeviceLightEvent.value")}} propiedad.

+ +

Ejemplo

+ +
if ('ondevicelight' in window) {
+  window.addEventListener('devicelight', function(event) {
+    var body = document.querySelector('body');
+    if (event.value < 50) {
+      body.classList.add('darklight');
+      body.classList.remove('brightlight');
+    } else {
+      body.classList.add('brightlight');
+      body.classList.remove('darklight');
+    }
+  });
+} else {
+  console.log('devicelight event not supported');
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName("AmbientLight", "", "Ambient Light Events")}}{{Spec2("AmbientLight")}}definición inicial
+ +

Compatibilidad del Navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceLightEvent")}}{{CompatNo}}{{CompatGeckoDesktop("22.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceLightEvent")}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("15.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] The {{event("devicelight")}} event is implemented and preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 {{geckoRelease("22.0")}} a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see {{bug(754199)}}).

+ +

See also

+ + diff --git a/files/es/web/api/analysernode/index.html b/files/es/web/api/analysernode/index.html new file mode 100644 index 0000000000..73a51adba8 --- /dev/null +++ b/files/es/web/api/analysernode/index.html @@ -0,0 +1,218 @@ +--- +title: AnalyserNode +slug: Web/API/AnalyserNode +translation_of: Web/API/AnalyserNode +--- +

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

+ +

La interfaz AnalyserNode representa un nodo habilitado para proveer frecuencia en tiempo real y analisis de tiempo-dominio. Es un {{domxref("AudioNode")}} que pasa el flujo de audio sin modificación desde el origen de entrada a la salida, pero, te permite obtener los datos generados, procesarlos, y crear visualizaciones de audio.

+ +

Un AnalyzerNode tiene exactamente una entrada y una salida. El nodo trabaja incluso si la salida no se encuentra conectada.

+ +

Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Numero de entradas1
Numero de salidas1 (puede estar desconectada)
Modo de conteo de canal"explicit"
Conteo de cana1
Interpretación de canal"speakers"
+ +

Herencia

+ +

Esta interfaz hereda de las siguientes interfaces padre:

+ +

{{InheritanceDiagram}}

+ +

Propiedades

+ +

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

+ +
+
{{domxref("AnalyserNode.fftSize")}}
+
Is an unsigned long value representing the size of the FFT (Fast Fourier Transform) to be used to determine the frequency domain.
+
{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
+
Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.
+
{{domxref("AnalyserNode.minDecibels")}}
+
Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using getByteFrequencyData().
+
{{domxref("AnalyserNode.maxDecibels")}}
+
Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using getByteFrequencyData().
+
{{domxref("AnalyserNode.smoothingTimeConstant")}}
+
Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.
+
+ +

Methods

+ +

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

+ +
+
{{domxref("AnalyserNode.getFloatFrequencyData()")}}
+
Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.
+
+ +
+
{{domxref("AnalyserNode.getByteFrequencyData()")}}
+
Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.
+
+ +
+
{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
+
Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.
+
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
+
Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.
+
+ +

Examples

+ +
+

Note: See the guide Visualizations with Web Audio API for more information on creating audio visualizations.

+
+ +

Basic usage

+ +

The following example shows basic usage of an {{domxref("AudioContext")}} to create an AnalyserNode, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 128–205 for relevant code).

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// draw an oscilloscope of the current audio source
+
+function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+ +

Specifications

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

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0 {{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

See also

+ + diff --git "a/files/es/web/api/animation/animaci\303\263n/index.html" "b/files/es/web/api/animation/animaci\303\263n/index.html" new file mode 100644 index 0000000000..770036b76d --- /dev/null +++ "b/files/es/web/api/animation/animaci\303\263n/index.html" @@ -0,0 +1,106 @@ +--- +title: Animation() +slug: Web/API/Animation/Animación +tags: + - Animacion +translation_of: Web/API/Animation/Animation +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

+ +

El constructor Animation() de Web Animations API devuelve una instancia del objeto Animation.

+ +

Sintaxis

+ +
var animation = new Animation([effect][, timeline]);
+ +

Parámetros

+ +
+
effect {{optional_inline}}
+
El efecto objetivo, es un objeto de la interfaz {{domxref("AnimationEffectReadOnly")}} ,para asignarlo a la animación. Aunque en el futuro podrían ser asignados otros efectos como SequenceEffect o GroupEffect, el único efecto disponible actualmente es {{domxref("KeyframeEffect")}}. Este puede ser null (valor por defecto) para indicar que no debe aplicarse ningún efecto.
+
timeline {{optional_inline}}
+
Especifica el  timeline con el que asociar la animación, como un objeto de tipo basado en la interfaz {{domxref("AnimationTimeline")}} . Actualmente el único tipo de línea de tiempo disponible es {{domxref("DocumentTimeline")}}, pero en el futuro habrá lineas de tiempo asociadas , por ejemplo, con gestos o desplazamiento. El valor por defecto es {{domxref("Document.timeline")}}, pero puede ser establecido en null.
+
+ +

Ejemplos

+ +

En el ejemplo Follow the White Rabbit , el constructor Animation() es usado para crear una Animation para el rabbitDownKeyframes utilizando el timeline del documento:

+ +
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-animation', 'Animation()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada de manera predeterminada en Firefox Developer Edition y Nightly builds. Puedes habilitarla en compilaciones de lanzamiento estableciendo la preferencia de dom.animations-api.core.enabled en true, y puede desactivarse en cualquier versión de Firefox estableciendo esta preferencia en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/cancel/index.html b/files/es/web/api/animation/cancel/index.html new file mode 100644 index 0000000000..e08956221a --- /dev/null +++ b/files/es/web/api/animation/cancel/index.html @@ -0,0 +1,119 @@ +--- +title: Animation.cancel() +slug: Web/API/Animation/cancel +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - cancel + - metodo + - waapi +translation_of: Web/API/Animation/cancel +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

El método cancel() de la Web Animations API de la interfaz {{domxref("Animation")}} borra todos los {{domxref("KeyframeEffect")}} causados por esta animación y aborta su reproducción.

+ +
+

Cuando se cancela una animación, su {{domxref("Animation.startTime", "startTime")}} y su {{domxref("Animation.currentTime", "currentTime")}} se establecen en  null.

+
+ +

Sintaxis

+ +
Animation.cancel();
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

None.

+ +

Excepciones

+ +

Este método no arroja excepciones directamente; sin embargo, si la animación {{domxref ("Animation.playState", "playState")}} no está "idle""inactiva" cuando se cancela, el {{domxref ("Animation.finished", "current finished promise", "", 1)}} se rechaza con un {{domxref ("DOMException")}} llamado AbortError.

+ +
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-cancel', 'Animation.cancel()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/effect/index.html b/files/es/web/api/animation/effect/index.html new file mode 100644 index 0000000000..f4283c52c4 --- /dev/null +++ b/files/es/web/api/animation/effect/index.html @@ -0,0 +1,104 @@ +--- +title: Animation.effect +slug: Web/API/Animation/effect +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - efecto +translation_of: Web/API/Animation/effect +--- +
{{ SeeCompatTable() }} {{ APIRef("Web Animations") }}
+ +

La propiedad Animation.effect de la  Web Animations API obtiene y establece el efecto objetivo de una animación. El efecto objetivo puede ser un objeto efecto de un tipo basado en {{domxref("AnimationEffectReadOnly")}}, como {{domxref("KeyframeEffect")}}, o null.

+ +

Sintaxis

+ +
var effect = Animation.effect;
+
+Animation.effect = {{domxref("AnimationEffectReadOnly")}}
+ +

Valor

+ +

Un objeto {{domxref("AnimationEffectReadOnly")}} que describe el efecto de animación objetivo para la animación, o null para indicar que el efecto no está activo.

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-effect', 'Animation.effect' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1][2]{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}}[1][2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La  Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enableden true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

[2] Esta propiedad es compatible con Firefox 48 pero es de solo-lectura. La versión Firefox 51 admite también escritura.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/finish/index.html b/files/es/web/api/animation/finish/index.html new file mode 100644 index 0000000000..69ed0e4a68 --- /dev/null +++ b/files/es/web/api/animation/finish/index.html @@ -0,0 +1,147 @@ +--- +title: Animation.finish() +slug: Web/API/Animation/finish +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Finish + - Reference + - metodo + - waapi +translation_of: Web/API/Animation/finish +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +
+

El método finish() de la interfaz {{domxref("Animation")}} de la Web Animations API  establece el tiempo de reproducción actual hasta el final de la animación correspondiente a la dirección de reproducción actual. Es decir, si la animación se está reproduciendo hacia adelante, establece el tiempo de reproducción a la longitud de la secuencia de animación, y si la animación se reproduce hacia atras , (habiendo llamado a su método {{domxref("Animation.reverse", "reverse()")}}), establece el tiempo de la reproducción en 0.

+
+ +

Sintaxis

+ +
Animation.finish();
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

None.

+ +
+
+ +

Excepciones

+ +
+
InvalidState
+
La velocidad de reproducción del reproductor es 0 o la velocidad de reproducción de la animación es mayor que 0 y el tiempo de finalización de la animación es infinito.
+
+ +

Ejemplos

+ +

El siguiente ejemplo muestra cómo usar el método finish() y captura un error InvalidState.

+ +
interfaceElement.addEventListener("mousedown", function() {
+  try {
+    player.finish();
+  } catch(e if e instanceof InvalidState) {
+    console.log("finish() called on paused or finished animation.");
+  } catch(e);
+    logMyErrors(e); //pasa el objeto excepción al manejador de errores.
+  }
+});
+
+ +

El siguiente ejemplo finaliza todas las animaciones en un solo elemento, independientemente de su dirección de reproducción.

+ +
elem.getAnimations().forEach(
+  function(animation){
+    return animation.finish();
+  }
+);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-finish', 'finish()')}}{{Spec2("Web Animations")}} 
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/id/index.html b/files/es/web/api/animation/id/index.html new file mode 100644 index 0000000000..e44c852e72 --- /dev/null +++ b/files/es/web/api/animation/id/index.html @@ -0,0 +1,110 @@ +--- +title: Animation.id +slug: Web/API/Animation/id +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - id +translation_of: Web/API/Animation/id +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad Animation.id de la Web Animations API devuelve o establece una cadena(string) utilizado para identificar la animación.

+ +

Sintaxis

+ +
var animationsId = Animation.id;
+
+Animation.id = newIdString;
+
+ +

Valor

+ +

Un {{domxref("DOMString")}} que se puede usar para identificar la animación, o null si la animación no tiene id.

+ +

Ejemplos

+ +

En el ejemplo Follow the White Rabbit , puedes asignar  a rabbitDownAnimation un  id de esta manera:

+ +
rabbitDownAnimation.effect.id = "rabbitGo";
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-id', 'Animation.id' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/index.html b/files/es/web/api/animation/index.html new file mode 100644 index 0000000000..ac1f5f46fb --- /dev/null +++ b/files/es/web/api/animation/index.html @@ -0,0 +1,147 @@ +--- +title: Animation +slug: Web/API/Animation +tags: + - API + - Animacion + - Experimental + - Interfaz + - Reeferencia + - Web Animations + - waapi + - web animation api +translation_of: Web/API/Animation +--- +
{{ APIRef("Web Animations") }}{{SeeCompatTable}}
+ +

La interfaz Animation de la  Web Animations API representa un reproductor de animación y proporciona controles de reproducción y una línea de tiempo para un nodo o una fuente de animación.

+ +

Constructor

+ +
+
{{domxref("Animation.Animation()", "Animation()")}}
+
Crea una nueva instancia de objeto Animation.
+
+ +

Propiedades

+ +
+
{{domxref("Animation.currentTime")}}
+
El valor del tiempo de la animación actual en milisegundos , ya sea en ejecución o en pausa. Si la animación carece de {{domxref("AnimationTimeline", "timeline")}}, está inactivo, o no se ha reproducido todavía, su valor es null.
+
+ +
+
{{domxref("Animation.effect")}}
+
Obtiene y establece el {{domxref("AnimationEffectReadOnly")}} asociado con esta animación. Normalmente, este será un objeto {{domxref("KeyframeEffect")}}.
+
{{domxref("Animation.finished")}} {{readOnlyInline}}
+
Devuelve la Promesa actual terminada para esta animación.
+
+ +
+
{{domxref("Animation.id")}}
+
Obtiene y establece la String usada para identificar la animación.
+
{{domxref("Animation.playState")}} {{readOnlyInline}}
+
Devuelve un valor enumerado que describe el estado de la reproducción de una animación.
+
+ +
+
{{domxref("Animation.playbackRate")}}
+
Obtiene o establece la velocidad de reproducción de la animación.
+
+ +
+
{{domxref("Animation.ready")}} {{readOnlyInline}}
+
Devuelve la Promesa actual lista para esta animación.
+
+ +
+
{{domxref("Animation.startTime")}}
+
Obiene o establece la hora programada en la que debe comenzar la reproducción de la animación.
+
+ +
+
{{domxref("Animation.timeline")}}
+
Obtiene o establece el  {{domxref("AnimationTimeline", "timeline")}} asociado con esta animación.
+
+ +

Manejadores de eventos

+ +
+
{{domxref("Animation.oncancel")}}
+
Obtiene y establece en manejador de eventos para el evento cancel.
+
{{domxref("Animation.onfinish")}}
+
Obtiene y establece en manejador de eventos para el evento finish .
+
+ +

Métodos

+ +
+
{{domxref("Animation.cancel()")}}
+
Borra todos los {{domxref("KeyframeEffect", "keyframeEffects")}} causados por la animación y aborta su reproducción.
+
+ +
+
{{domxref("Animation.finish()")}}
+
Busca cualquier final de una animación, dependiendo de si la animación se está reproduciendo o invirtiendo.
+
+ +
+
{{domxref("Animation.pause()")}}
+
Pone la reproducción en pausa.
+
+ +
+
{{domxref("Animation.play()")}}
+
Busca el final de una animación, dependiendo de si la animación se está reproduciendo o si se está invirtiendo.
+
+ +
+
{{domxref("Animation.reverse()")}}
+
Invierte la dirección de reproducción, deteniéndose al comienzo de la animación. Si la animación finaliza o no se activa, volverá a reproducirse desde el final al principio.
+
+ +
+
{{domxref("Animation.updatePlaybackRate()")}}
+
Establece la velocidad de la animación después de sincronizar por primera vez su posición de reproducción.
+
+ +

Problemas de accesibilidad

+ +

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

+ +

Considera ofrecer un mecanismo para pausar o deshabilitar las animaciones, así como utilizar Reduced Motion Media Query para crear una experiencia complementaria para los usuarios que han expresado su preferencia por experiencias no animadas.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}{{Spec2("Web Animations")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/oncancel/index.html b/files/es/web/api/animation/oncancel/index.html new file mode 100644 index 0000000000..1f09835210 --- /dev/null +++ b/files/es/web/api/animation/oncancel/index.html @@ -0,0 +1,115 @@ +--- +title: Animation.oncancel +slug: Web/API/Animation/oncancel +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - oncancel +translation_of: Web/API/Animation/oncancel +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad oncancel de la interfaz {{domxref("Animation")}} de la  Web Animations API es el manejador de eventos para el evento {{event("cancel")}} .

+ +

El evento cancel puede ser activado manualmente con {{domxref("Animation.cancel()")}} cuando la animación entra en estado de reproducción "idle"(inactivo) desde otro estado, como cuando una animación se elimina de un elemento antes de que termine de reproducirse.

+ +
+

La creación de una nueva animación, inicialmente inactiva, no activa el evento {{event("cancel")}} en la nueva animación.

+
+ +

Sintaxis

+ +
var cancelHandler = Animation.oncancel;
+
+Animation.oncancel = cancelHandler;
+ +

Valor

+ +

Una función que será ejecutada cuando la animación sea cancelada, o null si no hay un manejador de eventos {{event("cancel")}}.

+ +

Ejemplos

+ +

Si esta animación es cancelada, elimina su elemento.

+ +
animation.oncancel = animation.effect.target.remove();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-oncancel', 'Animation.oncancel' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/onfinish/index.html b/files/es/web/api/animation/onfinish/index.html new file mode 100644 index 0000000000..592014f698 --- /dev/null +++ b/files/es/web/api/animation/onfinish/index.html @@ -0,0 +1,131 @@ +--- +title: Animation.onfinish +slug: Web/API/Animation/onfinish +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - onfinish + - waapi +translation_of: Web/API/Animation/onfinish +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad onfinish de la interfaz {{domxref("Animation")}} (de la Web Animations API) es el manejador de eventos para el evento {{event("finish")}}. Este evento se envía cuando la animación termina de reproducirse.

+ +

El evento finish ocurre cuando la reproducción se completa de forma natural, así como cuando se llama al  método {{domxref("Animation.finish()")}} para que la animación termine inmediatamente.

+ +
+

El estado de reproducción "paused" reemplaza al estado  "finished" ; Si la animación está pausada y finalizada, el estado"paused" será el único reportado. Puedes forzar el estado de la animación a "finished" configurando su {{domxref("Animation.startTime", "startTime")}} a document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate).

+
+ +

Sintaxis

+ +
var finishHandler = Animation.onfinish;
+
+Animation.onfinish = finishHandler;
+ +

Valor

+ +

Una función que debe ser llamada para manejar el evento {{event("finish")}} , o null si no se establece ningún manejador para el evento finish.

+ +

Ejemplos

+ +

Animation.onfinish es utilizado en varias ocasiones en el juego de Alice in Web Animations API Land Growing/Shrinking Alice Game.  Aquí hay una instancia en la que agregamos eventos de puntero a un elemento después de que su animación de opacidad se haya desvanecido:

+ +
// Agrega una animación a los créditos finales del juego.
+var endingUI = document.getElementById("ending-ui");
+var bringUI = endingUI.animate(keysFade, timingFade);
+
+// Pone en Pausa dichos créditos.
+bringUI.pause();
+
+// Esta función elimina los eventos de puntero en los créditos.
+hide(endingUI);
+
+// Cuando los créditos se hayan desvanecido,
+// volvemos a agregar los eventos de puntero cuando terminen.
+bringUI.onfinish = function() {
+  endingUI.style.pointerEvents = 'auto';
+};
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-onfinish', 'Animation.onfinish' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1]  La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/pause/index.html b/files/es/web/api/animation/pause/index.html new file mode 100644 index 0000000000..0c0329dda7 --- /dev/null +++ b/files/es/web/api/animation/pause/index.html @@ -0,0 +1,106 @@ +--- +title: Animation.pause() +slug: Web/API/Animation/pause +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Referencia + - pausar + - pause + - waapi +translation_of: Web/API/Animation/pause +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

El método pause() de la interfaz {{domxref("Animation")}} de la  Web Animations API, suspende la reproducción de la animación.

+ +

Sintaxis

+ +
animation.pause();
+
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

None.

+ +

Excepciones

+ +
+
InvalidStateError
+
La animación {{domxref ("Animation.currentTime", "currentTime")}} no está resuelta unresolved (por ejemplo, si nunca se ha reproducido o no se está reproduciendo actualmente) y el tiempo de finalización de la animación es infinito positivo.
+
+ +

Lanza un InvalidStateError si el {{domxref("Animation.currentTime", "currentTime")}} de la animación no está resuelto unresolved (tal vez no se haya iniciado la reproducción) y el fin de la animación es infinito positivo.

+ +

Ejemplos

+ +

Animation.pause() es utilizado en varias ocasiones en el juego Alice in Web Animations API Land Growing/Shrinking Alice Game, porque las animaciones creadas con el método {{domxref("Element.animate()")}} se inician de inmediato y deben ser detenidas manualmente para evitar esto:

+ +
// animación de la magdalena que lentamente se está comiendo
+var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+
+// realmente solo debe funcionar al hacer click, así que se pausa inicialmente:
+nommingCake.pause();
+
+ +

Adicionalmente, al restablecer:

+ +
// Una función multiusos para pausar las animaciones de Alicia, el pastelito y la botella que dice "drink me."
+var stopPlayingAlice = function() {
+  aliceChange.pause();
+  nommingCake.pause();
+  drinking.pause();
+};
+
+// Cuando el usuario suelte el cupcake o la botella, pause las animaciones.
+cake.addEventListener("mouseup", stopPlayingAlice, false);
+bottle.addEventListener("mouseup", stopPlayingAlice, false);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Animations', '#dom-animation-pause', 'play()')}}{{Spec2("Web Animations")}}
+ +

Compatibilidad en navegadores

+ +
+

{{Compat("api.Animation.pause")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/animation/play/index.html b/files/es/web/api/animation/play/index.html new file mode 100644 index 0000000000..9ccb5d68a6 --- /dev/null +++ b/files/es/web/api/animation/play/index.html @@ -0,0 +1,149 @@ +--- +title: Animation.play() +slug: Web/API/Animation/play +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - metodo + - play + - waapi +translation_of: Web/API/Animation/play +--- +
{{ APIRef("Web Animations") }}{{SeeCompatTable}}
+ +

El método play() de la interfaz {{ domxref("Animation") }} de la  Web Animations API inicia o reanuda la reproducción de una animación. Si la animación ha finalizado, llamando a  play() reinicia la animación y la reproduce desde el principio.

+ +

Sintaxis

+ +
animation.play();
+
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

{{jsxref("undefined")}}

+ +

Ejemplo

+ +

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar el pastel hace que la animación de crecimiento de Alicia (aliceChange) sea reproducida hacia adelante, causando que Alicia se haga más grande, ademas de desencadenar la animación del pastel. Dos  Animation.play() y un EventListener:

+ +
// El pastel tiene su propia animación:
+var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+
+// Pausa la animación del pastel para que no se reproduzca inmediatamente.
+nommingCake.pause();
+
+// Esta función se reproducirá cuando el usuario haga click o toque
+var growAlice = function() {
+
+  // Reproduce la animación de Alicia.
+  aliceChange.play();
+
+  // Reproduce la animación del pastel.
+  nommingCake.play();
+
+}
+
+// Cuando el usuario hace click o toca, llama a growAlice, para reproducir todas las animaciones.
+cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-play', 'play()')}}{{Spec2("Web Animations")}} 
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/playbackrate/index.html b/files/es/web/api/animation/playbackrate/index.html new file mode 100644 index 0000000000..0961c0bd6c --- /dev/null +++ b/files/es/web/api/animation/playbackrate/index.html @@ -0,0 +1,162 @@ +--- +title: Animation.playbackRate +slug: Web/API/Animation/playbackRate +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - playbackRate +translation_of: Web/API/Animation/playbackRate +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

La propiedad Animation.playbackRate de la Web Animations API devuelve o  establece la velocidad de reproducción de la animación.

+ +

Las animaciones tienen un playback rate que proporciona un factor de escala para el cambio de velocidad de la animación {{domxref("DocumentTimeline", "timeline")}} valores del estado actual de la linea de tiempo de la animación. La velocidad de reproducción inicial es 1.

+ +

Sintaxis

+ +
var currentPlaybackRate = Animation.playbackRate;
+
+Animation.playbackRate = newRate;
+
+ +

Valor

+ +

Toma un número que puede ser 0, negativo o positivo. Los valores negativos invierten la animación. El valor es un factor de escala, por lo que, por ejemplo, un valor de 2 duplicaría la velocidad de reproducción.

+ +
+

si establecemos el playbackRate a 0 pausa la animación de manera efectiva (sin embargo, su {{domxref("Animation.playstate", "playstate")}} no se convierte necesariamente en  paused).

+
+ +

Ejemplos

+ +

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia  (aliceChange) se invierta para reducirse:

+ +
var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+// Con un toque o un click, Alicia se encogerá.
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);
+
+ +

Por el contrario, hacer click en el pastel hace que "crezca" reproduciendo aliceChange hacia adelante otra vez:

+ +
var growAlice = function() {
+  aliceChange.playbackRate = 1;
+  aliceChange.play();
+}
+
+// Con un toque o un click, Alicia crecerá.
+cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+
+ +

En otro ejemplo,  Red Queen's Race Game, Alicia y La Reina Roja están ralentizandose constantemente:

+ +
setInterval( function() {
+
+  // Asegúrate de que la velocidad de reproducción nunca descienda por debajo de .4
+
+  if (redQueen_alice.playbackRate > .4) {
+    redQueen_alice.playbackRate *= .9;
+  }
+
+}, 3000);
+
+ +

Pero hacer click o hacer tapping(pasar el puntero) sobre ellos hace que aceleren multiplicando su playbackRate(velocidad de reproducción):

+ +
var goFaster = function() {
+  redQueen_alice.playbackRate *= 1.1;
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-playbackrate', 'Animation.playbackRate')}}{{Spec2("Web Animations")}} 
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/playstate/index.html b/files/es/web/api/animation/playstate/index.html new file mode 100644 index 0000000000..35d104739b --- /dev/null +++ b/files/es/web/api/animation/playstate/index.html @@ -0,0 +1,158 @@ +--- +title: Animation.playState +slug: Web/API/Animation/playState +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - playState +translation_of: Web/API/Animation/playState +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

La propiedad  Animation.playState de la Web Animations API devuelve y establece un valor enumerado que describe el estado de reproducción de una animación.

+ +
+

Esta propiedad es de solo lectura para las Animaciones y Transiciones en CSS.

+
+ +

Sintaxis

+ +
var currentPlayState = Animation.playState;
+
+Animation.playState = newState;
+
+ +

Valor

+ +
+
idle(inactivo)
+
El tiempo actual de la animación no está resuelto y no hay tareas pendientes.
+
pending(pendiente)
+
La animación está esperando que se complete una tarea pendiente.
+
running(funcionando)
+
La animación se está ejecutando.
+
paused(pausado)
+
La animación se ha suspendido y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.
+
finished(finalizado)
+
La animación ha alcanzado uno de sus límites y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.
+
+ +

Ejemplo

+ +

En el ejemplo Growing/Shrinking Alice Game , los jugadores pueden tener un final con (Alicia llorando en un mar de lágrimas) Alice crying into a pool of tears. En el juego, por razones de rendimiento, las lágrimas solo se deben animar cuando son visibles. Por lo tanto, deben detenerse tan pronto como estén animadas, de esta manera:

+ +
// Configurando las animaciones de lágrimas
+
+tears.forEach(function(el) {
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria
+      duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+  el.playState = 'paused';
+});
+
+
+// Reproduce las lágrimas cayendo cuando el final necesita mostrarlas.
+
+tears.forEach(function(el) {
+  el.playState = 'playing';
+});
+
+
+// Reinicia la animación de las lágrimas y la detiene.
+
+tears.forEach(function(el) {
+  el.playState = "paused";
+  el.currentTime = 0;
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#play-state', 'playState')}}{{Spec2("Web Animations")}}Initial definition.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}} [1]{{CompatGeckoDesktop(48)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(39.0)}} [1]{{CompatChrome(39.0)}} [1]{{CompatGeckoMobile(48)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Antes de Chrome 50, este atributo mostraba idle para una animación que aún no había comenzado. A partir de Chrome 50, muestra paused.

+ +

[2] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/ready/index.html b/files/es/web/api/animation/ready/index.html new file mode 100644 index 0000000000..35dfb68954 --- /dev/null +++ b/files/es/web/api/animation/ready/index.html @@ -0,0 +1,122 @@ +--- +title: Animation.ready +slug: Web/API/Animation/ready +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Ready Promise + - Reference +translation_of: Web/API/Animation/ready +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad de solo-lectura  Animation.ready de la Web Animations API devuelve un {{jsxref("Promise")}} que se resuelve cuando la animación está lista para reproducirse. Una nueva 'promesa' es creada cada vez que la animación entra en play state(estado de reproducción) "pending"(pendiente) así como si la reproducción es cancelada, ya que en ambos escenarios, la animación estará lista para ser reiniciada.

+ +
+

Dado que la misma {{jsxref("Promise")}} es usada para las solicitudes pendientes de play ypause , se recomienda a los autores que comprueben el estado de la animación cuando se resuelva la promesa.

+
+ +

Sintaxis

+ +
var readyPromise = Animation.ready;
+
+ +

Valor

+ +

Un {{jsxref("Promise")}} que se resuelve cuando la animación esta lista para reproducirse. Por lo general, se usará una construcción similar a esta usando una promise lista:

+ +
animation.ready.then(function() {
+  // Hace lo que sea necesario cuando
+  // la animación está lista para reproducirse
+});
+ +

Ejemplo

+ +

En el siguiente ejemplo, el estado de la animación será running(reproduciendo) cuando la Promise actual se resuelva ya que la animación no deja el estado de reproducción pending entre las llamadas pause and play ,por lo tanto, la Promise actual no cambia.

+ +
animation.pause();
+animation.ready.then(function() {
+  // Displays 'running'
+  alert(animation.playState);
+});
+animation.play();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-ready', 'Animation.ready' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/reverse/index.html b/files/es/web/api/animation/reverse/index.html new file mode 100644 index 0000000000..9f2dbf790e --- /dev/null +++ b/files/es/web/api/animation/reverse/index.html @@ -0,0 +1,136 @@ +--- +title: Animation.reverse() +slug: Web/API/Animation/reverse +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - metodo + - reverse + - waapi +translation_of: Web/API/Animation/reverse +--- +
{{APIRef("Web Animations")}}{{SeeCompatTable}}
+ +

El método Animation.reverse() de la interfaz {{ domxref("Animation") }} Interface invierte la dirección de reproducción, lo que significa que la animación termina al principio. Si se llama en una animación sin reproducir, toda la animación se reproduce al revés. Si se llama en una animación pausada, continúa a la inversa.

+ +

Sintaxis

+ +
animation.reverse();
+
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

{{jsxref("undefined")}}

+ +

Ejemplos

+ +

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia(aliceChange) sea reproducida al revés, lo que la hace más pequeña. Esto se hace estableciendo el {{ domxref("Animation.playbackRate") }} de aliceChange  en -1 de esta forma:

+ +
var shrinkAlice = function() {
+  // reproduce la animación de Alicia al revés.
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+
+  // reproduce la animación de la botella.
+  drinking.play()
+}
+ +

Pero también se podría haber hecho lamando a reverse() en aliceChange así:

+ +
var shrinkAlice = function() {
+  // reproduce la animación de Alicia al revés.
+  aliceChange.reverse();
+
+  // reproduce la animación de la botella.
+  drinking.play()
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-reverse', 'reverse()')}}{{Spec2("Web Animations")}} 
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/starttime/index.html b/files/es/web/api/animation/starttime/index.html new file mode 100644 index 0000000000..8ad69e8ffa --- /dev/null +++ b/files/es/web/api/animation/starttime/index.html @@ -0,0 +1,138 @@ +--- +title: Animation.startTime +slug: Web/API/Animation/startTime +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - startTime +translation_of: Web/API/Animation/startTime +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad Animation.startTime de la interfaz {{domxref ("Animación")}} es un valor de punto flotante de doble precisión que indica el tiempo programado en el que debe comenzar la reproducción de una animación.

+ +

El  start time (tiempo de inicio) es el valor de tiempo de su {{domxref("timeline", "DocumentTimeline")}}cuando su objetivo {{domxref("KeyframeEffect")}} está programado para comenzar la reproducción. El start time (tiempo de inicio) de una animación inicialmente no está resuelto (lo que significa que es null porque no tiene valor).

+ +

Sintaxis

+ +
var animationStartedWhen = Animation.startTime;
+
+Animation.startTime = newStartTime;
+ +

Valor

+ +

Un número de punto flotante que representa el tiempo actual en milisegundos, o nulo si no se establece ningún valor de  tiempo. Puede leer este valor para determinar en qué momento está establecido el punto de inicio, y puede modificarlo para que la animación comience en un momento diferente.

+ +

Ejemplos

+ +

En el ejemplo Running on Web Animations API example, podemos sincronizar todos los nuevos gatos animados dándoles el mismo tiempo de inicio startTime que el gato original:

+ +
var catRunning = document.getElementById ("withWAAPI").animate(keyframes, timing);
+
+/* Una función que crea nuevos gatos. */
+function addCat(){
+  var newCat = document.createElement("div");
+  newCat.classList.add("cat");
+  return newCat;
+}
+
+/* Esta es la función que agrega un gato a la columna WAAPI */
+function animateNewCatWithWAAPI() {
+  // crea unnuevo gato
+  var newCat = addCat();
+
+  // Animar a dicho gato con la función "animate" de WAAPI
+  var newAnimationPlayer = newCat.animate(keyframes, timing);
+
+  // Establece que el punto de inicio de la animación sea el mismo que el original .cat#withWAAPI
+  newAnimationPlayer.startTime = catRunning.startTime;
+
+  // Agrega el gato a la pila.
+  WAAPICats.appendChild(newCat);
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-starttime', 'Animation.startTime' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/terminado/index.html b/files/es/web/api/animation/terminado/index.html new file mode 100644 index 0000000000..5d321ba012 --- /dev/null +++ b/files/es/web/api/animation/terminado/index.html @@ -0,0 +1,120 @@ +--- +title: Animation.finished +slug: Web/API/Animation/terminado +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference +translation_of: Web/API/Animation/finished +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad de solo-lectura de Animation.finished de la  Web Animations API devuelve un {{jsxref("Promise")}} que se resuelve una vez que la animación a terminado de reproducirse.

+ +
+

Una vez que la reproducción de la animación abandona el estado  finished  ( es decir, la reproducción se está ejecutando otra vez ), Un nuevo Promise es creado para esta propiedad. El nuevo Promise será resuelto cuando se haya completado la actual secuencia de la animación.

+
+ +

Sintaxis

+ +
var animationsPromise = Animation.finished;
+
+ +

Valor

+ +

Un objeto {{jsxref("Promise")}} que se resuelve cuando haya finalizado la reproducción de la animación.

+ +

Ejemplos

+ +

El siguiente código espera a que todas las animaciones que se ejecutan en el elemento elem hayan terminado, después elimina el elemento del arbol del DOM:

+ +
Promise.all(
+  elem.getAnimations().map(
+    function(animation) {
+      return animation.finished
+    }
+  )
+).then(
+  function() {
+    return elem.remove();
+  }
+);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-finished', 'Animation.finished' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/tiempoactual/index.html b/files/es/web/api/animation/tiempoactual/index.html new file mode 100644 index 0000000000..acd56f9170 --- /dev/null +++ b/files/es/web/api/animation/tiempoactual/index.html @@ -0,0 +1,114 @@ +--- +title: Animation.currentTime +slug: Web/API/Animation/tiempoActual +tags: + - Animacion +translation_of: Web/API/Animation/currentTime +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

La propiedad Animation.currentTime de la Web Animations API devuelve y establece el valor del tiempo de la animación en milisegundos, tanto si se está ejecutando como en pausa.

+ +

Si la animación carece de un {{domxref("AnimationTimeline", "timeline")}}, está inactiva, o no ha sido reproducida todavía, el valor devuelto por currentTime es null.

+ +

Sintaxis

+ +
var currentTime = Animation.currentTime;
+Animation.currentTime = newTime;
+ +

Valor

+ +

Un número que representa el tiempo actual en milisegundos, o null para desactivar la animación.

+ +

Ejemplos

+ +

En el juego Drink Me/Eat Me , la altura de Alicia está animada, por lo que puede cambiar de pequeña a grande y de grande a pequeña. Al inicio del juego, su altura de fija estableciendo el currentTime (tiempoActual) a la mitad de la duración total delKeyframeEffect:

+ +
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
+ +

Un modo más genérico para encontrar la marca del 50% en una animación sería :

+ +
animation.currentTime =
+  animation.effect.getComputedTiming().delay +
+  animation.effect.getComputedTiming().activeDuration / 2;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}{{Spec2("Web Animations")}} 
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta estableciendo la preferencia dom.animations-api.core.enabled en true, y puede ser deshabilitado en cualquier versión de Firefox, estableciendo esta preferencia en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/timeline/index.html b/files/es/web/api/animation/timeline/index.html new file mode 100644 index 0000000000..ba34392efd --- /dev/null +++ b/files/es/web/api/animation/timeline/index.html @@ -0,0 +1,111 @@ +--- +title: Animation.timeline +slug: Web/API/Animation/timeline +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - timeline +translation_of: Web/API/Animation/timeline +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad Animation.timeline de la interfaz {{domxref ("Animation")}} devuelve o establece el {{domxref ("AnimationTimeline", "timeline")}} asociado a esta animación. Un 'timeline' es una fuente de valores de tiempo para propósitos de sincronización, y es un objeto basado en {{domxref ("AnimationTimeline")}}. Por defecto, la línea de tiempo de la animación y la línea de tiempo de {{domxref ("Document")}} son las mismas.

+ +

Sintaxis

+ +
var animationsTimeline = Animation.timeline;
+
+Animation.timeline = newTimeline;
+ +

Valor

+ +

Un {{domxref ("AnimationTimeline", "timeline object", "", 1)}} para usar como la fuente de sincronización para la animación, o null para usar el predeterminado, que es el 'timeline' del {{domxref ("Document")}}.

+ +

Ejemplos

+ +

Aquí establecemos que la línea de tiempo timeline de la animación sea la misma que la del tiempo del documento (por cierto, esta es la timeline predeterminada para todas las animaciones):

+ +
animation.timeline = document.timeline;
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-timeline', 'Animation.timeline' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animationevent/animationname/index.html b/files/es/web/api/animationevent/animationname/index.html new file mode 100644 index 0000000000..ada4eb4a04 --- /dev/null +++ b/files/es/web/api/animationevent/animationname/index.html @@ -0,0 +1,101 @@ +--- +title: AnimationEvent.animationName +slug: Web/API/AnimationEvent/animationName +tags: + - API + - Animaciones Web + - AnimationEvent + - CSSOM + - Experimental + - Propiedad + - Referencia +translation_of: Web/API/AnimationEvent/animationName +--- +

{{SeeCompatTable}}{{ apiref("Web Animations API") }}

+ +

La propiedad de solo-lectura AnimationEvent.animationName es un {{domxref("DOMString")}} conteniendo el valor de  la propiedad de CSS {{cssxref("animation-name")}} asociada con la transición.

+ +

Sintaxis

+ +
name = AnimationEvent.animationName
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{ SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName') }}{{ Spec2('CSS3 Animations')}}Definición Inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{ CompatGeckoDesktop("6.0") }}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome para Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/animationevent/index.html b/files/es/web/api/animationevent/index.html new file mode 100644 index 0000000000..c726ac42f9 --- /dev/null +++ b/files/es/web/api/animationevent/index.html @@ -0,0 +1,186 @@ +--- +title: AnimationEvent +slug: Web/API/AnimationEvent +tags: + - API + - Animaciones Web + - Experimental + - Interface + - Referencia +translation_of: Web/API/AnimationEvent +--- +

{{SeeCompatTable}}{{APIRef("Web Animations API")}}

+ +

La interfaz AnimationEvent representa los eventos que proporciona información relacionada con las animaciones.

+ +

{{InheritanceDiagram}}

+ +

Propiedades

+ +

También hereda las propiedades de su padre {{domxref("Event")}}.

+ +
+
{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
+
Es un {{domxref("DOMString")}} que contiene el valor de la propiedad CSS {{cssxref("animation-name")}} asociado con la transición.
+
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
+
Es un número flotante que da la cantidad de tiempo que ha estado corriendo la animación, en segundos, cuando este evento es disparado, excluyendo cualquier vez que la aimación fue pausada.  Para un evento "animationstart", elapsedTime es 0.0 a ménos que hubiera un valor negativo para {{cssxref("animation-delay")}}, en tal caso sería disparado el evento con elapsedTime conteniendo (-1 * retraso).
+
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
+
Es un {{domxref("DOMString")}}, empezando con '::', conteniendo el nombre del pseudo-element en el cual corre la animación. Si la animación no corre sobre un pseudo-element sino en el elemento, un string vacío: ''. 
+
+ +

Constructor

+ +
+
{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
+
Crea un evento AnimationEvent con los parametros dados.
+
+ +

Métodos

+ +

También hereda los métodos de su padre {{domxref("Event")}}.

+ +
+
{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
+
Inicializa un evento AnimationEvent creado utilizando el método obsoleto  {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}{{ Spec2('CSS3 Animations') }}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico +

1.0 {{ property_prefix("webkit") }}

+ +

{{CompatChrome(43.0)}}

+ 		{{ CompatGeckoDesktop("6.0") }}10.012 {{ property_prefix("o") }}
+ 12.10
+ 15.0 {{ property_prefix("webkit") }}		4.0 {{ property_prefix("webkit") }}
Constructor de AnimationEvent() +

{{CompatChrome(43.0)}}

+ 		{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}1.0{{ CompatGeckoDesktop("6.0") }}
+ Removed in {{ CompatGeckoDesktop("23.0") }}		10.0124.0
pseudoelement{{CompatNo}}{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome para Android
Soporte básico{{CompatVersionUnknown}}{{ property_prefix("webkit") }}{{ CompatGeckoMobile("6.0") }}10.012 {{ property_prefix("o") }}
+ 12.10
+ 15.0 {{ property_prefix("webkit") }}		{{CompatVersionUnknown}}{{ property_prefix("webkit") }}{{CompatChrome(43.0)}}
Constructor de AnimationEvent(){{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("6.0") }}
+ Removed in {{ CompatGeckoMobile("23.0") }}		10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
pseudoelement{{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/api_de_almacenamiento_web/index.html b/files/es/web/api/api_de_almacenamiento_web/index.html new file mode 100644 index 0000000000..26a858d254 --- /dev/null +++ b/files/es/web/api/api_de_almacenamiento_web/index.html @@ -0,0 +1,146 @@ +--- +title: API de almacenamiento web +slug: Web/API/API_de_almacenamiento_web +tags: + - API + - API de almacenamiento web + - Almacenamiento web + - Storage + - localStorage + - sessionStorage +translation_of: Web/API/Web_Storage_API +--- +

{{DefaultAPISidebar("Web Storage API")}}

+ +

La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.

+ +

Almacenamiento web, conceptos y uso

+ +

Los dos mecanismos en el almacenamiento web son los siguientes:

+ + + +

Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y  Window.localStorage (dicho con más precisión, en navegadores con soporte, el objeto Window implementa los objetos  WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.

+ +
+

Nota: Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene deshabilitadas las cookies de terceros (Firefox implementa este comportamiento a partir de la versión 43).

+
+ +
+

Nota: El almacenamiento web no es lo mismo que mozStorage (interfaces Mozilla's XPCOM para SQLite) o la Session store API (una utilidad de almacenamiento XPCOM usada por extensiones).

+
+ +

Interfaces de almacenamiento web

+ +
+
{{domxref("Storage")}}
+
Permite crear, recuperar y eliminar datos de un dominio y tipo de almacenamiento (sesión o local) específicos.
+
{{domxref("Window")}}
+
La API de almacenamiento web extiende el objeto {{domxref("Window")}} con dos nuevas propiedades — {{domxref("Window.sessionStorage")}} y {{domxref("Window.localStorage")}} — que proveen acceso a la sesión actual del dominio y a objetos {{domxref("Storage")}} locales, respectivamente. También ofrece un manejador de evento {{domxref("Window.onstorage")}} que se dispara cuando un área de la memoria cambia (por ejemplo, cuando se almacena un nuevo elemento).
+
{{domxref("StorageEvent")}}
+
El evento storage se dispara en el objeto Window de un documento cuando un área de la memoria cambia.
+
+ +

Ejemplos

+ +

Para ilustrar algunos usos típicos del almacenamiento web, hemos creado un ejemplo simple, llamado Demo de almacenamiento web. La página de inicio proporciona controles que puedes utilizar para personalizar el color, la tipografía y la imagen decorativa. Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en localStorage, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.

+ +

También creamos una página de salida del evento — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un evento {{event("StorageEvent")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.

+ +
+

Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.

+
+ + + +

La mayoría de los navegadores de hoy en día soportan una opción de privacidad llamada  'Modo incógnito', 'Navegación privada', o algo similar, que básicamente se asegura de que la sesión de navegación no deje rastros después de que el navegador se cierra. Esto es fundamentalmente incompatible con el almacenamiento web por obvias razones. Por ello, muchos navegadores están experimentando con diferentes escenarios para lidiar con esta incompatibilidad.

+ +

La mayoría de los navegadores han optado por una estrategia donde las API de almacenamiento siguen disponibles y aparentemente completamente funcionales, con la única gran diferencia de que todos los datos almacenados son eliminados después de cerrar el navegador. Para estos navegadores aún hay diferentes interpretaciones sobre qué debería hacerse con los datos almacenados existentes (de una sesión de navegación normal). ¿Deberían de estar disponibles para lectura cuando esté en modo privado? Entonces, hay algunos navegadores, sobre todo Safari, que han optado por una solución donde el almacenamiento está disponible, pero vacío, y tiene un cupo de 0 bytes asignado, por lo que se vuelve imposible usar esta memoria para escribir datos.

+ +

Los desarrolladores deberían de estar conscientes de estas diferentes implementaciones y tenerlas en cuenta a la hora de desarrollar aplicaciones web que depende de la API de almacenamiento web. Para más información, échale un vistazo a esta entrada de blog WHATWG que trata específicamente con este tema.

+ +

Ver también

+ + diff --git a/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html b/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html new file mode 100644 index 0000000000..086af18610 --- /dev/null +++ b/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html @@ -0,0 +1,272 @@ +--- +title: Usando la API de almacenamiento web +slug: Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web +tags: + - API + - API de almacenamiento web + - Guía + - localStorage + - sessionStorage +translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API +--- +
{{DefaultAPISidebar("Web Storage API")}}
+ +
+

La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.

+ +

Este artículo proporciona una guía general de cómo usar esta tecnología.

+
+ +

Conceptos básicos

+ +

Los objetos de almacenamiento son simples almacenes de clave/valor, similares a objetos, pero que permanecen intactos cuando la página se recarga. Las claves y los valores siempre son cadenas de texto (fíjate que las claves con enteros se convierten automáticamente a cadenas, tal y como lo hacen los objetos). Puedes acceder a estos valores como un objeto, o con los métodos {{domxref("Storage.getItem()")}} y {{domxref("Storage.setItem()")}}. Estas tres líneas modifican el valor de colorSetting de la misma manera:

+ +
localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+ +
+

Nota: Se recomiendo usar la API de almacenamiento web (setItem, getItem, removeItem, key, length) para prevenir las dificultades asociadas al uso de simples objetos como almacenes de valores llave/valor.

+
+ +

Los dos mecanismos en el almacenamiento web son los siguientes:

+ + + +

Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y  Window.localStorage (dicho con más precisión, en navegadores con soporte, el objeto Window implementa los objetos  WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.

+ +

Así que, por ejemplo, si en un inicio se llama a localStorage en un documento, esto devolverá un objeto {{domxref("Storage")}}; llamar a sessionStorage en un documento devolverá un objeto {{domxref("Storage")}} diferente. Ambos objetos se pueden manipular de la misma forma, pero separados.

+ +

Detectar la característica localStorage

+ +

Para poder usar localStorage, debemos de verificar que tiene soporte y que está disponible en la sesión del buscador actual.

+ +

Probar la disponibilidad

+ +
+

Nota: esta API está disponible en las versiones actuales de todos los navegadores principales. La prueba de disponibilidad es necesaria sólo si debes soportar navegadores muy antiguos, como Internet Explorer 6 o 7, o en las circunstancias limitadas descritas más abajo.

+
+ +

Los buscadores que soportan localStorage tienen una propiedad en el objeto window que se llama localStorage. Sin embargo, por varias razones, el sólo asegurarse de que la propiedad existe puede arrojar excepciones. El que localStorage exista no es garantía suficiente de que en verdad esté disponible, puesto que varios buscadores ofrecen configuraciones que lo inhabilitan. Así que un buscador puede soportar localStorage, pero puede no hacerlo disponible para los scripts en la página. Un ejemplo de esto es Safari, que en el modo de búsqueda privada ofrece un objeto localStorage vacío con un cupo de 0, por lo que es inutilizable. Sin embargo, es posible que aún así obtengamos un QuotaExceededError legítimo, lo que significa que ya usamos todo el espacio de almacenamiento disponible, aunque el almacenamiento esté, de hecho, disponible. Nuestra detección de la característica debe de tomar en cuenta estos escenarios.

+ +

Esta función detecta si localStorage tiene soporte y está disponible:

+ +
function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException && (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}
+ +

Y aquí se muestra cómo usarla:

+ +
if (storageAvailable('localStorage')) {
+  // Yippee! We can use localStorage awesomeness
+}
+else {
+  // Too bad, no localStorage for us
+}
+ +

También puedes probar sessionStorage invocando storageAvailable('sessionStorage').

+ +

Aquí puedes ver una breve historia de la detección de la característica localStorage.

+ +

Ejemplo

+ +

Para ilustrar un uso típico de almacenamiento web, creamos un ejemplo simple que llamamos Demo de almacenamiento web. La página de inicio proporciona unos controles que se pueden usar para personalizar el color, la tipografía y la imagen decorativa:

+ +

Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en localStorage, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.

+ +

También creamos una página de salida del evento — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un {{domxref("StorageEvent")}}.

+ +

+ +
+

Nota: Puedes ver las páginas de ejemplo usando los links de arriba y también puedes ver el código fuente.

+
+ +

Probar si la memoria tiene valores

+ +

En el inicio de main.js, probamos si el objeto ya tiene valores (es decir, si la página ya fue visitada):

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+ +

El método {{domxref("Storage.getItem()")}} se usa para obtener un dato de la memoria; en este caso, estamos probando si el dato bgcolor existe; si no, corremos populateStorage() para añadir los valores personalizados actuales a la memoria. Si ya hay valores guardados, corremos setStyles() para actualizar el estilo de la página con los valores almacenados.

+ +

Nota: También puedes usar {{domxref("Storage.length")}} para probar si el objeto de almacenamiento está vació o no.

+ +

Obtener valores de la memoria

+ +

Como dijimos arriba, los valores se pueden recuperar de la memoria usando {{domxref("Storage.getItem()")}}. Este método usa la llave del dato como argumento y devuelve el valor. Por ejemplo:

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

Aquí, en las primeras tres líneas tomamos los valores del almacenamiento local. Después, fijamos los valores mostrados en los elementos del formulario a esos valores, de forma que se mantengan sincronizados cuando recargues la página. Finalmente, actualizamos los estilos y la imagen decorativa en la página para que tus opciones personalizadas vuelvan a aparecer al recargar.

+ +

Guardar valores en la memoria

+ +

{{domxref("Storage.setItem()")}} se usa tanto para crear nuevos datos como para actualizar valores existentes (si el dato ya existía). Este método recibe dos argumentos: la llave del dato que se va a crear/modificar y el valor que se va a guardar.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+ +

La función populateStorage() define tres elementos en el almacenamiento local — el color de fondo, la tipografía y la ruta de almacenamiento de la imagen. Luego corre la función setStyles() para actualizar el estilo de la página, etc.

+ +

También incluimos un manejador onchange para cada elemento del formulario, de manera que los datos y los estilos son actualizados cada vez que un valor del formulario cambia:

+ +
bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;
+ +

Responder a cambios en la memoria con el evento StorageEvent

+ +

El evento {{domxref("StorageEvent")}} se dispara siempre que se hace un cambio al objeto {{domxref("Storage")}} (nota que este evento no se dispara para cambios en sessionStorage). Este evento no va a trabajar en la misma página en la que se están haciendo los cambios, sino que es una manera para que las otras páginas del dominio que usan la memoria sincronicen los cambios que se están haciendo. Las páginas en otros dominios no pueden acceder a los mismos objetos de almacenamiento.

+ +

En la página de eventos (ver events.js) el único JavaScript es el siguiente:

+ +
window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
+});
+ +

Aquí añadimos un detector de evento al objeto window que se dispara cuando el objeto {{domxref("Storage")}} asociado con el origen actual cambia. Como puedes ver arriba, el objeto asociado a este evento tiene varias propiedades que contienen información útil — la llave del dato que cambió, el valor anterior al cambio, el nuevo valor tras el cambio, la URL del documento que cambió la memoria y el objeto de almacenamiento mismo (que volvimos una cadena para que pudieras ver su contenido).

+ +

Borrar registros

+ +

El almacenamiento web también provee un par de métodos simples para remover datos. No los usamos en nuestro demo, pero se pueden añadir de manera muy simple a tu proyecto:

+ + + +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.

+ +
+

Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.

+
+ +

Ver también

+ + diff --git a/files/es/web/api/api_del_portapapeles/index.html b/files/es/web/api/api_del_portapapeles/index.html new file mode 100644 index 0000000000..53e43f6bd5 --- /dev/null +++ b/files/es/web/api/api_del_portapapeles/index.html @@ -0,0 +1,76 @@ +--- +title: API del portapapeles +slug: Web/API/API_del_portapapeles +translation_of: Web/API/Clipboard_API +--- +
{{DefaultAPISidebar("Clipboard API")}}
+ +

La API del portapapeles permite acceder los comandos del portapapeles (cortar, copiar y pegar), así como leer y escribir de manera asíncrona el portapapeles del sistema. Acceder al contenido del portapapeles está sujeta a la API de permisos: El permiso clipboard-write es concedido automáticamente a las páginas cuando están en la pestaña activa. El permiso clipboard-read debe ser solicitado, lo que se puede hacer intentando leer directamente el portapapeles.

+ +

Esta API está diseñada para reemplazar el acceso al portapapeles usando {{domxref("document.execCommand()")}}.

+ +

Accediendo al portapapeles

+ +

En vez de instanciar un objeto Clipboard, se puede acceder al portapapeles del sistema a través de la variable global {{domxref("Navigator.clipboard")}}:

+ +
navigator.clipboard.readText().then(
+  clipText => document.querySelector(".editor").innerText += clipText);
+ +

Esta pieza de código lee el texto que hay en el portapapeles y lo añade al primer elemento que tenga la clase editor. Desde que {{domxref("Clipboard.readText", "readText()")}} (y también {{domxref("Clipboard.read", "read()")}}, de hecho) devuelve una cadena de texto vacía si el contenido del portapapeles no es texto, este código es seguro.

+ +

Interfaces

+ +
+
{{domxref("Clipboard")}} {{securecontext_inline}}
+
Proporciona una interfaz para leer y escribir texto y datos. La especificación se refiere a esto como 'Async Clipboard API.'
+
{{domxref("ClipboardEvent")}} {{securecontext_inline}}
+
Representa la información del evento que se ha disparado. Los eventos que se pueden disparar son: {{domxref("Element/cut_event", "cortar")}}, {{domxref("Element/copy_event", "copiar")}}, y {{domxref("Element/paste_event", "pegar")}}. La especificación se refiere a esto como 'Clipboard Event API'.
+
{{domxref("ClipboardItem")}} {{securecontext_inline}}
+
Representa uno de los objetos del portapapeles, usado en la lectura y escritura de datos.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('Clipboard API')}}{{Spec2('Clipboard API')}}Definición primitiva.
+ +

Compatibilidad con navegadores

+ +

Clipboard

+ +
+ + +

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

+ +

ClipboardEvent

+ + + +

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

+ +

ClipboardItem

+ + + +

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

+ +

Véase también

+ + +
diff --git a/files/es/web/api/attr/index.html b/files/es/web/api/attr/index.html new file mode 100644 index 0000000000..2e73f60c55 --- /dev/null +++ b/files/es/web/api/attr/index.html @@ -0,0 +1,194 @@ +--- +title: Attr +slug: Web/API/Attr +translation_of: Web/API/Attr +--- +
{{APIRef("DOM")}}
+ +

Este tipo representa un atributo de un elemento DOM como un objeto. En muchos métodos DOM, probablemente vas a obtener el atributo como una cadena (e.g., {{domxref("Element.getAttribute()")}}, pero algunas funciones (e.g., {{domxref("Element.getAttributeNode()")}}) or means of iterating give Attr types.

+ +

{{InheritanceDiagram}}

+ +
Advertencia:En el DOM Core 1, 2 y 3, Attr se hereda del {{domxref("Node")}}. Este ya no es el caso en DOM4.Para llevar la implementación de Attr  a la especifiación, se esta trabajando para cambiarlo y dejar de heredar de{{domxref("Node")}}. No debe de utilizar ninguna propiedad o método de nodo en los objetos Attr. A partir de Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), los que se eliminarán enviarán mensajes de advertencia a la consola. Debe revisar su código en consecuencia. Consulte Propiedades y métodos en desuso para obtener una lista completa.
+ +

Propiedades

+ +
+
{{domxref("Attr.name", "name")}} {{readOnlyInline}}
+
El nombre del atributo.
+
{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
+
Un {{domxref("DOMString")}} representing the namespace URI of the attribute, or null if there is no namespace.
+
{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
+
A {{domxref("DOMString")}} representing the local part of the qualified name of the attribute.
+
{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
+
A {{domxref("DOMString")}} representing the namespace prefix of the attribute, or null if no prefix is specified.
+
{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
+
This property always returns true. Originally, it returned true if the attribute was explicitly specified in the source code or by a script, and false if its value came from the default one defined in the document's DTD.
+
{{domxref("Attr.value", "value")}}
+
El valor del atributo.
+
+ +
+

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

+ +

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

+
+ +

Propiedades y métodos obsoletos

+ +

Las siguientes propiedades son obsoletos. Where available, the appropriate replacement is provided.

+ +
+
attributes
+
Este propiedad ahora siempre devuelve NULL.
+
childNodes
+
Este propiedad ahora siempre devuelve NULL.
+
firstChild
+
Este propiedad ahora siempre devuelve NULL.
+
isId {{readOnlyInline}}
+
Indicates whether the attribute is an "ID attribute". An "ID attribute" being an attribute which value is expected to be unique across a DOM Document. In HTML DOM, "id" is the only ID attribute, but XML documents could define others. Whether or not an attribute is unique is often determined by a {{Glossary("DTD")}} or other schema description.
+
lastChild
+
Este propiedad ahora siempre devuelve NULL.
+
nextSibling
+
Este propiedad ahora siempre devuelve NULL.
+
nodeName
+
Utilizar {{domxref("Attr.name")}} en su lugar.
+
nodeType
+
Esta propiedad ahora siempre devuelve 2 (ATTRIBUTE_NODE).
+
nodeValue
+
Utilizar {{domxref("Attr.value")}} en su lugar.
+
ownerDocument
+
Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
+
ownerElement {{deprecated_inline("7.0")}} {{obsolete_inline("29.0")}} {{readOnlyInline}}
+
Since you get an Attr object from an {{domxref("Element")}}, you should already know the associated element.
+
Contrary to above claim, {{domxref("Document.evaluate")}} can return Attr objects from an XPath, in which case you would not easily know the owner.
+
parentNode
+
Estra propiedad ahora siempre devuelve NULL.
+
previousSibling
+
Estra propiedad ahora siempre devuelve NULL.
+
schemaTypeInfo {{obsolete_inline}} {{readOnlyInline}}
+
The type information associated with this attribute. While the type information contained in this attribute is guaranteed to be correct after loading the document or invoking {{domxref("Document.normalizeDocument")}}, this property may not be reliable if the node was moved.
+
specified
+
Estra propiedad ahora siempre devuelve true.
+
textContent
+
Utilizar {{domxref("Attr.value")}} en su lugar.
+
+ +

Los siguientes metodos ahora son obsoletos.

+ +
+
appendChild()
+
Modify the value of {{domxref("Attr.value")}} instead.
+
cloneNode()
+
Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
+
createAttribute()
+
Use {{domxref("Element.setAttribute()")}} instead.
+
createAttributeNS()
+
Use {{domxref("Element.setAttributeNS()")}} instead.
+
getAttributeNode()
+
Use {{domxref("Element.getAttribute()")}} instead.
+
getAttributeNodeNS()
+
Use {{domxref("Element.getAttributeNS()")}} instead.
+
hasAttributes() {{obsolete_inline("21.0")}}
+
Estra propiedad ahora retorna false.
+
hasChildNodes()
+
Estra propiedad ahora devuelve false.
+
insertBefore()
+
Modify the value of {{domxref("Attr.value")}} instead.
+
isSupported()
+
Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
+
isEqualNode()
+
Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
+
normalize()
+
Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
+
removeAttributeNode()
+
Use {{domxref("Element.removeAttribute()")}} instead.
+
removeChild()
+
Modify the value of {{domxref("Attr.value")}} instead.
+
replaceChild()
+
Modify the value of {{domxref("Attr.value")}} instead.
+
setAttributeNode()
+
Use {{domxref("Element.setAttribute()")}} instead.
+
setAttributeNodeNS()
+
Use {{domxref("Element.setAttributeNS()")}} instead.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM4", "#interface-attr", "Attr")}}{{Spec2("DOM4")}}Moved namespaceURI, prefix and localName from {{domxref("Node")}} to this API and removed ownerElement, schemaTypeInfo and isId.
{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}{{Spec2("DOM3 Core")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +

[1] As of Chrome 45, this property no longer inherits from Node.

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

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

+ +

La interfaz AudioBuffer representa un pequeño recurso de audio que se almacena en memoria, creado a partir de un archivo de audio usando el método {{ domxref("AudioContext.decodeAudioData()") }}, o de datos en bruto con el método {{ domxref("AudioContext.createBuffer()") }}. Una véz cargado en AudioBuffer, el audio puede ser reproducido pasandolo en el método {{ domxref("AudioBufferSourceNode") }}.

+ +

Objetos de este tipo son diseñados para almacenar pequeños trozos de audio, normalmente menos de 45 segundos. Para audios más extensos, los objectos implementan  {{domxref("MediaElementAudioSourceNode")}} que es más adecuado. El buffer contiene data en el siguiente formado: non-interleaved IEEE754 32-bit linear PCM with a nominal range between -1 and +1, that is, 32bits floating point buffer, with each samples between -1.0 and 1.0. If the {{domxref("AudioBuffer")}} has multiple channels, they are stored in separate buffer.

+ +

Constructor

+ +
+
{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}
+
Crea y retorna una nueva instancia de AudioBuffer 
+
+ +

Propiedades

+ +
+
{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}
+
Returns a float representing the sample rate, in samples per second, of the PCM data stored in the buffer.
+
{{domxref("AudioBuffer.length")}} {{readonlyInline}}
+
Returns an integer representing the length, in sample-frames, of the PCM data stored in the buffer.
+
{{domxref("AudioBuffer.duration")}} {{readonlyInline}}
+
Returns a double representing the duration, in seconds, of the PCM data stored in the buffer.
+
{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}
+
Returns an integer representing the number of discrete audio channels described by the PCM data stored in the buffer.
+
+ +

Métodos

+ +
+
{{domxref("AudioBuffer.getChannelData()")}}
+
Returns a {{jsxref("Float32Array")}} containing the PCM data associated with the channel, defined by the channel parameter (with 0 representing the first channel).
+
{{domxref("AudioBuffer.copyFromChannel()")}}
+
Copies the samples from the specified channel of the AudioBuffer to the destination array.
+
{{domxref("AudioBuffer.copyToChannel()")}}
+
Copies the samples to the specified channel of the AudioBuffer, from the source array.
+
+ +

Ejemplo

+ +

El siguiente ejemplo muestra como se crea un AudioBuffer  y rellena con un sonido blanco aleatorio. Puedes encontrar el código completo en nuestro repositorio: webaudio-examples; y una versión disponible: running live

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// Create an empty three-second stereo buffer at the sample rate of the AudioContext
+var myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 3, audioCtx.sampleRate);
+
+// Fill the buffer with white noise;
+// just random values between -1.0 and 1.0
+for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
+  // This gives us the actual array that contains the data
+  var nowBuffering = myArrayBuffer.getChannelData(channel);
+  for (var i = 0; i < myArrayBuffer.length; i++) {
+    // Math.random() is in [0; 1.0]
+    // audio needs to be in [-1.0; 1.0]
+    nowBuffering[i] = Math.random() * 2 - 1;
+  }
+}
+
+// Get an AudioBufferSourceNode.
+// This is the AudioNode to use when we want to play an AudioBuffer
+var source = audioCtx.createBufferSource();
+
+// set the buffer in the AudioBufferSourceNode
+source.buffer = myArrayBuffer;
+
+// connect the AudioBufferSourceNode to the
+// destination so we can hear the sound
+source.connect(audioCtx.destination);
+
+// start the source playing
+source.start();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}{{Spec2('Web Audio API')}}Initial definition.
+ +

Compatibilidad de navegadores

+ +
+ + +

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

+
+ +

Mira también

+ + diff --git a/files/es/web/api/audionode/index.html b/files/es/web/api/audionode/index.html new file mode 100644 index 0000000000..ea6ff34406 --- /dev/null +++ b/files/es/web/api/audionode/index.html @@ -0,0 +1,154 @@ +--- +title: AudioNode +slug: Web/API/AudioNode +translation_of: Web/API/AudioNode +--- +
{{APIRef("Web Audio API")}}
+ +

La interfaz AudioNode es una interfaz genérica para representar un módulo de procesamiento de audio. Ejemplos:

+ + + +

{{InheritanceDiagram}}

+ +

Note: An AudioNode can be target of events, por lo tanto este implementa  {{domxref("EventTarget")}} interface.

+ +

Descripción

+ +

The audio routing graph

+ +

AudioNodes participating in an AudioContext create a audio routing graph.

+ +

Cada AudioNode posee entradas y salidas, y múltiples nodos de audio son conectados para construir un processing graph. Este graph es contenido en {{domxref("AudioContext")}}, y cada nodo de audio solo puede pertecener a un audio context.

+ +

Un source node tiene cero entradas pero una o muchas salidas, y puede ser usado para generar sonido. Por otro lado, un destination node no tiene salidas; instead, all its inputs are directly played back on the speakers (or whatever audio output device the audio context uses). In addition, there are processing nodes which have inputs and outputs. The exact processing done varies from one AudioNode to another but, in general, a node reads its inputs, does some audio-related processing, and generates new values for its outputs, or simply lets the audio pass through (for example in the {{domxref("AnalyserNode")}}, where the result of the processing is accessed separately).

+ +

The more nodes in a graph, the higher the latency will be. Por ejemplo, si tu graph tiene una latencia de 500ms, Cuando el source node reproduzca un sonido, este va a tomar la mitad de un segundo hasta que el sonido pueda ser escuchado en tus altavoces. (or even longer because of latency in the underlying audio device). Por lo tanto, si tu necesitas tener un audio interactivo, keep the graph as small as possible, and put user-controlled audio nodes at the end of a graph. For example, a volume control (GainNode) should be the last node so that volume changes take immediate effect.

+ +

Each input and output has a given amount of channels. For example, mono audio has one channel, while stereo audio has two channels. The Web Audio API will up-mix or down-mix the number of channels as required; check the Web Audio spec for details.

+ +

For a list of all audio nodes, see the Web Audio API homepage.

+ +

Creating an AudioNode

+ +

There are two ways to create an AudioNode: via the constuctor and via the factory method.

+ +
// constructor
+const analyserNode = new AnalyserNode(audioCtx, {
+  fftSize: 2048,
+  maxDecibels: -25,
+  minDecibels: -60,
+  smoothingTimeConstant: 0.5,
+});
+
+// factory method
+const analyserNode = audioCtx.createAnalyser();
+analyserNode.fftSize = 2048;
+analyserNode.maxDecibels = -25;
+analyserNode.minDecibels = -60;
+analyserNode.smoothingTimeConstant = 0.5;
+ +

Eres libre de usar cualquiera de los constructors o factory methods, o una mezcla de ambos, sin embargo hay ventajas al usar contructores:

+ + + +

Tener en cuenta que Microsoft Edge does not yet appear to support the constructors; it will throw a "Function expected" error when you use the constructors.

+ +

Brief history: The first version of the Web Audio spec only defined the factory methods. After a design review in October 2013, it was decided to add constructors because they have numerous benefits over factory methods. The constructors were added to the spec from August to October 2016. Factory methods continue to be included in the spec and are not deprecated.

+ +

Properties

+ +
+
{{domxref("AudioNode.context")}} {{readonlyInline}}
+
Returns the associated {{domxref("BaseAudioContext")}}, that is the object representing the processing graph the node is participating in.
+
+ +
+
{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}
+
Returns the number of inputs feeding the node. Source nodes are defined as nodes having a numberOfInputs property with a value of 0.
+
+ +
+
{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}
+
Returns the number of outputs coming out of the node. Destination nodes — like {{ domxref("AudioDestinationNode") }} — have a value of 0 for this attribute.
+
+ +
+
{{domxref("AudioNode.channelCount")}}
+
Represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.
+
+ +
+
{{domxref("AudioNode.channelCountMode")}}
+
Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.
+
{{domxref("AudioNode.channelInterpretation")}}
+
Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio up-mixing and down-mixing will happen.
+ The possible values are "speakers" or "discrete".
+
+ +

Methods

+ +

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

+ +
+
{{domxref("AudioNode.connect()")}}
+
Allows us to connect the output of this node to be input into another node, either as audio data or as the value of an {{domxref("AudioParam")}}.
+
{{domxref("AudioNode.disconnect()")}}
+
Allows us to disconnect the current node from another one it is already connected to.
+
+ +

Example

+ +

This simple snippet of code shows the creation of some audio nodes, and how the AudioNode properties and methods can be used. You can find examples of such usage on any of the examples linked to on the Web Audio API landing page (for example Violent Theremin.)

+ +
const audioCtx = new AudioContext();
+
+const oscillator = new OscillatorNode(audioCtx);
+const gainNode = new GainNode(audioCtx);
+
+oscillator.connect(gainNode).connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;
+ +

Specifications

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

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/es/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/es/web/api/baseaudiocontext/createbiquadfilter/index.html new file mode 100644 index 0000000000..b94165b364 --- /dev/null +++ b/files/es/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -0,0 +1,130 @@ +--- +title: BaseAudioContext.createBiquadFilter() +slug: Web/API/BaseAudioContext/createBiquadFilter +translation_of: Web/API/BaseAudioContext/createBiquadFilter +--- +

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

+ +
+

El metodo createBiquadFilter() de la interfaz {{ domxref("BaseAudioContext") }} crea un {{ domxref("BiquadFilterNode") }}, el cual representa un filtro de segundo orden configurable, asi como varios tipos de filtros comunes diferentes.

+
+ +

Sintaxis

+ +
var audioCtx = new AudioContext();
+var biquadFilter = audioCtx.createBiquadFilter();
+ +

Retorna

+ +

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

+ +

Ejemplo

+ +

El siguiente ejemplo muestra el uso básico de un AudioContext para crear un nodo de filtro Biquad. Para ver el ejemplo trabanjando completamente, mire nuestra demostración voice-change-o-matic (mirar tambien source code).

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// Configurar los diferentes nodos de audio que usaremos para la aplicación.
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+var convolver = audioCtx.createConvolver();
+
+// conectar los nodos juntos
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// Manipule el filtro Biquad
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstadosComentario
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilidad con el navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0 {{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

Ver tambien

+ + diff --git a/files/es/web/api/baseaudiocontext/index.html b/files/es/web/api/baseaudiocontext/index.html new file mode 100644 index 0000000000..593f535ef0 --- /dev/null +++ b/files/es/web/api/baseaudiocontext/index.html @@ -0,0 +1,293 @@ +--- +title: BaseAudioContext +slug: Web/API/BaseAudioContext +tags: + - API + - Audio + - BaseAudioContext + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Audio API +translation_of: Web/API/BaseAudioContext +--- +

{APIRef("Web Audio API")}}

+ + +

The BaseAudioContext interface acts as a base definition for online and offline audio-processing graphs, as represented by {{domxref("AudioContext")}} and {{domxref("OfflineAudioContext")}} resepectively. You wouldn't use BaseAudioContext directly — you'd use its features via one of these two inheriting interfaces.

+ +

A BaseAudioContext can be a target of events, therefore it implements the {{domxref("EventTarget")}} interface.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +
+
{{domxref("BaseAudioContext.baseLatency")}} {{readonlyinline}}
+
Returns a double epresents the number of seconds of processing latency incurred by the AudioContext passing the audio from the AudioDestinationNode to the audio subsystem. 
+
{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}
+
Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at 0.
+
{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}
+
Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.
+
{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}
+
Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.
+
{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}
+
Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.
+
{{domxref("BaseAudioContext.state")}} {{readonlyInline}}
+
Returns the current state of the AudioContext.
+
+ +

Event handlers

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

Methods

+ +

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

+ +
+
{{domxref("BaseAudioContext.createBuffer()")}}
+
Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("BaseAudioContext.createConstantSource()")}}
+
Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.
+
{{domxref("BaseAudioContext.createBufferSource()")}}
+
Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.
+
{{domxref("BaseAudioContext.createScriptProcessor()")}}
+
Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.
+
{{domxref("BaseAudioContext.createStereoPanner()")}}
+
Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.
+
{{domxref("BaseAudioContext.createAnalyser()")}}
+
Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.
+
{{domxref("BaseAudioContext.createBiquadFilter()")}}
+
Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.
+
{{domxref("BaseAudioContext.createChannelMerger()")}}
+
Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.
+
{{domxref("BaseAudioContext.createChannelSplitter()")}}
+
Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.
+
{{domxref("BaseAudioContext.createConvolver()")}}
+
Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.
+
{{domxref("BaseAudioContext.createDelay()")}}
+
Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.
+
{{domxref("BaseAudioContext.createDynamicsCompressor()")}}
+
Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.
+
{{domxref("BaseAudioContext.createGain()")}}
+
Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.
+
{{domxref("BaseAudioContext.createIIRFilter()")}}
+
Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.
+
{{domxref("BaseAudioContext.createOscillator()")}}
+
Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.
+
{{domxref("BaseAudioContext.createPanner()")}}
+
Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.
+
{{domxref("BaseAudioContext.createPeriodicWave()")}}
+
Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.
+
{{domxref("BaseAudioContext.createWaveShaper()")}}
+
Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.
+
{{domxref("BaseAudioContext.decodeAudioData()")}}
+
Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s response attribute after setting the responseType to arraybuffer. This method only works on complete files, not fragments of audio files.
+
{{domxref("BaseAudioContext.resume()")}}
+
Resumes the progression of time in an audio context that has previously been suspended/paused.
+
+ +

Examples

+ +

Basic audio context declaration:

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

Cross browser variant:

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

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
baseLatency{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
createConstantSource(){{CompatChrome(56)}}{{CompatNo}}{{CompatGeckoDesktop(52)}}{{CompatNo}}{{CompatOpera(43)}}{{CompatNo}}
createStereoPanner(){{CompatChrome(42)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(37.0)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
onstatechange, state, suspend(), resume(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(40.0)}}{{CompatNo}}{{CompatNo}}{{CompatSafari(8.0)}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}2.2{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
baseLatency{{CompatChrome(60)}}{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
createConstantSource(){{CompatChrome(56)}}{{CompatChrome(56)}}{{CompatNo}}{{CompatGeckoMobile(52)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
createStereoPanner(){{CompatChrome(42)}}{{CompatChrome(42)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onstatechange, state, suspend(), resume(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(43)}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/batterymanager/charging/index.html b/files/es/web/api/batterymanager/charging/index.html new file mode 100644 index 0000000000..8295785a2c --- /dev/null +++ b/files/es/web/api/batterymanager/charging/index.html @@ -0,0 +1,28 @@ +--- +title: BatteryManager.charging +slug: Web/API/BatteryManager/charging +tags: + - Apps + - Batería + - Battery + - Firefox OS + - Mobile + - Móvil + - WebAPI +translation_of: Web/API/BatteryManager/charging +--- +

{{ ApiRef() }}

+

Resumen

+

Un valor boleano indicando si o no esta cargando la batería del dispositivo (está conectado el cargador).

+

Sintaxis

+
var charging = navigator.battery.charging
+

Valor de retorno, charging indica si o no la batería esta siendo cargada; si la batería se está cargando (o si no hay batería), este valor es true. De lo contrario el valor es false.

+

Specifications

+

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

+

Browser compatibility

+

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

+

See also

+ diff --git a/files/es/web/api/batterymanager/chargingtime/index.html b/files/es/web/api/batterymanager/chargingtime/index.html new file mode 100644 index 0000000000..6876834636 --- /dev/null +++ b/files/es/web/api/batterymanager/chargingtime/index.html @@ -0,0 +1,26 @@ +--- +title: BatteryManager.chargingTime +slug: Web/API/BatteryManager/chargingTime +tags: + - API + - Battery + - Battery API + - Mobile + - Property +translation_of: Web/API/BatteryManager/chargingTime +--- +

{{ APIRef("BatteryManager") }}

+

Resumen

+

Indica la cantidad de tiempo, en segundos, que faltan para que la batería esté completamente cargada.

+

Sintaxis

+
var time = navigator.battery.chargingTime
+

Cuando devuelve, time es el tiempo restante en segundos para que la batería esté completamente cargada o 0 (cero) si la batería ya está completamente cargada. Si la batería está descargándose —o si el sistema no puede determinar el restante de carga— el valor es Infinity.

+

Especificaciones

+

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

+

Compatibilidad con navegadores

+

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

+

See also

+ diff --git a/files/es/web/api/batterymanager/dischargingtime/index.html b/files/es/web/api/batterymanager/dischargingtime/index.html new file mode 100644 index 0000000000..4cc79f0b9d --- /dev/null +++ b/files/es/web/api/batterymanager/dischargingtime/index.html @@ -0,0 +1,29 @@ +--- +title: BatteryManager.dischargingTime +slug: Web/API/BatteryManager/dischargingTime +tags: + - API + - Apps + - Batería + - Battery + - Firefox OS + - Gecko DOM Reference + - WebAPI + - aplicaciones +translation_of: Web/API/BatteryManager/dischargingTime +--- +

{{ ApiRef() }}

+

Resumen

+

Indíca la cantidad de tiempo, en segundos, que restan antes de que la batería se descargue completamente.

+

Sintaxis

+
var time = navigator.battery.dischargingTime
+

Valor de retorno, time es el tiempo restante en segundos antes que la batería esté completamente descargada y el sistema se suspenda. Este valor es Infinity si la batería se está cargando en vez de descargando, o si el sistema es incapaz de calcular el tiempo de descarga (o si no hay batería)

+

Specifications

+

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

+

Browser compatibility

+

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

+

See also

+ diff --git a/files/es/web/api/batterymanager/index.html b/files/es/web/api/batterymanager/index.html new file mode 100644 index 0000000000..5d2aee0710 --- /dev/null +++ b/files/es/web/api/batterymanager/index.html @@ -0,0 +1,127 @@ +--- +title: BatteryManager +slug: Web/API/BatteryManager +translation_of: Web/API/BatteryManager +--- +

{{APIRef()}}

+

Sumario

+

La interfaz BatteryManager proporciona la información del nivel de carga de la bateria del sistema.

+

La propiedad {{domxref("window.navigator.battery","navigator.battery")}} devuelve una petición de la interfaz  BatteryManager que se utiliza para interactuar con la API Battery Status.

+

Propiedades

+
+
+ {{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}
+
+ Valor booleano que indica si la bateria se está o no cargando.
+
+ {{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}
+
+ Número que indica el tiempo que queda en segundos hasta que la batería esté completamente cargada, o 0 si la batería está completamente cargada.
+
+ {{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}
+
+ Número que indica el tiempo restante en segundos hasta que la batería esté completamente descargada y el sistema entra en suspensión.
+
+ {{domxref("BatteryManager.level")}} {{ReadOnlyInline}}
+
+ Número que indica el nivel de carga de la batería del sistema, los valores están escalados entre 0.0 y 1.0.
+
+

Eventos del controlador

+
+
+ {{domxref("BatteryManager.onchargingchange")}}
+
+  Controlador para el evento {{event("chargingchange")}} ; Este evento se envía cuando se actualiza el estado de carga de la batería.
+
+ {{domxref("BatteryManager.onchargingtimechange")}}
+
+ Controlador para el evento {{event("chargingtimechange")}}; Este evento se envía cuando se actualiza el tiempo de carga de la batería.
+
+ {{domxref("BatteryManager.ondischargingtimechange")}}
+
+ Controlador para el evento{{event("dischargingtimechange")}}; Este evento se envía cuando se actualiza el tiempo de descarga de la batería.
+
+ {{domxref("BatteryManager.onlevelchange")}}
+
+ Controlador para el evento {{event("levelchange")}}; Este evento se envía cuando se actualizael nivel de la batería.
+
+

Métodos

+

Heredado de{{domxref("EventTarget")}}:

+

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+

Especificaciones

+ + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName('Battery API')}}{{Spec2('Battery API')}}Especificaciones iniciales.
+

Compatibilidad

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}
+ Chrome on Android: crbug.com/135863
+ Chrome OS: crbug.com/122593		{{CompatGeckoDesktop("10")}} {{ property_prefix("moz") }} [1]
+ {{CompatGeckoDesktop("16")}} (without prefix) [2]		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatNo() }}{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }} [1]
+ {{CompatGeckoMobile("16")}} (without prefix) [2]		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+

Notas Gecko

+

[1] Descativado por defecto en Firefox 10.0, pero se puede habilitar estableciendo las preferencias en dom.battery.enabled a true. A partir de Firefox 11.0, mozBattery está activado por defecto.

+

[2] La Battery API actualmente es soportada por Android, Windows, y Linux con UPower instalado. Está soportado para MacOS con Gecko 18.0 {{geckoRelease("18.0")}}.

+

Ver también

+ diff --git a/files/es/web/api/batterymanager/level/index.html b/files/es/web/api/batterymanager/level/index.html new file mode 100644 index 0000000000..d88c8ffbe3 --- /dev/null +++ b/files/es/web/api/batterymanager/level/index.html @@ -0,0 +1,22 @@ +--- +title: BatteryManager.level +slug: Web/API/BatteryManager/level +tags: + - API +translation_of: Web/API/BatteryManager/level +--- +

{{ APIRef("BatteryManager") }}

+

Resumen

+

Indica el valor actual del nivel de carga, estos valores están entre 0.0 a 1.0.

+

Sintaxis

+
var level = navigator.battery.level
+

Es un número que representa el nivel de carga de la batería del sistema en una escala entre los valores 0.0 y 1.0. Un valor de 0 significa que la batería está vacía y el sistema esta apunto de entrar en suspensión. Un valor de 1.0 significa que la batería está cargada al máximo. Este valor también nos indica que el sistema no puede determinar el nivel de carga de la batería o si no está alimentado por batería.

+

Especificaciones

+

{{page("/es/docs/Web/API/BatteryManager","Especificaciones")}}

+

Compatibilidad del navegador

+

{{page("/es/docs/Web/API/BatteryManager","Compatibilidad")}}

+

Vea también

+ diff --git a/files/es/web/api/batterymanager/onchargingchange/index.html b/files/es/web/api/batterymanager/onchargingchange/index.html new file mode 100644 index 0000000000..2688bfc3aa --- /dev/null +++ b/files/es/web/api/batterymanager/onchargingchange/index.html @@ -0,0 +1,20 @@ +--- +title: BatteryManager.onchargingchange +slug: Web/API/BatteryManager/onchargingchange +translation_of: Web/API/BatteryManager/onchargingchange +--- +

{{ APIRef("BatteryManager") }}

+

Resumen

+

Especifica un evento oyente para recibir eventos {{event("chargingchange")}}. Estos eventos se producen cuando se actualiza el estado de la batería {{domxref("BatteryManager.charging", "charging")}}.

+

Sintaxis

+
navigator.battery.onchargingchange = funcRef
+

Donde funcRef es una función para llamar cuando se produce el evento {{event("chargingchange")}}.

+

Especificaciones

+

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

+

Compatibilidad con navegadores

+

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

+

Ver también

+ diff --git a/files/es/web/api/batterymanager/onlevelchange/index.html b/files/es/web/api/batterymanager/onlevelchange/index.html new file mode 100644 index 0000000000..2b2e957619 --- /dev/null +++ b/files/es/web/api/batterymanager/onlevelchange/index.html @@ -0,0 +1,20 @@ +--- +title: BatteryManager.onlevelchange +slug: Web/API/BatteryManager/onlevelchange +translation_of: Web/API/BatteryManager/onlevelchange +--- +

{{ APIRef("BatteryManager") }}

+

Resumen

+

Especifica un detector de eventos para recibir eventos de  {{event("levelchange")}} ("cambio de nivel"). Estos eventos ocurren cuando el {{domxref("BatteryManager.level")}} de batería se actualiza.

+

Sintaxis

+
navigator.battery.onlevelchange = funcRef
+

Donde funcRef es una función que se convoca cuando el evento de {{event("levelchange")}} sucede.

+

Especificaciones

+

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

+

Compatibilidad de navegadores

+

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

+

Véase también

+ diff --git a/files/es/web/api/beforeunloadevent/index.html b/files/es/web/api/beforeunloadevent/index.html new file mode 100644 index 0000000000..5bd5e2204f --- /dev/null +++ b/files/es/web/api/beforeunloadevent/index.html @@ -0,0 +1,70 @@ +--- +title: BeforeUnloadEvent +slug: Web/API/BeforeUnloadEvent +translation_of: Web/API/BeforeUnloadEvent +--- +

{{APIRef}}

+ +

El evento beforeunload se diapara cuando la ventana, el documento y sus recursos están a punto de ser cerrados.

+ +

Cuando una cadena no vacía es asignada a la propiedad returnValue del Evento, un cuadro de diálogo aparece, pidiendo a los usuarios la confirmación para la página (ver ejemplo a continuación). Cuando no es asignado un valor, el evento se procesa en silencio. Algunas implementaciones muestran solamente el cuadro de diálogo si el marco o cualquier marco embebido recibe un gesto o interacción del usuario. Ver {{anch("Compatibilidad del navegador")}} para más información.

+ + + + + + + + + + + + + + + + + + + + +
BurbujasNo
CancelableSí
Objetos de destinodefaultView
Interface{{domxref("Event")}}
+ +

Ejemplos

+ +
window.addEventListener("beforeunload", function( event ) {
+  event.returnValue = "\o/";
+});
+
+//is equivalent to
+window.addEventListener("beforeunload", function( event ) {
+  event.preventDefault();
+});
+ +

Los navegadores basado en Webkit no se basan en las especificaciones del cuadro de diálogo. Un ejemplo compatible con la mayoria de los navegadores seria algo parecido al siguiente ejemplo.

+ +
window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
+  return confirmationMessage;                                //Webkit, Safari, Chrome etc.
+});
+ +

Compatibilidad del navegador

+ +
+ + +

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/blob/blob/index.html b/files/es/web/api/blob/blob/index.html new file mode 100644 index 0000000000..5aa6b895d6 --- /dev/null +++ b/files/es/web/api/blob/blob/index.html @@ -0,0 +1,75 @@ +--- +title: Blob() +slug: Web/API/Blob/Blob +tags: + - API + - Archivo + - Blob + - File API + - Referencia +translation_of: Web/API/Blob/Blob +--- +

{{APIRef("File API")}}

+ +

El constructor Blob() retorna un nuevo objeto {{domxref("Blob")}} . El contenido del blob consiste en la concatenación de los valores obtenidos en el parrametro array.

+ +

Sintaxis

+ +
var aBlob = new Blob( array, options );
+
+ +

Parámetros

+ +
+
array
+
Es un {{jsxref("Array")}} de {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, objetos {{domxref("USVString")}}, o una mezcla de cualquiera de éstos objetos, que será puesto dentro de {{domxref("Blob")}}. Los objetos USVString estan codificados como UTF-8.
+
options {{optional_inline}}
+
+

Un objeto opcional de tipo {{domxref("BlobPropertyBag")}} que puede especificar las siguientes propiedades:

+ +
+
type {{optional_inline}}
+
El {{Glossary("MIME type")}} de la información que será almacenada en el blob. El valor por defecto es una cadena vacía, ("").
+
endings {{optional_inline}} {{non-standard_inline}}
+
Cómo interpretar los carácteres de nueva línea (\n) en el contenido, si la información es texto. El valor por defecto, transparent, copia los caracteres de nueva línea  en el blob sin cambiarlos. Para convertir las nuevas líneas a la convención nativa del sistema, se especifica endings.
+
+
+
+ +

Valor de retorno

+ +

Un nuevo objeto {{domxref("Blob")}} conteniendo la información especificada.

+ +

Ejemplo

+ +
var unaParteDeArchivo = ['<a id="a"><b id="b">hey!</b></a>']; // un array de un solo DOMString
+var oMiBlob = new Blob(unaParteDeArchivo, {type : 'text/html'}); // el blob
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad de los navegadores

+ + + +

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

+ +

Vea también

+ + diff --git a/files/es/web/api/blob/index.html b/files/es/web/api/blob/index.html new file mode 100644 index 0000000000..2ee7811292 --- /dev/null +++ b/files/es/web/api/blob/index.html @@ -0,0 +1,194 @@ +--- +title: Blob +slug: Web/API/Blob +translation_of: Web/API/Blob +--- +

{{ APIRef("File API") }}

+ +

Resumen

+ +

Un objeto Blob representa un objeto tipo fichero de  datos planos inmutables. Los Blobs representan datos que no necesariamente se encuentran en un formato nativo de JavaScript. La interfaz {{ domxref("File") }} se encuentra basada en un Blob, heredando y expendiendo la funcionalidad de un Blob para soportar archivos en el sistema del usuario.

+ +

Una forma fácil de construir un Blob es invocando el constructor {{domxref("Blob.Blob", "Blob()")}}. Otra manera es utilizando el método slice() para crear un blob que contiene un subconjunto de los datos de otro Blob.

+ +

Constructor

+ +
+
{{domxref("Blob.Blob", "Blob()")}}
+
Regresa un nuevo objeto Blob creado cuyo contenido consiste en la concatenación de un arreglo de valores establecidos en el parámetro de la función.
+
+ +

Propiedades

+ +
+
{{domxref("Blob.size")}} {{readonlyinline}}
+
El tamaño, en bytes,  de los datos contenidos en el objeto Blob
+
{{domxref("Blob.type")}} {{readonlyinline}}
+
Una cadena (String) indicando el tipo MIME de los datos contenidos en el Blob. Si el tipo es desconocido, esta cadena será vacía.
+
+ +

Métodos

+ +
+
{{domxref("Blob.slice()")}}
+
Regresa un nuevo objeto Blob conteniendo los datos de un rango específico de bytes del origen del Blob.
+
+ +
Nota: Esté consciente que el método slice() posee prefijos propios del fabricante en algunos exploradores y versiones: blob.mozSlice() para Firefox 12 e inferior y blob.webkitSlice() en Safari. Una versión anterior del método slice(), sin prefijos del fabricante, tenía diferente semántica, y se encuentra obsoleto. El soporte para  blob.mozSlice() ha sido eliminado a partir de  Firefox 30.
+ +

Ejemplos

+ +

Ejemplo de uso de un constructor de Blob

+ +

El siguiente código:

+ +
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
+
+ +

es equivalente a:

+ +
var oBuilder = new BlobBuilder();
+var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
+oBuilder.append(aFileParts[0]);
+var oMyBlob = oBuilder.getBlob('text/xml'); // the blob
+
+ +
+

La interfaz {{ domxref("BlobBuilder") }} ofrece otra manera de crear Blob, pero se encuentra ahora obsoleta y no debería volverse a utilizar.

+
+ +

Ejemplo para crear una URL en un arreglo tipado utilizando un blob

+ +

El siguiente código:

+ +
var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
+
+ +

Ejemplo para extraer datos de un Blob

+ +

La única manera de leer contenido de un Blob es utilizando un {{domxref("FileReader")}}. El siguiente código lee el contenido de un Blob como un arreglo tipado.

+ +
var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);
+ +

Al utilizar otros métodos de {{domxref("FileReader")}}, es posible leer los contenidos del Blob como una cadena o una URL de datos.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico541011.105.1
slice()10 {{property_prefix("webkit")}}‡
+ 21		5 {{ property_prefix("moz") }}‡
+ 13		10125.1 (534.29) {{ property_prefix("webkit") }}
Blob() constructor20{{ CompatGeckoDesktop("13.0") }}1012.106 (536.10)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("13.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Notas en implementaciones del método slice()

+ +

El método slice() ha tomado inicialmente length como el segundo argumento para indicar el número de bytes para copiar en el nuevo Blob. Si usted especificó valores como start + length excediento el tamaño del Blob de origen, el Blob retornado contendrá los datos a partir del índice de inicio hasta el final del Blob de origen.

+ +

Esa versión del método slice() fué implementada en Firefox 4, WebKit, y Opera 11.10. Sin embargo, desde que la sintaxis ha diferido desde  Array.slice() y String.slice(), Gecko y WebKit removieron este soporte y agregaron soporte  para la nueva sintaxis como {{ manch("mozSlice") }}/Blob.webkitSlice.

+ +

Comenzando en Gecko 13.0 {{ geckoRelease("13.0") }} y Chrome 21, {{ manch("slice") }} no se encuentra más prefijado. El soporte para mozSlice() ha sido eliminado en Gecko 30.0 {{ geckoRelease("30.0") }}.‡

+ +

Notas de Gecko

+ +

Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, existía un error que afectaba el comportamiento de {{ manch("slice") }}; No funcionaba para las posiciones start and end por fuera del rango de valores de 64 bits con signo; Ha sido ahora arreglado para soportar valores de 64 bits sin signo.

+ +

Disponilidad del alcance del código en Chrome

+ +

El alcance JSM del Blob se encuentra disponible sin la necesidad de hacer nada en especial.

+ +

En el alcance de arranque, este debe importarse de igual modo:

+ +
const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {});
+ +

Ver también

+ + diff --git a/files/es/web/api/blob/type/index.html b/files/es/web/api/blob/type/index.html new file mode 100644 index 0000000000..73dc045027 --- /dev/null +++ b/files/es/web/api/blob/type/index.html @@ -0,0 +1,121 @@ +--- +title: Blob.type +slug: Web/API/Blob/type +tags: + - API + - Archivo + - Archivos + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Blob/type +--- +
{{APIRef("File API")}}
+ +

La propiedad type de un objeto Blob proporciona el tipo MIME del archivo. Retorna una cadena vacía si el tipo no puede ser determinado.

+ +

Sintaxis

+ +
var tipo = instanceOfFile.type
+ +

Valor

+ +

Una cadena

+ +

Ejemplo

+ +
var i, fileInput, files, allowedFileTypes;
+
+// fileInput es un HTMLInputElement: <input type="file" multiple id="myfileinput">
+fileInput = document.getElementById("myfileinput");
+
+// files es un objeto FileList (similar a NodeList)
+files = fileInput.files;
+
+// nuestra aplicacion solo acepta imagenes *.png, *.jpeg y *.gif
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i < files.length; i++) {
+  // Prueba si file.type es un tipo de archivo permitido.
+  if (allowedFileTypes.indexOf(files[i].type) > -1) {
+    // El tipo de archivo es uno de los permitidos. Hacer algo aquí.
+  }
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspeficicacionesEstadoComentario
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Definicion inicial.
+ +

Compatibilidad con browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.type5{{CompatVersionUnknown}}{{CompatGeckoDesktop("2")}}10.011.105.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.type{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/blobbuilder/index.html b/files/es/web/api/blobbuilder/index.html new file mode 100644 index 0000000000..e07f1217cf --- /dev/null +++ b/files/es/web/api/blobbuilder/index.html @@ -0,0 +1,193 @@ +--- +title: BlobBuilder +slug: Web/API/BlobBuilder +tags: + - API + - Archivo + - DOM + - File API + - NeedsBrowserCompatibility + - Obsoleto + - Referencia +translation_of: Web/API/BlobBuilder +--- +

{{APIRef("File API")}}{{ obsolete_header}}

+ +

La interfaz BlobBuilder provee una manera fácil de construir objetos {{domxref("Blob")}} . Solo crea un BlobBuilder y anexa trozos de datos invocando  el método {{manch("append")}} . Cuando termines de construir tu objeto, llama al método {{manch("getBlob")}} para obtener un objeto  {{domxref("Blob")}}  que contiene los datos que le enviaste al blob builder.

+ +
Nota: La interfaz BlobBuilder ha sido descontinuada en favor de introducir el constructor mas reciente {{domxref('Blob')}}.
+ +

Información general de los metodos

+ + + + + + + + + + + + + + + + + + + +
void append(in ArrayBuffer data);
void append(in Blob data);
void append(in String data, [optional] in String endings);
Blob getBlob([optional] in DOMString contentType);
File getFile(in DOMString name, [optional] in DOMString contentType);
+ +

Metodos

+ +

append()

+ +

Anexa el contenido del objeto javascript especificado al {{domxref("Blob")}} que esta siendo construido. Si el valor especificado no es  un  {{domxref("Blob")}}, ArrayBuffer, o String, el valor es convertido a String antes de ser anexado al  blob.

+ +
void append(
+  in ArrayBuffer data
+);
+
+void append(
+  in Blob data
+);
+
+
+void append(
+  in String data,
+  [optional] in String endings
+);
+
+ +

Parametros

+ +
+
data
+
Los datos a anexar al objeto {{domxref("Blob")}} que esta siendo construido.
+
endings
+
Establece como serán escritas las cadenas que contienen  \n. Puede ser "transparent" (los finales no cambian) o "native" (los finales cambian para coincidir  a conveniencia del sistema operativo anfitrión). El valor predeterminado es "transparent".
+
+ +

getBlob()

+ +

Regresa el objeto  {{domxref("Blob")}} que ha sido construido usando los datos pasados atraves del método {{manch("append")}}.

+ +
Blob getBlob(
+  in DOMString contentType {{optional_inline}}
+);
+
+ +

Parametros

+ +
+
contentType {{optional_inline}}
+
El tipo MIME de los datos que seran regresados en el objeto {{domxref("Blob")}}. Esto será la propiedad tipo (Type) de los objetos Blob.
+
+ +

Valor de Retorno

+ +

Un objeto  {{domxref("Blob")}} conteniendo todos los datos pasados por cualquier llamada hecha  al método {{manch("append")}} desde que el  BlobBuilder fue creado. Esto tambien reinicializa el  BlobBuilder sí que la siguiente llamada al metodo {{manch("append")}} es empezar de nuevo , un blob vacio.

+ +

getFile() {{non-standard_inline}}

+ +

Retorna un objeto {{domxref("File")}}.

+ +
File getFile(
+  in DOMString name,
+  [optional] in DOMString contentType
+);
+
+ +

Parametros

+ +
+
name
+
El nombre del archivo.
+
contentType {{optional_inline}}
+
El tipo MIME de dats regresados en el objeto {{domxref("File")}}. Este será el valor de la propiedad tipo (type) del objeto File.
+
+ +

Valor de Retorno

+ +

Un Objeto {{domxref("File")}}.

+ +

Compatibilidad con Nevegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (soporte básico)8[1]{{CompatNo}}[2]10[3]{{CompatNo}}{{CompatNo}}[1]
getfile() {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (soporte básico)3[1]{{CompatNo}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]
getfile() {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] WebKit implementa el API como WebKitBlobBuilder, aunque es obsoleta ahora y ha hecho su soporte configurable. Actualmente Safari deshabilita esta caracteristica  en Nightly, asi que probablemente no venga en la version final. Por otra parte, Chrome, que lo ha soportado desde Chrome 8, mantiene disponible esta caracteristica. Asi que Chrome podrá continuar soportando esta caracteristica. (Visita WebKit changeset para mas detalles).

+ +

[2] Gecko implementa el API como MozBlobBuilder. Empezando con Firefox 14, usando MozBlobBuilder mostrará un mensaje de advertencia en la consola de que usar MozBlobBuilder es obsoleto y se sugiere usar el constructor  {{domxref("Blob")}} en su lugar. En Gecko 18.0 esta caracteristica fue removida..

+ +

[3] Trident implementa el API como MSBlobBuilder.

+ +

Vea también

+ + diff --git a/files/es/web/api/body/formdata/index.html b/files/es/web/api/body/formdata/index.html new file mode 100644 index 0000000000..6915954d6e --- /dev/null +++ b/files/es/web/api/body/formdata/index.html @@ -0,0 +1,72 @@ +--- +title: Body.formData() +slug: Web/API/Body/formData +tags: + - API + - BODY + - Experimental + - Fetch + - Fetch API + - FormData + - Method + - NeedsExample + - Reference +translation_of: Web/API/Body/formData +--- +
{{APIRef("Fetch")}}
+ +

El método formData() de {{domxref("Body")}} mixin toma una cadena {{domxref("Response")}} y la lee completamente. Esto devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.

+ +
+

Nota: Esto es principalmente relevante en service workers. Si un usuario envia un formulario y un service worker intercepta el request, tu por ejemplo podrás llamar a formData() para obtener un mapeo del tipo llave-valor, modificar algunos campos, luego enviar el formulario al servidor (o utilizarlo localmente).

+
+ +

Sintaxis

+ +
response.formData()
+.then(function(formdata) {
+  // hacer algo con tu formdata
+});
+ +

Parámetros

+ +

Ninguno.

+ +

Valor de retorno

+ +

Una {{domxref("Promise")}} que resuelve con un objeto {{domxref("FormData")}}.

+ +

Ejemplo

+ +

TBD.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}} 
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.Body.formData")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/body/index.html b/files/es/web/api/body/index.html new file mode 100644 index 0000000000..3693a73653 --- /dev/null +++ b/files/es/web/api/body/index.html @@ -0,0 +1,99 @@ +--- +title: Body +slug: Web/API/Body +tags: + - API + - BODY + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - request +translation_of: Web/API/Body +--- +
{{ APIRef("Fetch") }}
+ +

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

+ +

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

+ +

Properties

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
A {{domxref("Boolean")}} that indicates whether the body has been read.
+
+ +

Methods

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

Examples

+ +

The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

+ +

HTML Content

+ +
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+
+ +

JS Content

+ +
const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res => res.blob())
+	.then(res => {
+		const objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});
+ +

{{ EmbedLiveSample('Examples', '100%', '250px') }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}} 
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + + +

 

diff --git a/files/es/web/api/body/json/index.html b/files/es/web/api/body/json/index.html new file mode 100644 index 0000000000..54c8d75d12 --- /dev/null +++ b/files/es/web/api/body/json/index.html @@ -0,0 +1,82 @@ +--- +title: Body.json() +slug: Web/API/Body/json +translation_of: Web/API/Body/json +--- +
{{APIRef("Fetch API")}}
+ +

El método json() de {{DOMxRef("Body")}} recibe un flujo de datos {{DOMxRef("Response")}} y lo lee a término. Devuelve una promesa con el cuerpo del texto transformado a {{JSxRef("JSON")}}.

+ +

Sintáxis

+ +
response.json().then(data => {
+  // do something with your data
+});
+ +

Parámetros

+ +

No.

+ +

Valor devuelto

+ +

Una {{jsxref("Promise")}} que se resuelve a un objeto JavaScript. Este objeto puede ser cualquier cosa que pueda ser representada por JSON (un objeto, un array, una cadena de caracteres, un número...).

+ +

Example

+ +

In our fetch json example (run fetch json live), we create a new request using the {{DOMxRef("Request.Request", "Request()")}} constructor, then use it to fetch a .json file. When the fetch is successful, we read and parse the data using json(), then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.

+ +
const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(response => response.json())
+  .then(data => {
+    for (const product of data.products) {
+      let listItem = document.createElement('li');
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = product.Name;
+      listItem.append(
+        ` can be found in ${
+          product.Location
+        }. Cost: `
+      );
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = `£${product.Price}`;
+      myList.appendChild(listItem);
+    }
+  });
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}{{Spec2("Fetch")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Body.json")}}

+ +

See also

+ + diff --git a/files/es/web/api/cachestorage/index.html b/files/es/web/api/cachestorage/index.html new file mode 100644 index 0000000000..fdcfe56217 --- /dev/null +++ b/files/es/web/api/cachestorage/index.html @@ -0,0 +1,198 @@ +--- +title: CacheStorage +slug: Web/API/CacheStorage +tags: + - API + - CacheStorage + - Experimental + - Interface + - NeedsTranslation + - Reference + - Service Workers + - ServiceWorker + - TopicStub +translation_of: Web/API/CacheStorage +--- +

{{APIRef("Service Workers API")}}

+ +

The CacheStorage interface represents the storage for {{domxref("Cache")}} objects.

+ +

The interface:

+ + + +

Use {{domxref("CacheStorage.open()")}} to obtain a {{domxref("Cache")}} instance.

+ +

Use {{domxref("CacheStorage.match()")}} to check if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the CacheStorage object tracks.

+ +

You can access CacheStorage through the global {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} property.

+ +
Note: CacheStorage always rejects with a SecurityError on untrusted origins (i.e. those that aren't using HTTPS, although this definition will likely become more complex in the future.) When testing, you can get around this by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the Firefox Devtools options/gear menu.
+ +
Note: {{domxref("CacheStorage.match()")}} is a convenience method. Equivalent functionality to match a cache entry can be implemented by returning an array of cache names from {{domxref("CacheStorage.keys()")}}, opening each cache with {{domxref("CacheStorage.open()")}}, and matching the one you want with {{domxref("Cache.match()")}}.
+ +

Methods

+ +
+
{{domxref("CacheStorage.match()")}}
+
Checks if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the {{domxref("CacheStorage")}} object tracks, and returns a {{jsxref("Promise")}} that resolves to that match.
+
{{domxref("CacheStorage.has()")}}
+
Returns a {{jsxref("Promise")}} that resolves to true if a {{domxref("Cache")}} object matching the cacheName exists.
+
{{domxref("CacheStorage.open()")}}
+
Returns a {{jsxref("Promise")}} that resolves to the {{domxref("Cache")}} object matching the cacheName (a new cache is created if it doesn't already exist.)
+
{{domxref("CacheStorage.delete()")}}
+
Finds the {{domxref("Cache")}} object matching the cacheName, and if found, deletes the {{domxref("Cache")}} object and returns a {{jsxref("Promise")}} that resolves to true. If no {{domxref("Cache")}} object is found, it resolves to false.
+
{{domxref("CacheStorage.keys()")}}
+
Returns a {{jsxref("Promise")}} that will resolve with an array containing strings corresponding to all of the named {{domxref("Cache")}} objects tracked by the {{domxref("CacheStorage")}}. Use this method to iterate over a list of all the {{domxref("Cache")}} objects.
+
+ +

Examples

+ +

This code snippet is from the MDN sw-test example (see sw-test running live.) This service worker script waits for an {{domxref("InstallEvent")}} to fire, then runs {{domxref("ExtendableEvent.waitUntil","waitUntil")}} to handle the install process for the app. This consists of calling {{domxref("CacheStorage.open")}} to create a new cache, then using {{domxref("Cache.addAll")}} to add a series of assets to it.

+ +

In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:

+ +
    +
  1. Check whether a match for the request is found in the CacheStorage. If so, serve that.
    2. +
  2. If not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).)
    3. +
  3. If this fails (e.g. because the network is down), return a fallback response.
    4. +
+ +

Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}.

+ +
self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() always resolves
+    // but in case of success response will have value
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // response may be used only once
+        // we need to save clone to put one copy in cache
+        // and serve second one
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});
+
+ +

This snippet shows how the API can be used outside of a service worker context, and uses the await operator for much more readable code.

+ +
// Try to get data from the cache, but fall back to fetching it live.
+async function getData() {
+   const cacheVersion = 1;
+   const cacheName    = `myapp-${ cacheVersion }`;
+   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
+   let cachedData     = await getCachedData( cacheName, url );
+
+   if ( cachedData ) {
+      console.log( 'Retrieved cached data' );
+      return cachedData;
+   }
+
+   console.log( 'Fetching fresh data' );
+
+   const cacheStorage = await caches.open( cacheName );
+   await cacheStorage.add( url );
+   cachedData = await getCachedData( cacheName, url );
+   await deleteOldCaches( cacheName );
+
+   return cachedData;
+}
+
+// Get data from the cache.
+async function getCachedData( cacheName, url ) {
+   const cacheStorage   = await caches.open( cacheName );
+   const cachedResponse = await cacheStorage.match( url );
+
+   if ( ! cachedResponse || ! cachedResponse.ok ) {
+      return false;
+   }
+
+   return await cachedResponse.json();
+}
+
+// Delete any old caches to respect user's disk space.
+async function deleteOldCaches( currentCache ) {
+   const keys = await caches.keys();
+
+   for ( const key of keys ) {
+      const isOurCache = 'myapp-' === key.substr( 0, 6 );
+
+      if ( currentCache === key || ! isOurCache ) {
+         continue;
+      }
+
+      caches.delete( key );
+   }
+}
+
+try {
+   const data = await getData();
+   console.log( { data } );
+} catch ( error ) {
+   console.error( { error } );
+}
+ +

Specifications

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

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/cachestorage/keys/index.html b/files/es/web/api/cachestorage/keys/index.html new file mode 100644 index 0000000000..eee8e0e443 --- /dev/null +++ b/files/es/web/api/cachestorage/keys/index.html @@ -0,0 +1,74 @@ +--- +title: CacheStorage.keys() +slug: Web/API/CacheStorage/keys +translation_of: Web/API/CacheStorage/keys +--- +

{{APIRef ("API de Service Workers")}}

+ +

El keys()método de la interfaz {{domxref ("CacheStorage")}} devuelve un {{jsxref ("Promise")}} que se resolverá con una matriz que contiene las cadenas correspondientes a todos los {{domxref ("Cache")}} objetos rastreados por el objeto {{domxref ("CacheStorage")}} en el orden en que fueron creados. Use este método para iterar sobre una lista de todos los objetos {{domxref ("Cache")}}.

+ +

Puede acceder a CacheStoragetravés de la propiedad global {{domxref ("WindowOrWorkerGlobalScope.caches", "caches")}}.

+ +

Sintaxis

+ +
caches.keys().then(function(keyList) {
+  // haz algo con tu keyList
+});
+
+ +

Parámetros

+ +

Ninguna.

+ +

Valor de retorno

+ +

a {{jsxref("Promise")}} that resolves with an array of the {{domxref("Cache")}} names inside the {{domxref("CacheStorage")}} object.

+ +

Examples

+ +

In this code snippet we wait for an {{domxref("ServiceWorkerGlobalScope.onactivate", "activate")}} event, and then run a {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} block that clears up any old, unused caches before a new service worker is activated. Here we have a whitelist containing the names of the caches we want to keep (cacheWhitelist). We return the keys of the caches in the {{domxref("CacheStorage")}} object using keys(), then check each key to see if it is in the whitelist. If not, we delete it using {{domxref("CacheStorage.delete()")}}.

+ +
then.addEventListener('activar', función (evento) { 
+  var cacheWhitelist = ['v2']; 
+
+  event.waitUntil( 
+    caches.keys().then(function(keyList) { 
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      });
+    })
+  );
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Service Workers', '# dom-cachestorage-keys', 'CacheStorage: keys')}}{{Spec2 ('Trabajadores de servicio')}}Definición inicial
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.CacheStorage.keys")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/cameracapabilities/effects/index.html b/files/es/web/api/cameracapabilities/effects/index.html new file mode 100644 index 0000000000..1204fb0c34 --- /dev/null +++ b/files/es/web/api/cameracapabilities/effects/index.html @@ -0,0 +1,37 @@ +--- +title: CameraCapabilities.effects +slug: Web/API/CameraCapabilities/effects +translation_of: Archive/B2G_OS/API/CameraCapabilities/effects +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Resumen

+

El valor de la propiedad effects en un Array que identifica los efectos  (tales como normal, sepia, mono, etc.) que soporta la camara.

+

Sintaxis

+
var effects = instanceOfCameraControl.capabilities.effects
+

Valor

+

Devuelve un Array de cadenas.

+

Ejemplo

+
var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  var effects = camera.capabilities.effects;
+
+  effects.forEach(function (value) {
+    console.log(value)
+  });
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+
+

Especifiacion

+

No forma parte de ninguna especifiacion; en cualquier caso, esta API deberia ser eliminada cuando la WebRTC Capture and Stream API haya sido implementada.

+

Ver tambien

+ diff --git a/files/es/web/api/cameracapabilities/fileformats/index.html b/files/es/web/api/cameracapabilities/fileformats/index.html new file mode 100644 index 0000000000..5193200866 --- /dev/null +++ b/files/es/web/api/cameracapabilities/fileformats/index.html @@ -0,0 +1,37 @@ +--- +title: CameraCapabilities.fileFormats +slug: Web/API/CameraCapabilities/fileFormats +translation_of: Archive/B2G_OS/API/CameraCapabilities/fileFormats +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Summary

+

La propiedad fileFormats es un Array que identifica los formatos de archivo que soporta la camara, tales como jpeg, rgb565, etc.

+

Sintaxis

+
var formats = instanceOfCameraControl.capabilities.fileFormats
+

Valor

+

Devuelve un Array de cadenas.

+

Ejemplo

+
var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  var formats = camera.capabilities.fileFormats;
+
+  formats.forEach(function (value) {
+    console.log(value)
+  });
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+
+

Especificacion

+

No es parte de ninguna especificacion; en cualquier caso, esta API deberia ser eliminada cuando la WebRTC Capture and Stream API haya sido implementada.

+

Ver tambien

+ diff --git a/files/es/web/api/cameracapabilities/flashmodes/index.html b/files/es/web/api/cameracapabilities/flashmodes/index.html new file mode 100644 index 0000000000..be89eac3ac --- /dev/null +++ b/files/es/web/api/cameracapabilities/flashmodes/index.html @@ -0,0 +1,37 @@ +--- +title: CameraCapabilities.flashModes +slug: Web/API/CameraCapabilities/flashModes +translation_of: Archive/B2G_OS/API/CameraCapabilities/flashModes +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Resumen

+

La propiedad flashModes es un Array de cadenas que identifican cada modo de flash soportado por la camara. Los posibles valores son auto, off, on o torch.

+

Sintaxis

+
var flash = instanceOfCameraControl.capabilities.flashModes
+

Valor

+

Devuelve un  Array de cadenas.

+

Ejemplo

+
var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  var flash = camera.capabilities.flashModes;
+
+  flash.forEach(function (value) {
+    console.log(value)
+  });
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+
+

Especifiacion

+

No es parte de ninguna especificacion; en cualquier caso, esta API deberia ser eliminada cuando la WebRTC Capture and Stream API haya sido implementada.

+

Ver tambien

+ diff --git a/files/es/web/api/cameracapabilities/index.html b/files/es/web/api/cameracapabilities/index.html new file mode 100644 index 0000000000..a534b51ab5 --- /dev/null +++ b/files/es/web/api/cameracapabilities/index.html @@ -0,0 +1,86 @@ +--- +title: CameraCapabilities +slug: Web/API/CameraCapabilities +translation_of: Archive/B2G_OS/API/CameraCapabilities +--- +

{{ Apiref() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

The {{domxref("CameraControl.capabilities")}} property returns a CameraCapabilities object, which describes all the camera's capabilities.

+

Properties

+
+
+ {{domxref("CameraCapabilities.effects")}} {{readonlyinline}}
+
+ An Array of strings identifying the effects (such as normal, sepia, mono, etc.) that the camera supports.
+
+ {{domxref("CameraCapabilities.fileFormats")}} {{readonlyinline}}
+
+ An Array of strings identifying the file formats supported by the camera, such as jpeg, rgb565, etc.
+
+ {{domxref("CameraCapabilities.flashModes")}} {{readonlyinline}}
+
+ An Array of strings identifying each of the flash modes supported by the camera. Possible values are auto, off, on or torch.
+
+ {{domxref("CameraCapabilities.focusModes")}} {{readonlyinline}}
+
+ An Array of strings identifying each of the focus modes supported by the camera such as auto, fixed, macro, etc.
+
+ {{domxref("CameraCapabilities.maxExposureCompensation")}} {{readonlyinline}}
+
+ A number that defines the maximum supported exposure compensation value.
+
+ {{domxref("CameraCapabilities.maxFocusAreas")}} {{readonlyinline}}
+
+ A number that defines the maximum number of focus areas supported by the camera.
+
+ {{domxref("CameraCapabilities.maxMeteringAreas")}} {{readonlyinline}}
+
+ A number that defines the maximum number of metering areas supported by the camera.
+
+ {{domxref("CameraCapabilities.minExposureCompensation")}} {{readonlyinline}}
+
+ A number that defines the minimum supported exposure compensation value.
+
+ {{domxref("CameraCapabilities.pictureSizes")}} {{readonlyinline}}
+
+ An Array of objects containing the height and width properties supported for picture taking.
+
+ {{domxref("CameraCapabilities.previewSizes")}} {{readonlyinline}}
+
+ An Array of objects containing the height and width properties supported for the video preview stream.
+
+ {{domxref("CameraCapabilities.recorderProfiles")}} {{readonlyinline}}
+
+ An object with attributes for each of the supported recorder profiles.
+
+ {{domxref("CameraCapabilities.sceneModes")}} {{readonlyinline}}
+
+ An Array of strings identifying each of the scene modes supported by the camera such as auto, night, beach, etc.
+
+ {{domxref("CameraCapabilities.stepExposureCompensation")}} {{readonlyinline}}
+
+ A number that defines the exposure compensation minimum step-size.
+
+ {{domxref("CameraCapabilities.videoSizes")}} {{readonlyinline}}
+
+ An Array of objects containing the height and width properties supported for video recording.
+
+ {{domxref("CameraCapabilities.whiteBalanceModes")}} {{readonlyinline}}
+
+ An Array of strings identifiers for each white balance modes supported by the camera such as auto, fluorecent, etc.
+
+ {{domxref("CameraCapabilities.zoomRatios")}} {{readonlyinline}}
+
+ An Array of numbers representing all the supported zoom ratios. If the camera has no zoom capabilities, the value is null.
+
+

Methods

+

None.

+

Specification

+

Not part of any specification; however, this API should be removed when the WebRTC Capture and Stream API has been implemented.

+

See also

+ diff --git a/files/es/web/api/cameracapabilities/maxexposurecompensation/index.html b/files/es/web/api/cameracapabilities/maxexposurecompensation/index.html new file mode 100644 index 0000000000..2baf025df3 --- /dev/null +++ b/files/es/web/api/cameracapabilities/maxexposurecompensation/index.html @@ -0,0 +1,33 @@ +--- +title: CameraCapabilities.maxExposureCompensation +slug: Web/API/CameraCapabilities/maxExposureCompensation +translation_of: Archive/B2G_OS/API/CameraCapabilities/maxExposureCompensation +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Resumen

+

La propiedad maxExposureCompensation es un número que define el valor máximo de compensación de exposición soportado.

+

Sintaxis

+
var max = instanceOfCameraControl.capabilities.maxExposureCompensation
+

Valor

+

Devuelve un número.

+

Ejemplo

+
var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  console.log(camera.capabilities.maxExposureCompensation);
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+
+

Especificación

+

No forma parte de ninguna especificación; No obstante, esta API debería ser eliminada cuando la WebRTC Capture and Stream API haya sido implementada.

+

Ver también

+ diff --git a/files/es/web/api/cameracapabilities/maxfocusareas/index.html b/files/es/web/api/cameracapabilities/maxfocusareas/index.html new file mode 100644 index 0000000000..6d0024bebb --- /dev/null +++ b/files/es/web/api/cameracapabilities/maxfocusareas/index.html @@ -0,0 +1,33 @@ +--- +title: CameraCapabilities.maxFocusAreas +slug: Web/API/CameraCapabilities/maxFocusAreas +translation_of: Archive/B2G_OS/API/CameraCapabilities/maxFocusAreas +--- +

{{ Apiref() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Resumen

+

La propiedad maxFocusAreas es un numero que define el numero maximo de areas de foco que permite la camara.

+

Sintaxis

+
var max = instanceOfCameraControl.capabilities.maxFocusAreas
+

Valor

+

Devuelve un numero.

+

Ejemplo

+
var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  console.log(camera.capabilities.maxFocusAreas);
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+
+

Especificacion

+

No es parte de ninguna especificacion; en cualquier caso, esta API deberia ser eliminada cuando la  WebRTC Capture and Stream API haya sido implementada.

+

Ver tambien

+ diff --git a/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html b/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html new file mode 100644 index 0000000000..b85b83238c --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html @@ -0,0 +1,295 @@ +--- +title: Ejemplo de composición +slug: Web/API/Canvas_API/Tutorial/Compositing/Ejemplo +tags: + - Canvas + - Ejemplo + - HTML + - HTML5 + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +
{{CanvasSidebar}}
+ +

Este programa de ejemplo muestra una cantidad de operaciones de composición. La salida se ve así:

+ +

{{EmbedLiveSample("Ejemplo_de_composición", "100%", 7250)}}

+ +

Ejemplo de composición

+ +

Este código establece los valores globales utilizados por el resto del programa.

+ +
var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+'Esta es la configuración predeterminada y dibuja nuevas formas sobre el contenido del canvas existente.',
+'La nueva forma se dibuja solo donde la nueva forma y el canvas de destino se superponen. Todo lo demás se hace transparente.',
+'La nueva forma se dibuja donde no se superpone al contenido del canvas existente.',
+'La nueva forma solo se dibuja donde se solapa con el contenido del canvas existente.',
+'Se dibujan nuevas formas detrás del contenido del canvas existente',
+'El contenido del canvas existente se conserva donde la nueva forma y el contenido del canvas existente se superponen. Todo lo demás se hace transparente.',
+'El contenido existente se mantiene donde no se superpone a la nueva forma.',
+'El canvas existente solo se conserva donde se solapa con la nueva forma. La nueva forma se dibuja detrás del contenido del canvas.',
+'Donde ambas formas se superponen, el color se determina agregando valores de color.',
+'Solo se muestra la nueva forma.',
+'Las formas se hacen transparentes donde ambas se superponen y se dibujan de manera normal en cualquier otro lugar.',
+'Los píxeles de la capa superior se multiplican con el píxel correspondiente de la capa inferior. El resultado es una imagen más oscura. ',
+'Los píxeles están invertidos, multiplicados e invertidos nuevamente. Una imagen más clara es el resultado (opuesto a multiplicar).',
+'Una combinación de multiplicar y pantalla. Las partes oscuras en la capa base se oscurecen y las partes claras se vuelven más claras.',
+'Conserva los píxeles más oscuros de ambas capas.',
+'Conserva los píxeles más claros de ambas capas.',
+'Divide la capa inferior por la capa superior invertida.',
+'Divide la capa inferior invertida por la capa superior, y luego invierte el resultado.',
+'Una combinación de multiplicar y pantalla como superposición, pero con la parte superior y la capa inferior intercambiado.',
+'Una versión más suave de la luz dura. Negro puro o blanco no da como resultado negro o blanco puro.',
+'Resta la capa inferior de la capa superior o viceversa para obtener siempre un valor positivo.',
+'Al igual que la diferencia, pero con menor contraste.',
+'Conserva la luma y el croma de la capa inferior, mientras adopta el tono de la capa superior.',
+'Conserva la luma y el tono de la capa inferior, mientras adopta el croma de la capa superior.',
+'Conserva la luma de la capa inferior, mientras adopta el matiz y el croma de la capa superior.',
+'Conserva el tono y el croma de la capa inferior, mientras adopta la luma de la capa superior.'
+          ].reverse();
+var width = 320;
+var height = 340;
+
+ +

Programa principal

+ +

Cuando se carga la página, este código se ejecuta para configurar y ejecutar el ejemplo:

+ +
window.onload = function() {
+    // lum en sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensionar canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+
+ +

Y este código, runComposite(), maneja la mayor parte del trabajo, dependiendo de una serie de funciones de utilidad para hacer las partes difíciles.

+ +
function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('existing content', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('new content', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+
+ +

Funciones de utilidad

+ +

El programa se basa en una serie de funciones de utilidad.

+ +
var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+
+ +
var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // por grado
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n <= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+
+ +
// HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H >= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/es/web/api/canvas_api/tutorial/compositing/index.html b/files/es/web/api/canvas_api/tutorial/compositing/index.html new file mode 100644 index 0000000000..1d45712fd4 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/compositing/index.html @@ -0,0 +1,117 @@ +--- +title: Compositing and clipping +slug: Web/API/Canvas_API/Tutorial/Compositing +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Lienzo + - NeedsTranslation + - Recorte + - TopicStub + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
+ +
+

En todos nuestros ejemplos anteriores, las formas siempre fueron dibujadas una encima de la anterior. Estos es más que adecuado para la mayoría de las situaciones pero se limita al orden compuesto de las figuras. Podemos, sin embargo, cambiar este comportamiento estableciendo  el valor de la propiedad globalCompositeOperation. Además, la proeidad clip nos permite ocultar partes de figuras que no queremos mostrar.

+
+ +

globalCompositeOperation

+ +

No solo podemos dibujar formas nuevas detrás de las ya existentes sino que las podemos utilizar para enmascarar ciertas áreas, limpiar secciones del lienzo (canvas no se limita a utilizar rectángulos como en el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) y algunas cosas más.

+ +
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+
Esto establece el tipo de operación compuesta a aplicar cuando se dibujan nuevas figuras, en donde tipo (type) es una cadena de caracteres que identifica cual de las doce operaciones compuestas se utilizará.
+
+ +

Vea ejemplos de composición para el código de los siguientes ejemplos.

+ +

{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

Trazado de Recorte

+ +

Un trazado de recoirte es como una figura normal en el lienzo pero actúa como una máscara para ocultar las partes de la misma que no se quieren mostrar. Este efecto se muestra en la figura de la derecha. La estrella roja es nuestro trazado de recorte. Todo lo que cae fuera de este trazado no se dibujará en el lienzo.

+ +

Si comparamos el trazado de recorte con la propiedad globalCompositeOperation que hemos visto antes, vemos dos modos compuestos que logran mas o menos los mismos efectos en source-in y source-atop. Las diferencias mas importantes entre éstos dos son que el trazado de recorte no dibujan nunca en el lienzo y que nunca se afecta por agregar nuevas figuras. Esto vuelve al trazado de recorte ideal para dibujar múltiples figuras en un área delimitada.

+ +

En el capítulo acerca de dibujo de figuras solo menciono a los métodos stroke() y fill() pero existe un tercer método que se usa para trazados llamado clip().

+ +
+
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+
Convierte al trazado en ejecución a un trazado de recorte.
+
+ +

Se utiliza clip() en lugar de closePath() para cerrar el trazado y volverlo uno de recorte, en vez de marcar (stroke) o rellenar el trazado.

+ +

Por edfecto el elemento {{HTMLElement("canvas")}} tiene un trazado de recorte que es de extacamente el mismo tamaño del propio lienzo. En otras palabras, la máscara de recorte (clipping) no se da.

+ +

Un ejemplo de clip

+ +

En este ejemplo, utilizamos un trazado de recorte de forma circular para restringir el dibujo de un conjunto de estrellas aleatorias dentro de una región particular del lienzo.

+ +
function dibuja() {
+  var ctx = document.getElementById('lienzo').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // crear un trazado de corte de forma circular
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // pinta el fondo
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // dibuja las estrellas
+  for (var j = 1; j < 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    dibulaEstrella(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function dibujaEstrella(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i < 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+ + + +

En las primeras líneas de código, dibujamos un rectángulo negro del tamaño del lienzo como telón de fondo, luego trasladamos el origen del mismo al centro. A continuación, creamos un trazado de recorte de forma circular, a través de dibujar un arco y mediante la llamada a clip(). El recorte también es parte del estado guardado del lienzo. Si queremos mantener el recorte original, podríamos haber guardado el estado anterior del lienzo justo antes de que creamos el nuevo.

+ +

Todo lo que se dibuja después de crear un recorte aparecerá dentro de su trazado. Se puede ver claramente esto en el dibujo de gradiente lineal que realizamos a continuación. Después se ubican estrellas en 50 posiciones alteatorias y escaladas utilizando la función drawStar(). Una vez más, las estrellas solo aparecen dentro del recorte trazado  en el lienzo.

+ +

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

+ +

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

diff --git a/files/es/web/api/canvasimagesource/index.html b/files/es/web/api/canvasimagesource/index.html new file mode 100644 index 0000000000..bf143d9335 --- /dev/null +++ b/files/es/web/api/canvasimagesource/index.html @@ -0,0 +1,42 @@ +--- +title: CanvasImageSource +slug: Web/API/CanvasImageSource +tags: + - API + - Auxiliar + - Canvas + - Referencia +translation_of: Web/API/CanvasImageSource +--- +

{{APIRef("Canvas API")}}

+ +

El tipo auxiliar CanvasImageSource representa cualquiera de los siguientes tipos:

+ + + +

Este es un tipo auxiliar usado para simplificar la especificación, no es una interfáz y por ello no hay objetos implementandolo.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#canvasimagesource", "CanvasImageSource")}}{{Spec2('HTML WHATWG')}}Definición inicial.
diff --git a/files/es/web/api/canvasrenderingcontext2d/arc/index.html b/files/es/web/api/canvasrenderingcontext2d/arc/index.html new file mode 100644 index 0000000000..db4803a7ab --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/arc/index.html @@ -0,0 +1,226 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D .arc() de la API de Canvas 2D añade un arco a la trayectoria centrada en la posición (x, y) con el radio r comenzando en startAngle y terminando en endAngle que va en la dirección dada en sentido antihorario (predeterminado en sentido  horario) .

+ +

Sintaxis

+ +
Void ctx .arc (x, y, radio, startAngle, endAngle, antihorario);
+ +

Parámetros

+ +
+
x
+
La coordenada x del centro del arco.
+
y
+
La coordenada y del centro del arco.
+
radius
+
El radio del arco.
+
startAngle
+
El ángulo en el que se inicia el arco, medido en sentido horario desde el eje x positivo y expresado en radianes.
+
endAngle
+
El ángulo en el que termina el arco, medido en sentido horario desde el eje x positivo y expresado en radianes.
+
anticlockwise Opcional
+
Un Boolean opcional que, si es true , hace que el arco se dibuje en sentido contrario a las agujas del reloj entre los dos ángulos. De forma predeterminada, se dibuja en el sentido de las agujas del reloj.
+
+ +

Ejemplos

+ +

Utilizando el método del arc

+ +

Esto es sólo un simple fragmento de código dibujando un círculo.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+
+ +

Edite el código de abajo y vea su actualización de cambios en vivo en el lienzo:

+ +
+
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.beginPath();
+ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
+ctx.stroke();</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) }}

+ +

Diferentes formas demostradas

+ +

En este ejemplo se dibujan diferentes formas para mostrar lo que es posible al usar arc() .

+ +
+
HTML
+ +
<canvas id="canvas" width="150" height="200"></canvas>
+
+ +
JavaScript
+
+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (var i = 0; i < 4; i++) {
+  for(var j = 0; j < 3; j++) {
+    ctx.beginPath();
+    var x              = 25 + j * 50;               // x coordinate
+    var y              = 25 + i * 50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI + (Math.PI * j) /2; // End point on circle
+    var anticlockwise  = i % 2 == 1;                // Draw anticlockwise
+
+    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+    if (i > 1) {
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}
+ +

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

+ +

Specifications

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarioWHATWG HTML Estándar de vida
+ La definición de 'CanvasRenderingContext2D.arc' en esa especificación.		Estándar de vidaStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Notas específicas de Gecko

+ +

Comenzando con Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1):

+ + + +

Ver también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html new file mode 100644 index 0000000000..1c91e264f4 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html @@ -0,0 +1,180 @@ +--- +title: CanvasRenderingContext2D.beginPath() +slug: Web/API/CanvasRenderingContext2D/beginPath +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Referencia + - metodo +translation_of: Web/API/CanvasRenderingContext2D/beginPath +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D.beginPath() del API Canvas 2D comienza una nueva ruta vaciando la lista de sub-rutas. Invoca este método cuando quieras crear una nueva ruta. 

+ +

Sintaxis

+ +
void ctx.beginPath();
+
+ +

Ejemplos

+ +

Usando el método beginPath

+ +

Este es solo un trozo de código el cual usa el método beginPath.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120,120);
+ctx.stroke();
+
+ +

Edita el código aquí debajo y mira tus cambios actualizarse en vivo en el canvas:

+ +
+
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" style="height:200px">
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();</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, 460) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad de los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html new file mode 100644 index 0000000000..64aa1a3908 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -0,0 +1,203 @@ +--- +title: CanvasRenderingContext2D.clearRect() +slug: Web/API/CanvasRenderingContext2D/clearRect +translation_of: Web/API/CanvasRenderingContext2D/clearRect +--- +
{{APIRef}}
+ +
El método CanvasRenderingContext2D.clearRect() del API Canvas 2D convierte todos los pixeles en el rectangulo definido por el punto de inicio (x, y) y tamaño (width, height) a negro transparente, borrando cualquier contenido dibujado anteriormente.
+ +
 
+ +

Syntaxis

+ +
+

HTML Content

+ +
void ctx.clearRect(x, y, width, height);
+ +

Parametros

+ +
+
x
+
El eje x  de la coordenada para el punto de inicio del rectangulo.
+
y
+
El eje y  de la coordenada para el punto de inicio del rectangulo.
+
width
+
El ancho del rectangulo.
+
heigth
+
el alto del rectangulo.
+
+ +

Notas de uso

+ +

Un problema común con clearRect es que puede parecer que no funciona cuando no se usan las trayectorias de dibujo (paths) de forma adecuada. No olvide llamar {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} antes de comenzar a dibujar el nuevo cuadro después de llamar clearRect.

+ +

Ejemplos

+ +
+
+

Usando el método clearRect

+
+
+ +

  Este es un simple fragmento (snippet) de código que usa el método clearRect.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d'); c
+
+tx.beginPath(); ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.lineTo(120, 120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// clear the whole canvas
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+ +

  

+ +

Edite el código de abajo y vea sus cambios actualizados en vivo en el canvas:

+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}{{Spec2('HTML WHATWG')}} 
+ +
+
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" style="height:140px;">
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);</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);
+
+
+
+ + + + +
+ +

Compatibilidad con exploradores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vea También

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html new file mode 100644 index 0000000000..2d5330ec53 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html @@ -0,0 +1,232 @@ +--- +title: CanvasRenderingContext2D.drawImage() +slug: Web/API/CanvasRenderingContext2D/drawImage +tags: + - API + - Canvas + - CanvasRenderingContect2D + - Métodos + - Referencia +translation_of: Web/API/CanvasRenderingContext2D/drawImage +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D.drawImage() de la API Canvas 2D proporciona diferentes formas para dibujar una imagen dentro de canvas.

+ +

Sintaxis

+ +
void ctx.drawImage(image, dx, dy);
+void ctx.drawImage(image, dx, dy, dWidth, dHeight);
+void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+
+ +

drawImage

+ +

Parámetros

+ +
+
image
+
Un elemento a dibujar dentro del context. La especificación permite cualquier fuente de imagen en canvas ({{domxref("CanvasImageSource")}}), tal como una {{domxref("HTMLImageElement")}}, un {{domxref("HTMLVideoElement")}}, un {{domxref("HTMLCanvasElement")}} o un{{domxref("ImageBitmap")}}.
+
dx
+
La coordenada X del canvas destino en la cual se coloca la esquina superior izquierda de la imagen origen.
+
dy
+
La coordenada Y del canvas destino en la cual se coloca la esquina superior izquierda de la imagen origen.
+
dWidth
+
El ancho para dibujar la imagen en el canvas destino.
+
dHeight
+
El alto para dibujar la imagen en el canvas destino. Esto permite escalar la imagen dibujada. Si no se especifica, el alto de  la imagen no se escala al dibujar.
+
sx
+
La coordenada X de la esquina superior izquierda del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.
+
sy
+
La coordenada Y de la esquina superior izquierda del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.
+
sWidth
+
El ancho del sub-rectangulo de la imagen origen a dibujar en el contexto de destino. Si no se especifica, se utiliza todo el rectangulo entero desde las coordenadas especificadas por sx y sy hasta la esquina inferior derecha de la imagen.
+
sHeight
+
La altura del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.
+
+ +

Excepciones lanzadas

+ +
+
INDEX_SIZE_ERR
+
Si el canvas o la fuente de anchura o altura del rectangulo es igual a cero.
+
INVALID_STATE_ERR
+
La imagen no tiene datos de imagen.
+
TYPE_MISMATCH_ERR
+
El elemento de origen especificado no es compatible.
+
+ +

Ejemplos

+ +

Usando el método drawImage

+ +

Este es sólo un simple fragmento de código que utiliza el método drawImage.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+<div style="display:none;">
+  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
+       width="300" height="227">
+</div>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+
+ +

Edita el código debajo y observa los cambios actualizarse en vivo en el canvas:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div style="display:none;">
+  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+</div>
+<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.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+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) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ImageBitmap como fuente de imagen{{CompatUnknown}}{{CompatGeckoDesktop(42)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ImageBitmap como fuente de imagen{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(42)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +

Notas de compatibilidad

+ + + +

Mira también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html new file mode 100644 index 0000000000..bc1a6ddf65 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -0,0 +1,169 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D.fillRect()  de la API Canvas 2D dibuja un rectángulo relleno en la posición ( x, y ). El tamaño del rectángulo se determina por width (anchura) y height (altura). El estilo de relleno se determina por el atributo fillStyle.

+ +

Sintaxis

+ +
void ctx.fillRect(x, y, width, height);
+
+ +

Parámetros

+ +
+
x
+
La componente x de la coordenada para el punto de comienzo del rectángulo.
+
y
+
La componente y de la coordenada para el punto de comienzo del rectángulo.
+
width
+
La anchura del rectángulo.
+
height
+
La altura del rectángulo.
+
+ +

Ejemplos

+ +

Usando el método fillRect

+ +

El siguiente fragmento de código usa el método fillRect.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// Rellenar el canvas completo
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ +

Edita el código  que se encuentra a continuación y observa en vivo los cambios actualizados en el canvas:

+ +
+
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.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);</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) }}

+ +

Especificaciones

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

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Documentos relacionados

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html new file mode 100644 index 0000000000..4f0c72afd0 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -0,0 +1,103 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +tags: + - CanvasRenderingContext2D + - Context 2D + - Español + - Method + - Reference + - getImageData +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +
{{APIRef}}
+ +

 

+ +

El método CanvasRenderingContext2D.getImageData() de la API de Canvas 2D devuelve un objeto ImageData que representa los datos de píxeles subyacentes para el área del lienzo denotada por el rectángulo que comienza en (sx, sy) y tiene un ancho de sw y una altura de sh. Este método no se ve afectado por la matriz de transformación de la lona.

+ +

Los píxeles fuera del área del lienzo están presentes como valores negros transparentes en los datos de imagen devueltos.

+ +

 

+ +

Sintaxis

+ +
ImageData ctx.getImageData(sx, sy, sw, sh);
+
+ +

Parámetros

+ +
+
sx
+
La coordenada 'x' de la esquina superior izquierda del rectángulo del que se extraerán los datos de imagen.
+
sy
+
La coordenada 'y' de la esquina superior izquierda del rectángulo del que se extraerá el ImageData.
+
sw
+
El ancho del rectángulo del que se extraerán los datos de la imagen.
+
sh
+
La altura del rectángulo del que se extraerán los datos de la imagen.
+
+ +

Valor de retorno

+ +

An ImageData object containing the image data for the given rectangle of the canvas.

+ +

Errores cometidos

+ +
+
IndexSizeError
+
Lanzado si cualquiera de los argumentos de anchura o altura es cero.
+
+ +

Ejemplos

+ +

Usando el método getImageData

+ +

Esto es sólo un simple fragmento de código que utiliza el método getImageData. Para obtener más información, consulte Manipulación de píxeles con Canvas y el objeto ImageData.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

+ +

Véase también

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

La interfaz CanvasRenderingContext2D proporciona el contexto de renderizado 2D para la superficie de dibujo de un elemento {{ HTMLElement("canvas") }}.

+ +

Para obtener un objeto de esta interfaz, llama a {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} en un <canvas>, proporcionando "2d" como argumento:

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

Una vez que tengas el contexto de renderizado 2D para un canvas, podrás dibujar en ella. Por ejemplo:

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

Mira las propiedades y métodos en la barra lateral. El tutorial de canvas tiene más información, ejemplos y recursos también.

+ +

Dibujando rectángulos

+ +

Hay 3 métodos que inmediatamente dibujan rectángulos en el bitmap.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Establece todos los píxeles del rectangulo definido por los puntos (x, y) y tamaños (ancho, alto) a negro transparente, borrando cualquier contenido previo.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Dibuja un rectángulo relleno en la posición (x, y) cuyo tamaño está determinado por la anchura y la altura.
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Dibuja un rectángulo que tiene como posición inicial (x, y) con un ancho w y altura h sobre el canvas, utilizando el estilo de trazo actual.
+
+ +

Dibujando texto

+ +

Los siguientes métodos  se proporcionan para dibujar texto. Mira también el objeto {{domxref("TextMetrics")}} para propiedades de texto.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Dibuja (llena) un texto dado en una posición (x, y) dada.
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Dibuja (trazas) un texto dado en una posición (x, y) dada.
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Devuelve el objeto {{domxref("TextMetrics")}}.
+
+ +

Los estilos de línea

+ +

Los siguientes métodos y propiedades controlan como las líneas son dibujadas.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Ancho de líneas. Por defecto 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Tipo de terminaciones en el final de las líneas. Posibles valores: butt (defecto), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Define el tipo de esquinas donde dos líneas se encuentran. Pislbes valores: round, bevel, miter (defecto).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Relación límite angular. Defecto 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Devuelve la matriz patrón de trazos actual que contiene un número de par de números no negativos.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Establece el patrón de trazos linea actual.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Especifica donde inicia una gama de instrumentos en una línea.
+
+ +

Estilos de texto

+ +

Las siguientes propiedades control como el texto es presentado.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Ajuste de fuente. Valor por defecto 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).
+
+ +

Estilo del relleno y de los bordes

+ +

Fill styling es utilizado para estilizar los colores del relleno y los bordes de las  formas.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Utilizado para dar color al relleno de las formas. Color por defecto #000 (negro).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Utilizado para dar color al borde de las formas. Color por defecto #000 (negro)..
+
+ +

Degradados y patrones

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

Sombras

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Especifica el efecto de desenfoque. Predeterminado 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Color de la sombra. Predeterminado totalmente transparente negro.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Distancia horizontal del desplazamiento de la sombra. Predeterminado 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Distancia vertical del desplazamiento de la sombra. Predeterminado 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/es/web/api/canvasrenderingcontext2d/linecap/index.html b/files/es/web/api/canvasrenderingcontext2d/linecap/index.html new file mode 100644 index 0000000000..e61f3c1465 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/linecap/index.html @@ -0,0 +1,131 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +
{{APIRef}}
+ +

La propiedad CanvasRenderingContext2D.lineCap del API Canvas 2D determina la forma usada para dibujar los puntos finales de las líneas.

+ +
+

Nota: La líneas se puede dibujar con los métodos {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, y {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.

+
+ +

Sintaxis

+ +
ctx.lineCap = "butt" || "round" || "square";
+
+ +

Opciones

+ +
+
"butt"
+
Los finales de las líneas son recortados. Valor por defecto.
+
"round"
+
Los finales de las líneas son redondeados.
+
"square"
+
Los finales de líneas son recortados al agregar un cuadrado de ancho y altura igual que el grosor de línea.
+
+ +

Ejemplos

+ +

Cambiando los finales de línea

+ +

En este ejemplo se redondean los puntos finales de una línea recta.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

Result

+ +

{{ EmbedLiveSample('Changing_the_shape_of_line_caps', 700, 180) }}

+ +

Comparando los finales de línea

+ +

En este ejemplo se dibujan 3 líneas, cada una con un valor distinto de la propiedad lineCap. Se agregaron dos guías para resaltar las diferencias entre las tres líneas. Cada una de estas líneas empiezan y terminan en estas guías.

+ +

La línea de la izquiera usa la opción por defecto "butt". Esta es dibujada completamente al ras de las líneas de guía. La segunda esta configurada para usar la opción "round. Esta agrega un semicírculo al final que tiene un radio de la mitad del grosor de línea. La línea de la derecha use la opción "square". Esta agrega un cuadrado con ancho y altura de la mitad del grosor de línea.

+ + + +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+const lineCap = ['butt', 'round', 'square'];
+
+// Draw guides
+ctx.strokeStyle = '#09f';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.lineTo(140, 10);
+ctx.moveTo(10, 140);
+ctx.lineTo(140, 140);
+ctx.stroke();
+
+// Draw lines
+ctx.strokeStyle = 'black';
+for (let i = 0; i < lineCap.length; i++) {
+  ctx.lineWidth = 15;
+  ctx.lineCap = lineCap[i];
+  ctx.beginPath();
+  ctx.moveTo(25 + i * 50, 10);
+  ctx.lineTo(25 + i * 50, 140);
+  ctx.stroke();
+}
+
+ +

{{EmbedLiveSample("Comparison_of_line_caps", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

Especificaciones

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

Compatibilidad de navegador.

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

+ + + + + +

Ver también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/rotate/index.html b/files/es/web/api/canvasrenderingcontext2d/rotate/index.html new file mode 100644 index 0000000000..009b280c4c --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/rotate/index.html @@ -0,0 +1,137 @@ +--- +title: CanvasRenderingContext2D.rotate() +slug: Web/API/CanvasRenderingContext2D/rotate +tags: + - metodo +translation_of: Web/API/CanvasRenderingContext2D/rotate +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D.rotate() de la API Canvas 2D añade una rotación a la matriz de transformación.

+ +

Sintaxis

+ +
void ctx.rotate(angulo);
+
+ +

+ +

Parámetros

+ +
+
angulo
+
El ángulo de rotación en radianes, en sentido horario. Se puede usar grado* Math.PI / 180 si se quiere calcular a partir de un valor de grado sexagesimal.
+
+ +

El centro de rotación es siempre el orígen del canvas. Para cambiar el centro de rotación hay que mover el canvas mediante el método {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.

+ +

Ejemplos

+ +

Rotando una figura

+ +

En este ejemplo se rota un rectangulo 45º. Nótese que el centro de rotación es la esquina superior izquierda del canvas y no un punto cualquiera relativo a alguna figura.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// origen del punto de transformación
+ctx.arc(0, 0, 5, 0, 2 * Math.PI);
+ctx.fillStyle = 'blue';
+ctx.fill();
+
+// rectángulo sin rotar
+ctx.fillStyle = 'gray';
+ctx.fillRect(100, 0, 80, 20);
+
+// rectángulo rotado 45º
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillStyle = 'red';
+ctx.fillRect(100, 0, 80, 20);
+
+// se reinicia la matriz de transformación a la matriz identidad
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Resultado

+ +

El centro de rotación es azul. El rectángulo no rotado es gris, y el rectángulo rotado es rojo.

+ +

{{ EmbedLiveSample('Rotating_a_shape', 700, 180) }}

+ +

Rotando una figura por su centro

+ +

Este ejemplo rota una figura alrededor del punto central de ésta. Para realizarlo se aplican estos pasos a la matriz de transformación:

+ +
    +
  1. Primero, {{domxref("CanvasRenderingContext2D.translate()", "translate()")}} mueve el orígen de la matriz hacia el centro de la figura.
    2. +
  2. rotate() rota la matriz la cantidad deseada.
    3. +
  3. Finalmente, translate() mueve el origen de la matriz de nuevo a su punto inicial. Esto se realiza utilizando los valores del centro de coordenadas de la figura en dirección negativa.
    4. +
+ +

HTML

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

JavaScript

+ +

La figura es un rectángulo con su esquina en (80, 60), un ancho de 140 y un alto de 30. El centro de la coordenada horizontal está en  (80 + 140 / 2) = 150. Su centro en la coordenada vertical será  (60 + 30 / 2) = 75. Por tanto, el punto central está en (150, 75).

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// rectángulo sin rotar
+ctx.fillStyle = 'gray';
+ctx.fillRect(80, 60, 140, 30);
+
+// Matriz de transformación
+ctx.translate(150, 75);
+ctx.rotate(Math.PI / 2);
+ctx.translate(-150, -75);
+
+// rectángulo rotado
+ctx.fillStyle = 'red';
+ctx.fillRect(80, 60, 140, 30);
+
+ +

Resultado

+ +

El rectángulo no rotado es gris, y el rectángulo rotado es rojo.

+ +

{{ EmbedLiveSample('Rotating_a_shape_around_its_center', 700, 180) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónStatusComentarios
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con exploradores

+ + + +

{{Compat("api.CanvasRenderingContext2D.rotate")}}

+ +

Véase también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/save/index.html b/files/es/web/api/canvasrenderingcontext2d/save/index.html new file mode 100644 index 0000000000..6351bb3ad1 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/save/index.html @@ -0,0 +1,91 @@ +--- +title: CanvasRenderingContext2D.save() +slug: Web/API/CanvasRenderingContext2D/save +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Referencia + - metodo +translation_of: Web/API/CanvasRenderingContext2D/save +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D.save() del API Canvas 2D guarda el estado completo del canvas añadiendo el estado actual a una pila.

+ +

El estado del dibujo

+ +

El estado del dibujo que se almacena en una pila consiste en los siguientes elementos:

+ + + +

Sintaxis

+ +
void ctx.save();
+ +

Ejemplos

+ +

Guardando el estado del dibujo

+ +

Este ejemplo usa el método save() para guardar el estado por defecto y el método restore() para restaurarlo luego, de tal manera que luego se puede dibujar el segundo rectángulo con el estado por defecto.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Guardar el estado por defecto
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Restaurar el estado por defecto
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad con exploradores

+ + + +

{{Compat("api.CanvasRenderingContext2D.save")}}

+ +

Véase también

+ + diff --git a/files/es/web/api/childnode/after/index.html b/files/es/web/api/childnode/after/index.html new file mode 100644 index 0000000000..b6512e73c0 --- /dev/null +++ b/files/es/web/api/childnode/after/index.html @@ -0,0 +1,181 @@ +--- +title: ChildNode.after() +slug: Web/API/ChildNode/after +tags: + - API + - DOM + - Experimental + - Nodo + - Referencia + - metodo +translation_of: Web/API/ChildNode/after +--- +

{{APIRef("DOM")}} {{SeeCompatTable}}
+ El método ChildNode.after() inserta un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} en la lista de hijos de este ChildNode del padre, justo después de este ChildNode. Los objetos {{domxref("DOMString")}} se insertan como nodos equivalentes {{domxref("Text")}}.

+ +

Sintaxis

+ +
[Throws, Unscopable]
+void ChildNode.after((Node o DOMString)... nodes);
+
+ +

Parámetros

+ +
+
nodes
+
Un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} para insertar.
+
+ +

Excepciones

+ + + +

Ejemplos

+ +

Insertando un elemento

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.after(span);
+
+console.log(parent.outerHTML);
+// "<div><p></p><span></span></div>"
+
+ +

Insertando texto

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.after("Text");
+
+console.log(parent.outerHTML);
+// "<div><p></p>Text</div>"
+ +

Insertando un elemento y texto

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.after(span, "Text");
+
+console.log(parent.outerHTML);
+// "<div><p></p><span></span>Text</div>"
+ +

ChildNode.after() es unscopable

+ +

El método after() no está incluido en la declaración with.Consulte {{jsxref("Symbol.unscopables")}} para obtener más información.

+ +
with(node) {
+  after("foo");
+}
+// ReferenceError: after is not defined
+ +

Polyfill

+ +

Puedes usar un polyfill del método after() en Internet Explorer 9 y superiores con el siguente código:

+ +
// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('after')) {
+      return;
+    }
+    Object.defineProperty(item, 'after', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function after() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.parentNode.insertBefore(docFrag, this.nextSibling);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
+ +

Otro polyfill

+ +
// from: https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js
+
+(function(x){
+ var o=x.prototype,p='after';
+ if(!o[p]){
+    o[p]=function(){
+     var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document;
+     if(p!==null){
+        while(i<l){
+         e=m[i];
+         if(e instanceof n){
+            t=t.nextSibling;
+            if(t!==null){
+                p.insertBefore(e,t);
+            }else{
+                p.appendChild(e);
+            };
+         }else{
+            p.appendChild(d.createTextNode(s(e)));
+         };
+         ++i;
+        };
+     };
+    };
+ };
+})(Element);
+
+
+
+/*
+minified:
+
+(function(x){
+ var o=x.prototype;
+ o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}});
+}(Element));
+*/
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.ChildNode.after")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/childnode/before/index.html b/files/es/web/api/childnode/before/index.html new file mode 100644 index 0000000000..b7ac4e3835 --- /dev/null +++ b/files/es/web/api/childnode/before/index.html @@ -0,0 +1,175 @@ +--- +title: ChildNode.before() +slug: Web/API/ChildNode/before +tags: + - API + - DOM + - Experimental + - Nodo + - Referencia + - metodo +translation_of: Web/API/ChildNode/before +--- +

+ +
+
 
+
+ +
+
 
+
+ +
+
{{APIRef ( "DOM")}} {{SeeCompatTable}}
+
+El método ChildNode.before inserta un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} en la lista de hijos de este ChildNode del padre, justo antes de este ChildNode. Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.
+
+ +

Síntasix

+ +
[Throws, Unscopable]
+void ChildNode.before((Node or DOMString)... nodes);
+
+ +

Parámetros

+ +
+
nodos
+
Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para insertar.
+
+ +

Excepciones

+ + + +

Ejemplos

+ +

Insertando un elemento

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span);
+
+console.log(parent.outerHTML);
+// "<div><span></span><p></p></div>"
+
+ +

Insertando texto

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.before("Text");
+
+console.log(parent.outerHTML);
+// "<div>Text<p></p></div>"
+ +

Insertando un elemento y texto

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span, "Text");
+
+console.log(parent.outerHTML);
+// "<div><span></span>Text<p></p></div>"
+ +

ChildNode.before() es unscopable

+ +

El método before () no está definido en la declaración with. Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.

+ +
with(node) {
+  before("foo");
+}
+// ReferenceError: before is not defined
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte  Básico{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/childnode/index.html b/files/es/web/api/childnode/index.html new file mode 100644 index 0000000000..f354d73bd1 --- /dev/null +++ b/files/es/web/api/childnode/index.html @@ -0,0 +1,180 @@ +--- +title: ChildNode +slug: Web/API/ChildNode +tags: + - API + - DOM + - Experimental + - Interface + - NeedsTranslation + - Node + - TopicStub +translation_of: Web/API/ChildNode +--- +
{{APIRef("DOM")}}
+ +

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

+ +

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

+ +

Properties

+ +

There are neither inherited, nor specific properties.

+ +

Methods

+ +

There are no inherited methods.

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

Specifications

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

Polyfill

+ +

External on github: childNode.js

+ +

Browser compatibility

+ +

{{ CompatibilityTable }}

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

See also

+ + diff --git a/files/es/web/api/childnode/remove/index.html b/files/es/web/api/childnode/remove/index.html new file mode 100644 index 0000000000..90aab3d869 --- /dev/null +++ b/files/es/web/api/childnode/remove/index.html @@ -0,0 +1,94 @@ +--- +title: ChildNode.remove() +slug: Web/API/ChildNode/remove +tags: + - API + - ChildNode + - DOM + - Experimental + - metodo +translation_of: Web/API/ChildNode/remove +--- +

{{APIRef ( "DOM")}}
+ El método ChildNode.remove ( ) elimina el objeto del árbol al que pertenece.

+ +

Sintaxis

+ +
node.remove();
+
+ +

Ejemplo

+ +

Utilizando remove()

+ +
<div id="div-01">Este es el div-01</div>
+<div id="div-02">Este es el div-02</div>
+<div id="div-03">Este es el div-03</div>
+
+ +
var el = document.getElementById('div-02');
+el.nextElementSibling.remove(); // Elimina el div con el id 'div-03'
+
+ +

ChildNode.remove() es unscopable

+ +

El método remove() no está definido en el contexto de las declaración with. Consulte {{jsxref ("Symbol.unscopables")}} para obtener más información.

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

Polyfill

+ +

El código a continuación es un polyfill del método remove() para Internet Explorer 9 y superiores:

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

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Definición inicial.
+ +

Compatibilidad en los navegadores

+ +
+

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/childnode/replacewith/index.html b/files/es/web/api/childnode/replacewith/index.html new file mode 100644 index 0000000000..32f78b7e4e --- /dev/null +++ b/files/es/web/api/childnode/replacewith/index.html @@ -0,0 +1,141 @@ +--- +title: ChildNode.replaceWith() +slug: Web/API/ChildNode/replaceWith +tags: + - API + - DOM + - Experimental + - Nodo + - Referencia + - metodo +translation_of: Web/API/ChildNode/replaceWith +--- +

{{APIRef ( "DOM")}} {{SeeCompatTable}}
+
+ El método ChildNode.replaceWith () reemplaza este ChildNode en la lista de hijos de su padre con un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}}. Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.

+ +

 

+ +

Síntasix

+ +

 

+ +
[Throws, Unscopable]
+void ChildNode.replaceWith((Node or DOMString)... nodes);
+
+ +

Parámetros

+ +
+
nodos
+
Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para reemplazar.
+
+ +

Excepciones

+ + + +

Ejemplos

+ +

Utilizando replaceWith()

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.replaceWith(span);
+
+console.log(parent.outerHTML);
+// "<div><span></span></div>"
+
+ +

ChildNode.replaceWith() es unscopable

+ +

El método replaceWith () no está incluido en la declaracion with. Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.

+ +
with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith is not defined
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Mobile
Soporte Básico{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatOperaMobile(39)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
+
+ +

Ver También

+ + diff --git a/files/es/web/api/clipboardevent/clipboarddata/index.html b/files/es/web/api/clipboardevent/clipboarddata/index.html new file mode 100644 index 0000000000..547b2d1f9e --- /dev/null +++ b/files/es/web/api/clipboardevent/clipboarddata/index.html @@ -0,0 +1,58 @@ +--- +title: ClipboardEvent.clipboardData +slug: Web/API/ClipboardEvent/clipboardData +tags: + - API + - Clipboard API + - Experimental + - Portapapeles + - Solo lectura + - metodo +translation_of: Web/API/ClipboardEvent/clipboardData +--- +

{{ apiref("Clipboard API") }} {{SeeCompatTable}}

+ +

La propiedad ClipboardEvent.clipboardData, del tipo {{domxref("DataTransfer")}}, puede ser usuada:

+ + + +

Para más información, mira la documentación de los eventos {{event("cut")}}, {{event("copy")}}, y {{event("paste")}}.

+ +

Sintaxis

+ +
data = ClipboardEvent.clipboardData
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Clipboard API', '#widl-ClipboardEvent-clipboardData', 'ClipboardEvent.clipboardData') }}{{ Spec2('Clipboard API') }}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.ClipboardEvent.clipboardData")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/clipboardevent/index.html b/files/es/web/api/clipboardevent/index.html new file mode 100644 index 0000000000..332846c031 --- /dev/null +++ b/files/es/web/api/clipboardevent/index.html @@ -0,0 +1,67 @@ +--- +title: ClipboardEvent +slug: Web/API/ClipboardEvent +tags: + - API + - Clipboard API + - Event + - Experimental + - Interface + - NeedsTranslation + - TopicStub +translation_of: Web/API/ClipboardEvent +--- +

{{APIRef("Clipboard API")}} {{SeeCompatTable}}

+ +

The ClipboardEvent interface represents events providing information related to modification of the clipboard, that is {{event("cut")}}, {{event("copy")}}, and {{event("paste")}} events.

+ +

Constructor

+ +
+
{{domxref("ClipboardEvent.ClipboardEvent", "ClipboardEvent()")}}
+
Creates a ClipboardEvent event with the given parameters.
+
+ +

Properties

+ +

Also inherits properties from its parent {{domxref("Event")}}.

+ +
+
{{domxref("ClipboardEvent.clipboardData")}} {{readonlyInline}}
+
Is a {{domxref("DataTransfer")}} object containing the data affected by the user-initiated {{event("cut")}}, {{event("copy")}}, or {{event("paste")}} operation, along with its MIME type.
+
+ +

Methods

+ +

No specific methods; inherits methods from its parent {{domxref("Event")}}.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Clipboard API', '#clipboard-event-interfaces', 'ClipboardEvent') }}{{ Spec2('Clipboard API') }}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

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

{{APIRef("Websockets API")}}

+ +

Un CloseEvent se envia a los clientes usando {{Glossary("WebSockets")}} cuando la conexión esta cerrada. Esto se entrega al que escucha indicado por el atributo onclose del objeto WebSocket.

+ +

Constructor

+ +
+
{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
+
Crear un nuevo CloseEvent.
+
+ +

Propiedades

+ +

Esta interface tambien hereda propiedades de su padre, {{domxref("Event")}}.

+ +
+
{{domxref("CloseEvent.code")}} {{readOnlyInline}}
+
Devuelve un unsigned short que contienen el código de cierre enviado por el servidor. Los siguientes valores son los codigos de estado permitidos. Las siguientes definiciones vienen del sitio web de IANA [Ref]. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Status codeNameDescription
0–999Reserved and not used.
1000Cierre NormalCierre normal; La conexion se completo con exito cualquiera sea el proposito para el cual fue creado.
1001Going AwayEl punto final se fue(desaparecio), ya sea por una falla en el servidor o por que el navegador esta navegando fuera de la página que abrio la conexión.
1002Error de ProtocoloEl punto final esta terminando la conexion debido a un error en el protocolo. 
1003Datos no soportadorsLa conexión esta siendo terminada  por que el punto final recibio daros de un tipo que acepta o soportar (por ejemplo, está esperando un solo texto y el punto final recibio datos binarios).
1004Reservado. Un signinficado se podria definir en un futuro.
1005Estado no recibido. Reservado.  Indica que no se proporciono ningún código de estado aunque se esperaba uno.
1006Cierre anormalReservado. Se usa para indicar que una conexion fue cerrada de forma anormal (es decir, sin que se envie un frame cerrado with no close frame being sent) when a status code is expected.
1007Invalid frame payload dataThe endpoint is terminating the connection because a message was received that contained inconsistent data (e.g., non-UTF-8 data within a text message).
1008Violación de politicaThe endpoint is terminating the connection because it received a message that violates its policy. This is a generic status code, used when codes 1003 and 1009 are not suitable.
1009Mensaje muy grandeThe endpoint is terminating the connection because a data frame was received that is too large.
1010Extensión faltante.The client is terminating the connection because it expected the server to negotiate one or more extension, but the server didn't.
1011Error internoThe server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request.
1012Reinicio de servicioEl servidor esta terminado la conexion porque esta reiniciando. [Ref]
1013Trate mas tarde nuevamenteThe server is terminating the connection due to a temporary condition, e.g. it is overloaded and is casting off some of its clients. [Ref]
1014Bad GatewayThe server was acting as a gateway or proxy and received an invalid response from the upstream server. This is similar to 502 HTTP Status Code.
1015TLS SaludoReserved. Indicates that the connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified).
1016–1999Reservado para futuro uso del estandar WebSocket.
2000–2999Reservado para uso de extensiones WebSocket .
3000–3999Available for use by libraries and frameworks. May not be used by applications. Available for registration at the IANA via first-come, first-serve.
4000–4999Disponible para uso de aplicaciones.
+
+
{{domxref("CloseEvent.reason")}} {{readOnlyInline}}
+
Retorna un {{domxref("DOMString")}} indicando la razon por que el servidor cerro la conexión. Esto es especifico para el servidor  y sub-protocolo en particular. 
+
{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}
+
Retorna un {{jsxref("Boolean")}} que indica si o no la conexion fue cerrada limpiamente.
+
+ +

Metodos

+ +

Esta interface tambien hereda metodos de su padre, {{domxref("Event")}}.

+ +
+
{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}
+
Inicializa el valor de un CloseEvent creado. Si el evento ya ha sido enviado, este método no funciona. No use más este método, use el {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} constructor en su lugar.
+
+ +

Compatibilidad entre Navegadores 

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("8.0")}}[1]
+ {{CompatGeckoDesktop("12.0")}}[2]		10{{CompatUnknown}}{{CompatUnknown}}
initCloseEvent() {{Non-standard_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("8.0")}}
+ {{CompatNo}} 41.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
initCloseEvent() {{Non-standard_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("8.0")}}
+ {{CompatNo}} 41.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Prior to Gecko 8.0 {{geckoRelease("8.0")}}, Gecko sent the WebSocket {{event("close")}} event to the listener as a simple event. Support for CloseEvent was implemented in Gecko 8.0.

+ +

[2] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko reported the close code CLOSE_NORMAL when the channel was closed due to an unexpected error, or if it was closed due to an error condition that the specification doesn't cover. Now CLOSE_GOING_AWAY is reported instead.

+ +

Ver tambien

+ + diff --git a/files/es/web/api/comment/index.html b/files/es/web/api/comment/index.html new file mode 100644 index 0000000000..b1c6a89de9 --- /dev/null +++ b/files/es/web/api/comment/index.html @@ -0,0 +1,75 @@ +--- +title: Comment +slug: Web/API/Comment +tags: + - API + - DOM + - Referências + - comentários +translation_of: Web/API/Comment +--- +
{{ ApiRef("DOM") }}
+ +

La interfaz Comment representa las anotaciones y comentarios dentro del código fuente; aunque generalmente no se muestran visualmente en el navegador, dichos comentarios están disponibles para ser leídos en la vista de código.
+ Los comentarios se representan en HTML y XML como contenido entre '<!--' y '-->'. En XML, la secuencia de caracteres '--' no se puede usar dentro de un comentario.

+ +

{{InheritanceDiagram}}

+ +

Propiedades

+ +

Esta interfaz no tiene ninguna propiedad específica, pero hereda las de su padre,{{domxref("CharacterData")}}, e indirectamente los de {{domxref("Node")}}.

+ +

Constructor

+ +
+
{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}
+
Devuelve un objeto Comment con el contenido del comentario como parámetro.
+
+ +

Métodos

+ +

Esta interfaz no tiene ninguna propiedad específica, pero hereda las de su padre,{{domxref("CharacterData")}}, e indirectamente los de {{domxref("Node")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#comment', 'Comment')}}{{Spec2('DOM WHATWG')}}Agregado el constructor.
{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM3 Core')}}Sin cambios de {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM2 Core')}}Sin cambios de {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ + + +

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

+ +

Lea también

+ + diff --git a/files/es/web/api/console/assert/index.html b/files/es/web/api/console/assert/index.html new file mode 100644 index 0000000000..b57d21a2aa --- /dev/null +++ b/files/es/web/api/console/assert/index.html @@ -0,0 +1,140 @@ +--- +title: Console.assert() +slug: Web/API/console/assert +tags: + - API + - Consola + - DOM + - Debug + - Debugging + - Gecko DOM Referencia + - Métodos + - afirmación + - consola web +translation_of: Web/API/console/assert +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Aparece un mensaje de error en la consola si la afirmación es falsa. Si la afirmación es verdadera, no aparecerá nada.

+ +

{{AvailableInWorkers}}

+ +
+

Nota: El método console.assert() se implementa de diferente manera en Node.js que el mismo método disponible en los navegadores.

+ +

En los navegadores, llamando console.assert() con una falsa afirmación hará que el message se imprima por consola sin interrumpir la ejecución del código posterior. En Node.js, sin embargo, una falsa afirmación lanzará un AssertionError.

+
+ +

Sintaxis

+ +
console.assert(afirmación, obj1 [, obj2, ..., objN]);
+console.assert(afirmación, msg [, subst1, ..., substN]);
+
+ +

Parámetros

+ +
+
afirmación
+
Cualquier expresión booleana.Si la afirmación es falsa, el mensaje aparecerá en consola.
+
obj1 ... objN
+
Salida de una lista de objetos de  JavaScript. Las representaciones de cadena de cada uno de estos objetos se añaden juntos en el orden y salida indicados.
+
msg
+
Una cadena de JavaScript que contiene cero o más cadenas de sustitución.
+
subst1 ... substN
+
Objetos de JavaScript con el que reemplaza las cadenas dentro de msg. Esto te da más control sobre el formato de salida.
+
+ +

Para más detalles ver Salida de texto a la consola en la documentación de {{domxref("console")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName("Console API", "#consoleassertexpression-object", "console.assert()")}}{{Spec2("Console API")}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("28.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Disponible en workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterìsticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("28.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Disponible en workers{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

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

Registra el número de veces que se llama a count(). Esta función toma como argumento opcional una etiqueta.

+ +

{{AvailableInWorkers}}

+ +

Si la etiqueta es colocada, esta funcion muestra el numeros de veces que count() ha sido utilizada con la misma etiqueta.

+ +

Si la etiqueta es omitida, la funcion registra el numero de veces  que  count() fue llamada en esta línea en particular.

+ +

Por ejemplo, en este código:

+ +
var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+ +

La salida de la consola va a mostrar algo como esto:

+ +
"<no label>: 1"
+"<no label>: 2"
+"<no label>: 3"
+"<no label>: 1"
+
+ +

Note que al final de la linea de la salida: La llamada separada count() en la linea 11 es tratada como un evento independiente.

+ +

Si pasamos la variable user como etiqueta  en la primera llamada a count()  y  la cadena "alice" en la segunda llamada:

+ +
var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");
+ +

Vamos a ver una salida como esta:

+ +
"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"
+ +

Ahora tenemos diferentes contadores según el valor de la etiqueta.  Al coincidir la etiqueta "alice" en la línea 11 con el valor de user dos veces, no se considera un evento independiente.

+ +

Sintaxis

+ +
console.count([label]);
+
+ +

Parámetros

+ +
+
label
+
Una cadena. Si se proporciona, la salida de count() indica el número de veces que fue llamada con la etiqueta. Si se omite, la salida de count() indica el número de veces que fue llamada en esa misma línea.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#count", "console.count()")}}{{Spec2("Console API")}}Definición inicial
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("30.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Available in workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteriticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("30.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/console/dir/index.html b/files/es/web/api/console/dir/index.html new file mode 100644 index 0000000000..6faa810f7d --- /dev/null +++ b/files/es/web/api/console/dir/index.html @@ -0,0 +1,119 @@ +--- +title: Console.dir() +slug: Web/API/Console/dir +translation_of: Web/API/Console/dir +--- +

{{APIRef("Console API")}}

+ +

El método dir() de {{domxref("Console")}} despliega una lista interactiva de las propiedades del objeto JavaScript especificado. El resultado es presentado como un listado jerárquico con triángulos de despliegue que te dejan ver los contenidos de los objetos hijos.

+ +

Dicho de otra manera, console.dir() es la manera de ver todas las propiedades de un objeto JavaScript específicado por consola, mediante la cual el desarrollador puede facilmente obtener las propiedades del objeto.

+ +

{{AvailableInWorkers}}

+ +

console-dir.png

+ +

Sintaxis

+ +
console.dir(objeto);
+
+ +

Parámetros

+ +
+
objeto
+
Un objeto JavaScript cuyas propiedades deben ser mostradas como resultado.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("Console API", "#consoledirobject", "console.dir()")}}{{Spec2("Console API")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("8.0")}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/console/dirxml/index.html b/files/es/web/api/console/dirxml/index.html new file mode 100644 index 0000000000..c4d6b529f5 --- /dev/null +++ b/files/es/web/api/console/dirxml/index.html @@ -0,0 +1,103 @@ +--- +title: Console.dirxml() +slug: Web/API/Console/dirxml +tags: + - API + - DOM + - Depuración + - metodo +translation_of: Web/API/Console/dirxml +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Muestra en consola un árbol interactivo de los elementos descendientes del elemento XML/HTML especificado. Si no es posible mostrarlo como un elemento, la vista de objeto se muestra en su lugar. La salida se presenta como una lista jerárquica de nodos expandibles que le permiten ver el contenido de los nodos hijos.

+ +

Sintaxis

+ +
console.dirxml(objeto);
+
+ +

Parámetros

+ +
+
objeto
+
Un objeto JavaScript cuyas propiedades deben ser mostradas.
+
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/console/error/index.html b/files/es/web/api/console/error/index.html new file mode 100644 index 0000000000..41efb36598 --- /dev/null +++ b/files/es/web/api/console/error/index.html @@ -0,0 +1,179 @@ +--- +title: console.error() +slug: Web/API/Console/error +tags: + - API + - DOM + - Depurando + - Desarrollo web + - consola web + - metodo +translation_of: Web/API/Console/error +--- +
{{APIRef("Console API")}}
+ +

Muestra un mensaje de error en la Consola Web.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

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

Nota: console.exception() es un alias de console.error(); son funcionalmente identicas.

+
+ +

Parametros

+ +
+
obj1 ... objN
+
+

Una lista de objetos JavaScript para mostrar. Las representaciones en texto de cada uno de los objetos se agregan y muestran juntas (al final una tras otra), en el orden listado.

+
+
msg
+
Un texto (mensaje) conteniendo cero o más sustituciones de cadenas (sustituciones de strings). 
+
subst1 ... substN
+
Objetos JavaScript con la sustitución a reemplazar dentro del texto (msg). Esto brinda control adicional en el formato de salida del texto. 
+
+ +

Vea "Mostrando texto en la consola" en la documentacion de {{domxref("console")}} para mas detalles.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Console API", "#error", "console.error()")}}{{Spec2("Console API")}}Definicion inicial.
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Substitucion de cadenas{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
console.exception alias{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("28.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Disponible en workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Substitucion de cadenas{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
console.exception alias{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("28.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Disponible en workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vea también

+ + diff --git a/files/es/web/api/console/index.html b/files/es/web/api/console/index.html new file mode 100644 index 0000000000..9c1dd3fcba --- /dev/null +++ b/files/es/web/api/console/index.html @@ -0,0 +1,254 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - DOM + - Debugging + - Depuración + - NeedsCompatTable + - NeedsTranslation + - Reference + - TopicStub + - consola web + - web console +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

El objeto Console provee acceso a la consola de depuración de los navegadores (e.j., la Consola Web en Firefox). Los detalles de como funciona varían de navegador en navegador, pero hay un conjunto de características que de facto son generalmente proporcionadas.

+ +

Console puede ser accedido desde cualquier método global, {{domxref("Window")}} en el ámbito de navegación, {{domxref("WorkerGlobalScope")}}, y sus variantes especificas de worker.

+ +

Esta página documenta los {{anch("Métodos")}} disponibles en el objeto console y da algunos ejemplos de {{anch("uso")}}.

+ +

{{AvailableInWorkers}}

+ +

Métodos

+ +
+
{{domxref("Console.assert()")}}
+
Registra un mensaje y envía una traza de error a la consola si el primer argumento es false.
+
{{domxref("Console.count()")}}
+
Registra el numero de veces que esta línea ha sido llamada con etiqueta dada.
+
{{domxref("Console.debug()")}} 
+
Registra un mensaje con el nivel de"debug". +
Note: A partir de Chromium 58 este método solo aparece en las consolas de navegadores Chromium cuando el nivel "Verbose" está seleccionado.
+
+
{{domxref("Console.dir()")}}
+
Muestra un listado interactivo de las propiedades de un objeto JavaScript específico. Esta lista le permite examinar el contenido de los objetos hijos.
+
{{domxref("Console.dirxml()")}}
+
+

Muestra una representación en forma de árbol de un elemento XML/HTML si es posible o la vista del objeto JavaScript si no es posible.

+
+
{{domxref("Console.error()")}}
+
Muestra un mensaje de error. Se pueden utilizar sustituciones de cadena y argumentos adicionales con este método.
+
{{domxref("Console._exception()")}}
+
Es un alias de error().
+
{{domxref("Console.group()")}}
+
Crea un nuevo grupo, indentando todos los mensajes subsecuentes en un nuevo nivel. Para retroceder un nivel, se utiliza groupEnd().
+
{{domxref("Console.groupCollapsed()")}}
+
Crea un nuevo grupo, indentando todos los mensajes subsecuentes en un nuevo nivel. A diferencia de group(), inicia con la línea de grupo colapsada, requiriendo el uso de un botón de apertura para expandir el grupo. Para retroceder un nivel, se utiliza groupEnd().
+
{{domxref("Console.groupEnd()")}}
+
Finaliza el grupo actual.
+
{{domxref("Console.info()")}}
+
Muestra un mensaje de información en la Consola Web. Se puede utilizar sustitución de cadena y argumentos adicionales con este método.
+
{{domxref("Console.log()")}}
+
Para mensajes generales de registro de información. Se puede utilizar sustitución de cadena y argumentos adicionales con este método.
+
{{domxref("Console.profile()")}}
+
Inicia el registro de un perfil de rendimiento (Firefox performance tool). Se puede especificar un nombre opcional para el perfil.
+
{{domxref("Console.profileEnd()")}}
+
Detiene el perfil. Usted puede revisar el perfil resultante en la herramienta de desempeño del navegador (por ejemplo, la herramienta de rendimiento de Firefox).
+
{{domxref("Console.table()")}}
+
Muestra datos tabulares en forma de una tabla.
+
{{domxref("Console.time()")}}
+
Inicia un temporizador con un nombre específico como parámetro. Hasta 10.000 temporizadores simultáneos pueden ejecutarse en una página determinada.
+
{{domxref("Console.timeEnd()")}}
+
Detiene el temporizador especificado y registra el tiempo transcurrido, en segundos, desde su inicio.
+
{{domxref("Console.timeStamp()")}}
+
Adiciona una marca a las herramientas Timeline o Waterfall del navegador.
+
{{domxref("Console.trace()")}}
+
Muestra una traza de error.
+
{{domxref("Console.warn()")}}
+
Muestra un mensaje de advertencia. Se puede utilizar sustitución de cadena y argumentos adicionales con este método.
+
+ +

Uso

+ +

Enviar texto a la consola

+ +

La característica mas utilizada de la consola es la de mostrar texto y otro datos. Existen cuatro categorías de salida que se pueden generar, utilizando los métodos {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}} y {{domxref("console.error()")}}. Cada uno de estos muestran resultados que se lucen diferentes en el registro y se pueden utilizar los controles de filtro proveidos por el navegador para ver únicamente los tipos de salida de interés.

+ +

Hay dos maneras de usar cada uno de los métodos de salida; se puede ingresar una lisa de objetos de cadena (objectos strings) los cuales serán concatenados en una sola cadena, la cual se mostrará en la consola, o se puede ingresar una lista que contenga ninguna o mas sustituciones de cadena seguida por una lista de objetos con los cuales reemplazarlas.

+ +

Mostrando un solo objeto

+ +

La manera mas simple de utilizar los métodos de registro es mostrar un solo objeto:

+ +
var someObject = { str: "Algún texto", id: 5 };
+console.log(someObject);
+
+ +

La salida se vera parecido a esto:

+ +
[09:27:13.475] ({str:"Algún texto", id:5})
+ +

Mostrando múltiples objetos

+ +

También se pueden mostrar múltiples objetos listándolos y luego llamando el método de registro, de esta forma:

+ +
var car = "Dodge Charger";
+var someObject = {str:"Algún texto", id:5};
+console.info("Mi primer carro fue un ", car, ". El objeto es: ", someObject);
+ +

La salida se verá parecido a esto:

+ +
[09:28:22.711] Mi primer carro fue un Dodge Charger . El objeto es:  ({str:"Algún texto", id:5})
+
+ +

Utilizando sustituciones de cadena

+ +

Gecko 9.0 {{geckoRelease("9.0")}} introdujo soporte para sustituciones de cadena. Cuando se ingresa una caden a uno de los objetos de consola que acepta una cadena, es posible utilizar las siguientes sustituciones de cadena:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Sustitución de cadenaDescripción
%oMuestra un hiper vinculo a un objeto JavaScript. Dando click en el link se abre un inspector.
%d or %iMuestra un entero. El formato de presentación aun no esta soportado.
%sMuestra una cadena.
%fMuestra un valor de punto flotante. El formato de presentación aun no esta soportado.
+ +

Cada uno de estos llama al siguiente argumento de un array declarado en los argumentos. Por ejemplo:

+ +
for (var i=0; i<5; i++) {
+  console.log("Hola, %s. Usted me ha llamado %d veces.", "Bob", i+1);
+}
+
+ +

La salida se verá parecido a esto:

+ +
[13:14:13.481] Hola, Bob. Usted me ha llamado me 1 veces.
+[13:14:13.483] Hola, Bob. Usted me ha llamado 2 veces.
+[13:14:13.485] Hola, Bob. Usted me ha llamado 3 veces.
+[13:14:13.487] Hola, Bob. Usted me ha llamado 4 veces.
+[13:14:13.488] Hola, Bob. Usted me ha llamado 5 veces.
+
+ +

Dando estilo a la salida de la consola.

+ +

Puedes usar la directiva "%c" para aplicar un estilo CSS a la salida de la consola:

+ +
console.log("%cMy stylish message", "color: red; font-style: italic");
+ +
+ +
{{h3_gecko_minversion("Usando grupos en la consola", "9.0")}}
+ +

Puedes usar grupos anidades para ayudar a organizar la salida visualmente combinando material relacionado. Para crear un nuevo bloque anidado, se debe usar console.group(). El método console.groupCollapsed() es similar, pero crea el nuevo bloque colapsado, requiriendo el uso de un "botón de mostrar" para abrirlo y leerlo.

+ +
Nota: Grupos colapsados no están soportados en Gecko todavía,  el método groupCollapsed() es el mismo que group() en este momento.
+ +

Para editar el grupo actual, simplemente usa console.groupEnd().

+ +

Por ejemplo con el siguiente código:

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

La salida se verá así:

+ +

nesting.png

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

En orden para calcular la duración de una operación específica, Geco 10 introdujo soporte de contadores (timers del inglés) en el objeto console. Para iniciar un contador, usa el método console.time() , pasándole como parámetro un nombre. Para detener un contador, y obtener el tiempo transcurrido en milisegúndos, solo usa el método console.timeEnd(), nuevamente pasándole el nombre del contador como parámetro. Se pueden ejecutar hasta 10000 (diez mil) contadores simultáneamente en una página.

+ +

Por ejemplo, teniendo el siguiente código:

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

Registrará el tiempo necesitado por el usuario para descartar el cuadro de alerta (alert box del inglés):

+ +

timerresult.png

+ +

Tener presente de que los nombres de los contadores son mostrados cuando el contador inicia y cuando es detenido (respectivamente).

+ +
Nota: Es importante saber que si estas usando esto para registrar el tiempo del trafico de red, el contador reportará el tiempo total para la transacción, mientras que el tiempo listado en el panel de conexiones o panel de red (network panel del inglés) es solo la cantidad de tiempo requerida para la cabecera (transaction header). Si en cambio tienes el registro de cuerpo hablitado (response body loggin del inglés), el tiempo listado para la respuesta de la cabecera y el cuerpo combinados debiera coincidir con lo que vez en la salida de la consola. 
+ +

Rastro de pilas (Stack traces)

+ +

El objeto consola tambien soporta la salida de una traza de pila (stack trace del inglés); Esto te mostrará  la ruta de llamadas tomadas hasta alcanzar el punto de tu llamada {{domxref("console.trace()")}}. Dado un código como el siguiente:

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

La salida en la consola se verá como esto:

+ +

+ +

Especificación

+ +

Objeto API Console

+ +

Notas

+ + + +

Ver tambien

+ + + +

Otras implementaciones

+ + diff --git a/files/es/web/api/console/info/index.html b/files/es/web/api/console/info/index.html new file mode 100644 index 0000000000..75fb215b47 --- /dev/null +++ b/files/es/web/api/console/info/index.html @@ -0,0 +1,163 @@ +--- +title: Console.info() +slug: Web/API/Console/info +tags: + - API + - Depuración + - Desarrollo web + - NecesidadNavegadorCompatible + - consola web + - metodo +translation_of: Web/API/Console/info +--- +
{{APIRef("Console API")}}
+ +
Emite un mensaje informativo a la Consola Web. En Firefox y Chrome, se muestra un pequeño ícono "i" junto a estos elementos en el registro de la Consola Web.
+ +

 

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

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

Parametros

+ +
+
obj1 ... objN
+
Una lista de objetos JavaScript a la salida. Las representaciones de cadena de cada uno de estos objetos se anexan en el orden y salida.
+
msg
+
Un String en JavaScript contiene cero o mas strings de sustitucion
+
subst1 ... substN
+
Objetos en JavaScript con los que reemplazar cadenas de sustitución dentro del mensaje. Esto le da un control adicional sobre el formato de la salida.
+
+ +

Ver Salida de texto en la consola en la documentacion de  {{domxref("console")}} para detalles.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
Especificacion EstadoComentario
{{SpecName("Console API", "#info", "console.info()")}}{{Spec2("Console API")}}Definicion inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sustitucion de strings{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Icono de informacion{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
Trabajadores Disponibles{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sustitucion de strings{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Trabajadores Disponibles{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vea tambien

+ + diff --git a/files/es/web/api/console/log/index.html b/files/es/web/api/console/log/index.html new file mode 100644 index 0000000000..56e369f395 --- /dev/null +++ b/files/es/web/api/console/log/index.html @@ -0,0 +1,190 @@ +--- +title: Console.log() +slug: Web/API/Console/log +tags: + - API + - Compatibilidad necesaria con navegadores + - Consola + - DOM + - Desarrollo web + - Método(2) + - consola web + - console.dir() + - console.log() + - debuguear + - depurar + - diferencia + - Árbol HTML + - Árbol JSON +translation_of: Web/API/Console/log +--- +
{{APIRef("Console API")}}
+ +
Muestra un mensaje en la consola web (o del intérprete JavaScript).
+ +
 
+ +

{{AvailableInWorkers}}

+ +

Sintaxis

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

Parámetros

+ +
+
obj1 ... objN
+
Una lista de objetos JavaScript para mostrar. Las representaciones en texto de cada uno de los objetos se agregan y muestran juntas (al final una tras otra), en el orden listado.
+
msg
+
Un texto (mensaje) conteniendo cero o más sustituciones de cadenas (sustituciones de strings). 
+
subst1 ... substN
+
Objetos JavaScript con la sustitución a reemplazar dentro del texto (msg). Esto brinda control adicional en el formato de salida del texto. 
+
+ +

Vea "Mostrando texto en la consola" en la documentación de {{domxref("console")}} para mas detalles.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Console API", "#log", "console.log()")}}{{Spec2("Console API")}}Definicion inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
+

Soporte Básico

+ 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Substitución de texto{{CompatVersionUnknown}}
+ {{CompatChrome(28)}}[1]		{{CompatUnknown}}{{CompatGeckoDesktop("9.0")}}10[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Disponible en trabajadores{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Substitución de texto{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Disponible en trabajadores{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Si se le pasa un valor negativo a %d, este será redondeado hacia abajo al entero negativo mas cercano, por ejemplo: -0.1 se convierte en -1.

+ +

[2] %c no esta soportado, %d devolverá 0 cuando no sea un número.

+ +

Diferencia con console.dir()

+ +

Te preguntarás cual es la diferencia entre console.dir() y console.log().

+ +

Una diferencia útil en Chrome es cuando envías elementos DOM a la consola.

+ +

+ +

Importante:

+ + + +

Específicamente, console.log brinda un tratamiento especial a los elementos del DOM, mientras que console.dir no. Esto es útil a menudo cuando intentas ver la representación completa del objeto JavaScript del DOM. 

+ +

Hay mas información en la referencia de la API Console de Chrome acerca de esto y otras funciones.

+ +

Ver también

+ + diff --git a/files/es/web/api/console/tabla/index.html b/files/es/web/api/console/tabla/index.html new file mode 100644 index 0000000000..53f57f5636 --- /dev/null +++ b/files/es/web/api/console/tabla/index.html @@ -0,0 +1,212 @@ +--- +title: Console.table() +slug: Web/API/Console/tabla +tags: + - API + - Consola + - DOM + - Depuración +translation_of: Web/API/Console/table +--- +
{{APIRef("Console API")}}
+ +

Muestra datos tabulares como una tabla.

+ +

Esta función toma un argumento obligatorio: data, que debe ser un array o un objeto, y un parámetro adicional: columns.

+ +

Muestra data como una tabla en la consola. Cada elemento en el array (o propiedad enumerable si data es un objeto) será una fila en la tabla.

+ +

La primera columna de la tabla se identificará como (index). Si data es un array, sus valores serán los índices del array. Si data es un objeto, entonces sus valores serán los nombres de las propiedades. Tenga en cuenta que (en Firefox) console.table está limitado a mostrar 1000 filas (la primera columna es la llamada index).

+ +

{{AvailableInWorkers}}

+ +

Colecciones de tipos primitivos

+ +

El argumento data puede ser un array o un objeto.

+ +
// un array de strings
+
+console.table(["apples", "oranges", "bananas"]);
+ +

+ +
// un objeto cuyas propiedades son strings
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);
+ +

+ +

Colecciones de tipos compuestos

+ +

Si los elementos en el array, o propiedades en el objeto, son también arrays u objetos, sus elementos o propiedades serán enumeradas en la fila, una por columna:

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

Table displaying array of arrays

+ +
// un array de objetos
+
+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]);
+ +

Tenga en cuenta que si el array contiene objetos, las columnas se etiquetarán con el nombre de la propiedad.

+ +

Table displaying array of objects

+ +
// un objeto cuyas propiedades son objetos
+
+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

+ +

Restringiendo las columnas mostradas

+ +

Por defecto, console.table() muestra todos los elementos de cada fila. Puedes emplear el parámetro opcional columns  para seleccionar un subconjunto de columnas que mostrar:

+ +
// an array of objects, logging only 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

+ +

Ordenando columnas

+ +

Se puede ordenar la tabla por una columna en particular pulsando en la etiqueta de dicha columna.

+ +

Sintaxis

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

Parámetros

+ +
+
data
+
La información a mostrar. Puede ser tanto un array como un objeto.
+
columns
+
Un array que contenga los nombres de las columnas a incluir.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Disponible en workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Disponible en workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/console/time/index.html b/files/es/web/api/console/time/index.html new file mode 100644 index 0000000000..b714b4d20c --- /dev/null +++ b/files/es/web/api/console/time/index.html @@ -0,0 +1,122 @@ +--- +title: Console.time() +slug: Web/API/Console/time +translation_of: Web/API/Console/time +--- +
{{APIRef("Console API")}} +

Inicia un temporizador que puede usar para realizar un seguimiento de la duración de una operación. Le da a cada temporizador un nombre único y puede tener hasta 10.000 temporizadores ejecutándose en una página determinada. Cuando llame a {{domxref ("console.timeEnd()")}} con el mismo nombre, el navegador generará el tiempo, en milisegundos, transcurrido desde que se inició el temporizador.

+ +

Consulte Timers en la documentación de {{domxref("console")}} para obtener detalles y ejemplos.

+
+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
console.time(label);
+
+ +

Parametros

+ +
+
label
+
El nombre para dar el nuevo temporizador. Esto identificará el temporizador; use el mismo nombre cuando llame a {{domxref ("console.timeEnd()")}} para detener el temporizador y obtener el tiempo de salida a la consola.
+
+ +

Especificaciones

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

Compatibilidad con exploradores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}11{{CompatVersionUnknown}}4.0
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

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

Detiene un temporizador que haya sido establecido previamente con {{domxref("console.time()")}}.

+ +

Consulte la documentación de Timers  para más detalles y ejemplos.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
console.timeEnd(etiqueta);
+
+ +

Parámetros

+ +
+
etiqueta
+
El nombre del temporizador a detener. Al detenerse, el tiempo transcurrido será mostrado automáticamente en la Consola del Navegador.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("Console API", "#timeend", "console.timeEnd()")}}{{Spec2("Console API")}}Initial definition
+ +

Compatibilidad con Navegadores

+ +
+ + +

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

+
+ +

Relacionados

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

Outputs a stack trace to the Web Console.

+ +

{{AvailableInWorkers}}

+ +

Ver Stack traces en la documentación de {{domxref("console")}} para detalles y ejemplos.

+ +

Sintaxis

+ +
console.trace();
+
+ +

Ejemplo

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

La siguiente indicador será mostrado en la consola:

+ +
bar
+foo
+<anonymous>
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#consoletraceobject--object-", "console.trace()")}}{{Spec2("Console API")}}Initial definition
+ +

Compatibilidad con el navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}11{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Available in workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver tambien

+ + diff --git a/files/es/web/api/console/warn/index.html b/files/es/web/api/console/warn/index.html new file mode 100644 index 0000000000..d16491e7c0 --- /dev/null +++ b/files/es/web/api/console/warn/index.html @@ -0,0 +1,63 @@ +--- +title: Console.warn() +slug: Web/API/Console/warn +tags: + - Desarrollo web +translation_of: Web/API/Console/warn +--- +
{{APIRef("Console API")}}
+ +

Imprime un mensaje de advertencia en la Consola Web.

+ +

{{AvailableInWorkers}}

+ +

{{Note("En Firefox, las advertencias tienen un pequeño icono de signo de exclamación junto a estas en el registro de la Consola Web.")}}

+ +

Sintaxis

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

Parámetros

+ +
+
obj1 ... objN
+
Una lista de objetos JavaScript para ser emitidos en la Consola Web. Las representaciones como string de cada uno de estos objetos son anexados juntos en el orden listado e impresos.
+
msg
+
Un string JavaScript que contiene cero o más strings de sustitución.
+
subst1 ... substN
+
Objetos JavaScript con los cuales se reemplaza los strings de sustitución dentro de msg. Esto le proporciona un control adicional sobre el formato de salida.
+
+ +

Vea Outputting text to the console en la documentación de {{domxref("console")}} para mas detalles.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("Console API", "#warn", "console.warn()")}}{{Spec2("Console API")}}Definición Inicial
+ +

Compatibilidad del Navegador

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/constraint_validation/index.html b/files/es/web/api/constraint_validation/index.html new file mode 100644 index 0000000000..81811b4891 --- /dev/null +++ b/files/es/web/api/constraint_validation/index.html @@ -0,0 +1,154 @@ +--- +title: Constraint validation API +slug: Web/API/Constraint_validation +tags: + - API + - Constraint validation + - Landing + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Constraint_validation +--- +
{{apiref()}}
+ +

The Constraint Validation API enables checking values that users have entered into form controls, before submitting the values to the server.

+ +

Concepts and usage

+ +

Certain HTML form controls, such as {{HTMLElement("input")}}, {{HTMLElement("select")}} and {{HTMLElement("textarea")}}, can restrict the format of allowable values, using attributes like required and pattern to set basic constraints.

+ +

However, you may want to impose more complex constraints, or to provide clearer reporting of validation failures than the defaults. This can be done using the Constraint Validation API.

+ +
+

Note: Client-side constraint validation doesn't remove the need for validation on the server side. Even though client-side validation can prevent many common kinds of invalid values, invalid ones can still be sent by older browsers or by attackers trying to trick your web application. Therefore, you need to also validate input values on the server side, in a way that is consistent with what is done on the client side. Client side validation is a tool for giving quick feedback to the user. You should not rely on it to completely sanitize data received by the server.

+
+ +

Validation of constraints through the constraint validation API is done either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself.

+ +

Constraint validation interfaces

+ +
+
ValidityState
+
The ValidityState interface represents the validity states that a form control element can have, with respect to its defined constraints. Together, they help explain whether and why an element's value fails to validate.
+
invalid event
+
This event type is fired at a form control element if the element does not satisfy its constraints.
+
+ +

Extensions to other interfaces

+ +

The constraint validation API extends the interfaces for the form-associated elements listed below with a number of new properties and methods (elements that can have a form attribute that indicates their form owner):

+ + + +

Properties

+ +
+
validity
+
A read-only properity that returns a ValidityState object, whose properties represent validation errors for the value of that element.
+
validationMessage
+
A read-only property that returns an empty string if the element is not a candidate for constraint validation, or if the element's value is valid. If the element's value is not valid, it returns a localized validation message. This will be displayed in the UI if the element is the only form control with a validity problem; if a custom error message is set using setCustomValidity(), this will be shown.
+
willValidate
+
A read-only boolean property that returns true if the element is a candidate for constraint validation; and false otherwise. Elements with the HTMLObjectElement interface are never candidates for constraint validation. Others may be barred from constraint validation depending on specific conditions.
+
+ +

Methods

+ +
+
checkValidity()
+
Checks the element's value against its constraints. If the value is invalid, it fires an invalid event at the element and returns false; otherwise it returns true.
+
reportValidity()
+
Checks the element's value against its constraints and also reports the validity status; if the value is invalid, it fires an invalid event at the element, returns false, and then reports the validity status to the user in whatever way the user agent has available. Otherwise, it returns true.
+
setCustomValidity(message)
+
Sets a custom error message string to be shown to the user upon submitting the form, explaining why the value is not valid — when a message is set, the validity state is set to invalid. To clear this state, invoke the function with an empty string passed as its argument. In this case the custom error message is cleared, the element is considered valid, and no message is shown.
+
+ +

Examples

+ +

Take the following form:

+ +
<form>
+  <label for="name">Enter username (upper and lowercase letters): </label>
+  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
+  <button>Submit</button>
+</form>
+ +

The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the pattern.

+ +

If you wanted to instead display custom error messages, you could use JavaScript like the following:

+ +
const nameInput = document.querySelector('input');
+const form = document.querySelector('form');
+
+nameInput.addEventListener('input', () => {
+  nameInput.setCustomValidity('');
+  nameInput.checkValidity();
+});
+
+nameInput.addEventListener('invalid', () => {
+  if(nameInput.value === '') {
+    nameInput.setCustomValidity('Enter your username!');
+  } else {
+    nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!');
+  }
+});
+ +

The example renders like so:

+ +

{{EmbedLiveSample('Examples')}}

+ +

In brief:

+ + + +
+

Note: Firefox supported a proprietary error attribute — x-moz-errormessage — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see bug 1513890).

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'constraint validation API') }}{{Spec2('HTML WHATWG')}} 
{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'constraint validation API') }}{{Spec2('HTML5.1')}}No change from the previous snapshot {{SpecName('HTML5 W3C')}}.
{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'constraint validation API') }}{{Spec2('HTML5 W3C')}}First snapshot of  {{SpecName('HTML WHATWG')}} containing this interface.
+ +

See also

+ + diff --git a/files/es/web/api/crypto/index.html b/files/es/web/api/crypto/index.html new file mode 100644 index 0000000000..3eb118b7b7 --- /dev/null +++ b/files/es/web/api/crypto/index.html @@ -0,0 +1,66 @@ +--- +title: Crypto +slug: Web/API/Crypto +tags: + - API + - Interfaz + - Referencia + - Web Crypto API +translation_of: Web/API/Crypto +--- +

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

+ +

La interfaz Crypto representa las características básicas de criptografía disponibles en el contexto actual. Permite acceder a un generador de números aleatorios criptográficamente fuerte y a primitivos criptográficos.

+ +

Un objeto con esta interfaz está disponible en el contexto de la Web a través de la propiedad {{domxref("Window.crypto")}}.

+ +

Propiedades

+ +

Esta interfaz implementa las propiedades definidas en {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.subtle")}} {{readOnlyInline}}
+
Retorna un {{domxref("SubtleCrypto")}} objeto proporcionando acceso a primitivos criptográficos comunes, como el hashing, el firmado, cifrado o descifrado.
+
+ +

Métodos

+ +

Esta interfaz implementa las propiedades definidas en {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.getRandomValues()")}}
+
Llena el pasado {{ jsxref("TypedArray") }} valores aleatorio sólidos criptográficamente.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}Definición inicial
+ +

Compatibilidad del navegador

+ +
+ + +

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/crypto/subtle/index.html b/files/es/web/api/crypto/subtle/index.html new file mode 100644 index 0000000000..af1106f076 --- /dev/null +++ b/files/es/web/api/crypto/subtle/index.html @@ -0,0 +1,51 @@ +--- +title: Crypto.subtle +slug: Web/API/Crypto/subtle +tags: + - API + - Criptografía + - Propiedad + - Referencia + - Sólo-Lectura + - Web Crypto API +translation_of: Web/API/Crypto/subtle +--- +

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

+ +

La propiedad de sólo lectura Crypto.subtle retorna un objeto {{domxref("SubtleCrypto")}} permitiendo realizar operaciones criptográficas.

+ +

Sintaxis

+ +
var crypto = crypto.subtle;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}{{ Spec2('Web Crypto API') }}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/css_object_model/index.html b/files/es/web/api/css_object_model/index.html new file mode 100644 index 0000000000..3665c750cd --- /dev/null +++ b/files/es/web/api/css_object_model/index.html @@ -0,0 +1,129 @@ +--- +title: CSS Object Model +slug: Web/API/CSS_Object_Model +tags: + - API + - CSSOM + - Referencia +translation_of: Web/API/CSS_Object_Model +--- +

{{DefaultAPISidebar('CSSOM')}}

+ +

El Modelo de objetos CSS (CSS Object Model) es un conjunto de APIs que permite manipular CSS desde JavaScript. Así como el DOM (Document Object Model) es para HTML, el CSSOM (CSS Object Model) es para CSS. Permite leer y modificar el estilo de CSS de forma dinámica.

+ +

Referencia

+ +
+ +
+ +

Algunas otras interfaces también son complementadas por las especificaciones relacionadas con CSSOM: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, y {{domxref("SVGElement")}}.

+ +

Tutoriales

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EpecificacionEstadoComentario
{{SpecName("CSSOM")}}{{Spec2("CSSOM")}} 
{{SpecName("CSSOM View")}}{{Spec2("CSSOM View")}} 
{{SpecName("Screen Orientation")}}{{Spec2("Screen Orientation")}} 
{{SpecName("CSS3 Fonts")}}{{Spec2("CSS3 Fonts")}} 
{{SpecName("CSS3 Animations")}}{{Spec2("CSS3 Animations")}} 
{{SpecName("CSS3 Transitions")}}{{Spec2("CSS3 Transitions")}} 
{{SpecName("CSS3 Variables")}}{{Spec2("CSS3 Variables")}} 
{{SpecName("CSS3 Conditional")}}{{Spec2("CSS3 Conditional")}} 
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}} 
{{SpecName("CSS3 Counter Styles")}}{{Spec2("CSS3 Counter Styles")}} 
+ +

Notas de compatibilidad con los navegadores

+ +

Todas estas funcionalidades han sido añadidas a los navegadores poco a poco durante los años: Es un complejo proceso que no puede ser resumido en una simple tabla. Por favor busca la disponibilidad en navegadores en las interfaces específicas.

diff --git a/files/es/web/api/cssrule/csstext/index.html b/files/es/web/api/cssrule/csstext/index.html new file mode 100644 index 0000000000..4dd97fff2c --- /dev/null +++ b/files/es/web/api/cssrule/csstext/index.html @@ -0,0 +1,22 @@ +--- +title: CssRule.cssText +slug: Web/API/CSSRule/cssText +translation_of: Web/API/CSSRule/cssText +--- +
+ {{APIRef}}
+
+  
+

Summary

+

cssText returns the current text style rule.

+

Syntax

+
string = cssRule.cssText
+
+

Instance

+
if (myRule.cssText.indexOf ("background-color")! = -1) {
+   bgRule = MyRule;
+}
+...
+
+

Specification

+

DOM Level 2 Style - cssRule

diff --git a/files/es/web/api/cssrule/index.html b/files/es/web/api/cssrule/index.html new file mode 100644 index 0000000000..bd8837d217 --- /dev/null +++ b/files/es/web/api/cssrule/index.html @@ -0,0 +1,95 @@ +--- +title: CssRule +slug: Web/API/CSSRule +translation_of: Web/API/CSSRule +--- +

{{ ApiRef("CSSOM") }}

+ +

El objeto CSSRule representa una única regla de estilo CSS. Puede ser parte de una lista cssRules de hojas de estilo (stylesheet).

+ +

Existen varias clases de reglas y todas ellas comparten unas cuantas propiedades comunes en el interface {{ Anch("CSSRule") }} y la mayor parte de ellas son propiedades específicas de un tipo particular de reglas.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipointerface específico de la reglaDescripción
CSSRule.STYLE_RULE{{ Anch("CSSStyleRule") }} 
CSSRule.MEDIA_RULE{{ Anch("CSSMediaRule") }} 
CSSRule.FONT_FACE_RULE{{ Anch("CSSFontFaceRule") }} 
CSSRule.PAGE_RULE{{ Anch("CSSPageRule") }} 
CSSRule.IMPORT_RULE{{ Anch("CSSImportRule") }} 
CSSRule.CHARSET_RULE{{ Anch("CSSCharsetRule") }} 
CSSRule.UNKNOWN_RULE{{ Anch("CSSUnknownRule") }} 
+ +

CSSRule

+ +
+
cssText
+
Devuelve la representación en forma de texto, de la regla. Ejem.: "h1,h2 { font-size: 16pt }".
+
parentRule
+
Devuelve la regla contenedora, si existe. Ejem.: una regla de estilo dentro de un bloque @media.
+
parentStyleSheet
+
Devuelve el objeto stylesheet del que esta regla es parte.
+
type
+
El tipo de regla. ejem.: CSSRule.CHARSET_RULE o CSSRule.IMPORT_RULE.
+
+ +

CSSStyleRule

+ +
+
selectorText
+
Recoje/Establece la representación en forma de texto, del selector de la regle. Ejem.: "h1,h2".
+
style
+
Devuelve el objeto CSSStyleDeclaration para el bloque declaration block de la regla.
+
+ +

CSSStyleRule

+ +

CSSMediaRule

+ +

CSSFontFaceRule

+ +

CSSPageRule

+ +

CSSImportRule

+ +

CSSCharsetRule

+ +

CSSUnknownRule

+ +

Specification

+ +

DOM Level 2 CSS: CSSRule

diff --git a/files/es/web/api/cssrule/parentstylesheet/index.html b/files/es/web/api/cssrule/parentstylesheet/index.html new file mode 100644 index 0000000000..f66c603137 --- /dev/null +++ b/files/es/web/api/cssrule/parentstylesheet/index.html @@ -0,0 +1,27 @@ +--- +title: cssRule.parentStyleSheet +slug: Web/API/CSSRule/parentStyleSheet +translation_of: Web/API/CSSRule/parentStyleSheet +--- +
+ {{APIRef}}
+
+  
+

Summary

+

parentStyleSheet returns the object type of style sheet, in which the rule is defined.

+

Syntax

+
stylesheet = cssRule.parentStyleSheet
+
+

Parameters

+ +

Instance

+
if (bgRule.parentStyleSheet! = MySheet) {
+   // Style alien rule!
+}
+
+

Letters

+

See Gecko DOM Reference: event # DOM_styleSheet_Object for more information about the interface type objects stylesheet.

+

Specification

+

DOM Level 2 Style - cssRule

diff --git a/files/es/web/api/cssstyledeclaration/index.html b/files/es/web/api/cssstyledeclaration/index.html new file mode 100644 index 0000000000..f63d7a2cfd --- /dev/null +++ b/files/es/web/api/cssstyledeclaration/index.html @@ -0,0 +1,73 @@ +--- +title: CSSStyleDeclaration +slug: Web/API/CSSStyleDeclaration +tags: + - Interfaz + - Referencia +translation_of: Web/API/CSSStyleDeclaration +--- +

{{ APIRef("CSSOM") }}

+ +

Resúmen

+ +

CSSStyleDeclaration representa una colección CSS de pares propiedad-valor. Se utiliza en unas cuantas APIs:

+ + + +

Atributos

+ +
+
{{domxref("CSSStyleDeclaration.cssText")}}
+
Representación textual del bloque de declaración. Estableciendo este atributo cambia el estilo.
+
{{domxref("CSSStyleDeclaration.length")}}
+
El número de propiedades. Ver el método del elemento inferior.
+
{{domxref("CSSStyleDeclaration.parentRule")}}
+
El contenedor {{domxref("CssRule")}}.
+
+ +

Métodos

+ +
+
{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}
+
Retorna la prioridad opcional, "important". Ejemplo: priString= styleObj.getPropertyPriority('color')
+
{{domxref("CSSStyleDeclaration.getPropertyValue()")}}
+
Retorna el valor de la propiedad. Ejemplo: valString= styleObj.getPropertyValue('color')
+
{{domxref("CSSStyleDeclaration.item()")}}
+
Retorna un nombre de propiedad. Ejemplo: nameString= styleObj.item(0) Alternative: nameString= styleObj[0]
+
{{domxref("CSSStyleDeclaration.removeProperty()")}}
+
Retorna el valor borrado. Ejemplo: valString= styleObj.removeProperty('color')
+
{{domxref("CSSStyleDeclaration.setProperty()")}}
+
Sin retorno. Ejemplo: styleObj.setProperty('color', 'red', 'important')
+
{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}}
+
Solo soportado a través de getComputedStyle. Devuelve un {{ domxref("ROCSSPrimitiveValue") }} en Firefox ({{ domxref("CSSPrimitiveValue") }}, en otros, los cuales implementan CSSValue), o nulo para Propiedades taquigráficas. Ejemplo: cssString= window.getComputedStyle(elemento, null).getPropertyCSSValue('color').cssText;
+ Observación: Gecko 1.9 devuelve null a menos que se utilice getComputedStyle().
+ Observación: Este método puede estar desaconsejado por el W3C , y no está presente en el último borrador CSSOM. No está soportado por IE e incluso aunque la función existe en Opera, llamarla lanza una excepción {{ domxref("DOMException") }} NOT_SUPPORTED_ERR.
+
+ +

Ejemplo

+ +
var styleObj= document.styleSheets[0].cssRules[0].style;
+alert(styleObj.cssText);
+for (var i = styleObj.length-1; i >= 0; i--) {
+   var nameString = styleObj[i];
+   styleObj.removeProperty(nameString);
+}
+alert(styleObj.cssText);
+ +

Notas

+ +

El bloque de declaración es esa parte de la regla de estilo que aparece dentro de las llaves ({}) y que actualmente proporciona las definiciones de estilo (para el selector, la parte que precede a las llaves).

+ +

Ver también

+ + + +

Especificación

+ +

CSSOM: CSSStyleDeclaration

diff --git a/files/es/web/api/cssstylerule/index.html b/files/es/web/api/cssstylerule/index.html new file mode 100644 index 0000000000..1026c9af82 --- /dev/null +++ b/files/es/web/api/cssstylerule/index.html @@ -0,0 +1,105 @@ +--- +title: CSSStyleRule +slug: Web/API/CSSStyleRule +tags: + - API +translation_of: Web/API/CSSStyleRule +--- +

{{ APIRef("CSSOM") }}

+ +

CSSStyleRule representa una sola regla de estilos CSS. Implementa la interfaz {{domxref("CSSRule")}} with a type value of 1 (CSSRule.STYLE_RULE).

+ +

Sintaxis

+ +

La sintaxis es descrita usando el formato WebIDL.

+ +
interface CSSStyleRule : CSSRule {
+    attribute DOMString selectorText;
+    readonly attribute CSSStyleDeclaration style;
+};
+ +

Propiedades

+ +
+
{{domxref("CSSStyleRule.selectorText")}}
+
Obtiene la representación textual del selector para esta regla, e.g. "h1,h2".
+
{{domxref("CSSStyleRule.style")}} {{readonlyinline}}
+
Retorna el objeto {{domxref("CSSStyleDeclaration")}} para la regla. Sólo lectura.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }}{{ Spec2('CSSOM') }}Sin cambios
{{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }}{{ Spec2('DOM2 Style') }} 
+ +

Compatibilidad entre Navegadores

+ +

Para obtener informacion de compatibilidad en los distintos navegadores, por favor consulta la tabla de compatibilidad de la interfaz asociada.

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+  		{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/es/web/api/cssstylerule/selectortext/index.html b/files/es/web/api/cssstylerule/selectortext/index.html new file mode 100644 index 0000000000..56dec42a94 --- /dev/null +++ b/files/es/web/api/cssstylerule/selectortext/index.html @@ -0,0 +1,23 @@ +--- +title: CssRule.selectorText +slug: Web/API/CSSStyleRule/selectorText +translation_of: Web/API/CSSStyleRule/selectorText +--- +

{{ ApiRef() }}

+

Resumen

+

selectorText recoge/establece la representación en forma de texto, del selector para el grupo de reglas.

+

Sintaxis

+
string = cssRule.selectorText
+cssRule.selectorText = string
+
+

Ejemplo

+
 // for cssrule: body { background-color: darkblue; }
+ cssrule = document.styleSheets[1]
+ !!TODO!!
+ selector = cssrule.selectorText;
+ // selector is now "body"
+
+

Notas

+

La implementación puede haber eliminado espacios en blanco no significativos, en el momento de comprobar el selector.

+

Especificación

+

DOM Level 2 Style - cssRule

diff --git a/files/es/web/api/cssstylesheet/deleterule/index.html b/files/es/web/api/cssstylesheet/deleterule/index.html new file mode 100644 index 0000000000..f11a905d98 --- /dev/null +++ b/files/es/web/api/cssstylesheet/deleterule/index.html @@ -0,0 +1,21 @@ +--- +title: Stylesheet.deleteRule +slug: Web/API/CSSStyleSheet/deleteRule +translation_of: Web/API/CSSStyleSheet/deleteRule +--- +

{{ ApiRef() }}

+

Resumen

+

El método deleteRule elimina una regla de la hoja de estilos actual.

+

Sintaxis

+
stylesheet.deleteRule(index)
+
+

Parámetros

+ +

Ejemplo

+
 myStyles.deleteRule(0);
+
+

Especificación

+

deleteRule

+

{{ languages( { "pl": "pl/DOM/stylesheet.deleteRule" } ) }}

diff --git a/files/es/web/api/cssstylesheet/index.html b/files/es/web/api/cssstylesheet/index.html new file mode 100644 index 0000000000..f9781136ae --- /dev/null +++ b/files/es/web/api/cssstylesheet/index.html @@ -0,0 +1,64 @@ +--- +title: CSSStyleSheet +slug: Web/API/CSSStyleSheet +translation_of: Web/API/CSSStyleSheet +--- +

{{ ApiRef() }}

+

 

+

This section describes the CSSStyleSheet object, which represents a single CSS stylesheet.

+

A CSS stylesheet consists of CSS rules, each of them can be manipulated through its CSSRule object. The stylesheet object itself lets you examine and modify the stylesheet, including its list of rules.

+

You can get the list of stylesheets for a given document using the document.styleSheets property.

+

Properties

+
+
+ stylesheet.cssRules
+
+ Returns all of the CSS rules in the stylesheet as an array.
+
+ stylesheet.disabled
+
+ This property indicates whether the current stylesheet has been applied or not.
+
+ stylesheet.href
+
+ Returns the location of the stylesheet.
+
+ stylesheet.media
+
+ Specifies the intended destination medium for style information.
+
+ stylesheet.ownerNode
+
+ Returns the node that associates this style sheet with the document.
+
+ stylesheet.ownerRule
+
+ If this style sheet comes from an @import rule, the ownerRule property will contain the CSSImportRule.
+
+ stylesheet.parentStyleSheet
+
+ Returns the stylesheet that is including this one, if any.
+
+ stylesheet.title
+
+ Returns the advisory title of the current style sheet.
+
+ stylesheet.type
+
+ Specifies the style sheet language for this style sheet.
+
+

Methods

+
+
+ stylesheet.deleteRule
+
+ Deletes a rule from the stylesheet.
+
+ stylesheet.insertRule
+
+ Inserts a new style rule into the current style sheet.
+
+

Specification

+

DOM Level 2 Style Sheets: StyleSheet

+

DOM Level 2 CSS: CSSStyleSheet

+

{{ languages( { "pl": "pl/DOM/stylesheet" } ) }}

diff --git a/files/es/web/api/cssstylesheet/insertrule/index.html b/files/es/web/api/cssstylesheet/insertrule/index.html new file mode 100644 index 0000000000..ef0f3e522d --- /dev/null +++ b/files/es/web/api/cssstylesheet/insertrule/index.html @@ -0,0 +1,119 @@ +--- +title: CSSStyleSheet.insertRule() +slug: Web/API/CSSStyleSheet/insertRule +tags: + - CSSStyleSheet +translation_of: Web/API/CSSStyleSheet/insertRule +--- +
+ {{APIRef}}
+

El método CSSStyleSheet.insertRule() inserta una nueva regla de estilo en la actual hoja de estilos.

+

Para conjuntos de reglas ésta contiene tanto al selector como la declaración de estilo. Para reglas-arroba, ésta especifica tanto al identificador-arroba como como al contenido de la regla. Si se asignan varias reglas en el  {{domxref("DOMString")}} como parámetro se dispara una  {{domxref("DOMException")}} con el código SYNTAX_ERR.

+

Syntax

+
stylesheet.insertRule(regla, índice)
+

Parameters

+ +

Ejemplos

+

Ejemplo 1

+
// Insertar una nueva regla al principio de mi hoja de estilos
+myStyle.insertRule("#blanc { color: white }", 0);
+
+

Example 2

+
/**
+ * Agregar una regla de hoja de estilos al documento(sin embargo, una mejor práctica puede ser
+ * cambiar las clases dinamicamente, así se mantiene la información de estilo en
+ * hojas de estilo genuinas (evitando agregar elementos extras al DOM))
+ * Note que se necesita una matriz para las declaraciones y reglas ya que ECMAScript
+ * no proporciona un orden de iteración predecible y como CSS
+ * depende del orden(i.e., es cascada); aquellos sin necesidad de
+ * reglas en cascada podrían construir una API basada en objetos de acceso más amigable.
+ * @param {Matriz} reglas. Acepta una matriz de  declaraciones JSON-encoded
+ * @example
+addStylesheetRules([
+  ['h2', // Acepta un segundo argumento como una matriz de matrices
+    ['color', 'red'],
+    ['background-color', 'green', true] // 'true' para reglas !important
+  ],
+  ['.myClass', ['background-color', 'yellow']
+  ]
+]);
+ */
+function addStylesheetRules (decls) {
+  var styleEl = document.createElement('style');
+  document.head.appendChild(styleEl);
+  // Aparentemente ¿alguna versión de Safari necesita la siguiente linea? No lo sé.
+  styleEl.appendChild(document.createTextNode(''));
+  var s = styleEl.sheet;
+  for (var i=0, rl = rules.length; i < rl; i++) {
+    var j = 1, rule = rules[i], selector = decl[0], propStr = '';
+    // Si el segundo argumento de una regla es una matriz de matrices, corrijamos nuestras variables.
+    if (Object.prototype.toString.call(rule[1][0]) === '[object Array]') {
+      rule = rule[1];
+      j = 0;
+    }
+    for (var pl=rule.length; j < pl; j++) {
+      var prop = rule[j];
+      propStr += prop[0] + ':' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
+    }
+    s.insertRule(selector + '{' + propStr + '}', s.cssRules.length);
+  }
+}
+

Specification

+ +

Browser compatibility

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}8{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+

See also

+ diff --git a/files/es/web/api/cssstylesheet/ownerrule/index.html b/files/es/web/api/cssstylesheet/ownerrule/index.html new file mode 100644 index 0000000000..cd8c302ce3 --- /dev/null +++ b/files/es/web/api/cssstylesheet/ownerrule/index.html @@ -0,0 +1,19 @@ +--- +title: Stylesheet.ownerRule +slug: Web/API/CSSStyleSheet/ownerRule +--- +

{{ ApiRef() }}

+

Resumen

+

Si esta hoja de estilos viene de una regla @import, la propiedad ownerRule contendrá la CSSImportRule.

+

Sintaxis

+
rule = stylesheet.ownerRule
+
+

Parámetros

+ +

Notas

+

Ten en cuenta que si el valor de la propiedad ownerNode en el elemento STYLE actual es NULL, el valor ownerRule devolverá !!TODO!! y viceversa.

+

Specification

+

ownerRule

+

{{ languages( { "pl": "pl/DOM/stylesheet.ownerRule" } ) }}

diff --git a/files/es/web/api/customelementregistry/define/index.html b/files/es/web/api/customelementregistry/define/index.html new file mode 100644 index 0000000000..5ab2ecb1b9 --- /dev/null +++ b/files/es/web/api/customelementregistry/define/index.html @@ -0,0 +1,239 @@ +--- +title: CustomElementRegistry.define() +slug: Web/API/CustomElementRegistry/define +translation_of: Web/API/CustomElementRegistry/define +--- +

{{APIRef("CustomElementRegistry")}}

+ +

El método define() de la interfaz {{domxref("CustomElementRegistry")}} define un nuevo elemento personalizado.

+ +

Se pueden crear dos tipos de elementos personalizados:

+ + + +

Sintaxis

+ +
customElements.define(name, constructor, options);
+
+ +

Parámetros

+ +
+
name
+
Nombre del nuevo elemento personalizado. Fíjate en que los nombres de elementos personalizados deben contener un guión.
+
constructor
+
Constructor para el nuevo elemento personalizado
+
options {{optional_inline}}
+
Objecto que controla cómo se define el elemento. Actualmente solo se permite una opción: +
    +
  • extends: Cadena que especifica el nombre del elemento preconstruido del cual se va a extender. Se usa para crear elementos personalizados preconstruidos.
    • +
+
+
+ +

Valor de retorno

+ +

Void.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + + + + + +
ExcepciónDescripción
NotSupportedErrorEl {{domxref("CustomElementRegistry")}} ya contiene una entrada con el mismo nombre o el mismo constructor (o se ha definido ya de alguna otra manera), o se ha especificado extends pero el elemento del que se está intentando extender es desconocido.
SyntaxErrorEl nombre proporcionado no es un nombre válido de elemento personalizado.
TypeErrorEl constructor referenciado no es un constructor
+ +
+

Nota: A menudo se obtienen excepciones NotSupportedErrors cuando el método define() está fallando, pero realmente es un problema relacionado con {{domxref("Element.attachShadow()")}}.

+
+ +

Ejemplos

+ +

Elemento personalizado autónomo

+ +

El siguiente código está tomado de nuestro ejemplo popup-info-box-web-component  (verlo en vivo).

+ +
// Crear una clase para el elemento
+class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Siempre lo primero es llamar a super en el constructor
+    super();
+
+    // Crear una shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Crear tres elementos span
+    var wrapper = document.createElement('span');
+    wrapper.setAttribute('class','wrapper');
+
+    var icon = document.createElement('span');
+    icon.setAttribute('class','icon');
+    icon.setAttribute('tabindex', 0);
+
+    var info = document.createElement('span');
+    info.setAttribute('class','info');
+
+    // Coger el contenido del atributo text y ponerlo en el span info
+    var text = this.getAttribute('text');
+    info.textContent = text;
+
+    // Coger el contenido del atributo img (si existe) y ponerlo en el span icon
+    var imgUrl;
+    if(this.hasAttribute('img')) {
+      imgUrl = this.getAttribute('img');
+    } else {
+      imgUrl = 'img/default.png';
+    }
+
+    // El span no puede tener directamente una imagen, pero si contener un elemento img
+    var img = document.createElement('img');
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // Crear los estilos CSS e incluirlos en el shadow DOM
+    var style = document.createElement('style');
+
+    style.textContent = '.wrapper {' +
+                           'position: relative;' +
+                        '}' +
+
+                         '.info {' +
+                            'font-size: 0.8rem;' +
+                            'width: 200px;' +
+                            'display: inline-block;' +
+                            'border: 1px solid black;' +
+                            'padding: 10px;' +
+                            'background: white;' +
+                            'border-radius: 10px;' +
+                            'opacity: 0;' +
+                            'transition: 0.6s all;' +
+                            'position: absolute;' +
+                            'bottom: 20px;' +
+                            'left: 10px;' +
+                            'z-index: 3;' +
+                          '}' +
+
+                          'img {' +
+                            'width: 1.2rem' +
+                          '}' +
+
+                          '.icon:hover + .info, .icon:focus + .info {' +
+                            'opacity: 1;' +
+                          '}';
+
+    // adjuntar los elementos creados (spans y estilo) al shadow DOM
+    // notese que el span wrapper contiene los spans icon e info
+
+    shadow.appendChild(style);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
+
+// Definir el nuevo elemento
+customElements.define('popup-info', PopUpInfo);
+
+ +
<popup-info img="img/alt.png" text="Su código de validación de tarjeta (CVC) es una característica
+                                    extra de seguridad — consiste en 3 o 4
+                                    numeros en la parte posterior de su tarjeta.">
+ +
+

Nota: Los constructores de elementos personalizados autónomos deben extender {{domxref("HTMLElement")}}.

+
+ +

Elemento personalizado preconstruido

+ +

El siguiente código está tomado de nuestro ejemplo word-count-web-component (verlo en vivo).

+ +
// Crear una clase para el elemento
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Siempre lo primero es llamar a super en el constructor
+    super();
+
+    // contar palabras del padre de este elemento
+    var wcParent = this.parentNode;
+
+    // la función countWords cuenta palabras (aunque estén separadas por más de un espacio)
+    // que existe en el nodo pasado como parámetro.
+    // innerText está definido para objetos HTMLElement, mientras que textContent para todos los objetos Node
+    // el operador || hace que obtengamos al menos uno de los dos
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // // Crear una shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Crear un nodo span con el número de palabras
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Añadirlo a la shadow root
+    shadow.appendChild(text);
+
+
+    // Actualizar el contador cuando el contenido del elemento cambie
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
<p is="word-count"></p>
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}{{Spec2("HTML WHATWG")}}Initial definition.
+ +

Compatibilidad navegadores

+ +
+ + +

{{Compat("api.CustomElementRegistry.define")}}

+
diff --git a/files/es/web/api/customelementregistry/index.html b/files/es/web/api/customelementregistry/index.html new file mode 100644 index 0000000000..624bc8f1fb --- /dev/null +++ b/files/es/web/api/customelementregistry/index.html @@ -0,0 +1,101 @@ +--- +title: CustomElementRegistry +slug: Web/API/CustomElementRegistry +tags: + - API + - CustomElementRegistry + - Experimental + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Components + - custom elements +translation_of: Web/API/CustomElementRegistry +--- +
{{DefaultAPISidebar("Web Components")}}
+ +

The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the {{domxref("window.customElements")}} property.

+ +

Methods

+ +
+
{{domxref("CustomElementRegistry.define()")}}
+
Defines a new custom element.
+
{{domxref("CustomElementRegistry.get()")}}
+
Returns the constuctor for the named custom element, or {{jsxref("undefined")}} if the custom element is not defined.
+
{{domxref("CustomElementRegistry.upgrade()")}}
+
Upgrades a custom element directly, even before it is connected to its shadow root.
+
{{domxref("CustomElementRegistry.whenDefined()")}}
+
Returns an empty {{jsxref("Promise", "promise")}} that resolves when a custom element becomes defined with the given name. If such a custom element is already defined, the returned promise is immediately fulfilled.
+
+ +

Examples

+ +

The following code is taken from our word-count-web-component example (see it live also). Note how we use the {{domxref("CustomElementRegistry.define()")}} method to define the custom element after creating its class.

+ +
// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
+

Note: The CustomElementRegistry is available through the {{domxref("Window.customElements")}} property.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}{{Spec2("HTML WHATWG")}}Initial definition.
+ +

Browser compatibility

+ + + +

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

diff --git a/files/es/web/api/customevent/index.html b/files/es/web/api/customevent/index.html new file mode 100644 index 0000000000..b189c77f66 --- /dev/null +++ b/files/es/web/api/customevent/index.html @@ -0,0 +1,94 @@ +--- +title: CustomEvent +slug: Web/API/CustomEvent +tags: + - API + - DOM + - Interfaz + - Referencia +translation_of: Web/API/CustomEvent +--- +

{{APIRef("DOM")}}La interfaz CustomEvent  representa eventos inicializados por una aplicación para cualquier propósito.

+ +

{{AvailableInWorkers}}

+ +

Constructor

+ +
+
{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
+
+

Crea un CustomEvent.

+
+
+ +

Propiedades

+ +
+
{{domxref("CustomEvent.detail")}} {{readonlyinline}}
+
Cualquier dato transmitido al inicializar el evento.
+
+ +

Esta interfaz hereda las propiedades de su padre, {{domxref("Event")}}:

+ +

{{Page("/es/docs/Web/API/Event", "Propiedades")}}

+ +

Métodos

+ +
+
{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}
+
+

Inicializar un objeto CustomEvent. Si el evento ya ha sido enviado, este método no hace nada.

+
+
+ +

Esta interfaz hereda los métodos de su padre, {{domxref("Event")}}:

+ +

{{Page("/es/docs/Web/API/Event", "Métodos")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

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

+ +

Disparar desde código privilegiado a código no-privilegiado

+ +

Al disparar un CustomEvent desde código privilegiado (una extensión) a un código no-privilegiado (una página web),  deben considerarse algunos problemas de seguridad. Firefox y otras aplicaciones Gecko restringen al objeto creado desde un contexto siendo directamente utilizado por otro, el cual automáticamente evitará los agujeros de seguridad, pero estas restricciones también pueden impedir que su código se ejecute como esperaba.

+ +

Al crear un objeto CustomEvent, debes crear el objeto desde la misma ventana. El atributo detail de tu CustomEvent estará sujeto a las mismas restricciones. Los valores de String y Array serán legibles sin restricciones por el content, pero los objetos personalizados no lo harán. Al utilizar un objeto personalizado, necesitaras definir que atributos de ese objeto se pueden leer desde la secuencia de comandos de contenido usando  Components.utils.cloneInto().

+ +
// doc es una referencia al contenido del documento
+function dispatchCustomEvent(doc) {
+  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+  doc.dispatchEvent(myEvent);
+}
+ +

Pero hay que tener en cuenta que exponer una función permitirá que el script content lo ejecute con privilegios de chrome, lo que puede abrir una vulnerabilidad de seguridad.

+ +

Ver también

+ + diff --git a/files/es/web/api/datatransfer/index.html b/files/es/web/api/datatransfer/index.html new file mode 100644 index 0000000000..8d8a6a5b1d --- /dev/null +++ b/files/es/web/api/datatransfer/index.html @@ -0,0 +1,378 @@ +--- +title: DataTransfer +slug: Web/API/DataTransfer +translation_of: Web/API/DataTransfer +--- +
{{APIRef("HTML DOM")}}
+ +

{{ gecko_minversion_header("1.9") }} El objeto DataTransfer es usado como contenedor de datos que estan siendo manipulados durante la operación de drag and drop. Este puede contener uno o varios objetos, de uno o varios tipos de datos. Para más información  en cuanto a drag and drop, ver Drag and Drop.

+ +

Este objeto esta disponible desde la propiedad dataTransfer de todos los eventos de drag . No pueden ser creados por separado.

+ +

Lista de propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertiesType
dropEffectString
effectAllowedString
files {{ gecko_minversion_inline("1.9.2") }}{{ domxref("FileList") }}
mozCursor {{ non-standard_inline() }} {{ gecko_minversion_inline("1.9.1") }}String
mozItemCount {{ non-standard_inline() }}unsigned long
mozSourceNode {{ non-standard_inline() }} {{ gecko_minversion_inline("2") }}{{ domxref("Node") }}
mozUserCancelledBoolean
typesDOMStringList
+ +

Lista de métodos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
void addElement(in Element element)
void clearData([in String type])
String getData(in String type)
void setData(in String type, in String data)
void setDragImage(in nsIDOMElement image, in long x, in long y)
void mozClearDataAt([in String type, in unsigned long index])
nsIVariant mozGetDataAt(in String type, in unsigned long index)
void mozSetDataAt(in String type, in nsIVariant data, in unsigned long index)
StringList mozTypesAt([in unsigned long index])
+ +

Propiedades

+ +

dropEffect

+ +

The actual effect that will be used, and should always be one of the possible values of effectAllowed.

+ +

For the dragenter and dragover events, the dropEffect will be initialized based on what action the user is requesting. How this is determined is platform specific, but typically the user can press modifier keys to adjust which action is desired. Within an event handler for the dragenter and dragover events, the dropEffect should be modified if the action the user is requesting is not the one that is desired.

+ +

For dragstart, drag, and dragleave events, the dropEffect is initialized to "none". Any value assigned to the dropEffect will be set, but the value isn't used for anything.

+ +

For the drop and dragend events, the dropEffect will be initialized to the action that was desired, which will be the value that the dropEffect had after the last dragenter or dragover event.

+ +

Possible values:

+ + + +

Assigning any other value has no effect and retains the old value.

+ +

effectAllowed

+ +

Specifies the effects that are allowed for this drag. You may set this in the dragstart event to set the desired effects for the source, and within the dragenter and dragover events to set the desired effects for the target. The value is not used for other events.

+ +

Possible values:

+ + + +

Assigning any other value has no effect and retains the old value.

+ +

files

+ +

{{ gecko_minversion_header("1.9.2") }}

+ +

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. An invalid index access on the {{ domxref("FileList") }} specified by this property will return null.

+ +

Example

+ +

This example dumps the list of files dragged into the browser window: http://jsfiddle.net/9C2EF/

+ +

types

+ +

Holds a list of the format types of the data that is stored for the first item, in the same order the data was added. An empty list will be returned if no data was added.

+ +

{{ gecko_minversion_note("1.9.2", 'The string "Files" is included in this list if files are included in the drag.') }}

+ +

{{ h3_gecko_minversion("mozCursor", "1.9.1", "mozCursor") }}

+ +

The drag cursor's state. This is primarily used to control the cursor during tab drags.

+ +
Note: This method is currently only implemented on Windows.
+ +

Possible values

+ +
+
auto
+
Uses the default system behavior.
+
default
+
Uses the default Gecko behavior, which is to set the cursor to an arrow during the drag operation.
+
+ +
Note: If you specify any value other than "default", "auto" is assumed.
+ +

mozItemCount

+ +

The number of items being dragged.

+ +
Note: This property is Gecko-specific.
+ +

mozSourceNode

+ +

{{ gecko_minversion_header("2") }}

+ +

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.

+ +
Note: This property is Gecko-specific.
+ +

mozUserCancelled

+ +

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. This property is not currently implemented on Linux.

+ +
Note: This property is Gecko-specific.
+ +

Métodos

+ +

addElement()

+ +

Set the drag source. Usually you would not change this, but it will affect which node the drag and dragend events are fired at. The default target is the node that was dragged.

+ +
 void addElement(
+   in Element element
+ );
+
+ +
Parameters
+ +
+
element
+
The element to add.
+
+ +

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.

+ +
 void clearData(
+   [optional] in String type
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to remove.
+
+ +

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.

+ +

A security error will occur if you attempt to retrieve data during a drag that was set from a different domain, or the caller would otherwise not have access to. This data will only be available once a drop occurs during the drop event.

+ +
 String getData(
+   in String type
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to retrieve.
+
+ +

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. That is, the order of the types list is not changed when replacing data of the same type.

+ +
 void setData(
+   in String type,
+   in String data
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to add.
+
data
+
The data to add.
+
+ +

setDragImage()

+ +

Set the image to be used for dragging if a custom one is desired. Most of the time, this would not be set, as a default image is created from the node that was dragged.

+ +

If the node is an HTML img element, an HTML canvas element or a XUL image element, the image data is used. Otherwise, image should be a visible node and the drag image will be created from this. If image is null, any custom drag image is cleared and the default is used instead.

+ +

The coordinates specify the offset into the image where the mouse cursor should be. To center the image, for instance, use values that are half the width and height of the image.

+ +
 void setDragImage(
+   in Element image,
+   in long x,
+   in long y
+ );
+
+ +
Parameters
+ +
+
image
+
An element to use as the drag feedback image
+
x
+
Horizontal offset within the image.
+
y
+
Vertical offset within the image.
+
+ +

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.

+ +

If the last format for the item is removed, the entire item is removed, reducing mozItemCount by one.

+ +

If the format list is empty, then the data associated with all formats is removed. If the format is not found, then this method has no effect.

+ +
Note: This method is Gecko-specific.
+ +
 void mozClearDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to remove.
+
index
+
The index of the data to remove.
+
+ +

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.

+ +
Note: This method is Gecko-specific.
+ +
 nsIVariant mozGetDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to retrieve.
+
index
+
The index of the data to retrieve.
+
+ +

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.

+ +

Data should be added in order of preference, with the most specific format added first and the least specific format added last. If data of the given format already exists, it is replaced in the same position as the old data.

+ +

The data should be either a string, a primitive boolean or number type (which will be converted into a string) or an {{ interface("nsISupports") }}.

+ +
Note: This method is Gecko-specific.
+ +
 void mozSetDataAt(
+   [optional] in String type,
+   in nsIVariant data,
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to add.
+
data
+
The data to add.
+
index
+
The index of the data to add.
+
+ +

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.

+ +
Note: This method is Gecko-specific.
+ +
 nsIVariant mozTypesAt(
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
index
+
The index of the data for which to retrieve the types.
+
+ +

Mira también

+ +

Drag and Drop

+ +

{{ languages( { "ja": "Ja/DragDrop/DataTransfer" } ) }}

diff --git a/files/es/web/api/detecting_device_orientation/index.html b/files/es/web/api/detecting_device_orientation/index.html new file mode 100644 index 0000000000..60302ae643 --- /dev/null +++ b/files/es/web/api/detecting_device_orientation/index.html @@ -0,0 +1,278 @@ +--- +title: Detectando la orientación del dispositivo +slug: Web/API/Detecting_device_orientation +translation_of: Web/API/Detecting_device_orientation +--- +
{{SeeCompatTable}}
+ +

Resumen

+ +

Cada vez más, los dispositivos habilitados para la web son capaces de determinar su orientación; esto hace que estos puedan reportar datos indicando los cambios de su orientación con relación a la fuerza de gravedad. In particular, dispositivos de mano como los teléfonos móviles pueden usar esta información para rotar la pantalla automaticamente para mostrar información en de forma vertical, presentando un vista extendida del contenido de la web cuando el dispositivo de forma que el ancho es mayor que el alto. 

+ +

Hay dos eventos JavaScript que manejan la información de orientación. El primero es {{domxref("DeviceOrientationEvent")}}, que es enviado cuando el aceleromentro detecta un cambio de orientación del dispositivo. Recibiendo y procesando los datos reportados por el evento es posible responder interactivamente a la rotación y aplicar cambios correspondientes al movimiento del dispositivo.

+ +

El segundo evento es {{domxref("DeviceMotionEvent")}}, que es enviado cuando un cambio de la aceleración fue añadido. Esto es diferente de {{domxref("DeviceOrientationEvent")}} por que está escuchando cambios de aceleración mas no de orientación. Los sensores son comunmente capaces de detetar {{domxref("DeviceMotionEvent")}} incluso aquellos sensores de laptops que protegen del movimiento a los disposivitos de almacenamiento. {{domxref("DeviceOrientationEvent")}} es comunmente encontrado en dispositivos móviles.

+ +

Trabajando con eventos de orientación

+ +

Todo lo que necesitas hacer para empezar a recibir cambios de orientación es escuchar el evento {{ event("deviceorientation") }}:

+ +
window.addEventListener("deviceorientation", handleOrientation, true);
+
+ +

Después de registrar el evento de escucha (en este caso, una función de JavaScript llamada handleOrientation()), tu función de escucha periodicamente será invocada con una actualización de datos.

+ +

La información del evento contiene 4 valores:

+ + + +

El manejador del evento puede ser similar a lo siguiente:

+ +
function handleOrientation(event) {
+  var absolute = event.absolute;
+  var alpha    = event.alpha;
+  var beta     = event.beta;
+  var gamma    = event.gamma;
+
+  // Do stuff with the new orientation data
+}
+
+ +

Explicación de los Valores de Orientación

+ +

El valor reportado para cada eje indica la cantidad de rotación alrededor de un eje dado, con referencia a un estandar marco de coordenadas. El siguiente enlace describe con mayor detalle la Orientacíon y datos del movimiento explicado que es resumido abajo. 

+ + + +

Ejemplo de orientación

+ +

Este ejemplo va a funcionar en cualquier nevegador que soporte el evento {{event("deviceorientation")}} y funcione en un dispositivo con capacidades de detectar la orientación.

+ +

Imaginemos una pelota en un jardin:

+ +
<div class="garden">
+  <div class="ball"></div>
+</div>
+
+<pre class="output"></pre>
+
+ +

Este jardin tiene 200 pixeles de ancho (Si, es uno pequeño), y la pelota esta en el centro:

+ +
.garden {
+  position: relative;
+  width : 200px;
+  height: 200px;
+  border: 5px solid #CCC;
+  border-radius: 10px;
+}
+
+.ball {
+  position: absolute;
+  top   : 90px;
+  left  : 90px;
+  width : 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+
+ +

Ahora, si nosotros movemos nuestro dispositivo, la pelota va a moverse acorde a este:

+ +
var ball   = document.querySelector('.ball');
+var garden = document.querySelector('.garden');
+var output = document.querySelector('.output');
+
+var maxX = garden.clientWidth  - ball.clientWidth;
+var maxY = garden.clientHeight - ball.clientHeight;
+
+function handleOrientation(event) {
+  var x = event.beta;  // In degree in the range [-180,180]
+  var y = event.gamma; // In degree in the range [-90,90]
+
+  output.innerHTML  = "beta : " + x + "\n";
+  output.innerHTML += "gamma: " + y + "\n";
+
+  // Because we don't want to have the device upside down
+  // We constrain the x value to the range [-90,90]
+  if (x >  90) { x =  90};
+  if (x < -90) { x = -90};
+
+  // To make computation easier we shift the range of
+  // x and y to [0,180]
+  x += 90;
+  y += 90;
+
+  // 10 is half the size of the ball
+  // It center the positioning point to the center of the ball
+  ball.style.top  = (maxX*x/180 - 10) + "px";
+  ball.style.left = (maxY*y/180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+
+ +

Aqui el resultado en vivo:

+ +
{{ EmbedLiveSample('Orientation_example', '230', '260') }}
+ +
+

Tener en cuenta: Chrome y Firefox no manejan los angulos de la misma forma, asi que en algunos ejes la dirección se invierte.

+
+ +

Procesando eventos de movimiento

+ +

Eventos de movimiento son manejados de la misma manera que la orientación, con la excepción de que estos tienen sus propios nombres de evento: {{ event("devicemotion") }}

+ +
window.addEventListener("devicemotion", handleMotion, true);
+ +

Lo que realmente ha cambiado es la información proporcionada en {{ domxref("DeviceMotionEvent") }} objeto pasado como parametro de la función HandleMotion.

+ +

El evento de movimiento tiene cuatro propiedades:

+ + + +

Valores de movimiento explicados

+ +

{{ domxref("DeviceMotionEvent") }} proporciona a los desarrolladores web información sobre la velocidad de los cambios de la posición y orientación del dispositivo. Los cambios son proporcionados por sus tres ejes (ver Datos de orientación y movimiento explicados por más detalles).

+ +

Para {{domxref("DeviceMotionEvent.acceleration","acceleration")}} y {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, los ejes corresponden a lo siguiente:

+ + + +

Para {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, la situación es un poco diferente; la información corresponde a lo siguiente en cada caso:

+ + + +

Finalmente, {{domxref("DeviceMotionEvent.interval","interval")}} representa el intervalo de tiempo, en milisegundos, en el que los datos han sido obtenidos del dispositivo.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Especificación inicial.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
{{domxref("DeviceOrientationEvent")}}7.03.6[1]
+ 6		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
{{domxref("DeviceOrientationEvent")}}3.03.6[1]
+ 6		{{ CompatNo() }}{{ CompatNo() }}4.2
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+

Note: gyronorm.js es un polyfill para normalizar los datos del acelerómetro y giroscopio en dispositivos móviles. Esto es útil para superar algunas de las diferencias en la compatibilidad del dispositivo con la orientación del dispositivo..

+
+ +

Gecko implementation notes

+ +
    +
  1. Firefox 3.6, 4, and 5 supported mozOrientation versus the standard {{domxref("DeviceOrientationEvent")}} event
    2. +
+ +

Vea también

+ + diff --git a/files/es/web/api/devicemotionevent/index.html b/files/es/web/api/devicemotionevent/index.html new file mode 100644 index 0000000000..a8820d1173 --- /dev/null +++ b/files/es/web/api/devicemotionevent/index.html @@ -0,0 +1,73 @@ +--- +title: DeviceMotionEvent +slug: Web/API/DeviceMotionEvent +translation_of: Web/API/DeviceMotionEvent +--- +

{{APIRef("Device Orientation Events")}}{{SeeCompatTable}}

+ +

El evento DeviceMotionEvent proporciona a los desarrolladores información acerca de la velocidad de los cambios en la posición y orientación del dispositivo.

+ +
+

Aviso: Acualmente, Firefox and Chrome no manejan las corrdenadas de la misma forma. Tenga en cuenta esto cuando lo use.

+
+ +

Constructor

+ +
+
{{DOMxRef("DeviceMotionEvent.DeviceMotionEvent()")}} {{Non-standard_Inline}}
+
Crea un nuevo DeviceMotionEvent.
+
+ +

Properties

+ +
+
{{DOMxRef("DeviceMotionEvent.acceleration")}}{{ReadOnlyInline}}
+
Objeto que nos proporciona la aceleración del dispositivo en los ejes X, Y y Z. La aceleración está expresada en m/s2.
+
{{DOMxRef("DeviceMotionEvent.accelerationIncludingGravity")}}{{ReadOnlyInline}}
+
Objeto que nos proporciona la aceleración del dispositivo en los ejes X, Y y Z con el efecto de la gravedad. La aceleración está expresada en m/s2.
+
{{DOMxRef("DeviceMotionEvent.rotationRate")}}{{ReadOnlyInline}}
+
Objeto que nos proporciona los cambios en la orientación del dispositivo en los ejes alpha, beta y gamma. La velocidad de rotación se expresa en grados por segundo
+
{{DOMxRef("DeviceMotionEvent.interval")}}{{ReadOnlyInline}}
+
Número que representa el intervalo de tiempo, en milisegundos, en el que se obtienen los datos del dispositivo..
+
+ +

Ejemplo

+ +
window.addEventListener('devicemotion', function(event) {
+  console.log(event.acceleration.x + ' m/s2');
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Device Orientation", "#devicemotionevent", "DeviceMotionEvent")}}{{Spec2("Device Orientation")}}Initial definition.
+ +

Compativilidad con los navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/document/abrir/index.html b/files/es/web/api/document/abrir/index.html new file mode 100644 index 0000000000..13b541561d --- /dev/null +++ b/files/es/web/api/document/abrir/index.html @@ -0,0 +1,109 @@ +--- +title: Document.open() +slug: Web/API/Document/abrir +translation_of: Web/API/Document/open +--- +
{{APIRef("DOM")}}
+ +

El método Document.open() abre un documento para escritura (writing)

+ +

Esto viene con algunos efectos secundarios. Por ejemplo:

+ + + +

Sintaxis

+ +
document.open();
+
+ +

Parametros

+ +

Ninguno.

+ +

Valor devuelto

+ +

Una instancia del objeto Document (Document).

+ +

Ejemplos

+ +

El código simple a continuación abre el documento y reemplaza su contenido con un número de diferentes fragmentos HTML antes de cerrarlo nuevamente.

+ +
document.open();
+document.write("<p>Hola mundo!</p>");
+document.write("<p>Soy un pez</p>");
+document.write("<p>El numero es 42</p>");
+document.close();
+ +

Notas

+ +
+

Traducción pendiente para el texto que sigue

+
+ +

An automatic document.open() call happens when {{domxref("document.write()")}} is called after the page has loaded.

+ +

For years Firefox and Internet Explorer additionally erased all JavaScript variables, etc., in addition to removing all nodes. This is no longer the case.document non-spec'ed parameters to document.open

+ +

Gecko-specific notes

+ +

Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.

+ +

Starting with Gecko 1.9.2, document.open() uses the principal of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call {{domxref("document.write()")}} into an untrusted document from chrome, even using wrappedJSObject. See Security check basics for more about principals.

+ +

Three-argument document.open()

+ +

There is a lesser-known and little-used three-argument version of document.open() , which is an alias of {{domxref("Window.open()")}} (see its page for full details).

+ +

This call, for example opens github.com in a new window, with its opener set to null:

+ +
document.open('https://www.github.com','', 'noopener=true')
+ +

Two-argument document.open()

+ +

Browsers used to support a two-argument document.open(), with the following signature:

+ +
document.open(type, replace)
+ +

Where type specified the MIME type of the data you are writing (e.g. text/html) and replace if set (i.e. a string of "replace") specified that the history entry for the new document would replace the current history entry of the document being written to.

+ +

This form is now obsolete; it won't throw an error, but instead just forwards to document.open() (i.e. is the equivalent of just running it with no arguments).  The history-replacement behavior now always happens.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/document/adoptnode/index.html b/files/es/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..0a90679756 --- /dev/null +++ b/files/es/web/api/document/adoptnode/index.html @@ -0,0 +1,61 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +tags: + - API + - DOM + - DOM Reference + - Referencia + - metodo +translation_of: Web/API/Document/adoptNode +--- +
{{ ApiRef("DOM") }}
+ +

Document.adoptNode() transfiere un {{Glossary("node/dom", "node")}} desde otro {{domxref("Document", "document", "", "1")}} al documento del método. El nodo adoptado y sus subnodos se eliminan del documento original (si lo hubiera), encuentra  y su {{domxref("Node.ownerDocument", "ownerDocument")}} se cambia por el documento actual. El nodo puede entoces ser insertado en el documento actual.

+ +

Sintaxis

+ +
node = document.adoptNode(externalNode);
+
+ +
+
node
+
El nodo adoptado que ahora tiene este documento como su {{domxref("Node.ownerDocument", "ownerDocument")}}. El {{domxref("Node.parentNode", "parentNode")}} del nodo es null, esto se debe a que aún no a sido insertado en el árbol del documento. Tenga en cuenta que node y externalNode son el mismo objeto después de esta llamada.
+
externalNode
+
El nodo a ser adoptado desde otro documento.
+
+ +

Ejemplo

+ +
var iframe = document.querySelector('iframe');
+var iframeImages = iframe.contentDocument.querySelectorAll('img');
+var newParent = document.getElementById('images');
+
+iframeImages.forEach(function(imgEl) {
+  newParent.appendChild(document.adoptNode(imgEl));
+});
+
+ +

Notas

+ +

Los nodos de documentos externos deberían ser clonados utilizando {{domxref("document.importNode()")}} (o adoptado utilizando document.adoptNode()) antes de que puedan ser insertados en el documento actual. Para más incidencias sobre {{domxref("Node.ownerDocument")}}, vea el W3C DOM FAQ.

+ +

Firefox actualmente no obliga a cumplir esta regla (lo hizo un tiempo durante el desarrollo de Firefox 3, pero muchos sitios se rompían cuando esta regla era obligatoria). Animamos a los desarrolladores web a que corrijan su código para seguir esta regla con el fin de mejorar la compatibilidad futura.

+ +

Epecificación

+ + + +

Compatibilidad con navegadores

+ + + +

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

+ +

Vea también

+ + diff --git a/files/es/web/api/document/alinkcolor/index.html b/files/es/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..f270799c53 --- /dev/null +++ b/files/es/web/api/document/alinkcolor/index.html @@ -0,0 +1,36 @@ +--- +title: document.alinkColor +slug: Web/API/Document/alinkColor +translation_of: Web/API/Document/alinkColor +--- +

{{APIRef("DOM")}}

+ +
+

Desaprobado

+
+ +

Devuelve o define el color que tendrán los vínculos activos en el cuerpo (elemento body del documento. Un vínculo está activo durante el tiempo entre los eventos mousedown (cuando se presiona el botón izquierdo del "mouse" sobre el vínculo) y mouseup (cuando se deja de presionar el vínculo al soltar el botón izquierdo del "mouse").

+ +

Sintaxis

+ +
color = document.alinkColor
+document.alinkColor =color
+
+ +

color es un texto que deberá llevar el nombre del color en inglés(e.g., "blue", "darkblue", etc.) o el valor hexadecimal del color (e.g., #0000FF)

+ +

Notas

+ +

El valor por defecto de esta propiedad en Mozilla es rojo (#ee0000 en hexadecimal).

+ +

document.alinkColor es obsoleto en DOM Level 2 HTML. Una alternativa es el selector CSS {{ Cssxref(":active") }}.

+ +

Otra alternativa es document.body.aLink, sin embargo éste es desaprobado en HTML 4.01 a favor de la alternativa CSS.

+ +

Gecko soporta tanto alinkColor/:active como {{ Cssxref(":focus") }}. Internet Explorer 6 y 7 soportan alinkColor/:active sólo para vínculos de ancla (<a>) HTML y el comportamiento es el mismo que :focus bajo Gecko. En IE (Internet Explorer) no hay soporte para :focus.

+ +

Especificación

+ +

DOM Nivel 0. No es parte de ningún estándar.

+ +

MSDN: alinkColor property

diff --git a/files/es/web/api/document/anchors/index.html b/files/es/web/api/document/anchors/index.html new file mode 100644 index 0000000000..fbcd8eea0e --- /dev/null +++ b/files/es/web/api/document/anchors/index.html @@ -0,0 +1,95 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +tags: + - API + - Desaprobado + - Documento + - HTML DOM + - Propiedad + - Referencia +translation_of: Web/API/Document/anchors +--- +
{{APIRef("DOM")}}{{deprecated_header()}}
+ +
La propiedad de solo lectura anchors de la interfaz {{domxref("Document")}} devuelve una lista de todas las anclas (anchors) del documento.
+ +

Sintaxis

+ +
nodeList = document.anchors;
+
+ +

Valor

+ +

Una {{domxref("HTMLCollection")}}.

+ +

Ejemplo

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

Lo siguiente es un ejemplo que puebla una Tabla de Contenido con cada ancla en la página:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Test</title>
+<script>
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i < document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+</script>
+</head>
+<body onload="init()">
+
+<h1>Title</h1>
+<h2><a name="contents">Contents</a></h2>
+<ul id="toc"></ul>
+
+<h2><a name="plants">Plants</a></h2>
+<ol>
+  <li>Apples</li>
+  <li>Oranges</li>
+  <li>Pears</li>
+</ol>
+
+<h2><a name="veggies">Veggies</a></h2>
+<ol>
+  <li>Carrots</li>
+  <li>Celery</li>
+  <li>Beats</li>
+</ol>
+
+</body>
+</html>
+ +

Ver en JSFiddle

+ +

Notas

+ +

Por razones de retrocompatibilidad, el conjunto de anclas devuelto sólo contiene aquellas anclas creadas con el atribuo name, y no aquellas creadas con el atributo id.

+ +

Especificaciones

+ +

DOM Level 2 HTML: anchors

+ +

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

+ +

Compatibilidad de navegadores

+ + + +
{{Compat("api.Document.anchors")}}
diff --git a/files/es/web/api/document/applets/index.html b/files/es/web/api/document/applets/index.html new file mode 100644 index 0000000000..e6ecf71b60 --- /dev/null +++ b/files/es/web/api/document/applets/index.html @@ -0,0 +1,30 @@ +--- +title: document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +

{{APIRef("DOM")}}

+ +

Resumen

+ +

applets Devuelve una lista ordenada de los + + applets + del documento.

+ +

Sintaxis

+ +
nodeList = document.applets
+
+ +

Ejemplo

+ +
// ( Cuando sabes que el segundoapplet es el que quieres )
+my_java_app = document.applets[1];
+
+ +

Especificación

+ +

DOM Level 2 HTML: applets

+ +

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

diff --git a/files/es/web/api/document/async/index.html b/files/es/web/api/document/async/index.html new file mode 100644 index 0000000000..132fd106e1 --- /dev/null +++ b/files/es/web/api/document/async/index.html @@ -0,0 +1,33 @@ +--- +title: Document.async +slug: Web/API/Document/async +translation_of: Web/API/XMLDocument/async +--- +

document.async es utilizado para indicar cuándo un llamado de  {{domxref("document.load")}} debe ser sincrónico o asincrónico. true es su valor por defecto, indicando que el documento se cargó asincrónicamente.

+ +

(Desde la versión 1.4 alpha es posible cargar documentos sincrónicamente)

+ +

Ejemplo

+ +
function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Devuelve los contenidos de querydata.xml como un string
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');
+ +

Especificación

+ + + +

Véase también

+ + diff --git a/files/es/web/api/document/bgcolor/index.html b/files/es/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..7baf9c893b --- /dev/null +++ b/files/es/web/api/document/bgcolor/index.html @@ -0,0 +1,39 @@ +--- +title: document.bgColor +slug: Web/API/Document/bgColor +translation_of: Web/API/Document/bgColor +--- +

{{APIRef("DOM")}}{{ Deprecated_header() }}

+ +

bgColor da/define el color de fondo (bgColor) del documento actual.

+ +

Sintaxis

+ +
color = document.bgColor
+document.bgColor =
+color
+
+ +

Parámetros

+ + + +

Ejemplos

+ +
# document.bgColor = "darkblue";
+# document.bgColor = "#ff00ff";
+
+ +

Notas

+ +

El valor por defecto de esta propiedad en Mozilla Firefox es blanco (#ffffff en hexadecimal).

+ +

document.bgColor está desaprobado en DOM Level 2 HTML. La alternativa recomendada es el uso del estilo background-color de CSS el cual puede ser accesado a través del DOM con document.body.style.backgroundColor. Otra alternativa es document.body.bgColor, sin embargo, ésta última también está desaprobada en HTML 4.01 a favor de la alternativa CSS.

+ +

Especificación

+ +

DOM Nivel 0. No es parte de ningún estándar.

+ +

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

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

Resumen

+ +

Devuelve el nodo del <body> o el nodo del <frameset> del documento.

+ +

Sintaxis

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

Ejemplo

+ +
// en 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"
+
+ +

Notas

+ +

document.body es el elemento que contiene el contenido para el documento. En documentos con contenidos <body>, devuelven el elemento <body>, y en documentos de marco de sistema, esto devuelve el elemento extremo <frameset>.

+ +

Aunque body es programable, colocando un nuevo cuerpo en un documento efectivamente quitará a todos los hijos actuales del elemento existente <body>.

+ +

Especificación

+ +

DOM Level 2 HTML: HTMLDocument.body

+ +

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

diff --git a/files/es/web/api/document/characterset/index.html b/files/es/web/api/document/characterset/index.html new file mode 100644 index 0000000000..b4fb1e2551 --- /dev/null +++ b/files/es/web/api/document/characterset/index.html @@ -0,0 +1,36 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +translation_of: Web/API/Document/characterSet +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve la codificación de caracteres (conjunto de caracteres) usado en el documento.

+ +

Sintaxis

+ +
string = document.characterSet
+
+ +

Ejemplo

+ +
<button onclick="alert(document.characterSet);"
+>Mostrar conjunto de caracteres</button>
+// devuelve el conjunto de caracteres del documento, por ejemplo "ISO-8859-1 o UTF-8"
+
+ +

Notas

+ +

La codificación de caracteres es el conjunto de caracteres usados para interpretar el documento, el cual puede ser diferente a la codificación especificada por la página (el usuario puede omitir la codificación).

+ +

Para una lista completa de juegos/conjuntos de caracteres, visite: http://www.iana.org/assignments/character-sets.

+ +

Especificación

+ +

DOM Nivel 0. No es parte de ningún estándar.

+ +
 
+ +

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

diff --git a/files/es/web/api/document/clear/index.html b/files/es/web/api/document/clear/index.html new file mode 100644 index 0000000000..6208e48885 --- /dev/null +++ b/files/es/web/api/document/clear/index.html @@ -0,0 +1,31 @@ +--- +title: Document.clear() +slug: Web/API/Document/clear +tags: + - API + - Document + - HTML DOM + - Method + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - NeedsSpectTable + - Referencia +translation_of: Web/API/Document/clear +--- +

{{APIRef("DOM")}}{{ Deprecated_header() }}

+ +

Método que se usa en versiones anterior a las 1.0 de Mozilla para para limpiar el documento completo.

+ +

No hace nada en versiones más recientes basado en Mozilla así como en Internet Explorer y Netscape 4.

+ +

Síntaxis

+ +
document.clear()
+
+ +

Especificación

+ + diff --git a/files/es/web/api/document/close/index.html b/files/es/web/api/document/close/index.html new file mode 100644 index 0000000000..313678de2c --- /dev/null +++ b/files/es/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")}}

+ +

El método document.close() finaliza la escritura de un documento abierta con document.open().

+ +

Sintaxis

+ +
document.close();
+
+ +

Ejemplo

+ +
// Abrir un documento.
+// Escribir contenido en el documento.
+// Cerrar el documento.
+document.open();
+document.write("<p>El único contenido.</p>");
+document.close();
+
+ +

Especificación

+ +

DOM Level 2 HTML: close() Method

diff --git a/files/es/web/api/document/contenttype/index.html b/files/es/web/api/document/contenttype/index.html new file mode 100644 index 0000000000..f385843676 --- /dev/null +++ b/files/es/web/api/document/contenttype/index.html @@ -0,0 +1,25 @@ +--- +title: Document.contentType +slug: Web/API/Document/contentType +translation_of: Web/API/Document/contentType +--- +

{{ ApiRef("DOM") }}{{Non-standard_header}}

+ +

Devuelve el tipo MIME con el que el documento está siendo renderizado. Puede obtenerlo a partir de los encabezados HTTP (Headers) o de otras fuentes de información MIME, y puede ser afectado por conversiones automáticas inferidas tanto por el navegador como por cualquiera de sus extensiones.

+ +

Sintáxis

+ +
contentType = document.contentType;
+
+ +

contentType es una propiedad de sólo lectura.

+ +

Notas

+ +

Esta propiedad no es afectada por los tags meta.

+ +

Especificaciones

+ +

No estándar, sólo soportada por Gecko.

+ +

 

diff --git a/files/es/web/api/document/crearatributo/index.html b/files/es/web/api/document/crearatributo/index.html new file mode 100644 index 0000000000..22f769d577 --- /dev/null +++ b/files/es/web/api/document/crearatributo/index.html @@ -0,0 +1,91 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/crearAtributo +tags: + - Atributos + - Crear Atributo + - JavaScript + - Métodos +translation_of: Web/API/Document/createAttribute +--- +
{{ ApiRef("DOM") }}
+ +

El método Document.createAttribute() crea un nuevo nodo de tipo atributo (attr), y lo retorna. El objeto crea un nodo implementando la interfaz {{domxref("Attr")}}. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento de esta forma.

+ +
+

El texto pasado como parametro es convertido a minusculas.

+
+ +

Sintaxis

+ +
atributo = document.createAttribute(nombre)
+
+ +

Parametros

+ + + +

Valor que retorna

+ +

Un nodo {{domxref("Attr")}} nodo.

+ +

Excepciones

+ + + +

Ejemplo

+ +
var nodo = document.getElementById("div1");
+var a = document.createAttribute("miAtributo");
+a.value = "nuevoVal";
+nodo.setAttributeNode(a);
+console.log(nodo.getAttribute("miAtributo")); // "nuevoVal"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}{{Spec2("DOM WHATWG")}}Comportamiento preciso con caracteres en mayuscula 
{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM3 Core')}}Sin cambios
{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM2 Core')}}Sin cambios
{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad del buscador

+ + + +

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

+ +

Ver ademas

+ + diff --git a/files/es/web/api/document/createdocumentfragment/index.html b/files/es/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..5137778ee7 --- /dev/null +++ b/files/es/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,119 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +translation_of: Web/API/Document/createDocumentFragment +--- +
{{ ApiRef("DOM") }}
+ +
+ +

Crea un nuevo DocumentFragment vacio, dentro del cual un nodo del DOM puede ser adicionado para construir un nuevo arbol DOM fuera de pantalla.

+ +

Sintaxis

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

Se crea un objeto DocumentFragment vacio, el cual queda listo para que pueda insertarseles nodos en el.

+ +

Notas de uso

+ +

DocumentFragment son Nodos del DOM que nunca forman parte del arbol DOM. El caso de uso mas comun es crear un document fragment, agregar elementos al document fragment y luego agregar dicho document fragment al arbol del DOM. En el arbol del DOM, el document fragment es remplazado por todos sus hijos.

+ +

Dado que el document fragment es generado en memoria y no como parte del arbol del DOM, agregar elementos al mismo no causan reflow (computo de la posicion y geometria de los elementos) en la pagina. Como consecuencia, usar document fragments usualmente resultan en mejor performance.

+ +

Tambien puede utilizarse el constructor {{domxref("documentFragment")}} para crear un nuevo fragmento:

+ +
let fragment = new DocumentFragment();
+ +

Ejemplo

+ +

Este ejemplo crea una lista de los principales navegadores web en un DocumentFragment, y luego adiciona el nuevo subarbol DOM al document para ser mostrado.

+ +

HTML

+ +
<ul id="ul">
+</ul>
+ +

JavaScript

+ +
var element  = document.getElementById('ul'); // assuming ul exists
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+ +

Resultado

+ +

{{EmbedLiveSample("Example", 600, 140)}}

+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Soporte Basico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Especificaciónes

+ + + +

Vea También

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

En un documento HTML, el método Document.createElement() crea un elemento HTML especificado por su tagName, o un  {{domxref("HTMLUnknownElement")}} si su tagName no se reconoce. En un documento XUL, crea el elemento XUL especificado. En otros documentos, crea un elemento con un namespace URI null.

+ +

Para declarar el namespace URI del elemento, utiliza document.createElementNS().

+ +

Sintaxis

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

Parámetros

+ +
+
tagName
+
+ +

Cadena que especifica el tipo de elemento a crear. El {{domxref("Node.nodeName", "nodeName")}} del elemento creado se inicializa con el valor de tagName. No utilizar nombres reservados (como "html:a") con este método. Al ser invocado en un documento HTML, createElement() convierte tagName a minúsculas antes de crear el elemento. En Firefox, Opera, y Chrome, createElement(null) funciona como createElement("null").

+ +
+
options{{optional_inline}}
+
Un objeto opcional ElementCreationOptions que contiene una única propiedad llamada is, cuyo valor es el de la etiqueta name de un elemento personalizado definido previamente utilizando customElements.define(). Para compatibilidad con versiones anteriores de Elements specification, algunos navegadores podrían permitir pasar una cadena aquí en vez de un objeto, donde el valor de la cadena es la etiqueta name del elemento creado. Ver Extending native HTML elements para más información sobre como usar este parámetro.
+
El nuevo elemento recibirá el atributo cuyo valor es la etiqueta name del elemento personalizado. Los elementos personalizados son una característica experimental solo disponible en algunos navegadores.
+
+ +

Retorna

+ +

El nuevo Element.

+ +

Ejemplo

+ +

Crea un nuevo <div> y lo inserta antes del elemento con ID "div1".

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Trabajando con elementos||</title>
+</head>
+<body>
+  <div id="div1">El texto superior se ha creado dinámicamente.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // crea un nuevo div
+  // y añade contenido
+  var newDiv = document.createElement("div");
+  var newContent = document.createTextNode("Hola!¿Qué tal?");
+  newDiv.appendChild(newContent); //añade texto al div creado.
+
+  // añade el elemento creado y su contenido al DOM
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

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

+ +

Especificaciones

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

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1][2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Parámetro options{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatGeckoDesktop(50)}}[4][5]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Desde Gecko 22.0 {{geckoRelease("22.0")}} createElement() no utiliza {{domxref("HTMLSpanElement")}} interface cuando el argumento es "bgsounds", "multicol", o "image".  En cambio, HTMLUnknownElement se utiliza para "bgsound" y "multicol" y {{domxref("HTMLElement")}} HTMLElement se utiliza para "image".

+ +

[2] La implementación en Gecko de createElement no cumple la especificación DOM para documentos XUL y XHTML: localName y namespaceURI no son inicializados como null en el elemento creado. Consúltese el {{ Bug(280692) }} para más información.

+ +

[3] En versiones anteriores de la especificación, este argumento era solamente una cadena cuyo valor era la etiqueta name del elemento personalizado. Por ejemplo: Podia recibir document.createElement("button", "mi-boton") en lugar de document.createElement("button", {id: "mi-boton"}). Por razones de compatibilidad, Chrome acepta ambas formas.

+ +

[4] Consultar [3] arriba: como Chrome, Firefox acepta una cadena en vez de un objeto en esta posición, pero solamente desde la versión 51 en adelante. En la versión 50, options debe ser un objeto.

+ +

[5] Para experimentar con elementos personalizados en Firefox, deben establecerse las preferencias dom.webcomponents.enabled y dom.webcomponents.customelements.enabled a true.

+ +

Notas de CSS Quantum

+ + + +

Ver también

+ + diff --git a/files/es/web/api/document/createelementns/index.html b/files/es/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..29571b0978 --- /dev/null +++ b/files/es/web/api/document/createelementns/index.html @@ -0,0 +1,168 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +translation_of: Web/API/Document/createElementNS +--- +
{{ApiRef("DOM")}}
+ +

Crea un elemento del DOM con el espacio de nombres URI y un nombre calificado.

+ +

Para crear un elemento sin especificar un espacio de nombre URI usa el método createElement.

+ +

Sintaxis

+ +
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
+
+ +

Parámetros

+ +
+
namespaceURI
+
String que especifica el namespace URI a asociar con el elemento. La propiedad namespaceURI del elemento creado es inicializada con el valor del namespaceURI. Ver Namespace URIs válidos.
+
qualifiedName
+
String que especifica el tipo del elemento a ser creado. La propiedad nodeName del elemento creado es inicializada con el valor qualifiedName.
+
optionsOpcional
+
Un objeto opcional ElementCreationOptions que contiene una sola propiedad llamada is, cuyo valor es el nombre de la etiqueta para un elemento personalizado previamente definido usando customElements.define(). Para retro compatibilidad con versiones previas de la Especificación de Elementos Personalizados, algunos navegadores te permitirán pasar un String aquí en lugar de un Objeto, donde el valor del String es el nombre de la etiqueta del elemento personalizado. Ver Extendiendo elementos HTML nativos para más información sobre como usar este parámetro.
+
Al nuevo elemento le será dado un atributo is cuyo valor es el nombre de la etiqueta del elemento personalizado. Los elementos personalizados son una característica experimental disponible solo en algunos navegadores.
+
+ +

Valor de Retorno

+ +

El nuevo Elemento.

+ +

Namespace URIs válidos

+ + + +

Ejemplo

+ +

El código siguiente crea un elemento <div> nuevo en el namespace XHTML y lo agrega al elemento vbox. Aunque no es un documento XUL extremamente útil esto demuestra el uso de los elementos de dos namespaces distintos dentro de un solo documento:

+ +
<?xml version="1.0"?>
+<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Trabajando con elementos||"
+      onload="init()">
+
+<script type="text/javascript"><![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("Este es el texto que fue construido dinámicamente con createElementNS y createTextNode y luego insertado dentro del documento usando appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]></script>
+
+ <vbox id='ContainerBox' flex='1'>
+  <html:div>
+   El script en esta página agregará contenido dinámico debajo:
+  </html:div>
+ </vbox>
+
+</page>
+
+ +
+

El ejemplo dado arriba usa script en linea lo cúal no es recomendable en documentos XHTML. Este ejemplo en particular es un documento XUL con XHTML embedido, de cualquier forma la recomendación aplica.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
SoporteChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
argumento options {{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(50)}}[2][3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
SoporteAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] En versiones previas de la especificación  el argumento fue solo un String cuyo valor fue el nombre de etiqueta del elemento personalizado. Por motivo de retro compatibilidad Chrome acepta ambas formas.

+ +

[2] Ver [1] arriba: Firefox al igual que Chrome acepta un string en lugar de un objeto, pero solo de la version 51 en adelante. En la version 50 options debe ser un objeto.

+ +

[3] Para experimentar con elementos personalizados en Firefox debes establecer las preferencias  dom.webcomponents.enabled y dom.webcomponents.customelements.enabled como true.

+ +

Ver también

+ + diff --git a/files/es/web/api/document/createrange/index.html b/files/es/web/api/document/createrange/index.html new file mode 100644 index 0000000000..8c0cc63391 --- /dev/null +++ b/files/es/web/api/document/createrange/index.html @@ -0,0 +1,42 @@ +--- +title: document.createRange +slug: Web/API/Document/createRange +tags: + - Rango + - Referencia_DOM_de_Gecko + - crear rango +translation_of: Web/API/Document/createRange +--- +

{{ ApiRef() }}

+ +

Resumen

+ +

Retorna un nuevo objeto Rango.

+ +

Sintáxis

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

En este ejemplo, range es el nuevo objeto rango creado.

+ +

Ejemplo

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

Notas

+ +

Una vez que se ha creado un objeto Rango, se necesita configurar sus puntos límites antes de hacer uso de la mayoría de sus métodos.

+ +

Especificación

+ +

DOM Level 2 Range: DocumentRange.createRange

+ + + +
+ +

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

diff --git a/files/es/web/api/document/createtextnode/index.html b/files/es/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..fc1b1488f4 --- /dev/null +++ b/files/es/web/api/document/createtextnode/index.html @@ -0,0 +1,78 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Documento + - Referencia + - createTextNode + - metodo +translation_of: Web/API/Document/createTextNode +--- +
{{APIRef("DOM")}}
+ +

Crea un nuevo nodo de texto. Este método puede ser usado para escapar caracteres HTML.

+ +

Sintaxis

+ +
var text = document.createTextNode(data);
+
+ + + +

Ejemplo

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode example</title>
+<script>
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="addTextNode('YES! ');">YES!</button>
+  <button onclick="addTextNode('NO! ');">NO!</button>
+  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
+
+  <hr />
+
+  <p id="p1">First line of paragraph.</p>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-document-createtextnode', 'Document: createTextNode')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilidad con navegadores

+ + + +

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

diff --git a/files/es/web/api/document/defaultview/index.html b/files/es/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..e2b44cdd71 --- /dev/null +++ b/files/es/web/api/document/defaultview/index.html @@ -0,0 +1,35 @@ +--- +title: Document.defaultView +slug: Web/API/Document/defaultView +tags: + - API + - Document + - HTML DOM + - NeedsUpdate + - Property + - Reference +translation_of: Web/API/Document/defaultView +--- +
{{ ApiRef() }}
+ +

Resumen

+ +

En los navegadores devuelve el objeto window asociado con el document o null si no está disponible.

+ +

Sintaxis

+ +
var win = document.defaultView;
+ +

Esta propiedad es de solo lectura.

+ +

Notas

+ +

De acuerco con quirksmode, defaultView no está soportado en IE hasta su version 9.

+ +

Especificación

+ + diff --git a/files/es/web/api/document/designmode/index.html b/files/es/web/api/document/designmode/index.html new file mode 100644 index 0000000000..cf234abee9 --- /dev/null +++ b/files/es/web/api/document/designmode/index.html @@ -0,0 +1,56 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +tags: + - API + - Documento + - HTML DOM + - Propiedad + - Referencia + - editor +translation_of: Web/API/Document/designMode +--- +
{{ ApiRef() }}
+ +

document.designMode controla la posibilidad de editar un documento entero. Los valores válidos son "on" y "off". De acuerdo a las especificaciones,  el valor predeterminado de esta propiedad es "off". Firefox sigue este estándar. El valor predeterminado de versiones anteriores de Chrome y IE es "inherit". En IE6-10, el valor se escribe con mayúscula.

+ +

Sintaxis

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

Ejemplo

+ +

Hacer un documento {{HTMLElement("iframe")}} editable:

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

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/document/dir/index.html b/files/es/web/api/document/dir/index.html new file mode 100644 index 0000000000..61c8a2d637 --- /dev/null +++ b/files/es/web/api/document/dir/index.html @@ -0,0 +1,76 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +translation_of: Web/API/Document/dir +--- +

{{ApiRef("")}}{{non-standard_header}}

+ +

La propiedad Document.dir es una {{domxref("DOMString")}} que representa la dirección del texto del documento, ya sea de izquierda a derecha o de derecha a izquierda, siendo la primera el valor por defecto. Sus valores posibles son rtl (Right To Left) o ltr (Left To Right).

+ +

Sintáxis

+ +
dirStr = document.dir;
+document.dir = dirStr;
+
+ +

Especificaciones

+ +

HTML5 WHATWG

+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}} [1]{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Antes de Firefox 23, la propiedad Document.dir devolvía "ltr" independientemente del valor de su elemento {{htmlelement("html")}} raíz.

+ +

Véase también

+ + diff --git a/files/es/web/api/document/doctype/index.html b/files/es/web/api/document/doctype/index.html new file mode 100644 index 0000000000..145ca57300 --- /dev/null +++ b/files/es/web/api/document/doctype/index.html @@ -0,0 +1,65 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +tags: + - API + - DOCTYPE + - DOM + - Document + - Propiedad + - Referencia +translation_of: Web/API/Document/doctype +--- +
{{ApiRef("DOM")}}
+ +

Devuelve la Declaración de tipo de documento (Document Type Declaration (DTD)), asociada al documento actual. El objeto devuelto implementa la interfaz {{domxref("DocumentType")}}. Utilice {{domxref("DOMImplementation.createDocumentType()")}} para crear un DocumentType.

+ +

Sintaxis

+ +
doctype = document.doctype;
+
+ + + +

Ejemplo

+ +
var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);
+ +

Notas

+ +

La propiedad devuelve null si no hay DTD asociada al documento actual.

+ +

El nivel 2 de DOM no soporta la edición de la declaración de tipo de documento.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM3 Core")}}Cambiado el valor de retorno para documentos HTML sin el elemento {{HTMLElement("html")}}. Define que el tipo de documento puede ser modificado.
{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM2 Core")}}Definición inicial
diff --git a/files/es/web/api/document/documentelement/index.html b/files/es/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..30453050f7 --- /dev/null +++ b/files/es/web/api/document/documentelement/index.html @@ -0,0 +1,42 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/documentElement +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Solo-lectura

+ +

Devuelve el Element que es el elemento raíz de document (por ejemplo, devuelve el elemento <html> en los documentos HTML).

+ +

Sintaxis

+ +
varelement = document.documentElement;
+
+ +

Ejemplo

+ +
var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+// firstTier el la NodeList de los hijos directos del elemento raízof the direct children of the root element
+for (var i = 0; i < firstTier.length; i++) {
+   // hacer algo con cada uno de los hijos directos del elemento raíz
+   // como firstTier[i]
+}
+
+ +

Notas

+ +

Esta propiedad es de sólo-lectura, facilitada para obtener el elemento raíz de cualquier documento.

+ +

Los documentos HTML contienen normalmente un único hijo directo, <html>, quizá con una declaración DOCTYPE antes que él. Los documento XML contienen a menudo, múltiples hijos: el elemento raíz, la declaración DOCTYPE y processing instructions.

+ +

Por tanto, deberías usar document.documentElement en lugar de {{ Domxref("document.firstChild") }} para obtener el elemento raíz.

+ +

Especificación

+ +

DOM Level 2 Core: Document.documentElement

diff --git a/files/es/web/api/document/documenturi/index.html b/files/es/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..4ff365a258 --- /dev/null +++ b/files/es/web/api/document/documenturi/index.html @@ -0,0 +1,121 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +tags: + - API + - ContenidoNecesario + - DOM + - EjemploNecesario + - Propiedad + - Referencia + - UbicaciónDocumento +translation_of: Web/API/Document/documentURI +--- +
{{ApiRef("DOM")}}
+ +

La propiedad documentURI de la interfaz del documento ({{domxref("Document")}}) devuelve la ubicación del documento como un string.

+ +

Originalmente DOM3 fue definido como un atributo de lectura/escritura. En DOM4 se especifica unicamente como de lectura.

+ +

Sintaxis

+ +
var string = document.documentURI;
+
+ +

Notas

+ +

Los documentos HTML tienen una propiedad {{domxref("document.URL")}} la cual devuelve el mismo valor (ubicación del documento). A diferencia de URL, documentURI está disponible para todos los tipos de documentos web.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM4', '#dom-document-documenturi','documentURI')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}{{Spec2('DOM3 Core')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Funcionamiento DOM3{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Funcionamiento DOM4{{CompatChrome(43.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Funcionamiento DOM3{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Funcionamiento DOM4{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
diff --git a/files/es/web/api/document/documenturiobject/index.html b/files/es/web/api/document/documenturiobject/index.html new file mode 100644 index 0000000000..fe28ca825f --- /dev/null +++ b/files/es/web/api/document/documenturiobject/index.html @@ -0,0 +1,39 @@ +--- +title: document.documentURIObject +slug: Web/API/Document/documentURIObject +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/documentURIObject +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Read-only

+ +

Devuelve un objeto {{ Interface("nsIURI") }} que representa la URI de document.

+ +

Esto sólo funciona para programas con privilegios (UniversalXPConnect) incluidas las extensiones. Para páginas web, esta propiedad no tiene significado especial y puede usarse de igual forma que cualquier otra propiedad del usuario.

+ +

El código con privilegios, debe tener cuidado de no leer o escribir esta propiedad en un objeto no controlado (e.g. on a wrappedJSObject of an XPCNativeWrapper). Ver {{ Bug(324464) }}para más detalles.

+ +

Sintaxis

+ +
varuri =doc.documentURIObject;
+
+ +

Ejemplo

+ +
// Comprueba que el esquema URI de la pestaña de Firefox es 'http',
+// asumiendo que este código se ejecuta dentro de browser.xul
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+
+ +

Especificación

+ +

No forma parte de ninguna especificación W3C.

diff --git a/files/es/web/api/document/dragover_event/index.html b/files/es/web/api/document/dragover_event/index.html new file mode 100644 index 0000000000..c4fe204135 --- /dev/null +++ b/files/es/web/api/document/dragover_event/index.html @@ -0,0 +1,338 @@ +--- +title: dragover +slug: Web/API/Document/dragover_event +translation_of: Web/API/Document/dragover_event +--- +
{{APIRef}}
+ +

El evento dragover se activa cuando un elemento o texto se arrastra a un objetivo válido (cada pocos cientos de milisegundos).

+ +

 

+ +

El evento se activa en la caída al objetivo.

+ +

General info

+ + + + + + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Target objects{{domxref("Document")}}, {{domxref("Element")}}
Interface{{domxref("DragEvent")}}
Default ActionReset the current drag operation to "none".
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetEl elemento que se encontraba bajo el elemento que está siendo arrastrado.
type {{readonlyInline}}DOMStringEl tipo de evento.
bubbles {{readonlyInline}}BooleanSi el evento se propaga normalmente o no.
cancelable {{readonlyInline}}BooleanSi el evento es cancelable o no.
view {{readonlyInline}}WindowProxydocument.defaultView (window del documento)
detail {{readonlyInline}}long (float)0.
dataTransferDataTransferLos datos que subyacen a la operación de drag-and-drop , conocidas como drag data store. Modo protegido.
currentTarget {{readonlyInline}}EventTargetEl nodo que tiene adjunto el detector de eventos.
relatedTarget {{readonlyInline}}EventTargetPara los eventos de mouseover, mouseout, mouseenter y mouseleave:El objetivo del evento complementario (el objetivo mouseleave en el caso del evento mouseenter). null sino.
screenX {{readonlyInline}}longLa coordinada X del puntro del ratón en coordenadas globales (de pantalla).
screenY {{readonlyInline}}longLa coordinada Y del puntero del ratón en coordenadas globales (en pantalla).
clientX {{readonlyInline}}longLa coordinada X del puntro del ratón en coordenadas locales (DOM content).
clientY {{readonlyInline}}longLa coordinada Y del puntro del ratón en coordenadas locales (DOM content).
button {{readonlyInline}}unsigned short +

El número de botón que se preionó cuando el ecento fue ectivado: Botón izquierdo=0, botón del medio=1(en caso de que esté presente), botón derecho=2. Para ratones configurados para zurdos donde laas acciones están configuradas al contrario los valores se leerán de derecha a izquierda.

+
buttons {{readonlyInline}}unsigned short +

Los botones presionados cuando el evento de ratón se activa: botón izquierdo=1,botón derecho=2, botón medio (rueda)=4, 4º botón (tipo "hacia atrás del navegador"=8, 5º botón ("tipo hacia delante en el navegador"=16. Si dos o más botones se presionan, devolverá la suma lógica de los valores. Ej: si se presionan los botones izquierdo y derecho, devolverá 3 (=1|2). Más información.

+
mozPressure {{readonlyInline}}float +

La cantidad de presión aplicada en dispositivos táctiles cuando se genera el evento; Este valor tiene un rango entre 0.0 (mínima presión) y 1.0 (máxima presión)

+
ctrlKey {{readonlyInline}}booleantrue si la tecla control estaba pulsada cuando el evento se lanzó false en cualquier otro caso.
shiftKey {{readonlyInline}}booleantrue si la tecla shift estaba pulsada cuando el evento de lanzó. false en otro caso.
altKey {{readonlyInline}}booleantrue si la tecla alt estaba pulsada cuando el evento se lanzó. false si no.
metaKey {{readonlyInline}}booleantrue si la tecla meta estaba presionada cuando el evento se disparó. false si no.
+ +

Example

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

Specifications

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

Browser compatibility

+ +

{{CompatibilityTable}}

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

See also

+ + diff --git a/files/es/web/api/document/embeds/index.html b/files/es/web/api/document/embeds/index.html new file mode 100644 index 0000000000..865efdb2fd --- /dev/null +++ b/files/es/web/api/document/embeds/index.html @@ -0,0 +1,48 @@ +--- +title: Document.embeds +slug: Web/API/Document/embeds +tags: + - API + - Documento + - Ejemplo + - HTML DOM + - Propiedad +translation_of: Web/API/Document/embeds +--- +
{{ApiRef}}
+ +

embeds es una propiedad de sólo lectura de la interfaz de {{domxref("Document")}}. Devuelve una lista con los elementos {{htmlelement("object")}} incrustados dentro del documento actual.

+ +

Sintaxis

+ +
nodeList = document.embeds
+
+ +

Valor

+ +

Una {{domxref("HTMLCollection")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}{{ Spec2('HTML WHATWG') }}
+ +

Compatibilidad con Navegadores

+ + + +
{{Compat("api.Document.embeds")}}
diff --git a/files/es/web/api/document/evaluate/index.html b/files/es/web/api/document/evaluate/index.html new file mode 100644 index 0000000000..67bc5d432e --- /dev/null +++ b/files/es/web/api/document/evaluate/index.html @@ -0,0 +1,211 @@ +--- +title: Document.evaluate() +slug: Web/API/Document/evaluate +translation_of: Web/API/Document/evaluate +--- +
{{ ApiRef("DOM") }}
+ +

Retorna XPathResult basado en una expresión XPath y otros parametros dados .

+ +

Sintaxis

+ +
var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);
+ + + +

Ejemplo

+ +
var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
+/* Search the document for all h2 elements.
+ * The result will likely be an unordered node iterator. */
+var thisHeading = headings.iterateNext();
+var alertText = "Level 2 headings in this document are:\n";
+while (thisHeading) {
+  alertText += thisHeading.textContent + "\n";
+  thisHeading = headings.iterateNext();
+}
+alert(alertText); // Alerts the text of all h2 elements
+
+ +

Note, in the above example, a more verbose XPath is preferred over common shortcuts such as //h2. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits every node from the root and all subnodes looking for possible matches.

+ +

Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:

+ +
document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null);
+
+ +

Notice in the above document.body has been used as the context instead of document so the XPath starts from the body element. (In this example, the "." is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving //h2) the query would start from the root node (html) which would be more wasteful.)

+ +

See Introduction to using XPath in JavaScript for more information.

+ +

Nota

+ + + +

Tipos de resultados

+ +

(Merge with Template:XPathResultConstants?

+ +

These are supported values for the resultType parameter of the evaluate method:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Result TypeValueDescription
ANY_TYPE0Whatever type naturally results from the given expression.
NUMBER_TYPE1A result set containing a single number. Useful, for example, in an XPath expression using the count() function.
STRING_TYPE2A result set containing a single string.
BOOLEAN_TYPE3A result set containing a single boolean value. Useful, for example, an an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE4A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.
ORDERED_NODE_ITERATOR_TYPE5A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.
UNORDERED_NODE_SNAPSHOT_TYPE6A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.
ORDERED_NODE_SNAPSHOT_TYPE7A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.
ANY_UNORDERED_NODE_TYPE8A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
FIRST_ORDERED_NODE_TYPE9A result set containing the first node in the document that matches the expression.
+ +

Results of NODE_ITERATOR types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.

+ +

Results of NODE_SNAPSHOT types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}{{Spec2("DOM3 XPath")}}Initial specification
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
XPath 1.0{{CompatChrome(1.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.8)}}{{CompatNo}}{{CompatOpera(9.0)}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
XPath 1.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implemented in WebKit 5.0 (531) or earlier.

+ +

Ver también

+ + diff --git a/files/es/web/api/document/execcommand/index.html b/files/es/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..2102597c22 --- /dev/null +++ b/files/es/web/api/document/execcommand/index.html @@ -0,0 +1,288 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - Método(2) + - NecesitaEjemplo + - Referencia + - editor +translation_of: Web/API/Document/execCommand +--- +
{{ApiRef("DOM")}}
+ +

Resumen

+ +

Cuando un documento HTML se ha cambiado a designMode, el objeto de documento expone el método execCommand lo que permite ejecutar comandos para manipular el contenido de la región editable. La mayoría de los comandos afectan a la selección de documento (negrita, cursiva, etc.), mientras que otros insertar nuevos elementos (añadiendo un enlace) o afectan a toda una línea (sangría). Al usar contentEditable, la llamada a execCommand afectará el elemento editable activo actual.

+ +

Sintaxis

+ +
execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+
+ +

Parámetros

+ +
+
aCommandName
+
Una {{domxref("DOMString")}} que especifica el nombre del comando a ejecutar. Vea {{anch("Comandos")}} para una lista de posibles comandos.
+
aShowDefaultUI
+
Un {{jsxref("Boolean")}} que indica si la interfaz de usuario por defecto se debe mostrar. Esto no se ha implementado en Mozilla.
+
aValueArgument
+
Una {{domxref("DOMString")}} representando algunos comandos (como insertImage) requiere un argumento valor extra (url de la imagen). Pasar un argumento de null si no se necesita ningún argumento.
+
+ +

Comandos

+ +
+
backColor
+
 Cambia el color de fondo del documento. En el modo styleWithCss, afecta el color de fondo del bloque que contiene. Esto requiere una cadena con el valor del color de fondo que se pasa como un valor de argumento. (Internet Explorer utiliza esta opción para definir el color de fondo del texto.)
+
bold
+
Pone las negritas o las quita para la selección o en el punto de inserción. (Internet Explorer utiliza la etiqueta STRONG en lugar de B.)
+
contentReadOnly
+
Hace que el documento de contenido, ya sea de sólo lectura o editable. Esto requiere un booleano verdadero / falso que se pasa como un valor de argumento. (No es compatible con Internet Explorer.)
+
copy
+
Copia la selección actual en el portapapeles. Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. Vea
+
createLink
+
Crea un vínculo de anclaje a partir de la selección, sólo si hay una selección. Esto requiere la cadena HREF URI que se pasa como un argumento de valor. El URI debe contener al menos un solo carácter, el cual puede ser un espacio en blanco. (Internet Explorer creará un enlace con un nulo valor URI.)
+
cut
+
Corta la selección y lo copia en el portapapeles actual. Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. Vea
+
decreaseFontSize
+
Añade una etiqueta SMALL alrededor de la selección o en el punto de inserción. (No es compatible con Internet Explorer.)
+
delete
+
Elimina la selección actual.
+
enableInlineTableEditing
+
Activa o desactiva la fila de la tabla y los controles de inserción y supresión de columna. (No es compatible con Internet Explorer.)
+
enableObjectResizing
+
Activa o desactiva los controladores de tamaño en imágenes y otros objetos de tamaño variable. (No es compatible con Internet Explorer.)
+
fontName
+
Cambia el nombre de la fuente para la selección o en el punto de inserción. Esto requiere una cadena de nombre de la fuente ("Arial", por ejemplo) que se pasa como un valor de argumento.
+
fontSize
+
Cambia el tamaño de fuente para la selección o en el punto de inserción. Esto requiere un tamaño de fuente HTML (1-7) que se pasa como un valor de argumento.
+
foreColor
+
Cambia un color de fuente para la selección o en el punto de inserción. Esto requiere una cadena de valor de color que se pasa como un valor de argumento.
+
formatBlock
+
Añade una etiqueta HTML de estilo bloque alrededor de la línea que contiene la selección actual, reemplazando el elemento de bloque que contiene la línea si existe (en Firefox, BLOCKQUOTE es la excepción - que envolverá cualquier elemento de bloque que contiene). Requiere una cadena de etiqueta-nombre que se pasa como un argumento de valor. Prácticamente todas las etiquetas de estilo bloque se pueden utilizar (por ejemplo. "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer sólo admite etiquetas de título H1 - H6, dirección y PRE, que también debe incluir los delimitadores de etiquetas <>, como "<H1>".)
+
forwardDelete
+
Elimina el character delante de la posición del cursor cursor.  Es lo mismo que pulsar la tecla suprimir.
+
heading
+
Añade una etiqueta de encabezado en torno a una selección, o la línea en el punto de inserción. Requiere la cadena de nombre de etiqueta que se pasa como un valor de argumento (es decir, "H1", "H6"). (No es compatible con Internet Explorer y Safari.)
+
hiliteColor
+
Cambia el color de fondo para la selección o el punto de inserción. Requiere una cadena de valores de color que se pasa como un valor de argumento. UseCSS debe estar encendido para que esto funcione. (No es compatible con Internet Explorer.)
+
increaseFontSize
+
Añade una etiqueta BIG alrededor de la selección o en el punto de inserción. (No es compatible con Internet Explorer.)
+
indent
+
Indenta la línea que contiene el punto de selección o inserción. En Firefox, si la selección abarca varias líneas en los diferentes niveles de indentación serán indentadas sólo las líneas menos indentadas en la selección.
+
insertBrOnReturn
+
Controla si la tecla Intro inserta una etiqueta br o divide el elemento de bloque actual en dos. (No es compatible con Internet Explorer.)
+
insertHorizontalRule
+
 Inserta una regla horizontal en el punto de inserción (borra la selección).
+
insertHTML
+
Inserta una cadena HTML en el punto de inserción (borra la selección). Requiere una cadena HTML válido que se ha pasado como un valor de argumento. (No es compatible con Internet Explorer.)
+
insertImage
+
Inserta una imagen en el punto de inserción (borra la selección). Requiere la cadena de imagen SRC URI que se pasa como un argumento de valor. El URI debe contener al menos un solo carácter, que puede ser un espacio en blanco. (Internet Explorer creará un enlace con un nulo valor URI.)
+
insertOrderedList
+
Crea una lista ordenada con números para la selección o en el punto de inserción.
+
insertUnorderedList
+
Crea una lista desordenada con viñetas para la selección o en el punto de inserción.
+
insertParagraph
+
  Inserta un párrafo en torno a la selección o la línea actual. (Internet Explorer inserta un párrafo en el punto de inserción y elimina la selección.)
+
insertText
+
Inserta el texto plano expedido en el punto de inserción (borra la selección).
+
italic
+
Alterna cursiva para la selección o el punto de inserción. (Internet Explorer utiliza la etiqueta de EM en lugar de I.)
+
justifyCenter
+
 Centra el punto de selección o inserción.
+
justifyFull
+
Justifica el punto de selección o inserción.
+
justifyLeft
+
Justifica la selección o inserción punto a la izquierda.
+
justifyRight
+
Justifica la selección o el punto de inserción a la derecha.
+
outdent
+
Anula la sangría de la línea que contiene la selección o el punto de inserción.
+
paste
+
Pega el contenido del portapapeles en el punto de inserción (reemplaza la selección actual). Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. Ver
+
redo
+
Rehace el anterior comando deshecho.
+
removeFormat
+
Quita todo el formato de la selección actual.
+
selectAll
+
Selecciona todo el contenido de la región editable.
+
strikeThrough
+
Alterna tachado para la selección o el punto de inserción.
+
subscript
+
Alterna subíndice para la selección o el punto de inserción.
+
superscript
+
Alterna exponente para la selección o el punto de inserción.
+
underline
+
Alterna subrayado para la selección o el punto de inserción.
+
undo
+
Deshace el último comando ejecutado.
+
unlink
+
 Elimina la etiqueta de ancla de un enlace ancla seleccionado.
+
useCSS {{ Deprecated_inline() }}
+
Alterna el uso de etiquetas HTML o CSS para el marcado generado. Requiere un booleano verdadero / falso como valor del argumento. NOTA: Este argumento es lógicamente hacia atrás (es decir, si se usa falso a usar CSS, entonces es verdadero a usar HTML). (No compatible con Internet Explorer.) Esto ha quedado obsoleto; utilice el comando styleWithCSS en su lugar.
+
styleWithCSS
+
Reemplaza el comando useCSS; el argumento funciona como se esperaba, es decir, si es verdadero modifica / genera atributos de estilo en el marcado, falso genera elementos de formato.
+
+ +

Ejemplo

+ +

(Este artículo está actualmente incompleto y carece de un ejemplo.)

+ +

Compatibilidad del navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
insertBrOnReturn{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+ +

Consulte la Scribe's "Browser Inconsistencies" documentation para obtener una lista de los muchos errores del navegador relacionadas con document.execCommand.

+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML Editing','#execcommand()','execCommand')}}{{Spec2('HTML Editing')}} 
+ +

Vea también

+ + diff --git a/files/es/web/api/document/exitfullscreen/index.html b/files/es/web/api/document/exitfullscreen/index.html new file mode 100644 index 0000000000..cd90147d82 --- /dev/null +++ b/files/es/web/api/document/exitfullscreen/index.html @@ -0,0 +1,75 @@ +--- +title: Document.exitFullscreen() +slug: Web/API/Document/exitFullscreen +translation_of: Web/API/Document/exitFullscreen +--- +
{{ApiRef("Fullscreen API")}}
+ +

El método exitFullscreen() de {{domxref("Document")}} solicita que el elemento de este documento que se presenta actualmente en modo de pantalla completa se retire del modo de pantalla completa, restaurando el estado anterior de la pantalla. Esto generalmente revierte los efectos de una llamada previa a {{domxref("Element.requestFullscreen()")}}.

+ +

La excepción es si otro elemento ya estaba en modo de pantalla completa cuando el elemento actual se colocó en modo de pantalla completa usando requestFullscreen(). En ese caso, el elemento de pantalla completa anterior se restaura al estado de pantalla completa. En esencia, se mantiene un {{interwiki("wikipedia", "Stack_(abstract_data_type)", "stack")}} de elementos de pantalla completa.

+ +

Sintaxis

+ +
exitPromise = document.exitFullscreen();
+
+ +

Parámetros

+ +

Ninguno.

+ +

Valor de retorno

+ +

Un {{jsxref("Promise")}} que se resuelve una vez que el {{Glossary("user agent")}} a terminado de salir del modo de pantalla completa. Si se produce un error al intentar salir del modo de pantalla completa, se llama al controlador catch() para la promesa.

+ +

Ejemplo

+ +

Este ejemplo hace que el documento actual entre y salga de una presentación a pantalla completa cada vez que se hace clic dentro del botón del mouse.

+ +
document.onclick = function (event) {
+  if (document.fullscreenElement) {
+    document.exitFullscreen()
+  } else {
+    document.documentElement.requestFullscreen()
+  }
+};
+ +
+

Nota: Para un ejemplo más completo, vea {{SectionOnPage("/en-US/docs/Web/API/Element/requestFullScreen", "Example")}}.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}{{Spec2("Fullscreen")}}Definición inicial
+ +

Compatibilidad del navegador

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/document/getelementbyid/index.html b/files/es/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..1232df45b4 --- /dev/null +++ b/files/es/web/api/document/getelementbyid/index.html @@ -0,0 +1,200 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Documento + - Elementos + - Referencia + - Web + - id + - metodo +translation_of: Web/API/Document/getElementById +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Devuelve una referencia al elemento por su ID.

+ +

Sintaxis

+ +
elemento = document.getElementById(id);
+
+ +

Parámetros

+ +
+
id
+
Es una cadena sensible a mayúsculas referida al ID único del elemento buscado.
+
+ +

Valor Retornado

+ +
+
element
+
Es una referencia a un objeto {{domxref("Element")}}, o null si un elemento con el ID especificado no se encuentra en el documento.
+
+

Ejemplo

+ +

HTML

+ + 
<html>
+<head>
+   <title>Ejemplo getElementById</title>
+</head>
+<body>
+   <p id="para">Cualquier texto acá</p>
+   <button onclick="changeColor('blue');">Azul</button>
+   <button onclick="changeColor('red');">Rojo</button>
+</body>
+</html>
+
+ +

JavaScript

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

Resultado

+ +

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

+
+
+ +

Notas

+ +

Los usuarios nuevos deberían notar que escribir en mayúsculas 'Id' en el nombre de este método debe ser corregida para que el código sea válido - 'getElementByID' no funcionará a pesar de que parezca natural.

+ +

A diferencia de otros métodos similares, getElementById sólo está disponible como un método del objeto global document, y no se encuentra disponible como un método en todos los objetos  del DOM. Como los valores ID deben ser únicos a traves del documento, no existe necesidad para versiones "locales" de la función.

+ +

Ejemplo

+ +
<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Documento</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>Hola Mundo 1</p>
+        <p id="test1">Hola Mundo 2</p>
+        <p>Hola palabra 3</p>
+        <p>Hola palabra 4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById('parent-id');
+        var test1=parentDOM.getElementById('test1');
+        //lanza error
+        //Uncaught TypeError: parentDOM.getElementById is not a function
+    </script>
+</body>
+</html>
+ +

Si no existe un elemento con la id solicitada, esta función devuelve null. Note que el parámetro id es sensible a mayúsculas, así que document.getElementById("Main") devolverá null dentro del elemento <div id="main"> porque "M" y "m" son diferentes para los propósitos de este método.

+ +

Elementos que no se encuentren en el documento no serán buscados por getElementById(). Cuando se cree un elemento y se le asigne un ID, debe insertar el elemento dentro del árbol del documento con {{domxref("Node.insertBefore()")}} u otro método similar antes de que se pueda acceder a el con getElementById():

+ +
+
var element = document.createElement("div");
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el será null!
+
+ +

Documentos no-HTML. La implementación de DOM debe tener información que diga que atributos son del tipo ID. Los atributos con el nombre "id" son son del tipo ID a menos que se los defina en el DTD del documento. El atributo id es definido para ser del tipo ID en los casos comunes de XHTML, XUL,  y otros. Las implementaciones que no sepan si los atributos son o no del tipo ID se espera que retornen null.

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónStatusComentarios
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Definición inicial para la interfase
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop(1.0) }}5.57.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile(1.0) }}6.06.01.0
+
+ +

Ver también

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

{{APIRef("DOM")}}

+ +

Retorna un objecto similar a un array de los elementos hijos que tengan todos los nombres de clase indicados. Cuando es llamado sobre el objeto document , la busqueda se realiza en todo el document, incluido el nodo raíz. También puedes llamar {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} sobre cualquier elemento; en ese caso retornara sólo los elementos hijos del elemento raíz indicado que contengan los nombres de clase indicados.

+ +

Sintaxis

+ +
var elementos = document.getElementsByClassName(nombres); // ó :
+var elementos = elementoRaiz.getElementsByClassName(nombres);
+ + + +

Ejemplos

+ +

Obtener todos los elementos de la clase 'prueba'

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

Obtener todos los elementos que tengan al mismo tiempo las clases 'rojo' y 'prueba'

+ +
document.getElementsByClassName('rojo prueba');
+ +

Obtener todos los elementos que tengan la clase 'prueba' y que estén dentro de un elemento de ID 'principal'

+ +
document.getElementById('principal').getElementsByClassName('prueba');
+ +

También podemos usar los metodos de Array.prototype en cualquier {{ domxref("HTMLCollection") }} pasando el HTMLCollection como el valor this del método. Aquí buscaremos todos los elementos div de la clase 'test':

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

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}3.09.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Especifiación

+ + diff --git a/files/es/web/api/document/getelementsbyname/index.html b/files/es/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..50350fe0ec --- /dev/null +++ b/files/es/web/api/document/getelementsbyname/index.html @@ -0,0 +1,81 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +translation_of: Web/API/Document/getElementsByName +--- +
{{APIRef("DOM")}}
+ +

Returns a nodelist collection with a given {{domxref("element.name","name")}} in the (X)HTML document.

+ +

Sintaxis

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

Ejemplo

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+ ...
+</head>
+
+<body>
+<form name="up"><input type="text"></form>
+<div name="down"><input type="text"></div>
+
+<script>
+var up_forms = document.getElementsByName("up");
+console.log(up_forms[0].tagName); // returns "FORM"
+</script>
+</body>
+</html>
+
+ +

Notas

+ +

El atributo name es solamente aplicable al documento (X)HTML. El método retorna una colección existente de {{domxref("NodeList")}} que contiene todos los elementos con el valor dado para el atributo name, tanto {{htmlelement("meta")}} o {{htmlelement("object")}} o en caso que name sea colocado en elementos que no soportan un atributo de atributo del todo.

+ +

El método getElementsByName trabaja de diferente manera en diferentes navegadires. En IE < 10, el método getElementsByName() tambipen retornará elementos que tienen un atributo id con el valor especificado. Entonces, debería tener cuidado de no usar el mismo string como name y ID.

+ +

Especificaciones

+ + + +

Especificaciones

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

Mira también

+ + diff --git a/files/es/web/api/document/getelementsbytagname/index.html b/files/es/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..7be48858c0 --- /dev/null +++ b/files/es/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,104 @@ +--- +title: document.getElementsByTagName +slug: Web/API/Document/getElementsByTagName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/getElementsByTagName +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve una lista de elementos con un nombre determinado. Se busca en todo el documento, incluyendo el nodo raíz.

+ +

Sintaxis

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

Ejemplo

+ +

En el siguiente ejemplo, getElementsByTagName empieza por el elemento padre y busca hacia abajo recurrentemente a lo largo de todo el DOM por ese elemento padre, buscando por hijos que cumplan con el criterio: nombre = name.

+ +

Ten en cuenta que cuando el nodo en el que se invoca getElementsByTagName, no es el nodo document, en realidad se está usando el método element.getElementsByTagName.

+ +
<html>
+
+<head>
+<title>ejemplo de getElementsByTagName</title>
+
+<script type="text/javascript">
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagName("p");
+
+  var num = allParas.length;
+
+  alert("Hay " + num + " <p> elementos en este documento");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagName("p");
+
+  var num = div1Paras.length;
+
+  alert("Hay " + num + " <p> elementos en el elemento div1");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagName("p");
+
+  var num = div2Paras.length;
+
+  alert("Hay " + num + " <p> elementos en el elemento div2");
+}
+
+</script>
+</head>
+
+<body style="border: solid green 3px">
+<p>Algo de texto</p>
+<p>Algo de texto</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Algo de texto en div1</p>
+    <p>Algo de texto en div1</p>
+    <p>Algo de texto en div1</p>
+
+    <div id="div2" style="border: solid red 3px">
+    <p>Algo de texto en div2</p>
+    <p>Algo de texto en div2</p>
+    </div>
+  </div>
+
+<p>Algo de texto</p>
+<p>Algo de texto</p>
+
+<button onclick="getAllParaElems();">
+ muestra todos los elementos p en el documento</button><br />
+
+<button onclick="div1ParaElems();">
+ muestra todos los elementos p en div1</button><br />
+
+<button onclick="div2ParaElems();">
+ muestra todos los elementos p en div2</button>
+
+</body>
+</html>
+
+ +

Especificación

+ +

DOM Level 2 Core: Document.getElementsByTagName

diff --git a/files/es/web/api/document/getelementsbytagnamens/index.html b/files/es/web/api/document/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..d97657647b --- /dev/null +++ b/files/es/web/api/document/getelementsbytagnamens/index.html @@ -0,0 +1,107 @@ +--- +title: document.getElementsByTagNameNS +slug: Web/API/Document/getElementsByTagNameNS +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/getElementsByTagNameNS +--- +

{{ ApiRef() }}

+ +

Resumen

+ +

Devuelve una lista de elementos cuyo nombre pertenece a un determinado 'namespace'. La búsqueda se realiza en todo el documento, incluyendo el elemento raíz.

+ +

Sintaxis

+ +
elements = document.getElementsByTagNameNS(namespace,name)
+
+ + + +

Ejemplo

+ +

En el siguiente ejemplo, getElementsByTagNameNS comienza por un elemento padre determinado y busca recurrentemente, hacia abajo, por los elementos que tienen el parámetro name que concuerda.

+ +

Es importante tener en cuenta que cuando el nodo en el que se invoca getElementsByTagName, no es el nodo document, en realidad estamos usando el método element.getElementsByTagNameNS.

+ +

Para usar el siguiente ejemplo, copia y pega en un documento con la extensión xhtml.

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>ejemplo de getElementsByTagNameNS</title>
+
+<script type="text/javascript">
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = allParas.length;
+
+  alert("Hay " + num + " &lt;p&gt; elementos en este documento");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div1Paras.length;
+
+  alert("Hay " + num + " &lt;p&gt; elementos en el elemento div1");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div2Paras.length;
+
+  alert("Hay " + num + " &lt;p&gt; elementos en el elemento div2");
+}
+
+</script>
+</head>
+
+<body style="border: solid green 3px">
+<p>Algo de texto exterior</p>
+<p>Algo de texto exterior</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Algo de texto en div1</p>
+    <p>Algo de texto en div1</p>
+    <p>Algo de texto en div1</p>
+
+    <div id="div2" style="border: solid red 3px">
+    <p>Algo de texto en div2</p>
+    <p>Algo de texto en div2</p>
+    </div>
+  </div>
+
+<p>Algo de texto exterior</p>
+<p>Algo de texto exterior</p>
+
+<button onclick="getAllParaElems();">
+ muestra todos los elementos p en el documento</button><br />
+
+<button onclick="div1ParaElems();">
+ muestra todos los elementos p en el div1</button><br />
+
+<button onclick="div2ParaElems();">
+ muestra todos los elementos p en el div2</button>
+
+</body>
+</html>
+
+ +

Especificación

+ +

DOM Level 2 Core: Document.getElementsByTagNameNS

diff --git a/files/es/web/api/document/getselection/index.html b/files/es/web/api/document/getselection/index.html new file mode 100644 index 0000000000..494ded4250 --- /dev/null +++ b/files/es/web/api/document/getselection/index.html @@ -0,0 +1,12 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +tags: + - Referencia + - Selección + - metodo +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +

{{APIRef("DOM")}}

+ +

Este método funciona exactamente igual que {{domxref("Window.getSelection()")}}; devuelve un objeto {{domxref("Selection")}} que representa el texto que se ha seleccionado en el documento.

diff --git a/files/es/web/api/document/hasfocus/index.html b/files/es/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..a3f4a7ce9e --- /dev/null +++ b/files/es/web/api/document/hasfocus/index.html @@ -0,0 +1,23 @@ +--- +title: element.hasFocus +slug: Web/API/Document/hasFocus +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/hasFocus +--- +

{{ ApiRef() }}

+ +

Resumen

+ +

El atributo hasFocus devuelve true si el foco está en en algún sitio del documento activo. Este atributo es parte de la especificación HTML 5 actualmente en desarrollo.

+ +

Sintaxis

+ +
focused = element.hasFocus
+
+ +

Ejemplo

+ +

Especificación

+ +

Focus management

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

{{APIRef("DOM")}}

+ +

Devuelve el elemento {{HTMLElement("head")}} del documento actual. Si hay más de un elemento <head>, devuelve el primero de estos.

+ +

Sintaxis

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

Ejemplo

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

Notas

+ +

document.head is de sólo lectura. Cualquier intento de asignar un valor a esta propiedad fallará silenciosamente o, en caso de que se encuentre en Modo estricto de ECMAScript en un navegador Gecko, lanzará un TypeError.

+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico4.0{{CompatGeckoDesktop("2")}}9.011.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoMobile("2")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Especificación

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

Note: Comenzando en {{Gecko("6.0")}}, document.height no es soportada. En lugar usar document.body.clientHeight. Ver {{domxref("element.clientHeight")}}.

+
+ +

Summary

+ +

Devuelve la altura del objeto {{domxref("document")}} . En la mayoría de los casos, esto equivale al elemento {{HTMLElement("body")}}  del documento actual.

+ +

Syntax

+ +
height_value = document.height
+
+ +

Example

+ +
// alert document height
+alert(document.height);
+
+ +

Alternatives

+ +
document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+
+ +

Specification

+ +

HTML5

+ +

See also

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

{{ ApiRef("DOM") }}

+ +

El  Document.hidden Es una propiedad solo de lectura, retorna un valor Booleano que indica si la pagina esta conciderada oculta o no.

+ +

Sintaxis

+ +
var boolean = document.hidden
+ +

Ejemplo

+ +
document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // Modify behavior...
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}{{Spec2('Page Visibility API')}}definicion inicial
+ +

Compatibilidad con Navegadores

+ + + +

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

diff --git a/files/es/web/api/document/importnode/index.html b/files/es/web/api/document/importnode/index.html new file mode 100644 index 0000000000..ea34cd33be --- /dev/null +++ b/files/es/web/api/document/importnode/index.html @@ -0,0 +1,84 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +

{{APIRef("DOM")}}

+ +

Crea una copia de un nodo desde un documento externo para ser insertado en el documento actual.

+ +

Sintaxis

+ +
var node = document.importNode(externalNode, deep);
+
+ +
+
node
+
El nuevo nodo importado al documento actual. El parentNode del nuevo nodo es null, ya que aun no ha sido insertado en el arbol del documento.
+
externalNode
+
El nodo externo a ser importado
+
deep
+
Un booleano que indica si los descendientes del nodo deben ser importados también.
+
+ +
+

Nota: En la especificación DOM4 (tal y como se ha implementado en Gecko 13.0 {{geckoRelease(13)}}), deep es un argumento opcional. En el caso de ser omitido, adopta el valor de true, por lo que se hace una deep copy por defecto. Para realizar una copia superficial (shallow copy), deep debe ser false.

+ +

Este comportamiento ha cambiado en la ultima especificación, por lo que si se omite el parámetro deep, éste adopta el valor false. Aunque aún es opcional, debería ser siempre provisto por razones de compatibilidad. Con Gecko 28.0 {{geckoRelease(28)}}, la consola advertia a los desarrolladores de no omitir el argumento. Empezando con Gecko 29.0 {{geckoRelease(29)}}), se realiza una copia superficial (shallow copy) por defecto.

+
+ +

Ejemplo

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

Notas

+ +

El nodo original no se borra del documento. El nodo importado es un clon del original.

+ +

 

+ +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they can be inserted into the current document. For more on the Node.ownerDocument issues, see the W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.

+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

Compatibilidad navegadores

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/es/web/api/document/index.html b/files/es/web/api/document/index.html new file mode 100644 index 0000000000..5b72f5850e --- /dev/null +++ b/files/es/web/api/document/index.html @@ -0,0 +1,390 @@ +--- +title: Documento +slug: Web/API/Document +tags: + - páginas_a_traducir +translation_of: Web/API/Document +--- +
{{ ApiRef }}
+ +
 
+ +

La interfaz Document representa cualquer página web cargada en el navegador y sirve como punto de entrada al contenido de la página (El árbol DOM). El DOM incluye elementos como {{HTMLElement("body")}} y {{HTMLElement("table")}}), entre muchos otros, y proporciona funcionalidad que es global al documento, como obtener la URL de la página y crear nuevos elementos en el documento.

+ +

{{inheritanceDiagram}}

+ +

La interfaz Document describe los métodos y propiedade comunes para cualquier clase de documento. Dependiento del tipo de documento (ej. HTML, XML, SVG, …), hay disponible una API más extensa: los documentos HTML, que se sirven con el tipo de contenido text/html, también implementan la interfaz {{domxref("HTMLDocument")}}, mientras que los documentos XML y SVG implementan la interfaz {{domxref("XMLDocument")}}.

+ +

Propiedades

+ +
+

Nota: La interfaz Document también hereda de las interfaces {{domxref("Node")}} y {{domxref("EventTarget")}}.

+
+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
Da acceso a todos los elementos del documento. Es una interfaz no estándar y no se debería utilizar.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
Se utiliza con {{domxref("document.load")}} para indicar una petición asíncrona.
+
{{domxref("Document.characterSet")}} {{readonlyinline}}
+
Devuelve el juego de caracteres que utiliza el documento.
+
{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}
+
Es un alias de {{domxref("Document.characterSet")}}. Utilice esta propiedad en su lugar.
+
{{domxref("Document.compatMode")}} {{experimental_inline}}
+
Indicates whether the document is rendered in Quirks or Strict mode.
+
{{domxref("Document.contentType")}} {{experimental_inline}}
+
Returns the Content-Type from the MIME Header of the current document.
+
{{domxref("Document.doctype")}}
+
Returns the Document Type Definition (DTD) of the current document.
+
{{domxref("Document.documentElement")}}
+
Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.
+
{{domxref("Document.documentURI")}}
+
Returns the document URL.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
Should return a {{domxref("DOMConfiguration")}} object.
+
{{domxref("Document.implementation")}}
+
Returns the DOM implementation associated with the current document.
+
{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}
+
Returns the encoding used when the document was parsed.
+
{{domxref("Document.lastStyleSheetSet")}}
+
Returns the name of the style sheet set that was last enabled. Has the value null until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
true if this document is synthetic, such as a standalone image, video, audio file, or the like.
+
{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.
+
{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
The element that's currently in full screen mode for this document.
+
{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.
+
{{domxref("Document.pointerLockElement")}} {{experimental_inline}}
+
Returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
+
{{domxref("Document.preferredStyleSheetSet")}}
+
Returns the preferred style sheet set as specified by the page author.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
Returns which style sheet set is currently in use.
+
{{domxref("Document.styleSheets")}}
+
Returns a list of the style sheet objects on the current document.
+
{{domxref("Document.styleSheetSets")}}
+
Returns a list of the style sheet sets available on the document.
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
Returns the encoding as determined by the XML declaration.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
Returns true if the XML declaration specifies the document to be standalone (e.g., An external part of the DTD affects the document's content), else false.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
Returns the version number as specified in the XML declaration or "1.0" if the declaration is absent.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

+ +

Extension for HTML documents

+ +

The Document interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:

+ +
+
{{domxref("Document.activeElement")}}
+
Returns the currently focused element.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Returns or sets the color of active links in the document body.
+
{{domxref("Document.anchors")}}
+
Returns a list of all of the anchors in the document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Returns an ordered list of the applets within a document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
Gets/sets the background color of the current document.
+
{{domxref("Document.body")}}
+
Returns the {{HTMLElement("body")}} element of the current document.
+
{{domxref("Document.cookie")}}
+
Returns a semicolon-separated list of the cookies for that document or sets a single cookie.
+
{{domxref("Document.defaultView")}}
+
Returns a reference to the window object.
+
{{domxref("Document.designMode")}}
+
Gets/sets the ability to edit the whole document.
+
{{domxref("Document.dir")}}
+
Gets/sets directionality (rtl/ltr) of the document.
+
{{domxref("Document.domain")}}
+
Returns the domain of the current document.
+
{{domxref("Document.embeds")}}
+
Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.
+
{{domxref("Document.fgColor")}} {{Deprecated_inline}}
+
Gets/sets the foreground color, or text color, of the current document.
+
{{domxref("Document.forms")}}
+
Returns a list of the {{HTMLElement("form")}} elements within the current document.
+
{{domxref("Document.head")}}
+
Returns the {{HTMLElement("head")}} element of the current document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
Gets/sets the height of the current document.
+
{{domxref("Document.images")}}
+
Returns a list of the images in the current document.
+
{{domxref("Document.lastModified")}}
+
Returns the date on which the document was last modified.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of hyperlinks in the document.
+
{{domxref("Document.links")}}
+
Returns a list of all the hyperlinks in the document.
+
{{domxref("Document.location")}}
+
Returns the URI of the current document.
+
{{domxref("Document.plugins")}}
+
Returns a list of the available plugins.
+
{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns loading status of the document.
+
{{domxref("Document.referrer")}}
+
Returns the URI of the page that linked to this page.
+
{{domxref("Document.scripts")}}
+
Returns all the {{HTMLElement("script")}} elements on the document.
+
{{domxref("Document.title")}}
+
Returns the title of the current document.
+
{{domxref("Document.URL")}}
+
Returns a string containing the URL of the current document.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of visited hyperlinks.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns the width of the current document.
+
+ +

Event handlers

+ +
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockchange")}} event.
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockerror")}} event.
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns the event handling code for the readystatechange event.
+
+ +

Methods

+ +
+

Note: The Document interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.

+
+ +
+
{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}
+
Adopt node from an external document.
+
{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}
+
See {{domxref("window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}
+
Gets a {{domxref("CaretPosition")}} based on two coordinates.
+
{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}
+
Creates a new {{domxref("Attr")}} object and returns it.
+
{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}
+
Creates a new attribute node in a given namespace and returns it.
+
{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}
+
Creates a new CDATA node and returns it.
+
{{domxref("Document.createComment","Document.createComment(String comment)")}}
+
Creates a new comment node and returns it.
+
{{domxref("Document.createDocumentFragment()")}}
+
Creates a new document fragment.
+
{{domxref("Document.createElement","Document.createElement(String name)")}}
+
Creates a new element with the given tag name.
+
{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}
+
Creates a new element with the given tag name and namespace URI.
+
{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}
+
Creates a new entity reference object and returns it.
+
{{domxref("Document.createEvent","Document.createEvent(String interface)")}}
+
Creates an event object.
+
{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("NodeIterator")}} object.
+
{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}
+
Creates a new {{domxref("ProcessingInstruction")}} object.
+
{{domxref("Document.createRange()")}}
+
Creates a {{domxref("Range")}} object.
+
{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}
+
Creates a text node.
+
{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("TreeWalker")}} object.
+
{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}
+
Returns the element visible at the specified coordinates.
+
{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}
+
Enables the style sheets for the specified style sheet set.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Release the pointer lock.
+
{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}
+
Returns a list of elements with the given class name.
+
{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}
+
Returns a list of elements with the given tag name.
+
{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}
+
Returns a list of elements with the given tag name and namespace.
+
{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}
+
Returns a clone of a node from an external document.
+
{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Allows you to change the element being used as the background image for a specified element ID.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
Replaces entities, normalizes text nodes, etc.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Releases the current mouse capture if it's on an element in this document.
+
{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}
+
See {{domxref("window.releaseEvents")}}.
+
{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
See {{domxref("window.routeEvent")}}.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +
+
{{domxref("Document.getElementById","Document.getElementById(String id)")}}
+
Returns an object reference to the identified element.
+
{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns the first Element node within the document, in document order, that matches the specified selectors.
+
{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns a list of all the Element nodes within the document that match the specified selectors.
+
+ +

The Document interface is extended with the {{domxref("XPathEvaluator")}} interface:

+ +
+
{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}
+
Compiles an XPathExpression which can then be used for (repeated) evaluations.
+
{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}
+
Creates an {{domxref("XPathNSResolver")}} object.
+
{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
Evaluates an XPath expression.
+
+ +

Extension for HTML documents

+ +

The Document interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:

+ +
+
{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
+
{{domxref("Document.close()")}}
+
Closes a document stream for writing.
+
{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
On an editable document, executes a formating command.
+
{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}
+
Returns a list of elements with the given name.
+
{{domxref("Document.getSelection()")}}
+
Returns a {{domxref("Selection")}} object related to text selected in the document.
+
{{domxref("Document.hasFocus()")}}
+
Returns true if the focus is currently located anywhere inside the specified document.
+
{{domxref("Document.open()")}}
+
Opens a document stream for writing.
+
{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}
+
Returns true if the formating command can be executed on the current range.
+
{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}
+
Returns true if the formating command is in an indeterminate state on the current range.
+
{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}
+
Returns true if the formating command has been executed on the current range.
+
{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}
+
Returns true if the formating command is supported on the current range.
+
{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}
+
Returns the current value of the current range for a formatting command.
+
{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}
+
Registers a new custom element in the browser and returns a constructor for the new element.
+
{{domxref("Document.write","Document.write(String text)")}}
+
Writes text in a document.
+
{{domxref("Document.writeln","Document.writeln(String text)")}}
+
Writes a line of text in a document.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Turn the {{domxref("HTMLDocument")}} interface into a Document extension.
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Define the {{domxref("XPathEvaluator")}} interface which extend Document.
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Extend the Document interface
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Extend the Document interface
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Extend the Document interface
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extend the Document interface
+ +

Browser compatibility

+ +

Firefox notes

+ +

Mozilla defines a set of non-standard properties made only for XUL content:

+ +
+
{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}
+
Returns the {{HTMLElement("script")}} element that is currently executing.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(Mozilla add-ons only!) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).
+
{{domxref("document.popupNode")}}
+
Returns the node upon which a popup was invoked.
+
{{domxref("document.tooltipNode")}}
+
Returns the node which is the target of the current tooltip.
+
+ +

Mozilla also define some non-standard methods:

+ +
+
{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}
+
Use the {{domxref("Element.getBoundingClientRect()")}} method instead.
+
{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}
+
Loads a XUL overlay dynamically. This only works in XUL documents.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
+ +

Internet Explorer notes

+ +

Microsoft defines some non-standard properties:

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
+
Internet Explorer does not support all methods from the Node interface in the Document interface:
+
+ +
+
{{domxref("document.contains")}}
+
As a work-around, document.body.contains() can be used.
+
+ +

 

diff --git a/files/es/web/api/document/keydown_event/index.html b/files/es/web/api/document/keydown_event/index.html new file mode 100644 index 0000000000..57dc4336a5 --- /dev/null +++ b/files/es/web/api/document/keydown_event/index.html @@ -0,0 +1,178 @@ +--- +title: keydown +slug: Web/API/Document/keydown_event +tags: + - Evento + - keydown +translation_of: Web/API/Document/keydown_event +--- +

El evento keydown se produce cuando se presiona una tecla.

+ +

A diferencia del evento keypress, el evento keydown es producido por todas las teclas, independientemente de si estas son caracteres o no.

+ +

Información general

+ +
+
Especificación
+
DOM L3
+
Interfaz
+
KeyboardEvent
+
Burbuja
+
Si
+
Cancelable
+
Si
+
Objetivo
+
Document, Element
+
Acción
+
Varía: evento keypress; lanza el sistema de composición de texto; eventos blur y focus; DOMActivate evento; otro evento
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
target {{readonlyInline}}EventTarget (DOM element)Focused element processing the key event, root element if no suitable input element focused.
char {{readonlyInline}}DOMString (string)The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See key names and char values for the detail. +
Note: If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.
+
key {{readonlyInline}}DOMString (string)The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the char attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See key names and char values for the detail. Read Only.
charCode {{readonlyInline}}Unsigned long (int)The Unicode reference number of the key; this attribute is used only by the keypress event. For keys whose char attribute contains multiple characters, this is the Unicode value of the first character in that attribute. +
Warning: This attribute is deprecated; you should use char instead, if available.
+
keyCode {{readonlyInline}}Unsigned long (int)A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
which {{readonlyInline}}Unsigned long (int)A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keyCode. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
location {{readonlyInline}}long (float)The location of the key on the device.
repeat {{readonlyInline}}booleantrue if a key has been depressed long enough to trigger key repetition, otherwise false.
locale {{readonlyInline}}stringThe language code for the key event, if available; otherwise, the empty string.
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

preventDefault() del evento keydown

+ +

Empezando desde Gecko 25, una llamada a preventDefault() del evento keydown impide la emisión del consiguiente evento keypress. Este es un comportamiento válido para la especificación D3E y otros navegadores importantes que se comportan de esta misma forma. Por otro lado, Gecko 24 y anteriores emiten el evento keypress aunque se haya llamado a preventDefault() del evento keydown predecesor. Aunque el atributo defaultPrevented del evento keypress sea true en este caso.

+ +

Eventos relacionados

+ + + +

Ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+<script>
+
+'use strict';
+
+document.addEventListener('keydown', (event) => {
+  const keyName = event.key;
+  alert('keydown event\n\n' + 'key: ' + keyName);
+});
+
+</script>
+</head>
+<body>
+</body>
+</html>
diff --git a/files/es/web/api/document/keyup_event/index.html b/files/es/web/api/document/keyup_event/index.html new file mode 100644 index 0000000000..350629e9ab --- /dev/null +++ b/files/es/web/api/document/keyup_event/index.html @@ -0,0 +1,149 @@ +--- +title: Tecla Arriba +slug: Web/API/Document/keyup_event +translation_of: Web/API/Document/keyup_event +--- +

El evento es iniciado cuando la tecla es soltada.

+ +

Información General

+ +
+
Specification
+
DOM L3
+
Interface
+
KeyboardEvent
+
Bubbles
+
Si
+
Cancelable
+
Si
+
Target
+
Document, Element
+
Default Action
+
Ninguna
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
target {{readonlyInline}}EventTarget (DOM element)Focused element processing the key event, root element if no suitable input element focused.
char {{readonlyInline}}DOMString (string)The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See key names and char values for the detail. +
Note: If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.
+
key {{readonlyInline}}DOMString (string)The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the char attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See key names and char values for the detail. Read Only.
charCode {{readonlyInline}}Unsigned long (int)The Unicode reference number of the key; this attribute is used only by the keypress event. For keys whose char attribute contains multiple characters, this is the Unicode value of the first character in that attribute. +
Warning: This attribute is deprecated; you should use char instead, if available.
+
keyCode {{readonlyInline}}Unsigned long (int)A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
which {{readonlyInline}}Unsigned long (int)A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keyCode. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
location {{readonlyInline}}long (float)The location of the key on the device.
repeat {{readonlyInline}}booleantrue if a key has been depressed long enough to trigger key repetition, otherwise false.
locale {{readonlyInline}}stringThe language code for the key event, if available; otherwise, the empty string.
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Eventos Relacionados

+ + diff --git a/files/es/web/api/document/pointerlockelement/index.html b/files/es/web/api/document/pointerlockelement/index.html new file mode 100644 index 0000000000..cc5d490e5c --- /dev/null +++ b/files/es/web/api/document/pointerlockelement/index.html @@ -0,0 +1,105 @@ +--- +title: Document.pointerLockElement +slug: Web/API/Document/pointerLockElement +translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +--- +
{{APIRef("DOM")}}
+ +

La propiedad pointerLockElement conserva el elemento adquirido, para el evento del mouse, mientras el bloqueo se encuentre activo .  Es null si el bloqueo se encuentra en estado pendiente para bloqueo, o si el bloqueo se ha liberado, es decir ya no se encuentra en estado bloqueado, o si el elemento bloqueado se encuentra en otro documento.

+ +

Sintaxis

+ +
var elemento = document.pointerLockElement;
+
+ +

Valor retornado

+ +

Un {{domxref("Element")}} o null.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Bloquear puntero','l#extension-to-the-document-interface','Document')}}{{Spec2('Pointer lock')}}Extiende de la interfaz Document
+ +

Compatibilidad del Navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }} {{property_prefix("moz")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Soporte sin prefijar{{ CompatVersionUnknown() }}{{CompatUnknown}}{{CompatGeckoDesktop(50)}}   
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Véase también:

+ + diff --git a/files/es/web/api/document/queryselector/index.html b/files/es/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..b442ba5bbb --- /dev/null +++ b/files/es/web/api/document/queryselector/index.html @@ -0,0 +1,136 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - Consulta + - DOM + - Referencias(2) + - Referências + - Selectores + - metodo +translation_of: Web/API/Document/querySelector +--- +
{{ ApiRef("DOM") }}
+ +
Devuelve el primer elemento del documento (utilizando un recorrido primero en profundidad pre ordenado de los nodos del documento) que coincida con el grupo especificado de selectores.
+ +
 
+ +

Sintaxis

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

Donde:

+ + + +

Ejemplo

+ +

En este ejemplo, obtendremos el primer elemento del documento con la clase "miClase":

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

Ejemplo más útil

+ +

Los Selectores pueden ser muy útiles como se demostrará en el siguiente ejemplo. Aquí, será retornado el primer elemento <input name="login" /> dentro de <div class="user-panel main">.

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

Notas

+ + + +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar"
+  document.querySelector('#foo\bar');    // No coincide con nada
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // Coincide con el primer div
+
+  document.querySelector('#foo:bar');    // No coincide con nada
+  document.querySelector('#foo\\:bar');  // Coincide con el segundo div
+</script>
+
+ +

Compatibilidad en los navegadores

+ +
+ + + + + + + + + + + + + + + + + + + +
PlataformaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Basico13.5 (1.9.1)
+ {{bug(416317)}}		8103.2 (525.3)
+ {{Webkitbug("16587")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PlataformaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Basico2.1Si910.03.2
+
+ +

Especificaciones

+ + + +

Vea también

+ + diff --git a/files/es/web/api/document/queryselectorall/index.html b/files/es/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..7f041b6e84 --- /dev/null +++ b/files/es/web/api/document/queryselectorall/index.html @@ -0,0 +1,179 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Buscando Elementos + - DOM + - Document + - Encontrando Elementos + - Localizando Elementos + - Métodos + - Referencia + - Seleccionando Elementos + - Selectores + - Selectores CSS + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +
{{ ApiRef("DOM") }}
+ +

El método querySelectorAll() de un {{domxref("Element")}} devuelve una {{domxref("NodeList")}} estática (no viva) que representa una lista de elementos del documento que coinciden con el grupo de selectores indicados.

+ +
+

Nota: Esto método se implementa en base al método {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} del mixin {{domxref("ParentNode")}}.

+
+ +

Sintaxis

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

Parámetros

+ +
+
selectors
+
Un {{domxref("DOMString")}} que contiene uno o más selectores para buscar coincidencias. Esta cadena de texto debe ser una cadena CSS selector válida; si no lo es, se lanzará una excepción SyntaxError. Vea Locating DOM elements using selectors para más información acerca de utilizar selectores para identificar elementos. Se pueden especificar varios selectores separándolos utilizando comas.
+
+ +
+

Nota: Los caracteres que no son parte de la sintaxis estándar de CSS deben ser escapados utilizando el caracter de barra invertida. Dado que JavaScript también utiliza el escapado por retroceso, se debe tener especial cuidado al escribir cadenas de texto literales utilizando estos caracteres. Vea {{anch("Escapando caracteres especiales")}} para más información.

+
+ +

Valor devuelto

+ +

Una {{domxref("NodeList")}} no viva que contenga un objeto {{domxref("Element")}} para cada elemento que coincida con al menos uno de los selectores especificados o una {{domxref("NodeList")}} vacía en caso de que no haya coincidencias.

+ +
+

Nota: Si los selectores indicados incluyen un pseudo-elemento CSS, la lista devuelta siempre estará vacía.

+
+ +

Excepciones

+ +
+
SyntaxError
+
La sintaxis de la cadena de texto selectors no es válida.
+
+ +

Ejemplos

+ +

Obteniendo una lista de coincidencias

+ +

Para obtener una {{domxref("NodeList")}} de todos los elementos {{HTMLElement("p")}} en el documento:

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

Este ejemplo devuelve una lista de todos los elementos {{HTMLElement("div")}} del documento con una clase "nota" o "alerta":

+ +
var matches = document.querySelectorAll('div.nota, div.alerta');
+
+ +

Aquí, se obtiene una lista de elementos <p> cuyo elemento padre inmediato es un {{domxref("div")}} con la clase "highlighted" y que está ubicado dentro de un contenedor cuyo ID es "test".

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

Este ejemplo usa un selector de atributos para devolver una lista de elementos {{domxref("iframe")}} en el documento que contienen un atributo llamado "data-src":

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

Aquí, un selector de atributo se utiliza para devolver una lista de los elementos de una lista cuyo ID es "userlist" que tiene un atributo "data-active" cuyo valor es "1":

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

Accediendo a las coincidencias

+ +

Una vez que se devuelve la {{domxref("NodeList")}} de los elementos que coinciden, se puede examinar como cualquier array. Si el array está vacío (lo que significa que su propiedad length es 0), entonces es que no se encontraron coincidencias.

+ +

En cualquier caso, se puede simplemente utilizar la notación estándar de los arrays para acceder al contenido de la lista. Se puede usar cualquier sentencia de iteración, como por ejemplo:

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

Notas de usuario

+ +

querySelectorAll() se comporta de forma diferente que la mayoría de librerías DOM de JavaScript, que pueden llevar a resultados inesperados.

+ +

HTML

+ +

Considere este HTML, con sus tres bloques anidados {{HTMLElement("div")}}.

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

En este ejemplo, cuando se selecciona ".outer .inner" en el contexto el <div> con la clase "select", el elemento con la clase ".inner" todavía es encontrado, aun sabiendo que .outer no es descendiente del elemento base sobre el que se realiza la búsqueda (".select"). Por defecto, querySelectorAll() sólo verifica que el último elemento en el selector se encuentra dentro del rango de búsqueda.

+ +

La pseudo-clase {{cssxref(":scope")}} recupera el comportamiento esperado, encontrando coincidencias sólo en selectores descendientes del elemento base:

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

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Estándar vivo
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Sin cambios
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Definición inicial
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definición original
+ +

Compatibilidad en navegadores

+ +
+ + +

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/document/readystate/index.html b/files/es/web/api/document/readystate/index.html new file mode 100644 index 0000000000..7e5a24c5d8 --- /dev/null +++ b/files/es/web/api/document/readystate/index.html @@ -0,0 +1,104 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +translation_of: Web/API/Document/readyState +--- +
{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}
+ +

Resumen

+ +

La propiedad Document.readyState de un {{ domxref("document") }} describe el estado de carga del documento.

+ +

Valores

+ +

El readyState de un documento puede tener uno de los siguientes valores:

+ +
+
loading
+
El {{ domxref("document") }} todavía esta cargando.
+
interactive
+
El documento ha terminado de cargar y ha sido analizado pero  los sub-recursos como imágenes, estilos y frames aún siguen cargando. El estado indica que el evento {{event("DOMContentLoaded")}} ha sido disparado.
+
complete
+
El documento y todos los sub-recursos han cargado completamente. El estado indica que el evento {{event("load")}} ha sido disparado.
+
+ +

Cuando el valor de esta propiedad cambia, un evento {{event("readystatechange")}} se dispara en el objecto {{ domxref("document") }}.

+ +

Sintaxis

+ +
var string = document.readyState;
+
+ +

Ejemplos

+ +

Diferentes estados del readyState

+ +
switch (document.readyState) {
+  case "loading":
+    // The document is still loading.
+    break;
+  case "interactive":
+    // The document has finished loading. We can now access the DOM elements.
+    var span = document.createElement("span");
+    span.textContent = "A <span> element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // The page is fully loaded.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}
+
+ +

readystatechange como alternativa al evento DOMContentLoaded

+ +
// alternative to DOMContentLoaded event
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}
+ +

readystatechange como alternativa al evento load

+ +
// alternative to load event
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}} 
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}Especificación inicial.
+ +

Ver también

+ + diff --git a/files/es/web/api/document/registerelement/index.html b/files/es/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..504cf8314b --- /dev/null +++ b/files/es/web/api/document/registerelement/index.html @@ -0,0 +1,115 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +translation_of: Web/API/Document/registerElement +--- +

{{APIRef("DOM")}}{{Deprecated_header}}{{draft()}}

+ +

El Document.registerElement() registra un nuevo elemento personalizado en el navegador y devuelve un constructor para el nuevo elemento.

+ +
+

Nota: Esta es una tecnología experimental. El navegador que utilice debe ser compatible con Web Components. Ver Web Components habilitados en Firefox.

+
+ +

Sintaxis

+ +
var constructor = document.registerElement(tag-name, options);
+ +

Parámetros

+ +
+
tag-name
+
El nombre del elemento personalizado. El nombre debe contener un guión (-), por ejemplo my-tag.
+
options {{optional_inline}}
+
Un objeto que da nombre al prototipo que sirve de base para el elemento personalizado, y una etiqueta existente para extender. Ambos son opcionales.
+
+ +

Ejemplo

+ +

Aquí hay un ejemplo muy simple:

+ +
var Mytag = document.registerElement('my-tag');
+
+ +

Ahora el nuevo tag se ha registrado en el navegador. La variable MyTag contiene un constructor que lo puedes usar para crear un elemento my-tag  en el documento de la siguiente manera:

+ +
document.body.appendChild(new Mytag());
+ +

Esto inserta un elemento my-tag vacío que será visible si utiliza las herramientas de desarrollo del navegador. No será visible si usa la capacidad de ver el código fuente del navegador. Y no será visible en el navegador a menos que agregue algún contenido para la etiqueta. Esta es la manera de agregar contenido a la nueva etiqueta:

+ +
var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Custom Elements')}}{{Spec2('Custom Elements')}}Definición inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support3531 (behind a flag){{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4.431 (behind a flag){{CompatNo}}25{{CompatNo}}
+
+ +

Ver también

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

Devuelve una lista de elementos {{HTMLElement("script")}} ubicados en el documento. El objeto devuelto es una colección {{domxref("HTMLCollection")}}.

+ +

Sintáxis

+ +
var scriptList = document.scripts;
+
+ +

El objeto scriptList devuelto es una {{domxref("HTMLCollection")}}. Se puede utilizar como un array corriente para acceder a sus elementos.

+ +

Ejemplo

+ +

Este ejemplo busca demostrar la existencia de objetos {{HTMLElement("script")}} en el documento.

+ +
var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+
+ +

Compatibilidad de navegadores

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

 

+ +

Especificaciones

+ + diff --git a/files/es/web/api/document/scroll_event/index.html b/files/es/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..944d539834 --- /dev/null +++ b/files/es/web/api/document/scroll_event/index.html @@ -0,0 +1,104 @@ +--- +title: scroll +slug: Web/API/Document/scroll_event +translation_of: Web/API/Document/scroll_event +--- +

El evento scroll se produce cuando la vista del documento o un elemento es deslizado.

+ +

Información General

+ +
+
Especificación
+
DOM L3, CSSOM View
+
Interfaz
+
UIEvent
+
Bubbles
+
No en elementos, pero burbujea a la vista default cuando se ejecuta en el documento
+
Cancelable
+
No
+
Objetivo
+
defaultView, Document, Element
+
Acción por defecto
+
Ninguna
+
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetEl objetivo de evento (el objetivo superior en el árbol DOM).
type {{readonlyInline}}DOMStringEl tipo de evento.
bubbles {{readonlyInline}}BooleanSi el evento burbujea o no.
cancelable {{readonlyInline}}BooleanSi el evento puede ser cancelado o no.
view {{readonlyInline}}WindowProxydocument.defaultView (window de el documento)
detail {{readonlyInline}}long (float)0.
+ +

Ejemplo

+ +

Dado que los eventos scroll pueden ejecutarse a un ritmo elevado, el event handler no debería ejecutar operaciones computacionalmente costosas como modificaciones en el DOM. En cambio, se recomienda acelerar el evento utilizando requestAnimationFrame, setTimeout or customEvent, de este modo:

+ +

Optimización de Scroll con window.requestAnimationFrame

+ +
// Referencia: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+var last_known_scroll_position = 0;
+var ticking = false;
+
+function doSomething(scroll_pos) {
+  // Hacer algo con la posición del scroll
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+  }
+  ticking = true;
+});
+ + + +

Más ejemplos se pueden ver en el evento resize.

+ +

Compatibilidad en navegadores

+ +

iOS UIWebView

+ +

En iOS UIWebViews, los eventos scroll no se ejecutan mientras el escroleo/deslizamiento se lleva a cabo; solo son ejecutados cuando el deslizamiento terminó. Ver Bootstrap issue #16202. Safari y WKWebViews no se ven afectados por este bug.

diff --git a/files/es/web/api/document/stylesheets/index.html b/files/es/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..0cc8e47181 --- /dev/null +++ b/files/es/web/api/document/stylesheets/index.html @@ -0,0 +1,21 @@ +--- +title: Document.styleSheets +slug: Web/API/Document/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve una lista de objetos de tipo stylesheet para las hojas de estilo que están específicamente enlazadas o contenidas en el documento.

+

Propiedades

+

styleSheetList.length - devuelve el número de objetos de tipo stylesheet contenidos en el objeto.

+

Sintaxis

+
styleSheetList = document.styleSheets
+
+

El objeto devuelto es del tipo StyleSheetList.

+

Es una colección ordenada de objetos de tipo stylesheet. styleSheetList.item(index) o simplemente styleSheetList{{ mediawiki.external(' + + index + ') }} devuelve un único objeto de tipo stylesheet con el índice especificado (el índice es de origen 0).

+

Especificación

+

DOM Level 2 Style: styleSheets

+

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

diff --git a/files/es/web/api/document/url/index.html b/files/es/web/api/document/url/index.html new file mode 100644 index 0000000000..eec4361827 --- /dev/null +++ b/files/es/web/api/document/url/index.html @@ -0,0 +1,71 @@ +--- +title: document.URL +slug: Web/API/Document/URL +tags: + - API + - Documento + - HTML DOM + - Propiedad + - Referencia +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura URL de la interfaz {{domxref("Document")}} devuelve la ubicación del documento como una cadena de texto.

+ +

Sintaxis

+ +
var string = document.URL
+ +

Ejemplo

+ +

JavaScript

+ +
document.getElementById("url").textContent = document.URL;
+ +

HTML

+ +
<p id="urlText">
+  URL:<br/>
+  <span id="url">La URL va aquí</span>
+</p>
+ +

Resultado

+ +

{{EmbedLiveSample("Example", "100%", 100)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}{{Spec2("DOM WHATWG")}}Define que la propiedad es una {{domxref("USVString")}} en lugar de un {{domxref("DOMString")}}.
{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}{{Spec2("DOM1")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
+

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/document/write/index.html b/files/es/web/api/document/write/index.html new file mode 100644 index 0000000000..f07bd5c9a9 --- /dev/null +++ b/files/es/web/api/document/write/index.html @@ -0,0 +1,76 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Documentación + - Referencia + - metodo +translation_of: Web/API/Document/write +--- +
{{ ApiRef("DOM") }}
+ +


+ Escribe una cadena de texto dentro del hilo de un document abierto por document.open().

+ +
Nota: dado que document.write escribe directo al hilo (stream) de un documento, la llamada a document.write en un documento ya cargado automáticamente ejecuta document.open, lo cual limpiará todo el contenido del documento en cuestión.
+ +

Sintaxis

+ +
document.write(texto);
+
+ +

texto es una cadena de texto que contiene el texto a ser impreso en el documento.

+ +

Example

+ +
<html>
+
+<head>
+  <title>Ejemplo de write</title>
+
+  <script>
+    function nuevoContenido() {
+      alert("carga el contenido nuevo");
+      document.open();
+      document.write("<h1>Quita el contenido viejo - Agrega el contenido nuevo!</h1>");
+      document.close();
+    }
+  </script>
+</head>
+
+<body onload="nuevoContenido();">
+  <p>Algo de contenido original del documento</p>
+</body>
+
+</html>
+ +

Notas

+ +

Escribir a un documento que ya tiene contenido cargado previamente sin llamar a document.open(), automáticamente hará una llamada a document.open(). Después de haber finalizado la escritura del documento, es recomendable llamar a document.close(), para informar al navegador que la carga de la página ya ha terminado. El texto que escribas allí es convertido a la estructura tipificada de HTML dentro del modelo estructural del documento. En el ejemplo de más arriba, el elemento h1 se convierte en un nodo dentro del documento.

+ +

Si la llamada a document.write() se ejecuta dentro de una etiqueta <script> incluído en el HTML, entonces la llamada a document.open() nunca ocurrirá. Por ejemplo:

+ +
<script>
+  document.write("<h1>Título Principal</h1>")
+</script>
+
+ +
Nota: document.write y document.writeln no funcionan dentro de un documento XHTML (obtendrás un mensaje de error que dice "Operación no soportada" ("Operation is not supported") [NS_ERROR_DOM_NOT_SUPPORTED_ERR] en la consola). Esto sucede cuando abrimos un archivo local de extensión .xhtml o para cualquier document servido con un MIME del tipo application/xhtml+xml. Hay más información disponible en W3C XHTML FAQ.
+ +
Nota: document.write en scripts de modo diferido o asyncrónico serán ignorados, y recibirás un mensaje de error en la consola del tipo "Una llamada a document.write() desde un script cargado asincrónicamente fue ignorado" ("A call to document.write() from an asynchronously-loaded external script was ignored").
+ +

Especificaciones

+ + + +

También puedes ver

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

{{ ApiRef("DOM") }}

+ +

Escribe una cadena de texto en el documento, seguida de una nueva línea.

+ +
+

Nota: dado que document.writeln (al igual que document.write) escribe directo al hilo (stream) de un documento, la llamada a document.write en un documento ya cargado automáticamente ejecuta document.open, lo cual limpiará todo el contenido del documento en cuestión.

+
+ +

Sintaxis

+ +
document.writeln(línea);
+
+ +

Parámetros

+ + + +

Ejemplo

+ +
document.writeln("<p>¡Hola mundo!</p>");
+
+ +

Notas

+ +

document.writeln actúa igual que document.write exepto que agrega un carácter de nueva línea (\n) al final del texto a escribir.

+ +
Nota: document.write y document.writeln no funcionan dentro de un documento XHTML (obtendrás un mensaje de error que dice "Operación no soportada" ("Operation is not supported") [NS_ERROR_DOM_NOT_SUPPORTED_ERR] en la consola). Esto sucede cuando abrimos un archivo local de extensión .xhtml o para cualquier document servido con un MIME del tipo application/xhtml+xml. Hay más información disponible en W3C XHTML FAQ.
+ +
Nota: document.writeln y document.write en scripts de modo diferido o asyncrónico serán ignorados, y recibirás un mensaje de error en la consola del tipo "Una llamada a document.write() desde un script cargado asincrónicamente fue ignorado" ("A call to document.write() from an asynchronously-loaded external script was ignored").
+ +

Especificación

+ +

writeln

diff --git a/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html new file mode 100644 index 0000000000..b93f8e1d7e --- /dev/null +++ b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html @@ -0,0 +1,40 @@ +--- +title: Example +slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example +tags: + - DOM + - Ejemplo +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example +--- +
 <html>
+ <head>
+   <title>Mi Documento</title>
+   <script type="text/javascript">
+   function cambio() {
+     // document.getElementsByTagName("H1") retorna un NodeList de elementos
+     // h1 en el documento, y el primero es numero 0:
+     var header = document.getElementsByTagName("H1").item(0);
+     // El firstChild del encabezado es un nodo Text:
+     header.firstChild.data = "Un documento dinamico";
+     // Ahora el encabezado es "Un documento dinamico".
+     var para = document.getElementsByTagName("P").item(0);
+     para.firstChild.data = "Este es el primer parrafo.";
+     // Crea un nuevo nodo Text para el segundo parrafo
+     var newText = document.createTextNode("Este es el segundo parrafo.");
+     // Crea un nuevo Element para que sea el segundo parrafo
+     var newElement = document.createElement("P");
+     // Agrega el texto en el parrafo
+     newElement.appendChild(newText);
+     // Y agrega el parrafo al final del documento dentro del
+     // BODY (el cuál es el padre de "para")
+     para.parentNode.appendChild(newElement);
+   }
+   </script>
+ </head>
+ <body>
+   <input type="button" value="Cambia este documento." onclick="cambio()">
+   <h1>Encabezado</h1>
+   <p>Parrafo</p>
+ </body>
+ </head>
+
diff --git a/files/es/web/api/documentfragment/index.html b/files/es/web/api/documentfragment/index.html new file mode 100644 index 0000000000..625ea1e2c9 --- /dev/null +++ b/files/es/web/api/documentfragment/index.html @@ -0,0 +1,129 @@ +--- +title: DocumentFragment +slug: Web/API/DocumentFragment +translation_of: Web/API/DocumentFragment +--- +
{{ APIRef("DOM") }}
+ +

La interfaz DocumentFragment representa un objeto de documento mínimo que no tiene padre. Se utiliza como una versión ligera de {{domxref("Document")}} que almacena un segmento de una estructura de documento compuesta de nodos como un documento estándar. La gran diferencia se debe al hecho de que el fragmento de documento no forma parte de la estructura de árbol del documento activo. Los cambios realizados en el fragmento no afectan el documento  (incluso en {{Glossary("reflow")}})  ni inciden en el rendimiento cuando se realizan cambios. {{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }}
+
Crea y devuelve un nuevo objeto DocumentFragment.
+
+ +

Propiedades

+ +

Esta interfaz no tiene propiedades específicas, pero hereda las de su padre, {{domxref("Node")}}, e implementa los de la interfaz {{domxref("ParentNode")}}.

+ +
+
{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("HTMLCollection")}} que contiene los objetos de tipo {{domxref("Element")}} que son elementos secundarios del objeto DocumentFragment.
+
{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Devuelve el {{domxref("Element")}} que es el primer hijo del objeto DocumentFragment, o null si no hay ninguno.
+
{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Devuelve el {{domxref("Element")}} que es el último hijo del objeto DocumentFragment, o null si no hay ninguno.
+
{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un unsigned long que indica cantidad de elementos secundarios que tiene el objeto DocumentFragment.
+
+ +

Métodos

+ +

Esta interfaz hereda los métodos de su padre, {{domxref("Node")}}, e implementa los de la interfaz {{domxref("ParentNode")}}.

+ +
+
{{domxref("DocumentFragment.querySelector()")}}
+
Devuelve el primer nodo {{domxref("Element")}} dentro de DocumentFragment, en el orden del documento, que coincide con los selectores especificados.
+
{{domxref("DocumentFragment.querySelectorAll()")}}
+
Devuelve un {{domxref("NodeList")}} de todos los nodos {{domxref("Element")}} dentro de DocumentFragment que coincide con los selectores especificados.
+
{{domxref("DocumentFragment.getElementById()")}}
+
Devuelve el primer nodo{{domxref("Element")}} dentro de DocumentFragment, en el orden del documento, que coincide con el ID especificado. funcionalmente equivale a {{domxref("Document.getElementById()")}}.
+
+ +

Notas de uso

+ +

A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using {{domxref("Node")}} interface methods such as {{domxref("Node.appendChild", "appendChild()")}} or {{domxref("Node.insertBefore", "insertBefore()")}}. Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment. Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.

+ +

This interface is also of great use with Web components: {{HTMLElement("template")}} elements contain a DocumentFragment in their {{domxref("HTMLTemplateElement.content")}} property.

+ +

An empty DocumentFragment can be created using the {{domxref("document.createDocumentFragment()")}} method or the constructor.

+ +

Example

+ +

HTML

+ +
<ul id="list"></ul>
+
+ +

JavaScript

+ +
var list = document.querySelector('#list')
+var fruits = ['Apple', 'Orange', 'Banana', 'Melon']
+
+var fragment = new DocumentFragment()
+
+fruits.forEach(function (fruit) {
+  var li = document.createElement('li')
+  li.innerHTML = fruit
+  fragment.appendChild(li)
+})
+
+list.appendChild(fragment)
+
+ +

Result

+ +

{{EmbedLiveSample('Example')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}{{Spec2('DOM WHATWG')}}Added the constructor and the implementation of {{domxref("ParentNode")}}.
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 1')}}Added the querySelector() and querySelectorAll() methods.
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/domapplicationsregistry/checkinstalled/index.html b/files/es/web/api/domapplicationsregistry/checkinstalled/index.html new file mode 100644 index 0000000000..5c2d298aa9 --- /dev/null +++ b/files/es/web/api/domapplicationsregistry/checkinstalled/index.html @@ -0,0 +1,49 @@ +--- +title: Apps.checkInstalled +slug: Web/API/DOMApplicationsRegistry/checkInstalled +tags: + - API + - Apps + - Apps API + - Firefox OS + - Procedimiento +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/checkInstalled +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

Resúmen

+

Obtiene información acerca de la aplicación dada. Esto puede ser usado para determinar si se ha instalado la aplicación.

+

Sintaxis

+
var request = window.navigator.mozApps.checkInstalled(url);
+
+

Parámetros

+
+
+ url
+
+ Una cadena de URL que contiene la ubicación de el manifiesto de la aplicación.
+
+

Resultados

+

La función checkInstalled() devuelve un objeto {{ domxref("DOMRequest") }}. La propiedad DOMRequest.result contiene un App object, que es un objeto JavaScript que describe la aplicación instalada. Si la aplicación no se encuentra instalada, entonces DOMRequest.result es null (nulo).

+

Ejemplo

+
var request = window.navigator.mozApps.checkInstalled("http://ejemplo.com/manifest.webapp");
+request.onerror = function(e) {
+  alert("Error de llamada checkInstalled: " + request.error.name);
+};
+request.onsuccess = function(e) {
+  if (request.result) {
+    console.log("La aplicación está instalada!");
+  }
+  else {
+    console.log("La aplicación no está instalada!");
+  }
+};
+

Se espera a las personas que llaman para establecer las propiedades de devolución de llamada onsuccess y onerror del objeto devuelto, como se muestra en este ejemplo. Si la llamada se realiza correctamente,  un App object se devuelve en la propiedad result del objeto devuelto. En el ejemplo esto es request.result.

+

Errores

+

La cadena ERROR pueden ser devueltos en DOMRequest.error.

+

Una excepción NS_ERROR_DOM_BAD_URI se produce si el manifiesto está en un dominio diferente a la página en que se solicita la información. Este se produce tan pronto como se invoca checkInstalled.

+

Temas relacionados

+ diff --git a/files/es/web/api/domapplicationsregistry/getinstalled/index.html b/files/es/web/api/domapplicationsregistry/getinstalled/index.html new file mode 100644 index 0000000000..a1b96ee7ff --- /dev/null +++ b/files/es/web/api/domapplicationsregistry/getinstalled/index.html @@ -0,0 +1,40 @@ +--- +title: Apps.getInstalled +slug: Web/API/DOMApplicationsRegistry/getInstalled +tags: + - API + - Apps + - Apps API + - Firefox OS + - Procedimiento +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/getInstalled +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

Resumen

+

Obtenga una lista de todas las aplicaciones instaladas desde este origen. Por ejemplo, si se llama a esto en el Firefox Marketplace, obtendrá la lista de aplicaciones instaladas por el Firefox Marketplace.

+
+

Note: Múltiples aplicaciones por origen no son compatibles. Para alojar varias aplicaciones de un dominio, establezca un subdominio para cada aplicación; por ejemplo: miapp.midominio.com, otraapp.midominio.com, y así sucesivamente.

+
+

Sintaxis

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

Parámetros

+

Ninguno.

+

Ejemplo

+
var request = window.navigator.mozApps.getInstalled();
+request.onerror = function(e) {
+  alert("Error de llamada getInstalled: " + request.error.name);
+};
+request.onsuccess = function(e) {
+  alert("Éxito, numero de apps: " + request.result.length);
+  var appsRecord = request.result;
+};
+

Se espera a las personas que llaman para establecer las propiedades de devolución onsuccess y onerror del objeto devuelto, como se muestra en este ejemplo. Si la llamada se realiza correctamente un array de App objects se devuelve en la propiedad result del objeto devuelto. En el ejemplo esto es request.result.

+

Errores

+

La cadena ERROR puede ser devuelta en DOMRequest.error.

+

Temas relacionados

+ diff --git a/files/es/web/api/domapplicationsregistry/index.html b/files/es/web/api/domapplicationsregistry/index.html new file mode 100644 index 0000000000..e9d68ecf20 --- /dev/null +++ b/files/es/web/api/domapplicationsregistry/index.html @@ -0,0 +1,89 @@ +--- +title: DOMApplicationsRegistry +slug: Web/API/DOMApplicationsRegistry +tags: + - API + - Apps + - B2G + - Firefox OS + - No estandar + - Referencia +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') }}.

+ +

Propiedad

+ +
+
{{domxref("DOMApplicationsRegistry.mgmt")}}
+
Un objeto mgmt que define funciones que le permiten a los tableros manejar y arrancar apps  a favor del usuario.
+
+ +

Metodos

+ +
+
{{ domxref("DOMApplicationsRegistry.checkInstalled()") }}
+
Verifica cuando una app se ha instalado tomando el manifiesto como su parametro.
+
{{ domxref("DOMApplicationsRegistry.install()") }}
+
Desencade la instalación de una app. Durante el proceso de instalación, la app es validada y se le pregunta al usuario si desea aprovar la instalación.
+
{{ domxref("DOMApplicationsRegistry.getSelf()") }}
+
Returna un objeto que contiene un {{ domxref('app') }} para la app.
+
{{ domxref("DOMApplicationsRegistry.getInstalled()") }}
+
Obtine una lista de todas las apps instaladas.
+
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

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

 

diff --git a/files/es/web/api/domapplicationsregistry/install/index.html b/files/es/web/api/domapplicationsregistry/install/index.html new file mode 100644 index 0000000000..56f18e777b --- /dev/null +++ b/files/es/web/api/domapplicationsregistry/install/index.html @@ -0,0 +1,90 @@ +--- +title: Apps.install +slug: Web/API/DOMApplicationsRegistry/install +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/install +--- +
+ {{ ApiRef() }} {{non-standard_header}}
+

Resumen

+

Activa la instalación de una aplicación. Durante este proceso la aplicación es validada y el usuario se le solicita aprovar la instalación .

+

Si la aplicación estaba previamente instalada desde el mismo dominio, llamando install()otra vez puede silenciosamente reescribir los datos de instalación. This can be used to modify the purchase receipt, for example, when a user upgrades from a free app to a premium app.

+

Syntax

+
var request = window.navigator.mozApps.install(url, [receipt1, …]);
+

Parameters

+
+ Note: There is currently (May 2012) a bug with passing a relative path in the url parameter. See {{ Bug("745928") }}.
+
+
+ url
+
+ A string URL containing the location of the manifest to be installed. In the case of self distribution (where the installing origin is the same as the app origin), the installing site may omit the origin part of the URL and provide an absolute path (beginning with /).
+
+ receipts
+
+ (Optional) An array of one or more receipts. Example:
+
+ 
window.navigator.mozApps.install(url, ["receipt"])
+
+
+ If receipts is omitted it is treated as null. For more information see Validating a receipt.
+
+

The install() function throws an exception if the required argument (url) is missing, or if unsupported arguments are present.

+

Returns

+

The install() function returns a {{ domxref("DOMRequest") }} object. The DOMRequest.result field contains an App object, which is a JavaScript object that describes the app that was just installed. Before the operation is finished, DOMRequest.result is null.

+

If the installation is not successful, DOMRequest.error contains a DOMError object, which has information about the error.

+

Example

+

An example that shows how to use install() with the DOMRequest.onsuccess and DOMRequest.onerror callback properties.

+
var request = window.navigator.mozApps.install(manifestUrl);
+request.onsuccess = function () {
+  // Save the App object that is returned
+  var appRecord = this.result;
+  alert('Installation successful!');
+};
+request.onerror = function () {
+  // Display the error information from the DOMError object
+  alert('Install failed, error: ' + this.error.name);
+};
+
+

The onsuccess callback is called if the installation is successful. This means that the installation actions described here have occurred.

+

If the installation is not successful the onerror callback is called. On a failed installation, DOMRequest.error contains a DOMError object that has information about the error.

+

The code above may look unusual to you, with listeners being added after the function has already been invoked. However, this is the way the DOMRequest object operates. The function invocation will wait until the listeners are defined, and then the listeners will fire appropriately. The install() function also works by itself, without the .onsuccess and .onerror listeners.

+

Errors

+

When the installation is unsuccessful, one of the following errors can be returned in DOMRequest.error.

+
+
+ DENIED
+
+ The user cancelled the installation.
+
+ INVALID_MANIFEST
+
+ The manifest, while well-formed JSON, does not have some required field or is somehow invalid.
+
+ MANIFEST_URL_ERROR
+
+ Something other than an HTTP 200 status code was received, or some connection errors.
+
+ MANIFEST_PARSE_ERROR
+
+ Bad JSON in the manifest.
+
+ NETWORK_ERROR
+
+ Connection error.
+
+ REINSTALL_FORBIDDEN
+
+ Reinstalls of apps are forbidden.
+
+ MULTIPLE_APPS_PER_ORIGIN_FORBIDDEN
+
+ Installable apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin.
+
+ + diff --git a/files/es/web/api/domapplicationsregistry/installpackage/index.html b/files/es/web/api/domapplicationsregistry/installpackage/index.html new file mode 100644 index 0000000000..c269240c60 --- /dev/null +++ b/files/es/web/api/domapplicationsregistry/installpackage/index.html @@ -0,0 +1,36 @@ +--- +title: Apps.installPackage +slug: Web/API/DOMApplicationsRegistry/installPackage +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/installPackage +--- +
+ {{ApiRef}} {{non-standard_header}}
+

Resumen

+

Instala una aplicación empaquetada.

+
+ Solo disponible en Firefox OS.
+

Sintaxis

+
installPackage: function(aURL[, aParams])
+

Parametros

+ +

Resultados

+
+
+ aURL
+
+ El URL del paquete de aplicación a instalar. Esta debe ser una URL completa y absoluta.
+
+ aParams
+
+ Opcionalmente, un objeto con información adicional:
+
+ DOMRequest
+
+

Véase también

+ diff --git a/files/es/web/api/domerror/index.html b/files/es/web/api/domerror/index.html new file mode 100644 index 0000000000..d0768d0b41 --- /dev/null +++ b/files/es/web/api/domerror/index.html @@ -0,0 +1,130 @@ +--- +title: DOMError +slug: Web/API/DOMError +translation_of: Web/API/DOMError +--- +

{{ APIRef("DOM") }}

+ +

La interfaz DOMError describe un objeto de error que contiene un nombre de error.

+ +

Propiedades

+ +
+
{{domxref("DOMError.name")}} {{readOnlyInline}}
+
Devuelve un {{ domxref("DOMString") }} representando uno de los tipos de errores listados a continuación.
+
+ +

Tipos de errores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeDescription
IndexSizeErrorIndice fuera de rango (Ej:. en un objeto {{ domxref("range") }}).
HierarchyRequestErrorEl árbol de jerarquías del nodo no es correcto.
WrongDocumentErrorEl objeto está en un {{ domxref("document") }} incorrecto.
InvalidCharacterErrorEl string contiene caracteres inválidos.
NoModificationAllowedErrorEl objeto no puede modificarse.
NotFoundErrorEl objeto no puede hallarse.
NotSupportedErrorLa operación no está permitida/soportada.
InvalidStateErrorEl objeto está inválido.
SyntaxErrorEl string no coincide con el patrón dado.
InvalidModificationErrorEl objeto no puede modificarse de esta manera.
NamespaceErrorLa operación no está permitida por Namespaces de XML.
InvalidAccessErrorEl objeto no soporta la operación o el argumento.
TypeMismatchErrorEl tipo de objeto no es el esperado.
SecurityErrorLa operación es insegura.
NetworkErrorError de red.
AbortErrorLa operación fue abortada.
URLMismatchErrorLa URL dada no coincide con otra URL a comparar.
QuotaExceededErrorLa quota ha sido excedida.
TimeoutErrorLa operación ha alcanzado su timeout.
InvalidNodeTypeErrorEl nodo (o uno de sus antecedentes) es incorrecto.
DataCloneErrorEl objeto no puede clonarse.
+ +

Compatibilidad de Navegadores

+ + + +

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

+ +

Especificaciones

+ +

 

+ + + +

Véase también

+ + diff --git a/files/es/web/api/domparser/index.html b/files/es/web/api/domparser/index.html new file mode 100644 index 0000000000..983d989f3e --- /dev/null +++ b/files/es/web/api/domparser/index.html @@ -0,0 +1,227 @@ +--- +title: DOMParser +slug: Web/API/DOMParser +translation_of: Web/API/DOMParser +--- +

{{APIRef("DOM")}}{{SeeCompatTable}}

+ +

DOMParser puede analizar gramaticalmente (parsear, en adelante) código XML o HTML almacenado en una cadena de texto y convertirlo en un Documento DOM. DOMParser está especificado en DOM Parsing and Serialization.

+ +

Tener en cuenta que XMLHttpRequest soporta parsear XML y HTML desde recursos direccionables por URL.

+ +

Creando un DOMParser

+ +

Para crear un objeto DOMParser simplemente usar new DOMParser().

+ +

Para más información sobre crear un objeto DOMParser en extensiones Firefox, por favor vea la documentación de nsIDOMParser.

+ +

Parseando XML

+ +

Una vez creado el objeto parseador, puedes parsear XML desde una cadena de texto usando el método parseFromString:

+ +
var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+
+ +

Manejo de errores

+ +

Es importante tener en cuenta que si el proceso de parseado falla, actualmente DOMParser no arroja una excepción, pero devuelve en cambio un documento de error (see {{Bug(45566)}}):

+ +
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
+(error description)
+<sourcetext>(a snippet of the source XML)</sourcetext>
+</parsererror>
+
+ +

Los errores de parseo son reportados también a la Consola de errores, con el URI del documento (ver debajo) como el origen del error.

+ +

Parseando un documento SVG o HTML

+ +

El DOMParser puede ser usado para parsear un documento SVG {{geckoRelease("10.0")}} o un documento HTML{{geckoRelease("12.0")}}. Hay 3 resultados diferentes posibles, dependiendo del tipo MIME dado. Si el tipo del MIME es text/xml, el objeto resultante será un XMLDocument, si el tipo MIME es image/svg+xml será un SVGDocument, y si el tipo MIME es text/html será un HTMLDocument.

+ +
var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+// returns a Document, but not a SVGDocument nor a HTMLDocument
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
+// returns a SVGDocument, which also is a Document.
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
+// returns a HTMLDocument, which also is a Document.
+
+ +

Extensión HTML DOMParser para otros navegadores

+ +
/*
+ * DOMParser HTML extension
+ * 2012-09-04
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public domain.
+ * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+ */
+
+/*! @source https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+	"use strict";
+
+	var
+	  proto = DOMParser.prototype
+	, nativeParse = proto.parseFromString
+	;
+
+	// Firefox/Opera/IE throw errors on unsupported types
+	try {
+		// WebKit returns null on unsupported types
+		if ((new DOMParser()).parseFromString("", "text/html")) {
+			// text/html parsing is natively supported
+			return;
+		}
+	} catch (ex) {}
+
+	proto.parseFromString = function(markup, type) {
+		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+			var
+			  doc = document.implementation.createHTMLDocument("")
+			;
+	      		if (markup.toLowerCase().indexOf('<!doctype') > -1) {
+        			doc.documentElement.innerHTML = markup;
+      			}
+      			else {
+        			doc.body.innerHTML = markup;
+      			}
+			return doc;
+		} else {
+			return nativeParse.apply(this, arguments);
+		}
+	};
+}(DOMParser));
+
+ +

DOMParser de Chrome/JSM/XPCOM/Privileged Scope

+ +

Ver artículo aquí: nsIDOMParser

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM Parsing', '#the-domparser-interface', 'DOMParser')}}{{Spec2('DOM Parsing')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
XML support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}{{CompatIE(9)}}{{CompatOpera(8)}}{{CompatSafari(3.2)}}
SVG support{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(10.0)}}{{CompatIE(10)}}{{CompatOpera(15)}}{{CompatSafari(3.2)}}
HTML support{{CompatChrome(30)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(12.0)}}{{CompatIE(10)}}{{CompatOpera(17)}}{{CompatSafari(7.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
XML support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
SVG support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(10.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
HTML support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(12.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/domstring/cadenas_binarias/index.html b/files/es/web/api/domstring/cadenas_binarias/index.html new file mode 100644 index 0000000000..a52358f62c --- /dev/null +++ b/files/es/web/api/domstring/cadenas_binarias/index.html @@ -0,0 +1,31 @@ +--- +title: Cadenas binarias +slug: Web/API/DOMString/Cadenas_binarias +tags: + - Arreglos tipados JavaScript + - Cadena + - Cadena de caracteres + - DOM + - JavaScript + - Referencia + - String +translation_of: Web/API/DOMString/Binary +--- +

{{jsxref("String", "Cadenas JavaScript")}} son cadenas codificadas en UTF-16. Esto significa que cada unidad de código requiere dos bytes de memoria y puede representar 65535 puntos de código diferentes. Un subconjunto de estas cadenas está representado por cadenas UTF-16 que contienen solo caracteres ASCII (es decir, caracteres cuyo punto de código no excede 127). Por ejemplo, la cadena "¡Hola mundo!" pertenece al subconjunto ASCII, mientras que la cadena "ÀÈÌÒÙ" no. Una cadena binaria es un concepto similar al subconjunto ASCII, pero en lugar de limitar el rango a 127, permite hasta 255 puntos de código. Sin embargo, su propósito no es representar caracteres, sino datos binarios. El tamaño de los datos así representados es el doble de lo que sería en formato binario normal, sin embargo, esto no será visible para el usuario final, ya que la longitud de las cadenas de JavaScript se calcula usando dos bytes como unidad.

+ +

Las cadenas binarias no forman parte del diseño del lenguaje JavaScript. Sin embargo, al menos una función nativa requiere cadenas binarias como entrada, {{domxref("WindowBase64.btoa", "btoa()")}}: invocarla en una cadena que contiene puntos de código mayores de 255 causará un error Caracter fuera de rango.

+ +

La razón que llevó al uso de unidades de código UTF-16 como marcadores de posición para los números uint8 es que a medida que las aplicaciones web se vuelven cada vez más poderosas (agregando funciones como manipulación de audio y video, acceso a datos sin procesar usando WebSockets, y así sucesivamente) ha quedado claro que hay ocasiones en las que sería útil que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar.

+ +

En el pasado, esto se tenía que simular tratando los datos sin procesar como string y utilizar el método charCodeAt() para leer los bytes del búfer de datos (es decir, usando cadenas binarias). Sin embargo, esto es lento y propenso a errores, debido a la necesidad de múltiples conversiones (especialmente si los datos binarios en realidad no son datos en formato de bytes, sino, por ejemplo, enteros de 32 bits o flotantes).

+ +

Los arreglos tipados en JavaScript proporcionan un mecanismo para acceder a datos binarios sin procesar mucho más eficientemente. La API de StringView cuyo constructor no es nativo está un nivel por encima de los arreglos tipados y proporciona una interfaz para cadenas similar a la de C.

+ +

Ve también

+ + diff --git a/files/es/web/api/domstring/index.html b/files/es/web/api/domstring/index.html new file mode 100644 index 0000000000..3809094105 --- /dev/null +++ b/files/es/web/api/domstring/index.html @@ -0,0 +1,60 @@ +--- +title: DOMString +slug: Web/API/DOMString +tags: + - API + - DOM + - Referencia + - Referencia DOM Gecko + - Referência DOM + - String + - WebAPI +translation_of: Web/API/DOMString +--- +

{{APIRef("DOM")}}

+ +

DOMString es un String UTF-16. Dado que JavaScript ya usa estos strings, se mapea DOMString directamente a {{jsxref("String")}}.

+ +

Pasarle null a un método o parámetro que acepte unDOMString suele convertirse a texto como "null".

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}Reescritura de la definición que elimina casos extraños.
{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}{{Spec2('DOM3 Core')}}Sin cambios desde {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM2 Core')}}Sin cambios desde {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Ver también

+ + diff --git a/files/es/web/api/dragevent/index.html b/files/es/web/api/dragevent/index.html new file mode 100644 index 0000000000..8599ef6b93 --- /dev/null +++ b/files/es/web/api/dragevent/index.html @@ -0,0 +1,110 @@ +--- +title: DragEvent +slug: Web/API/DragEvent +tags: + - API + - DragEvent + - Referencia + - arrastrar y soltar + - drag and drop +translation_of: Web/API/DragEvent +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

La interfaz DragEvent es un {{domxref("Event","evento DOM")}} que representa una interacción de arrastrar y soltar. El usuario inicia un arrastre posicionando un dispositivo puntero (como un ratón) en la superficie táctil y luego arrastra el puntero a una nueva posición (como como elemento del DOM). Las aplicaciones son libres de interpretar una interacción de arrastrar y soltar en una manera específica a la aplicación.

+ +

Esta interfaz hereda propiedades de {{domxref("MouseEvent")}} y {{domxref("Event")}}.

+ +

Propiedades

+ +
+
{{domxref('DragEvent.dataTransfer')}} {{readonlyInline}}
+
Los datos que son transferidos durante una interacción de arrastrar y soltar.
+
+ +

Constructores

+ +

A pesar que esta interfaz tiene un constructor, no es posible crear un objeto DataTransfer útil desde código, ya que los objetos {{domxref("DataTransfer")}} tienen un modelo de procesamiento y seguridad que está coordinado por el navegador durante el arrastrar y soltar.

+ +
+
{{domxref("DragEvent.DragEvent", "DragEvent()")}}
+
Crea un DragEvent sintético y que no es de confianza.
+
+ +

Tipos de eventos

+ +
+
{{event('drag')}}
+
Este evento es lanzado cuando un elemento o selección de texto está siendo arrastrado.
+
{{event('dragend')}}
+
Este evento es lanzado cuando la operación de arrastrar está siendo terminada (liberando el botón del ratón o pulsando la tecla de escape).
+
{{event('dragenter')}}
+
Este evento es lanzado cuando un elemento arrastrado ingresa a un destino de liberación válido.
+
{{event('dragexit')}}
+
Este evento es lanzado cuando un elemento ya no es el destino de selección inmediato de la operación de arrastre.
+
{{event('dragleave')}}
+
Este evento es lanzado cuando el elemento arrastrado o selección de texto deja un destino de liberación válido.
+
{{event('dragover')}}
+
Este evento es lanzado continuamente cuando un elemento o selección de texto está siendo arrastrado y el puntero del ratón está sobre un destino de liberación válido (cada 50 ms CUANDO el ratón no se está moviendo SINO más rápido entre 5 ms (movimiento lento) y 1 ms (movimiento rápido) aproximadamente. Este patrón de disparo es diferente que {{Event("mouseover")}}).
+
{{event('dragstart')}}
+
Este evento es lanzado cuando el usuario empieza a arrastrar un elemento o selección de texto.
+
{{event('drop')}}
+
Este evento es lanzado cuando un elemento o selección de texto es soltado en un destino válido.
+
+ +

GlobalEventHandlers

+ +
+
{{domxref('GlobalEventHandlers.ondrag')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('drag')}}.
+
{{domxref('GlobalEventHandlers.ondragend')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragend')}}.
+
{{domxref('GlobalEventHandlers.ondragenter')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragenter')}}.
+
{{domxref('GlobalEventHandlers.ondragexit')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragexit')}}.
+
{{domxref('GlobalEventHandlers.ondragleave')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragleave')}}.
+
{{domxref('GlobalEventHandlers.ondragover')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragover')}}.
+
{{domxref('GlobalEventHandlers.ondragstart')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragstart')}}.
+
{{domxref('GlobalEventHandlers.ondrop')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('drop')}}.
+
+ +

Ejemplo

+ +

Un ejemplo para cada propiedad, constructor, tipo de evento, y manejador de evento global están incluidos en sus respectivas páginas de referencia.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName("HTML WHATWG", "#dragevent", "DragEvent")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "editing.html#the-dragevent-interface", "DragEvent")}}{{Spec2("HTML5.1")}}Definición inicial
+ +

Compatibilidad entre navegadores

+ + + +

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

+ +

Ver también

+ +

{{page("/en-US/docs/Web/API/DataTransfer", "Ver también")}}

diff --git a/files/es/web/api/element/accesskey/index.html b/files/es/web/api/element/accesskey/index.html new file mode 100644 index 0000000000..a21970faa6 --- /dev/null +++ b/files/es/web/api/element/accesskey/index.html @@ -0,0 +1,22 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API + - Propiedad + - necesidades de contenido +translation_of: Web/API/HTMLElement/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

La propiedad Element.accessKey establece la pulsación de teclado mediante el cual un usuario puede presionar para saltar a este elemento.

+ +
+

Nota: la propiedad Element.accessKey se usa raramente debido a sus múltiples conflictos con las asociaciones de teclas que ya están presentes  en los navegadores. Para evitar esto, los navegadores implementan el comportamiento tecla de acceso si se pulsan las claves con otras teclas "cualificadas" (como Alt + tecla de acceso).

+
+ +

 

+ +

 

diff --git a/files/es/web/api/element/animate/index.html b/files/es/web/api/element/animate/index.html new file mode 100644 index 0000000000..e491efc0d7 --- /dev/null +++ b/files/es/web/api/element/animate/index.html @@ -0,0 +1,208 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - API + - Animacion + - Elemento + - Experimental + - metodo + - waapi + - web animations api +translation_of: Web/API/Element/animate +--- +
+

{{APIRef('Web Animations')}} {{SeeCompatTable}}

+ +

El método Element.animate() es un método abreviado para crear y reproducir una animación en un elemento. Devuelve la instancia creada de un objeto {{domxref("Animation")}} .

+ +

Síntaxis

+ +
+
element.animate(keyframes, options); 
+
+ +

Parámetros

+ +
+
keyframes
+
+

Un Objeto formateado para representar un conjunto de fotogramas clave.

+
+
opciones
+
Puede ser un entero representando la duración de la animación  (en milisegundos), o un Objeto conteniendo una o más propiedades de sincronización: 
+
+
+
id {{optional_inline}}
+
Una propiedad única para animar(): a DOMString con la cual se hace referencia a la animación.
+
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
+
+ +

Opciones Futuras

+ +

Las siguientes opciones actualmente no se han enviado a todos los sitios, pero se añadirán en un futuro próximo.

+ +
+
composite {{optional_inline}}
+
Determina como se combinan los valores entre esta animación y otra, animaciones independientes sin especificar la composición de su propia operación. Valores predeterminados a reemplazar. +
    +
  • añadir dicta un efecto aditivo, donde cada iteración sucesiva se basa en la anterior. Por ejemplo con transform, a translateX(-200px) no anularía un valor anterior rotate(20deg) que resultaría  translateX(-200px) rotate(20deg).
    • +
  • acumular es similar pero un poco más inteligente: blur(2) y blur(5) resultaría  blur(7), no blur(2) blur(5).
    • +
  • remplazar sobreescribe el valor anterior con el nuevo.
    • +
+
+
iterationComposite {{optional_inline}}
+
Determina como se construyen los valores de una iteración a otra en esta animación. . Se puede configurar para acumular o reemplazar (ver arriba). Valores predeterminados para reemplazar.
+
spacing {{optional_inline}}
+
Determina como los keyframes sin compensación temporal  deben ser distribuidos durante la duración de la animación. Valores predeterminados para distribuir. +
    +
  • distribuir las posiciones de los keyframes para que la diferencia entre el anterior y el  posterior estén compensadas por igual , lo que es como decir, sin ninguna compensación, esto distribuirá equitativamente los keyframes a traves del tiempo de ejecución.
    • +
  • situar las posiciones de los keyframes de manera que  igualen la diferencia entre los siguientes valores de una propiedad especifica sincronizada  , lo que es como decir,  que los keyframes estén más espaciados cuanto mayores sean los valores de sus propiedades.
    • +
+ +

 

+
+
+ +

Valor de retorno

+ +

Returns an {{domxref("Animation")}}.

+ +

Ejemplo

+ +

En la demostración Down the Rabbit Hole (con la Web Animation API), utilizamos el método conveniente, animate() para inmediatamente crear y ejecutar una animación en el elemento  #tunnel  para hacerlo fluir hacia arriba, indefinidamente. Observar el orden  de paso de los objetos por los keyframes y también el bloque de opciones de sincronización.

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Initial definition
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome("36")}}{{CompatUnknown}}{{ CompatGeckoDesktop("48.0")}}{{CompatUnknown}}23{{CompatUnknown}}
id option{{CompatChrome(50.0)}}{{CompatUnknown}}{{ CompatGeckoDesktop("48.0")}}{{CompatUnknown}}37{{CompatUnknown}}
composite, iterationComposite, and spacing options{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatChrome(39.0)}}{{CompatChrome(39.0)}}{{ CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
id option{{CompatNo}}{{CompatChrome(50.0)}}{{CompatChrome(50.0)}}{{ CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
composite, iterationComposite, and spacing options{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver También

+ + +
diff --git a/files/es/web/api/element/attachshadow/index.html b/files/es/web/api/element/attachshadow/index.html new file mode 100644 index 0000000000..33e1d119ae --- /dev/null +++ b/files/es/web/api/element/attachshadow/index.html @@ -0,0 +1,158 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +translation_of: Web/API/Element/attachShadow +--- +
{{APIRef('Shadow DOM')}}
+ +

El método Element.attachShadow() adjunta un árbol DOM "sombra" al elemento especificado y devuelve una referencia a su raíz {{domxref("ShadowRoot")}}.

+ +

Elementos a los que puedes adjuntar un DOM "sombra"

+ +

No se puede adjuntar un DOM "sombra" a cualquier tipo de elemento. Hay algunos que no pueden tenerlo por razones de seguridad (por ejemplo {{htmlelement("a")}}), y algunos más. Los siguientes elementos de la lista pueden adjuntar un DOM "sombra":

+ + + +

Syntaxis

+ +
var shadowroot = element.attachShadow(shadowRootInit);
+
+ +

Parámetros

+ +
+
shadowRootInit
+
Un diccionario ShadowRootInit , que puede contener los siguientes campos: +
+
mode
+
+

Una cadena que especifique el modo de encapsulación para el árbol DOM "sombra". Este puede tener uno de los siguientes valores:

+ +
    +
  • open: Los elementos del árbol son accesibles desde fuera del elemento, por ejemplo usando {{domxref("Element.shadowRoot")}}:
    + + 
    element.shadowRoot; // Returns a ShadowRoot obj
    +
    • +
  • closed: Deniega el acceso a lo(s) nodo(s) desde fuera mediante JavaScript:
    + + 
    element.shadowRoot; // Returns null
+
    +
    • +
+
+
delegatesFocus
+
Un booleano que, si se establece a true, mitiga problemas de comportamiento relativos a la capacidad de tomar el foco. Cuando se hace click en una parte del DOM "sombra" que no puede tomar el foco, la primera parte del árbol que pueda tomar el foco lo hará, y le dará cualquier estilo disponible mediante CSS con :focus.
+
+
+
+ +

Valor retorno

+ +

Devuelve un objeto {{domxref("ShadowRoot")}}.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + +
ExcepciónExplicación
InvalidStateErrorEl elemento que estás intentando adjuntar ya tiene una DOM "sombra".
NotSupportedErrorEstás intentando adjuntar DOM "sombra" a un elemento fuera del espacio de nombres HTML, o el elemento no puede tener una DOM "sombra". adjunta (ver abajo).
+ +

Ejemplos

+ +

Los siguientes ejemplos están tomados de la demo word-count-web-component  (verlo también en modo live). Puedes ver que usamos attachShadow() en mitad del código para crear una DOM "sombra", a la que luego adjuntamos el contenido de nuesto elemento personalizado.

+ +
// Crear una clase para el elemento
+class CuentaPalabras extends HTMLParagraphElement {
+  constructor() {
+    // Siemmpre llamar a super en el constructor
+    super();
+
+    // contar las palabras en el nodo padre
+    var cpPadre = this.parentNode;
+
+    function cuentaPalabras(nodo){
+      var texto = nodo.innerText || nodo.textContent
+      return texto.trim().split(/\s+/g).length;
+    }
+
+    var cuenta = 'Palabras: ' + cuentaPalabras(cpPadre);
+
+    // Crear un DOM "sombra"
+    var sombra = this.attachShadow({mode: 'open'});
+
+    // Crear el nodo de texto y añadirle el contador de palabras
+    var texto = document.createElement('span');
+    texto.textContent = count;
+
+    // Añadirlo a la sombra
+    sombra.appendChild(texto);
+
+    // Actualizar el contador cuando el contenido del elemento cambie
+    setInterval(function() {
+      var cuenta = 'Palabras: ' + cuentaPalabras(cpPadre);
+      texto.textContent = cuenta;
+    }, 200)
+  }
+}
+
+// Definir el nuevo elemento
+customElements.define('cuenta-palabras', CuentaPalabras , { extends: 'p' });
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilidad navegadores

+ + + +

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

diff --git a/files/es/web/api/element/attributes/index.html b/files/es/web/api/element/attributes/index.html new file mode 100644 index 0000000000..3b0f1da338 --- /dev/null +++ b/files/es/web/api/element/attributes/index.html @@ -0,0 +1,157 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +translation_of: Web/API/Element/attributes +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.attributes retorna una colección "viva" cuyos nodos son todos los atributos registrados en el nodo especificado. Es un {{domxref("NamedNodeMap")}}, no un Array, así que no tiene los métodos de {{jsxref("Array")}} y los índices de nodo {{domxref("Attr")}} pueden diferir en cada navegador. Más concretamente attributes es un conjunto de pares de cadenas nombre/valor que representan la información relativa a cada atributo.

+ +

Sintaxis

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

Ejemplo

+ +

Ejemplos básicos

+ +
// Obtiene el primer elemento <p> en el documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

Enumerando atributos de elemtentos

+ +

La indexación numérica es útil para recorrer de todos los atributos de un elemento.
+ El siguiente ejemplo corre a través de los atributors del elemento con id "p1" en el documento, e imprime el valor de cada atributo.

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // Primero, verifiquenmos que el párrafo tiene algún atributo
+     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 hay atributos que mostrar";
+     }
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" style="color: green;">Párrafo de ejemplo</p>
+ <form action="">
+  <p>
+    <input type="button" value="Muestra el nombre cada atributo y su valor"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}Sin cambios desde {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}Sin cambios desde {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]6.0 [2]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] Anes de Firefox 22, este atributo era implementado en la interfaz  {{domxref("Node")}} (heredada de {{domxref("Element")}}). Se trasladó a esta interfaz de acuerdo a la especificación y el uso en otros navegadores.

+ +

[2] Internet Explorer 5.5 retorna un mapa conteniendo los valores en lugar de objetos attribute.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/classlist/index.html b/files/es/web/api/element/classlist/index.html new file mode 100644 index 0000000000..4d45dd2e31 --- /dev/null +++ b/files/es/web/api/element/classlist/index.html @@ -0,0 +1,215 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +tags: + - API + - DOM + - Elemento + - Propiedad + - Referencia + - Sólo-Lectura +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura Element.classList devuelve una colección activa de DOMTokenList de los atributos de clase del elemento.

+ +

Usar classList es una forma práctica de acceder a la lista de clases de un elemento como una cadena de texto delimitada por espacios a través de {{domxref("element.className")}}.

+ +

Sintaxis

+ +
var elementClasses = elementNodeReference.classList;
+
+ +

elementClasses es un DOMTokenList que representa el atributo clase de elementNodeReference. Si el atributo clase no está definido o está vacío, elementClasses.length devuelve 0. element.classList por sí mismo es de sólo lectura, aunque puede ser modificado usando los métodos add() y remove().

+ +

Métodos

+ +
+
add( String [, String] )
+
Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.
+
remove( String [, String] )
+
Elimina las clases indicadas.
+ Nota: Eliminar una clase que no existe NO produce un error.
+
item( Number )
+
Devuelve el valor de la clase por índice en la colección.
+
toggle( String [, force] )
+
Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la elimina y devuelve false, si no, la añade y devuelve true.
+ Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como true, se añade la clase indicada, y si se evalúa como false, la elimina.
+
contains( String )
+
Comprueba si la clase indicada existe en el atributo de clase del elemento.
+
replace( oldClass, newClass )
+
Reemplaza una clase existente por una nueva.
+
+ +

Ejemplos

+ +
// div es una referencia de objeto al elemento <div> con class="foo bar"
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// si visible está presente la elimina, de lo contrario la añade
+div.classList.toggle("visible");
+
+// añadir/eliminar visible, dependiendo de la condición, i menor que 10
+div.classList.toggle("visible", i < 10 );
+
+alert(div.classList.contains("foo"));
+
+// añadir o eliminar varias clases
+div.classList.add("foo", "bar");
+div.classList.remove("foo", "bar");
+
+// reemplazar la clase "foo" por "bar"
+div.classList.replace("foo", "bar");
+ +
+

Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Nota en la especificación de HTML relacionada con el atributo {{htmlattrxref("class")}}.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Definición inicial
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico812{{CompatGeckoDesktop(1.9.2)}}10[1]11.505.1
Segundo argumento del método toggle()2412{{CompatGeckoDesktop(24)}}{{CompatNo}}[2]157
Múltiples argumentos para add() y remove()2812{{CompatGeckoDesktop(26)}}{{CompatNo}}157
replace()61{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.012{{CompatGeckoMobile(1.9.2)}}10[1]11.105.0
Segundo argumento del método toggle()4.412{{CompatGeckoMobile(24)}}{{CompatNo}}[2]{{CompatUnknown}}7.0
Múltiples argumentos para add() y remove()4.412{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}7.0
replace(){{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] No soportado para elementos SVG.  Vea un informe de Microsoft acerca de esto.
+ [2] Internet Explorer no lo implementa actualmente. Vea un informe de Microsoft acerca de esto.

+ +

Vea también

+ + diff --git a/files/es/web/api/element/classname/index.html b/files/es/web/api/element/classname/index.html new file mode 100644 index 0000000000..be9b04b4b0 --- /dev/null +++ b/files/es/web/api/element/classname/index.html @@ -0,0 +1,130 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

Resumen

+ +

className obtiene y establece el valor del atributo class del elemento especificado.

+ +

Sintaxis

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

Ejemplo

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

Notas

+ +

El nombre className es utilizado para esta propiedad en lugar de class para evitar conflictos con la palabra clave "class" existente en muchos de los lenguages que son usados para manipular el DOM.

+ +

className también puede ser una instancia de {{domxref("SVGAnimatedString")}} si element es un {{domxref("SVGElement")}}. Es mejor de obtener/establecer la propiedad className de un elemento utilizando {{domxref("Element.getAttribute")}} y {{domxref("Element.setAttribute")}} si estás tratando con elementos SVG.

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

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{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")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/element/click_event/index.html b/files/es/web/api/element/click_event/index.html new file mode 100644 index 0000000000..9a74553c13 --- /dev/null +++ b/files/es/web/api/element/click_event/index.html @@ -0,0 +1,280 @@ +--- +title: click +slug: Web/API/Element/click_event +translation_of: Web/API/Element/click_event +--- +

El evento "click" se dispara cuando se presiona el botón de un dispositivo de entrada (Mouse o Mousepad) sobre un elemento. 

+ +

Información General

+ +
+
Especificación
+
DOM L3
+
Interfaz
+
{{domxref("MouseEvent")}}
+
Bubbles
+
Yes
+
Cancelable
+
Yes
+
Target
+
Element
+
Default Action
+
Varies
+
+ +

Propiedades

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

Ejemplo

+ +
<div id="prueba"></div>
+
+<script>
+  document.getElementById("prueba").addEventListener("click", function( event ) {
+    // presentar la cuenta de clicks realizados sobre el elemento con id "prueba"
+    event.target.innerHTML = "Conteo de Clicks: " + event.detail;
+  }, false);
+</script>
+
+ +

Compatibilidad con Navegadores

+ +

Internet Explorer

+ +

Internet Explorer 8 & 9 tiene problemas con elementos con un  valor {{cssxref("background-color")}} de transparent que es sobrepuesto a los demas elementos por lo que no les permite recibir el evento.

+ +

Un ejemplo aqui

+ +

¿Cómo evitarlo?

+ + + +

Safari Mobile

+ +

En Safari Mobile 7.0+ ( también algunas versiones anteriores) presenta un problema cuando se da click sobre elementos que no son tipicamente interactivos como es el caso de un div. 

+ +

¿Cómo evitarlo?

+ + + +

Lo siguientes elementos son considerados por Safari típicamente interactivos

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En elementos inhabilitados{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatVersionUnknown}}[2]{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
En elementos inhabilitados{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Sólo funciona para los tipos {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} .

+ +

[2] Internet Explorer sólo dispara el evento click en los elementos  {{HTMLElement("input")}} tipo checkbox o radio cuando se ha realizdo sobre ellos un doble click.

+ +

Véase también

+ + diff --git a/files/es/web/api/element/clientheight/index.html b/files/es/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..0784b49a36 --- /dev/null +++ b/files/es/web/api/element/clientheight/index.html @@ -0,0 +1,61 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - Propiedad +translation_of: Web/API/Element/clientHeight +--- +

{{ APIRef("DOM") }}

+ +

La propiedad de sólo lectura Element.clientHeight devuelve la altura de un elemento en píxeles, incluyendo el padding pero no las barras horizontales, el borde o el margen.

+ +

clientHeight puede ser calculado como CSS height + CSS padding - alto de la barra horizontal (si existe).

+ +
+

Nota: Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var h = element.clientHeight;
+ +

h es un entero que representa el alto de element en píxeles.

+ +

Ejemplo

+ +

 

+ +

             Image:Dimensions-client.png

+ + +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-clientheight', 'clientheight')}}{{Spec2('CSSOM View')}} 
+ +

Notas

+ +

clientHeight es una propiedad introducida en el modelo de objeto de Internet Explorer.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/clientleft/index.html b/files/es/web/api/element/clientleft/index.html new file mode 100644 index 0000000000..e6ffc24faf --- /dev/null +++ b/files/es/web/api/element/clientleft/index.html @@ -0,0 +1,58 @@ +--- +title: element.clientLeft +slug: Web/API/Element/clientLeft +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/clientLeft +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

El ancho del borde izquierdo de un elemento en pixel. Incluye el ancho de la barra de desplazamiento vertical, si la dirección del texto esrtl (derecha a izquierda) y si hay un desbordamiento que provoque la aparición de la barra en el lado izquierdo. clientLeft NO incluyemargin-left o padding-left. clientLeft es de sólo lectura.

+ +

Las aplicaciones "Gecko-based applications" implementan clientLeft a partir de Gecko 1.9 (Firefox 3, ver {{ Bug(111207) }}). Esta propiedad no está implementada en Firefox 2 o anteriores.

+ +

Sintaxis

+ +
var left = element.clientLeft;
+
+ +

Ejemplo

+ +
+
+

padding-top

+ +

Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.

+ +

Image:BirmanCat.jpgTodos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.

+ +

La imagen del gato y el texto vienen de www.best-cat-art.com

+ +

padding-bottom

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

Image:clientLeft.png

+ +

La barra de desplazamiento vertical en el lado izquierdo, aparece cuando la propiedad layout.scrollbar.side tiene el valor 1 o 3

+ +

Cuando la propiedad layout.scrollbar.side se establece a 1 o a 3 y la dirección de texto está puesta a RTL, entonces la barra de desplazamiento se pone a la izquierda y esto afecta a la forma en que se calcula clientLeft.

+ +

Especificación

+ +

No es parte de ninguna especificación W3C.

+ +

Notas

+ +

clientLeft apareció por primera vez en el modelo de objetos de MS IE DHTML.

+ +

La posición de la barra de desplazamiento vertical en textosrtl depende de la preferencias de layout.scrollbar.side

+ +

Referencias

+ + diff --git a/files/es/web/api/element/clienttop/index.html b/files/es/web/api/element/clienttop/index.html new file mode 100644 index 0000000000..063ac86c13 --- /dev/null +++ b/files/es/web/api/element/clienttop/index.html @@ -0,0 +1,54 @@ +--- +title: element.clientTop +slug: Web/API/Element/clientTop +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/clientTop +--- +

 

+ +

{{ Fx_minversion_header(3) }} {{ ApiRef() }}

+ +

Resumen

+ +

El ancho del borde superior de un elemento en pixel. No incluye ni elmargin-top , ni elpadding-top . clientTop es de sólo lectura.

+ +

Las aplicaciones "Gecko-based applications" implementan el uso de clientTop a partir de Gecko 1.9 (Firefox 3,ver {{ Bug(111207) }}). Esta propiedad no está disponible en Firefox 2 o anteriores.

+ +

Sintaxis

+ +
vartop = element.clientTop;
+
+ +

Ejemplo

+ +
+
+

padding-top

+ +

Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.

+ +

Image:BirmanCat.jpgTodos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.

+ +

La imagen del gato y el texto vienen de www.best-cat-art.com

+ +

padding-bottom

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

Image:clientTop.png

+ +

Especificación

+ +

No es parte de ninguna especificación W3C.

+ +

Notas

+ +

clientTop se presento por primera vez en el modelo de objetos de MS IE DHTML.

+ +

Referencias

+ + diff --git a/files/es/web/api/element/clientwidth/index.html b/files/es/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..bdf813c867 --- /dev/null +++ b/files/es/web/api/element/clientwidth/index.html @@ -0,0 +1,60 @@ +--- +title: Element.clientWidth +slug: Web/API/Element/clientWidth +translation_of: Web/API/Element/clientWidth +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.clientWidth es cero para elementos sin CSS o cajas de diseño (layout), en caso contrario es la anchura interior de un elemento en pixels, incluyendo la anchura de relleno (padding) pero no la anchura de la barra de desplazamiento vertical (si está presente, si está dibujada), el borde o el margen.

+ +
+

El valor de esta propiedad será redondeado a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var intElemClientWidth = element.clientWidth;
+
+ +

intElemClientWidth será un entero que corresponde con el clientWidth del elemento en pixels. clientWidth es de sólo-lectura.

+ +

Ejemplo

+ +

 

+ +

             Image:Dimensions-client.png

+ + +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}} 
+ +

Notas

+ +

clientWidth fue introducida en el modelo de objetos DHTML de MS IE.

+ +

Compatibilidad con navegadores

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/element/closest/index.html b/files/es/web/api/element/closest/index.html new file mode 100644 index 0000000000..ecf35158b5 --- /dev/null +++ b/files/es/web/api/element/closest/index.html @@ -0,0 +1,145 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Elemento + - Referencia + - metodo +translation_of: Web/API/Element/closest +--- +
{{APIRef('Shadow DOM')}}
+ +

El método closest() de la interfaz {{domxref("Element")}} devuelve el ascendiente más cercano al elemento actual (o el propio elemento actual) que coincida con el selector proporcionado por parámetro. Si no existe dicho ascendiente, devuelve null.

+ +

Sintaxis

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

Parámetros

+ + + +

Valor del resultado

+ + + +

Excepciones

+ + + +

Ejemplo

+ +

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");
+// returns the closest ancestor which is a div in div, here is div-03 itself
+
+var r3 = el.closest("article > div");
+// returns the closest ancestor which is a div and has a parent article, here is div-01
+
+var r4 = el.closest(":not(div)");
+// returns the closest ancestor which is not a div, here is the outmost article
+ +

Polyfill

+ +

Para los navegadores que no tengan soporte para Element.closest(), pero sí lo tengan para document.querySelectorAll() (o un equivalente prefijado, es decir IE9+), existe 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;
+  };
+}
+ +

Sin embargo, si realmente se necesita soporte para IE 8, entonces el siguiente polyfill servirá para conseguirlo de forma muy lenta, pero lo hará. Sin embargo, sólo admitirá selectores CSS 2.1 en IE 8, puede causar picos severos de retraso en sitios web en producción.

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

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +
+

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

+ +

Notas de compatibilidad

+ + +
+ +

Ver también

+ + diff --git a/files/es/web/api/element/computedstylemap/index.html b/files/es/web/api/element/computedstylemap/index.html new file mode 100644 index 0000000000..656312b1f5 --- /dev/null +++ b/files/es/web/api/element/computedstylemap/index.html @@ -0,0 +1,99 @@ +--- +title: Element.computedStyleMap() +slug: Web/API/Element/computedStyleMap +tags: + - API + - CSS Typed Object Model API + - Element + - Experimental + - Houdini + - Method + - Reference + - StylePropertyMapReadOnly + - computedStyleMap() +translation_of: Web/API/Element/computedStyleMap +--- +

{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}

+ +

El método computedStyleMap() de la interfaz {{domxref("Element")}} devuelve una interfaz {{domxref("StylePropertyMapReadOnly")}} que provee una representación de solo-lectura de un bloque de declaración de CSS que es una alternativa a {{domxref("CSSStyleDeclaration")}}.

+ +

Sintaxis

+ +
var stylePropertyMapReadOnly = Element.computedStyleMap()
+ +

Parámetros

+ +

Ninguno.

+ +

Valor de resultado

+ +

Una interfaz {{domxref("StylePropertyMapReadOnly")}}.

+ +

Ejemplos

+ +

Comenzamos con algo de HTML simple: un párrafo con un enlace, y una lista de definición a la cual le añadiremos todos los pares de Propiedad CSS / Valor.

+ +
<p>
+   <a href="https://example.com">Link</a>
+</p>
+<dl id="regurgitation"></dl>
+ +

Añadimos un poco de CSS

+ +
a {
+  --colour: red;
+  color: var(--colour);
+}
+ +

Añadimos Javascript para tomar nuestro enlace y devolvemos una lista de definición de todos los valores de propiedades CSS usando computedStyleMap().

+ +
// obtenemos el elemento
+const myElement = document.querySelector('a');
+
+// obtenemos la <dl> que llenaremos
+const stylesList = document.querySelector('#regurgitation');
+
+// recuperamos todos los estilos calculados con computedStyleMap()
+const allComputedStyles = myElement.computedStyleMap();
+
+// iteramos a través del mapa de todas las propiedades y valores, añadiendo un <dt> y <dd> para cada mapa
+for (const [prop, val] of allComputedStyles) {
+	// propiedades
+	const cssProperty = document.createElement('dt');
+	cssProperty.appendChild(document.createTextNode(prop));
+	stylesList.appendChild(cssProperty);
+
+	// valores
+	const cssValue = document.createElement('dd');
+	cssValue.appendChild(document.createTextNode(val));
+	stylesList.appendChild(cssValue);
+}
+ +

En navegadores que soportan computedStyleMap(), verás una lista de todas las propiedades CSS y valores. En otros navegadores verás un enlace.

+ +

{{EmbedLiveSample("Examples", 300, 300)}}

+ +

¿Te diste cuenta cuántas propiedades CSS por defecto tenía un enlace? Actualiza el 'a' a un 'p', y notarás una diferencia en los valores calculados por defecto del margin-top y margin-bottom.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS Typed OM','#dom-element-computedstylemap','computedStyleMap()')}}{{Spec2('CSS Typed OM')}}Definición inicial.
+ +

Compatibilidad con navedadores

+ + + +

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

diff --git a/files/es/web/api/element/currentstyle/index.html b/files/es/web/api/element/currentstyle/index.html new file mode 100644 index 0000000000..620ff01129 --- /dev/null +++ b/files/es/web/api/element/currentstyle/index.html @@ -0,0 +1,80 @@ +--- +title: Element.currentStyle +slug: Web/API/Element/currentStyle +tags: + - API + - Compatibilidad en los navegadores móviles + - Property +translation_of: Web/API/Element/currentStyle +--- +
{{APIRef("DOM")}}
+ +

{{ Non-standard_header() }}

+ +

Sumario

+ +

Element.currentStyle es una propiedad que es una alternativa propietaria del método estandarizado {{domxref("window.getComputedStyle")}} . Está disponible en las versiones anteriores de Microsoft Internet Explorer.

+ +

Especificación

+ +

No forma parte de ninguna especificación.

+ +

Microsoft tiene una descripción MSDN.

+ +

Compatibilidad en los Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}6{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +

Ver También

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

Resumen

+ +

getAttribute() devuelve el valor del atributo especificado en el elemento. Si el atributo especificado no existe, el valor retornado puede ser tanto null como "" (una cadena vacía); ver {{Anch("Notes")}} para más detalles.

+ +

Sintaxis

+ +
var atributo = element.getAttribute(nombreAtributo);
+
+ +

donde

+ + + +

Ejemplo

+ +
var div1 = document.getElementById("div1");
+var align = div1.getAttribute("align");
+
+alert(align); // Muestra el valor de la alineación(align) del elemento con id="div1"
+ +

Notas

+ +

Cuando es invocado en un elemento HTML desde un DOM marcado como documento HTML, getAttribute() convierte a minúsculas el argumento antes de proceder.

+ +

Esencialmente todos los navegadores (Firefox, Internet Explorer, versiones recientes de Opera, Safari, Konqueror, y iCab, siendo una lista no exhaustiva) devuelven null cuando el atributo especificado no existe en el elemento especificado y esto es lo que establece el actual borrador de la especificación del DOM. Por otra parte, la antigua especificación del DOM 3 Core dice que el valor correcto de retorno es de hecho una cadena vacía, y algunas implementaciones de DOM aplican este comportamiento. La implementación de getAttribute en XUL (Gecko) sigue la especificación de DOM 3 Core y retorna una cadena vacía. Por consiguiente, es recomendable usar {{domxref("element.hasAttribute()")}} para verificar la existencia de un atributo previo a la utilización de getAttribute() si es posible que el atributo requerido no exista en el elemento especificado.

+ +
{{DOMAttributeMethods}}
+ +

Especificación

+ + diff --git a/files/es/web/api/element/getattributenodens/index.html b/files/es/web/api/element/getattributenodens/index.html new file mode 100644 index 0000000000..07ca649174 --- /dev/null +++ b/files/es/web/api/element/getattributenodens/index.html @@ -0,0 +1,38 @@ +--- +title: Element.getAttributeNodeNS() +slug: Web/API/Element/getAttributeNodeNS +tags: + - API + - DOM + - Referencia + - metodo +translation_of: Web/API/Element/getAttributeNodeNS +--- +

{{ APIRef("DOM") }}

+ +

Sumario

+ +

Dados namespace y nodeName del element, devuelve su Attr .

+ +

Sintaxis

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

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

+ +

Notas

+ +

getAttributeNodeNS es más específica getAttributeNode en el sentido de que puedes especificar atributos de un namespace en particular.  Su método setter es setAttributeNodeNS.

+ +

{{ DOMAttributeMethods() }}

+ +

Especificación

+ +

DOM Level 2 Core: getAttributeNodeNS

diff --git a/files/es/web/api/element/getboundingclientrect/index.html b/files/es/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..9d1b6ae4bb --- /dev/null +++ b/files/es/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,98 @@ +--- +title: element.getBoundingClientRect +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Boundary + - Bounding + - Bounds + - CSSOM View + - Cliente + - DOM + - Elemento + - Minimo + - Referencia + - metodo +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

El método Element.getBoundingClientRect() devuelve el tamaño de un elemento y su posición relativa respecto a la ventana de visualización (viewport).

+ +

Sintaxis

+ +
domRect = element.getBoundingClientRect();
+ +

Valor

+ +

El valor devuelto es un objeto {{domxref("DOMRect")}} que es la unión de los rectángulos devueltos por {{domxref("Element.getClientRects", "getClientRects()")}}para el elemento, es decir, las CSS border-boxes asociadas con el elemento. El resultado es el rectángulo más pequeño que contiene al elemento completo, con las propiedades de solo lectura left, top, right, bottom, x, y, width, and height describiendo la border-box total en pixels. Excepto width and height las propiedades son relativas a la esquina superior izquierda (top-left) de la ventana.

+ +

Explicación de los valores DOMRect

+ +

Las border-boxes vacías son ignoradas. Si todas las border-boxes del elemento estan vacías, entonces se devuelve un rectángulo con width and height iguales a cero donde el top y el left son el top-left de la border-box de la primera CSS box (en onden de contenido) para el elemento.

+ +

La cantidad de scrolling realizado en la ventana (o cualquier otro elemento scrollable) se tiene en cuenta cuando se calcula el rectángulo. Esto implica que los bordes del rectángulo (top, left, bottom, and right) cambián sus valores cada vez que la posición de scrolling cambia (ya que sus valores no son absolutos sino relativos a la ventana). Si se necesita el bounding rectangle relativo a la esquina top-left del documento, hay que añadir la posición de scrolling actual a las propiedades top and left  (dicha posición de scrolling puede obtenerse usando {{domxref("window.scrollX")}} y {{domxref("window.scrollY")}}) para obtener el bounding rectangle independiente de la posición de scrolling.

+ +

Fallback para todos los navegadores

+ +

Los scripts que requieran una alta compatibilidad cross-browser pueden usar {{domxref("window.pageXOffset")}} y {{domxref("window.pageYOffset")}} en lugar de window.scrollX y window.scrollY. Si no se tiene acceso a esas propiedades puede usarse el siguiente código:

+ +
// Para scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// Para scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+
+ +

Ejemplo

+ +
// rect es un objeto DOMRect con ocho propiedades: left, top, right, bottom, x, y, width, height
+var rect = obj.getBoundingClientRect();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Definición inicial
+ +

Notas

+ +

El objeto DOMRect devuelto puede modificarse en navegadores modernos. Esto no era así en versiones anteriores que devolvían DOMRectReadOnly de forma efectiva. Con IE y Edge, el hecho de no poder agregar propiedades faltantes a su objeto ClientRect MSDN: ClientRect, devuelto impide rellenar los valores x e y.

+ +

Debido a problemas de compatibilidad (ver a continuación), es más seguro confiar sólo en las propiedades left, top, right, and bottom. 

+ +

Las propiedades en el objeto DOMRect devuelto no son suyas. Mientras que el operador in y for...in encontrarán las propiedades devueltas, otras API como Object.keys() fallarán. Además, e inesperadamente, ES2015 y nuevas características como Object.assign() y los operadores rest/spread de los objetos, no podrán copiar las propiedades devueltas.

+ +
rect = elt.getBoundingClientRect()
+// El resultado en emptyObj es {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+
+ +

Compatibilidad en navegadores

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/element/getclientrects/index.html b/files/es/web/api/element/getclientrects/index.html new file mode 100644 index 0000000000..507cda7bb8 --- /dev/null +++ b/files/es/web/api/element/getclientrects/index.html @@ -0,0 +1,54 @@ +--- +title: element.getClientRects +slug: Web/API/Element/getClientRects +tags: + - NeedsBrowserCompatibility + - NeedsExample + - NeedsLiveSample + - NeedsUpdate + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/getClientRects +--- +

 {{ ApiRef("DOM") }}

+ +

El método Element.getClientRects() devuelve una colección de objetos {{domxref("DOMRect")}} que indican los rectángulos que delimitan el rectángulo de cada línea de texto en el navegador.

+ +

Sintaxis

+ +
var rectCollection = object.getClientRects();
+ +

Devuelve

+ +

El valor devuelto es una colección de objetos rectangulares {{domxref("DOMRect")}}, uno para cada cuadro borde CSS asociado al elemento. Cada objeto {{domxref("DOMRect")}} contiene las propiedades de sólo lectura: left, top, right y bottom, que describen la caja, en pixeles, con el valor top-left relativo al valor top-left del viewport. En el caso de tablas con subtítulos, el subtítulo es incluido aún cuado esté fuera del cuadro borde de la tabla. En caso de ser ejecutado en algún elemento SVG que no sea el <svg> externo, el "viewport" al cual los rectángulos de resultado serán relativos será el "viewport" que establece el <svg> externo (y serán transformados por las trasnformaciones del <svg> externo, si estas existen).

+ +

{{ fx_minversion_note(3.5, "Firefox 3.5 ha agregado las propiedades width y height al objeto TextRectangle.") }}

+ +

La cantidad de desplazamiento que ha tenido el área del viewport (o cualquier otro elemento desplazable) se tiene en cuenta al calcular los rectángulos.

+ +

Los rectángulos devueltos no incluyen los márgenes de ningún elemento hijo que se haya podido haber desbordado.

+ +

Para los elementos de AREA en HTML, elementos SVG que no renderizen nada por si mismos, los elementos display:none, y generalmente cualquier elemento que no sea renderizado directamente, se devuelve una lista vacia.

+ +

Aún si la caja CSS tiene bordes vacios, se devuelven las coordenadas. Las coordenadas left, top, right y bottom pueden aún tener significado.

+ +

Es posible que los valores de desplazamiento sean fracciones de pixel.

+ +

Ejemplo

+ +
var rects = obj.getClientRects();
+var numLines = rects.length;
+
+ +

Especificación

+ +

No forma parte de ninguna especificación W3C.

+ +

Notas

+ +

getClientRects() apareció por primera vez en el modelo de objeto de MS IE DHTML.

+ +

Referencias

+ + diff --git a/files/es/web/api/element/getelementsbyclassname/index.html b/files/es/web/api/element/getelementsbyclassname/index.html new file mode 100644 index 0000000000..a1e6d7b3e3 --- /dev/null +++ b/files/es/web/api/element/getelementsbyclassname/index.html @@ -0,0 +1,112 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +translation_of: Web/API/Element/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

El método Element.getElementsByClassName() retorna una {{domxref("HTMLCollection")}} "viva" conteniendo todos los elementos hijos que tienen todos los nombres de clase dados. Cuando se llama en el objeto document, se realiza la búsqueda en el documento completo, incluyendo el nodo raíz.

+ +

De forma similar, el método {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} actúa en todo el documento; retornará los elementos que sean descendientes del documento raiz especificado que tengan los nombres de clase dados.

+ +

Sintaxis

+ +
var elements = element.getElementsByClassName(names);
+ + + +

Ejemplo

+ +

Obtiene todos los elementos que tienen una clase test:

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

Obtiene todos los elementos que tienen tanto la clase red como test:

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

Obtiene todos los elementos que tienen la clase of test, dentro de un elemento que tiene el id main:

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

Podemos también usar métodos de  {{jsxref("Array.prototype")}} en cualquier {{ domxref("HTMLCollection") }} pasando el HTMLCollection como el valor this del método. Aquí encontramos todos los elementos {{HTMLElement("div")}} que tienen una clase test:

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

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]9{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Anteriormente a Firefox 19, este método retornaba una {{domxref("NodeList")}}; se cambió para reflejar el cambio en la especificación.

+ +

[2] Safari en iOS 8 y OS X 10.10 retorna una {{domxref("NodeList")}}.

diff --git a/files/es/web/api/element/getelementsbytagname/index.html b/files/es/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..6080c186af --- /dev/null +++ b/files/es/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,50 @@ +--- +title: element.getElementsByTagName +slug: Web/API/Element/getElementsByTagName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/getElementsByTagName +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve una lista de elementos que tienen un tag name determinado. Se explora el árbol por debajo del elemento dado, excluyendo el propio elemento.

+ +

Sintaxis

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

En Firefox 2 (Gecko 1.8.1) y anteriores, este método no funcionaba correctamente si el árbol contenía algún elemento con etiqueta de nombre conteniendo espacios. (Ver {{ Bug(206053) }} para más detalles).

+ +

Es recomendable usar DOM:document.getElementsByTagNameNS cuando se manejan documentos con "multi-namespace".

+
+ +

Ejemplo

+ +
// comprueba la alineación de las celdas en una tabla.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i < cells.length; i++) {
+    status = cells[i].getAttribute("status");
+    if ( status == "open") {
+        // grab the data
+    }
+}
+
+ +

Notas

+ +

element.getElementsByTagName es similar a document.getElementsByTagName, excepto por que su búsqueda está restringida a los elementos que descienden del elemento especificado.

+ +

Especificación

+ +

DOM Level 2 Core: Element.getElementsByTagName

diff --git a/files/es/web/api/element/getelementsbytagnamens/index.html b/files/es/web/api/element/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..3f8a92ef90 --- /dev/null +++ b/files/es/web/api/element/getelementsbytagnamens/index.html @@ -0,0 +1,128 @@ +--- +title: Element.getElementsByTagNameNS() +slug: Web/API/Element/getElementsByTagNameNS +translation_of: Web/API/Element/getElementsByTagNameNS +--- +
{{APIRef("DOM")}}
+ +

El método Element.getElementsByTagNameNS() devuelve una {{domxref("HTMLCollection")}} viva de elementos con el nombre de etiqueta dado perteneciente al espacio de nombres dado. Es similar a {{Domxref("Document.getElementsByTagNameNS")}}, con la excepción de que su búsqueda está limitada a los descendientes del elemento especificado.

+ +

Sintaxis

+ +
elementos = elemento.getElementsByTagNameNS(espacioNombreURI, nombreLocal)
+ + + +

Ejemplo

+ +
// verifica la alineación en un número de celdas en una tabla en un documento XHTML.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
+
+for (var i = 0; i < cells.length; i++) {
+    var axis = cells[i].getAttribute("axis");
+    if (axis == "year") {
+        // obtiene los datos
+    }
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM WHATWG')}}Cambió el valor devuelto de {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}.
{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM3 Core')}}Sin cambios desde {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM2 Core')}}Definición inicial
+ +

Compatibilidad con los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]5.5{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]
getElementsByTagName("*")1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}6.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Inicialmente, este método devolvía una {{domxref("NodeList")}}; luego fue modificado para reflejar el cambio en la especificación.

+ +

[2] El comportamiento de element.getElementsByTagNameNS cambió entre Firefox 3.5 y Firefox 3.6. En Firefox 3.5 y anteriores, esta función automáticamente convertía mayúsculas o minúsculas en las consultas, de manera que una búsqueda de "foo" encontraría "Foo" o "foo". En Firefox 3.6 y posteriores esta función es sensible a mayúsculas y minúsculas, por lo que una consulta por "foo" sólo encontrará "foo" y no "Foo". Para más información al respecto, por favor vea el comentario de Henri Sivonen sobre este cambio. También puede ver la parte relevante del estándar, que establece qué partes de la API son sensibles a mayúsculas y minúsculas y qué partes no.

+ +

Previo a Firefox 19, este método devolvía una {{domxref("NodeList")}}; luego fue modificado para reflejar el cambio en la especificación.

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

El método Elemento.hasAttribute() devuelve un valor Booleano indicando si el elemento tiene el atributo especificado o no.

+ +

Sintaxis

+ +
var resultado = elemento.hasAttribute(nombre);
+
+ +
+
resultado
+
contendrá el valor devuelto (true o false).
+
nombre
+
consiste en una cadena de caracteres que representa el nombre del atributo a chequear.
+
+ +

Ejemplo

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

Polyfill

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

Notas

+ +
{{DOMAttributeMethods}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Initial definition.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/api/element/id/index.html b/files/es/web/api/element/id/index.html new file mode 100644 index 0000000000..b75cd87e77 --- /dev/null +++ b/files/es/web/api/element/id/index.html @@ -0,0 +1,119 @@ +--- +title: Element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - Elemento + - Propiedad + - Referencia +translation_of: Web/API/Element/id +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

La propiedad Element.id representa el identificador del elemento, reflejando el atributo global de id.

+ +

debe ser un único documento, y con frecuencia es utilizado para recuperar el elemento usando {{domxref("document.getElementById", "getElementById")}}. Otros usos comunes de id incluyen la utilización de elementos ID como un selector cuando se está estilando el documento con CSS.

+ +
+

Nota: los identificadores distinguen mayúsculas y minúsculas, pero se debe evitar la creación de IDs que difieran solamente en la capitalization (ver diferenciación de mayúsculas y minúsculas en nombres y destacados ).

+
+ +

Síntasix

+ +
var idStr = elt.id; // Get the id.
+elt.id = idStr; // Set the id
+
+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}{{Spec2('DOM WHATWG')}}No change from {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}{{Spec2('DOM1')}}Initial definition.
+ +

Compatibilidad de los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/element/index.html b/files/es/web/api/element/index.html new file mode 100644 index 0000000000..a689499051 --- /dev/null +++ b/files/es/web/api/element/index.html @@ -0,0 +1,539 @@ +--- +title: element +slug: Web/API/Element +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element +--- +

{{ ApiRef("DOM") }} Este capítulo proporciona una breve explicación para los métodos generales, las propiedades y los eventos disponibles para los elementos HTML y XML en el DOM de Gecko.

+ +

Varias especificaciones aplicadas a los elementos:

+ + + +

Los artículos listados aquí amplían lo antedicho e incluyen enlaces a la especificación apropiada del DOM de W3C.

+ +

Mientras que estas interfaces son generalmente compartidas por la mayoría de los elementos HTML y XML, hay muchas más especiales para los objetos particulares listados en la especificación HTML del DOM —por ejemplo las interfaces del elemento tabla de HTML y elemento formulario de HTML.

+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreDescripciónTipoDisponibilidad
attributesTodos los atributos asociados a un elemento.NamedNodeMappara todos
childNodesTodos los nodos hijos de un elemento.Listado de nudopara todos
classNameLa clase del elemento.Secuenciapara HTML, XUL
clientHeightEl alto interior del elemento.Númeropara HTML
clientWidthEl ancho interior del elemento.Númeropara HTML
dirLa direccionalidad del elemento.Secuenciapara HTML, XUL
firstChildEl primer hijo directo del elemento, null si no hay.Nudopara todos
idLa identificación del elemento.Secuenciapara HTML, XUL
innerHTMLEl contenido y el código que hay dentro del elemento.Secuenciapara HTML
langEl lenguaje de los atributos, texto y contenidos del elemento.Secuenciapara HTML
lastChildEl último hijo directo del elemento, null si no hay.Nodepara todos
localNameLa parte local del nombre cualificado del elemento.Secuenciapara todos
NombreDescripciónTipoDisponibilidad
nameEl nombre del elemento.Secuenciapara HTML
namespaceURIEl URI del espacio de nombre de ese nodo, null si no está especificado.Secuenciapara todos
nextSiblingEl nodo inmediatamente posterior al primero dado en el árbol, null si no hay.Nudopara todos
nodeNameEl nombre del nodo de ese elemento.Secuenciapara todos
nodeTypeUn número que representa el tipo del nodo. Lo mismo que 1 para los elementos DOM.Númeropara todos
nodeValueEl valor del nodo. Lo mismo que null para los elementos DOM.Secuenciapara todos
offsetHeightEl alto de un elemento, tal cual está escrito en la composición.Númeropara HTML
offsetLeftLa distancia que hay desde el borde izquierdo del elemento al de su offsetParent.Númeropara HTML
offsetParentEl elemento del cual todos los cálculos de distancia son actualmente computados.Elementopara HTML
offsetTopLa distancia desde el borde superior del elemento hasta el de su offsetParent.Númeropara HTML
offsetWidthEl ancho de un elemento, tal cual está escrito en la composición.Númeropara HTML
ownerDocumentEl documento en el cual está ese nodo, null si no hay.Documentopara todos
NombreDescripciónTipoDisponibilidad
parentNodeEl elemento original(padre) de ese nodo, null si no hay dentro del documento de DOM.Nudopara todos
prefixEl prefijo del espacio de nombre del nodo, null si no está especificado.Secuenciapara todos
previousSiblingEl nodo inmediatamente anterior al primero dado en el árbol , null si no hay.Nudopara todos
scrollHeightMuestra la altura de deslizamiento del elemento.Númeropara HTML
scrollLeftObtiene/establece el offset de scroll izquierdo de un elemento.Númeropara HTML
scrollTopObtiene/establece el offset de scroll superior de un elemento.Númeropara HTML
scrollWidthMuestra el ancho de deslizamiento de un elemento.Númeropara HTML
styleUn objeto representando las declaraciones de los atributos de estilo del elemento.Estilo CSSpara HTML, XUL
tabIndexObtiene/establece la posición del elemento en el órden de tabulación.Númeropara HTML
tagNameEl nombre de la etiqueta para el elemento dado.Secuenciapara todos
textContentObtiene/establece los contenidos textuales de un elemento y todos sus descendentes.Secuenciapara todos
+ +

Métodos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre y DescripciónDevuelveDisponible
addEventListener( type, handler, bubble)
+ Registra un controlador de evento para un tipo de evento específico en un elemento.		-Todos
appendChild( appendedNode )
+ Inserta un nodo así como el último nodo hijo de este elemento.		NodeTodos
blur()
+ Quita el foco del teclado del elemento actual.		-para HTML, XUL
click()
+ Simula un clic sobre el elemento actual.		-para HTML, XUL
cloneNode( deep)
+ Hace copia de un nudo, y opcionalmente, de todo sus contenidos		Nodepara Todos
dispatchEvent( event )
+ Envía un evento a este nodo en el DOM.		BooleanTodos
getAttribute( name )
+ Devuelve el valor de un atributo nombrado desde el nodo actual.		ObjectTodos
getAttributeNS( namespace, name )
+ Devuelve el valor del atributo con el nombre especificado, desde el nodo actual.		ObjectTodos
getAttributeNode( name )
+ Devuelve la representación del nodo del atributo nombrado desde el nodo actual.		AttrTodos
getAttributeNodeNS( namespace, name )
+ Devuelve la representación del nodo del atributo con el nombre especificado, desde el nodo actual.		AttrTodos
Nombre y DescripciónDevuelveDisponibilidad
getElementsByTagName( name )
+ Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta particular, desde el elemento actual.		NodeSetTodos
getElementsByTagNameNS( namespace, name )
+ Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta y espacio particular, desde el elemento actual.		NodeSetTodos
hasAttribute( name )
+ Verifica si el elemento tiene el atributo especificado o no.		BooleanTodos
hasAttributeNS( namespace, name )
+ Verifica si el elemento tiene el atributo especificado, en el nombre de espacio especificado o no.		BooleanTodos
hasAttributes()
+ Verifica si el elemento tiene o no algún atributo.		BooleanTodos
hasChildNodes()
+ Verifica si el elemento tiene nodos hijos o no.		BooleanTodos
insertBefore( insertedNode, adjacentNode )
+ Inserta el primer nodo antes que el segundo, Nodo hijo en el DOM.		NodeTodos
normalize()
+ Limpia todos los nodos de texto debajo de este elemento (une lo adyacente, quita lo vacío).		-Todos
removeAttribute( name )
+ Quita el atributo nombrado desde el nodo actual.		-All
removeAttributeNS( namespace, name )
+ Quita el atributo con el nombre y nombre de espacio especificado desde el nodo actual.		-Todos
Nombre y DescripciónDevuelveDisponibilidad
removeAttributeNode( name )
+ Quita la representación del nodo del atributo nombrado desde el nodo actual.		-Todos
removeChild( removedNode )
+ Quita el nodo hijo desde el elemento actual.		NodeTodos
removeEventListener( type, handler )
+ Quita un oyente de evento desde el elemento.		-Todos
replaceChild( insertedNode, replacedNode )
+ Reemplaza un nodo hijo en el elemento actual con otro.		NodeTodos
scrollIntoView( alignWithTop )
+ Recorre la página hasta que el elemento se obtiene en la vista.		-HTML
setAttribute( name, value )
+ Establece el valor de un atributo nombrado desde el nodo actual.		-Todos
setAttributeNS( namespace, name, value )
+ Establece el valor del atributo con el nombre y nombre de espacio especificado desde el nodo actual.		-Todos
setAttributeNode( name, attrNode )
+ Establece la representación del nodo del atributo nombrado desde el nodo actual.		-Todos
setAttributeNodeNS( namespace, name, attrNode )
+ Establece la representación del nodo del atributo con el nombre y nombre de espacio especificado desde el nodo actual.		-Todos
+ +

Eventos

+ +

Son propiedades correspondientes a los atributos del evento "on" en HTML.

+ +

A diferencia de los atributos correspondientes, los valores de esas propiedades son funciones (o cualquier otro objeto trabajando con la interfaz EventListener) más bien que una cadena de carácteres. En efecto, asignar un atributo de evento en HTML crea una función envolvente alrededor del código especificado. Por ejemplo, el siguiente HTML:

+ +
<div onclick="foo();">clic aquí!</div>
+
+ +

Si element es una referencia a esta div, el valor de element.onclick será:

+ +
function onclick(event) {
+   foo();
+}
+
+ +

El objeto event es pasado al parámetro event de esta función envolvente.

+ +
+
onblur - (al quitar el foco)
+
Devuelve el código de manejo de evento para el evento blur.
+
+ +
+
onchange - (al modificar)
+
Devuelve el código de manejo de evento para el evento change.
+
+ +
+
onclick - (al hacer clic)
+
Devuelve el código de manejo de evento para el evento onclick.
+
+ +
+
ondblclick - (al hacer doble clic)
+
Devuelve el código de manejo de evento para el evento ondblclick.
+
+ +
+
onfocus - (al poner el foco)
+
Devuelve el código de manejo de evento para el evento onfocus.
+
+ +
+
onkeydown - (al tener una tecla apretada)
+
Devuelve el código de manejo de evento para el evento onkeydown.
+
+ +
+
onkeypress - (al apretar una tecla)
+
Devuelve el código de manejo de evento para el evento onkeypress.
+
+ +
+
onkeyup - (al soltar una tecla)
+
Devuelve el código de manejo de evento para el evento onkeyup.
+
+ +
+
onmousedown - (al tener el botón del ratón apretado)
+
Devuelve el código de manejo de evento para el evento onmousedown.
+
+ +
+
onmousemove - (al mover el ratón)
+
Devuelve el código de manejo de evento para el evento onmousemove.
+
+ +
+
onmouseout - (al quitar el puntero del ratón)
+
Devuelve el código de manejo de evento para el evento onmouseout.
+
+ +
+
onmouseover - (al pasar el ratón encima)
+
Devuelve el código de manejo de evento para el evento onmouseover.
+
+ +
+
onmouseup - (al soltar el botón del ratón)
+
Devuelve el código de manejo de evento para el evento onmouseup.
+
+ +
+
onresize - (al re-dimensionar la pantalla)
+
Devuelve el código de manejo de evento para el evento onresize.
+
diff --git a/files/es/web/api/element/innerhtml/index.html b/files/es/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..b0e9552b47 --- /dev/null +++ b/files/es/web/api/element/innerhtml/index.html @@ -0,0 +1,151 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/Element/innerHTML +--- +

{{APIRef("DOM")}}

+ +

Resumen

+ +

La propiedad Element.innerHTML devuelve o establece la sintaxis HTML describiendo los descendientes del elemento.

+ +

Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.

+ +
Nota: Si un nodo tiene un texto secundario que incluye los caracteres (&), (<), o (>), innerHTML devuelve estos caracteres como &amp, &lt y &gt respectivamente. Use {{ domxref("Node.textContent") }} para conseguir una copia correcta del contenido de estos nodos de texto.
+ +

Para insertar el código HTML en el documento en lugar de cambiar el contenido de un elemento, use el método insertAdjacentHTML().

+ +

Sintaxis

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

Valor

+ +

La variable constante content contiene un DOMString que contiene el código HTML serializado describiendo todos los descendientes de element. Cuando se establece el valor de innerHTML, se eliminan todos los descendientes de element, analiza la cadena htmString y asigna los nodos resultantes como descendientes de element.

+ +

Excepciones

+ +
+
SyntaxError
+
Se intentó establecer el valor de innerHTML utilizando una cadena que no está formada correctamente en HTML
+
NoModificationAllowedError
+
Se intentó insertar el código HTML en un nodo cuyo elemento primario es document.
+
+ +

Notas de uso

+ +

La propiedad innerHTML de muchos tipos de elementos—incluyendo {{ HTMLElement("body") }} o {{ HTMLElement("html") }}—puede ser devuelta o establecida. Esta propiedad se puede usar para ver el código HTML de la página actual, incluida la que haya sido modificada dinámicamente:

+ +

Devolver la sintaxis HTML de un elemento

+ +

Devolver el valor de innerHTMLhace que el agente de usuario serialice el fragmento HTML compuesto por los descendientes del elemento. La cadena resultante es devuelta.

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

Esto le permite ver la sintaxis HTML de los nodos contenidos en el elemento.

+ +

Reemplazar el contenido de un elemento

+ +

Esta propiedad proporciona una forma sencilla de cambiar completamente los contenidos de un elemento por contenido nuevo. Por ejemplo, los contenidos completos del cuerpo del documento se pueden borrar así:

+ +
document.body.innerHTML = "";  // Reemplaza el contenido de <body> con una cadena vacía
+
+ +

El siguiente ejemplo recupera la sintaxis HTML actual del documento y reemplaza los caracteres "<" con la entidad HTML "&lt;", convirtiendo esencialmente el HTML en texto plano. Esto luego se envuelve en un elemento <pre>. Entonces el valor de innerHTML se cambia a esta nueva cadena. Como resultado, se muestra en pantalla el código fuente completo de la página.

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

Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarán exactamente igual. Por ejemplo, cuando el texto es ingresado en una caja de texto multilinea (elemento textarea), Internet Explorer cambiará el valor de la propiedad innerHTML del elemento textarea, mientras que los navegadores Gecko no lo hacen.

+
+ +

Consideración de seguridad

+ +

No es extraño que innerHTML sea usado para  introducir texto en una página web. Esto añade un riesgo de seguridad.

+ +
//ejemplo 1
+var name = "Juan";
+// asumiendo que 'el' es un elemento de HTML DOM
+el.innerHTML = name; // sin peligro
+
+// ...
+
+//ejemplo 2
+name = "<script>alert('Soy Juan con una alerta molesta!')</script>";
+el.innerHTML = name; // fíjese que el texto es molesto y no es realmente lo que se esperaba.
+
+ +

Aunque esto, el ejemplo 2, puede parecer un ataque cross-site scripting, el resultado es inofensivo, ya que HTML5 especifica que un tag <script> insertado a través innerHTML no debe ejecutarse.

+ +

Sin embargo, hay maneras de ejecutar JavaScript sin necesidad de utilizar el elemento <script>, por lo que todavía hay un riesgo de seguridad cada vez que se utiliza innerHTML para establecer cadenas de texto sobre las que no tiene control. Por ejemplo:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // con peligro, la alerta ahora si es mostrada
+ +

Por esa razón, cuando solo tratamos con texto, es recomendable no usar innerHTML, sino Node.textContent, que no interpretará la cadena pasada como HTML, sino como texto plano.

+ +

Ejemplo

+ +
<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Documento sin título</title>
+  </head>
+  <body>
+    <div id="txt">
+      <p>primer parrafo hijo de div id="txt"</p>
+      <p>segundo parrafo hijo de id="txt" txt</p>
+    </div>
+  </body>
+</html>
+ +
txt = document.getElementById("txt");
+console.log(txt.innerHTML);
+/*
+La siguiente cadena (string) se muestra en la ventana de la consola:
+<p>primer parrafo hijo de div id="txt"</p>
+<p>segundo parrafo hijo de id="txt" txt</p>
+*/
+ +

Especificaciones

+ + + +

Ver también

+ + + +
+ + +
 
+ +
 
+
+ +
+ + +
 
+ +
 
+
diff --git a/files/es/web/api/element/insertadjacentelement/index.html b/files/es/web/api/element/insertadjacentelement/index.html new file mode 100644 index 0000000000..4f06780e1e --- /dev/null +++ b/files/es/web/api/element/insertadjacentelement/index.html @@ -0,0 +1,115 @@ +--- +title: Element.insertAdjacentElement() +slug: Web/API/Element/insertAdjacentElement +translation_of: Web/API/Element/insertAdjacentElement +--- +

{{APIRef("DOM")}}

+ +

El método insertAdjacentElement() inserta un elemento nodo dado en una posición dada con respecto al elemento sobre el que se invoca.

+ +

Sintaxis

+ +
elementoObjetivo.insertAdjacentElement(posición, elemento);
+ +

Parameters

+ +
+
posición
+
Un {{domxref("DOMString")}} representando la posición relativa al elementoObjetivo; debe ser una de las siguientes cadenas: +
    +
  • 'beforebegin': Antes del elementoObjetivo.
    • +
  • 'afterbegin': Dentro del elementoObjetivo, antes de su primer hijo.
    • +
  • 'beforeend': Dentro del elementoObjetivo, después de su último hijo.
    • +
  • 'afterend': Después del elementoObjetivo.
    • +
+
+
elemento
+
El elemento HTML a ser insertado.
+
+ +

Valor devuelto

+ +

El elemento insertado  o null, si la inserción falla.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + +
ExcepciónExplicación
SyntaxErrorLa posición especificada no tiene un valor reconocido.
TypeErrorEl elemento especificado no es un elemento válido.
+ +

Visualización de los nombres de posición

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Nota: Las posiciones beforebegin y afterend sólo funcionan si el nodo está en un árbol y tiene un padre.
+ +

Ejemplo

+ +
beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  activeElem.insertAdjacentElement('afterend',tempDiv);
+  setListener(tempDiv);
+});
+ +

Mira nuestro insertAdjacentElement.html demo en Github (mira el código fuente también.) Aquí tenemos una  secuencia de elementos {{htmlelement("div")}} dentro de un contenedor. Cuando uno es clickeado, se torna en seleccionado y tu puedes presionar los botones Insert before e Insert after para insertar nuevos divs antes o despues del elemento seleccionado usando insertAdjacentElement().

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
+ +

Compatibilidad con Navegadores

+ +

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

+ +

Mira también

+ + diff --git a/files/es/web/api/element/insertadjacenthtml/index.html b/files/es/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..03be31a430 --- /dev/null +++ b/files/es/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,99 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - Cambiando el DOM + - DOM + - HTML + - Insertando Elementos + - Insertando Nodos + - Referencia + - insertAdjacentHTML + - metodo +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

EL método insertAdjacentHTML() de la interfaz {{domxref("Element")}} analiza la cadena de texto introducida como cadena HTML o XML e inserta al árbol DOM los nodos resultantes de dicho análisis en la posición especificada. Este método no re-analiza el elemento sobre el cual se está invocando y por lo tanto no corrompe los elementos ya existentes dentro de dicho elemento. Esto evita el paso adicional de la serialización, haciéndolo mucho más rápido que la manipulación directa con {{domxref("Element.innerHTML", "innerHTML")}}.

+ +

Sintaxis

+ +
element.insertAdjacentHTML(posición, texto);
+ +

Parámetros

+ +
+
posición
+
Un {{domxref("DOMString")}} que representa la posición relativa al elemento, y deberá ser una de las siguientes cadenas: +
    +
  • 'beforebegin': Antes que el propio elemento.
    • +
  • 'afterbegin': Justo dentro del elemento, antes de su primer elemento hijo.
    • +
  • 'beforeend': Justo dentro del elemento, después de su último elemento hijo.
    • +
  • 'afterend': Después del propio elemento.
    • +
+
+
texto
+
Es la cadena a ser analizada como HTML o XML e insertada en el árbol.
+
+ +

Visualizacion de las posiciones

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Nota: Las posiciones beforebegin y afterend funcionan únicamente si el nodo se encuentra en el árbol DOM y tiene un elemento padre.
+ +

Ejemplo

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// En este punto, la nueva estructura es:
+// <div id="one">one</div><div id="two">two</div>
+ +

Notas

+ +

Consideraciones de seguridad

+ +

Cuando se inserte texto HTML en una página usando insertAdjacentHTML() debe tener cuidado de no usar cadenas de texto que no contengan las secuencias de escape pertinentes según sea el caso.

+ +

Se recomienda no usar insertAdjacentHTML() cuando se pretende insertar texto plano; en su lugar, se debe utilizar la propiedad {{domxref("Node.textContent")}} o el método {{domxref("Element.insertAdjacentText()")}}. Este método no interpreta el contenido pasado como HTML, si no que lo inserta como texto plano.

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
+ +

Compatibilidad con navegadores

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/element/localname/index.html b/files/es/web/api/element/localname/index.html new file mode 100644 index 0000000000..0876729853 --- /dev/null +++ b/files/es/web/api/element/localname/index.html @@ -0,0 +1,152 @@ +--- +title: Element.localName +slug: Web/API/Element/localName +tags: + - API + - Compatibilidad de los Navegadores en Móviles + - Compatibilidad de los navegadores + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Element/localName +--- +
{{APIRef("DOM")}}
+ +

La propiedad únicamente de lectura Element.localName devuelve la parte local del nombre calificado de un objeto.

+ +
+

Antes de DOM4 esta API fué definida dentro de la interfaz{{domxref("Node")}}.

+
+ +

Sintasix

+ +
name = element.localName
+
+ +

Valor de Retorno

+ +

 {{domxref("DOMString")}} que representa la parte local del nombre cualificado del elemento.

+ +

Ejemplo

+ +

(debe ser servido con contenido tipo XML , como text/xml o application/xhtml+xml.)

+ +
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script type="application/javascript"><![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "<svg:circle> has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]></script>
+</head>
+<body onload="test()">
+  <svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+  <textarea id="text" rows="4" cols="55"/>
+</body>
+</html>
+
+ +

Notas

+ +

El nombre local de un nodo es la parte del nombre completo del nodo que va situado después de los dos puntos. Nombres calificados se utilizan normalmente en XML como parte del espacio de los nombres (s) de los documentos particulares XML . Por ejemplo, en el nombre calificado ecomm : socios,  socios es el nombre local y ecomm es el prefijo:

+ +
1  <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
+2   <ecomm:partners>
+3    <ecomm:partner id="1001">Tony's Syrup Warehouse
+4     </ecomm:partner>
+5    </ecomm:partner>
+6  </ecomm:business>
+ +
+

Nota: En {{Gecko("1.9.2")}} y anteriores,devuelve la versión en mayúsculas del nombre local para elementos HTML en HTML DOMs (en contraposición a elementos XHTML en XML DOMs). En versiones posteriores, en concordancia con HTML5,la propiedad devuelve en el caso de almacenamiento interno DOM ,  minúscula para ambos elementos HTML en HTML DOM y elementos XHTML en DOM XML. La propiedad {{domxref("element.tagName","tagName")}} continua devolviéndolo en mayúsculas para elementos HTML en HTML DOMs.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM4', '#interface-element', 'Element.localName')}}{{Spec2('DOM4')}}definición inicial
+ +

Compatibilidad de los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico46.0[1]{{CompatGeckoDesktop("48.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("48.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API estaba disponible previamente en la  {{domxref("Node")}} API.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/matches/index.html b/files/es/web/api/element/matches/index.html new file mode 100644 index 0000000000..eef4ae271d --- /dev/null +++ b/files/es/web/api/element/matches/index.html @@ -0,0 +1,120 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +tags: + - API + - DOM + - Elemento + - Referencia + - metodo + - msMatchesSelector + - webkitMatchesSelector +translation_of: Web/API/Element/matches +--- +
{{APIRef("DOM")}}
+ +

El método matches() comprueba si el {{domxref("Element")}} sería seleccionable por el selector CSS especificado en la cadena; en caso contrario, retorna false.

+ +

Sintaxis

+ +
var result = element.matches(selectorString);
+
+ +

Parámetros

+ +

selectorString es una cadena de texto que representa el selector a probar.

+ +

Valor devuelto

+ +

result es un {{domxref("Boolean")}}.

+ +

Excepciones

+ +
+
SYNTAX_ERR
+
La cadena especificada como selector no es válida.
+
+ +

Ejemplo

+ +
<ul id="aves">
+  <li>Loro de alas naranja</li>
+  <li class="amenazada">Ágila Filipina</li>
+  <li>Gran Pelícano Blancpo/li>
+</ul>
+
+<script type="text/javascript">
+  var aves = document.getElementsByTagName('li');
+
+  for (var i = 0; i < aves.length; i++) {
+    if (aves[i].matches('.amenazada')) {
+      console.log('El ' + aves[i].textContent + ' está amenazada de extinción!');
+    }
+  }
+</script>
+
+ +

Esto mostrará "El Águila Filipina está amenazada de extinción!" en el log de la consola, dado que el elemento tiene un atributo class con valor amenazada.

+ +

Polyfill

+ +

Para navegadores que no soportan Element.matches() o Element.matchesSelector(), pero aun incorporan soporte para document.querySelectorAll(), existe un polyfill:

+ +
if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            while (--i >= 0 && matches.item(i) !== this) {}
+            return i > -1;
+        };
+}
+ +

However, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (ej. soporte IE9+).

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}Definición Inicial
+ +

Compatibilidad con navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/element/mousedown_event/index.html b/files/es/web/api/element/mousedown_event/index.html new file mode 100644 index 0000000000..4a207e28f3 --- /dev/null +++ b/files/es/web/api/element/mousedown_event/index.html @@ -0,0 +1,223 @@ +--- +title: mousedown +slug: Web/API/Element/mousedown_event +tags: + - API + - DOM + - Evento + - Interfaz +translation_of: Web/API/Element/mousedown_event +--- +

El evento mousedown se activa cuando el botón de un dispositivo apuntador (usualmente el botón de un ratón) es presionado en un elemento.

+ +

General info

+ +
+
Especificación
+
DOM L3
+
Interface
+
{{domxref("MouseEvent")}}
+
Bubbles
+
Sí
+
Cancelable
+
Sí
+
Target
+
Elemento
+
Default Action
+
Varios: Comenzar una acción de arrastrar y soltar; comenzar la selección de un texto; comenzar una interacción de desplazamiento (en combinación con el botón medio del mouse, si es soportado)
+
+ +

Properties

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

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On disabled form elements{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On disabled form elements{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Sólo funciona para elementos {{HTMLElement("textarea")}} y algunos elementos tipo {{HTMLElement("input")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/name/index.html b/files/es/web/api/element/name/index.html new file mode 100644 index 0000000000..717ad9dd3c --- /dev/null +++ b/files/es/web/api/element/name/index.html @@ -0,0 +1,79 @@ +--- +title: Element.name +slug: Web/API/Element/name +tags: + - API + - Compatibilidad de los navegadores + - DOM + - Elemento + - Propiedad + - Referencia + - Web + - actualizacion +translation_of: Web/API +--- +

{{ APIRef("DOM") }}

+ +

Sumario

+ +

name obtiene o establece la propiedad del nombre de un objeto DOM; sólo se aplica a los siguientes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.

+ +
+

Nota: La propiedad name no esixte para otros elementos; a diferencia de tagName y nodeName, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.

+
+ +

name puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una configuración y con la colección de elementos de la configuración. cuando utilizamos una configuración o  elementos de una colección, puede devolver un solo elemento o una colección.

+ +

Síntasix

+ +
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var fControl = HTMLFormElement.elementName;
+var controlCollection = HTMLFormElement.elements.elementName;
+
+ +

Ejemplo

+ +
<form action="" name="formA">
+  <input type="text" value="foo">
+</form>
+
+<script type="text/javascript">
+
+  // Get a reference to the first element in the form
+  var formElement = document.forms['formA'].elements[0];
+
+  // Give it a name
+  formElement.name = 'inputA';
+
+  // Show the value of the input
+  alert(document.forms['formA'].elements['inputA'].value);
+
+</script>
+
+ +

Notas

+ +

En Internet Explorer (IE), la propiedad name de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada

+ +

Especificaciones

+ +

W3C DOM 2 HTML Specification:

+ + diff --git a/files/es/web/api/element/namespaceuri/index.html b/files/es/web/api/element/namespaceuri/index.html new file mode 100644 index 0000000000..e2403ce0a5 --- /dev/null +++ b/files/es/web/api/element/namespaceuri/index.html @@ -0,0 +1,125 @@ +--- +title: Element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - API + - Compatibilidad de los navegadores + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Element/namespaceURI +--- +
{{APIRef("DOM")}}
+ +

La propiedad Element.namespaceURI unicamente de lectura devuelve la URI namespace de el elemento, o la anula si el elemento no está en un namespace.

+ +
+

Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.

+
+ +

Síntasix

+ +
namespace = element.namespaceURI
+ +

Ejemplo

+ +

En este snippet, un elemento está siendo examinado por su {{domxref("localName")}} y  su namespaceURI. Si el namespaceURI devuelve el  XUL namespace y el localName devuelve "browser", entonces  se entiende  que el nodo es  XUL <browser/>.

+ +
if (element.localName == "browser" &&
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // this is a XUL browser
+}
+ +

Notas

+ +

Esto no es un valor calculado resultante de una búsqueda de un namespace, basado en un examen de las declaraciones del namespace en el campo de aplicación. La URI del namespace de un nodo se congela en el momento de creación del nodo.

+ +
+
En Firefox 3.5 y versiones anteriores, la  URI del namespace  para elementos HTML en documentos HTML es nula. En versiones posteriores, de conformidad con HTML5, es http://www.w3.org/1999/xhtml como en XHTML. {{gecko_minversion_inline("1.9.2")}}
+ +
 
+
+ +

Se puede crear un elemento con el namespaceURI especificado utilizando el método  DOM Level 2  document.createElementNS.

+ +

El DOM no maneja o hace valer la validación del  namespace  por si mismo. Depende de la aplicación DOM para hacer cualquier validación necesaria. Date cuenta también que el prefijo del namespace , una vez que se asocia con un particular elemento, no puede ser cambiado.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}{{Spec2("DOM4")}}definición inicial
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico46.0[1]{{CompatGeckoDesktop("48.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("48.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API estaba disponible previamente en  {{domxref("Node")}} API.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/ongotpointercapture/index.html b/files/es/web/api/element/ongotpointercapture/index.html new file mode 100644 index 0000000000..156c25f4fb --- /dev/null +++ b/files/es/web/api/element/ongotpointercapture/index.html @@ -0,0 +1,133 @@ +--- +title: Element.ongotpointercapture +slug: Web/API/Element/ongotpointercapture +tags: + - API + - Controlador + - DOM + - Elemento + - Eventos Puntero + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/ongotpointercapture +--- +

{{ ApiRef("DOM") }}

+ +

ongotpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("gotpointercapture")}}.

+ +

Síntasix

+ +
var gotCaptureHandler = target.ongotpointercpature;
+
+ +

Valor de Retorno

+ +
+
gotCaptureHandler
+
El controlador de eventos  gotpointercapture para el elemento target.
+
+ +

Ejemplo

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Determine the target event's gotpointercapture handler
+ var gotCaptureHandler = ev.target.ongotpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerover = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementación retirada. Ver {{Bug("1166347")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/onlostpointercapture/index.html b/files/es/web/api/element/onlostpointercapture/index.html new file mode 100644 index 0000000000..336c672605 --- /dev/null +++ b/files/es/web/api/element/onlostpointercapture/index.html @@ -0,0 +1,132 @@ +--- +title: Element.onlostpointercapture +slug: Web/API/Element/onlostpointercapture +tags: + - API + - Controlador de Eventos + - DOM + - Eventos Puntero + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onlostpointercapture +--- +

{{ ApiRef("DOM") }}

+ +

onlostpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("lostpointercapture")}} .

+ +

Síntasix

+ +
var lostCaptureHandler = target.onlostpointercpature;
+
+ +

Valor de Retorno

+ +
+
lostCaptureHandler
+
El controlador de eventos  lostpointercapture para el elemento target.
+
+ +

Ejemplo

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Determine the target event's lostpointercapture handler
+ var lostCaptureHandler = ev.target.onlostpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerover = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementación retirada. Ver {{Bug("1166347")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/onwheel/index.html b/files/es/web/api/element/onwheel/index.html new file mode 100644 index 0000000000..b8f829969b --- /dev/null +++ b/files/es/web/api/element/onwheel/index.html @@ -0,0 +1,31 @@ +--- +title: Element.onwheel +slug: Web/API/Element/onwheel +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onwheel +--- +

{{ ApiRef("DOM") }}

+ +

{{ non-standard_header() }}

+ +

Sumario

+ +

La propiedad  onwheel devuelve el código del controlador de eventos onwheel en el elemento actual.

+ +

Syntax

+ +
element.onwheel = event handling code
+
+ +

Notas

+ +

El evento wheel se genera cuando el usuario desplaza el contenido de un elemento.

+ +

Ver también

+ +

Bug 18542 – el atributo onmousewheel  debe ser reemplazado con onwheel

diff --git a/files/es/web/api/element/outerhtml/index.html b/files/es/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..7e9647f0db --- /dev/null +++ b/files/es/web/api/element/outerhtml/index.html @@ -0,0 +1,143 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +translation_of: Web/API/Element/outerHTML +--- +

{{APIRef("DOM")}}

+ +

Resumen

+ +

El atributo outerHTML del interfaz DOM {{ domxref("element") }} obtiene el fragmento HTML serializado que describe el elemento incluyendo sus descendientes. Puede ser asignado para reemplazar el elemento por los nodos resultantes de examinar de la cadena proporcionada.

+ +

Sintaxis

+ +
var content = element.outerHTML;
+
+ +

Al retorno, content contendrá el fragmento de HTML serializado que describe al elemento element y a sus descendientes.

+ +
element.outerHTML = content;
+
+ +

Reemplaza el elemento por los nodos generados del análisis de la cadena content con el padre de element como el nodo de contexto para el algoritmo de procesado del fragmento.

+ +

Ejemplos

+ +

Ontener el valor de la propiedas outerHTML de un elemento:

+ +
// HTML:
+// <div id="d"><p>Content</p><p>Further Elaborated</p></div>
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// La cadena '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
+// es volcada a la ventana de la consola.
+
+ +

Reemplazar un nodo mediante la asignación de la propiedad outerHTML:

+ +
// HTML:
+// <div id="container"><div id="d">This is a div.</div></div>
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // logs "DIV"
+
+d.outerHTML = "<p>This paragraph replaced the original div.</p>";
+console.log(container.firstChild.nodeName); // logs "P"
+
+// El div #d no será parte del árbol del documento,
+// el nuevo párrafo lo reemplazará.
+
+ +

Notas

+ +

Si el elemento no tiene elemento padre, esto es, si es el elemento raíz del documento, la asignación de su propiedad outerHTML lanzará una DOMException con el código de error NO_MODIFICATION_ALLOWED_ERR. Por ejemplo:

+ +
document.documentElement.outerHTML = "test";  // lanza una DOMException
+
+ +

Además, aunque el elemento es reemplazado en el documento, la variable cuya propiedad outerHTML fue asignada continuará conteniendo una referencia al elemento original:

+ +
var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // muestra: "P"
+p.outerHTML = "<div>This div replaced a paragraph.</div>";
+console.log(p.nodeName); // sigue mostrando: "P";
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }} 
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{ CompatGeckoDesktop("11") }}0.24.071.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestiaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("11") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/element/prefix/index.html b/files/es/web/api/element/prefix/index.html new file mode 100644 index 0000000000..4fc15aed1a --- /dev/null +++ b/files/es/web/api/element/prefix/index.html @@ -0,0 +1,115 @@ +--- +title: Element.prefix +slug: Web/API/Element/prefix +tags: + - API + - Compatibilidad de los Navegadores en Móviles + - Compatibilidad de los navegadores + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Element/prefix +--- +
{{APIRef("DOM")}}
+ +

La propiedad Element.prefix unicamente de lectura devuelve el namespace prefix de el elemento especificado, o null si no hay especificado prefix .

+ +
+

Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.

+
+ +

Síntasix

+ +
string = element.prefix
+
+ +

Ejemplos

+ +

Los siguientes registros "x" en la consola.

+ +
<x:div onclick="console.log(this.prefix)"/>
+
+ +

Notas

+ +

 Solo funcionará cuando se utiliza un analizador de namespace, ej. Cuando un documento es servido con un tipo XML MIME . No funcionará para documentos HTML.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}}{{Spec2("DOM4")}}Definición inicial
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico46.0[1]{{CompatGeckoDesktop("48.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("48.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API estaba previamente disponible en {{domxref("Node")}} API.

+ +

Ver también

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

El método querySelector() de la intrefaz  {{domxref("Element")}} devuelve el primer descendiente del elemento sobre el cual es invocado que coincida con el o los selectores especificados.

+ +

Sintáxis

+ +
elemento = elementoBase.querySelector(selectores);
+
+ +

Parametros

+ +
+
selectores
+
Es el grupo de selectores que servirán para filtrar los elementos descendientes del  {{domxref("Element")}} elementoBase; debe tener una sintáxis CSS válida o se producirá una excepción SyntaxError. Devuelve el primer elemento que encuentre que coincida con el grupo de selectores.
+
+ +

Valor devuelto

+ +

Devolverá el primer descendiente del elemento elementoBase que coincida con el grupo de selectores especificado. Para la comparación se recorrerá la jerarquía completa de elementos, incluyendo a aquellos que no son descendientes del elementoBase; en otras palabras, los selectores se aplican primero al documento completo, no sólo al elementoBase, creando una lista inicial de elementos potencialmente seleccionables. Después se examina dicha lista para comprobar qué elementos son descendientes del elementoBase. El método querySelector() devolverá el primero de dichos elementos descendientes.

+ +

Si no hubiera coincidencias, devolverá el valor null.

+ +

Excepciones

+ +
+
SyntaxError
+
Los selectores especificados no son válidos.
+
+ +

Ejemplos

+ +

Vamos a ver unos cuantos ejemplos.

+ +

Encontrar un elemento a traves del valor de sus atributos

+ +

En este primer ejemplo, obtendremos el primer elemento {{HTMLElement("style")}} del body del documento HTML que no tenga atributo "type" o cuyo atributo "type" sea igual a "text/css":

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

Toda la jerarquía cuenta

+ +

El ejemplo que mostramos a continuación, demuestra que la jerarquía de todo el documento se tiene en cuenta cuando se aplican los selectores, de modo que se tienen en cuenta todos los niveles que se encuentran fuera de la jerarquía del elementoBase para localizar coincidencias.

+ +

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

Resultado

+ +

El resultado es el siguiente:

+ +

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

+ +

Podemos ver que el selector "div span" coincide con el elemento {{HTMLElement("span")}}, aunque baseElement excluye el elemento {{domxref("div")}} al no ser parte de su selector.

+ +

Más ejemplos

+ +

Puedes ver más ejemplos sobre el formato apropiado para los selectores aquí {{domxref("Document.querySelector()")}}.

+ +

Especificaciones

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

Compatibilidad en los Navegadores

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(1) }}
+  		 +

{{ CompatGeckoDesktop(1.9.1) }}

+ 		+

9 [1]

+ 		+

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] querySelector() funciona en IE8, pero solo para selectores CSS 2.1.

+ +

También puedes consultar:

+ + diff --git a/files/es/web/api/element/removeattribute/index.html b/files/es/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..bc4573b0af --- /dev/null +++ b/files/es/web/api/element/removeattribute/index.html @@ -0,0 +1,41 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - DOM + - Elemento + - Referencia +translation_of: Web/API/Element/removeAttribute +--- +

{{ APIRef("DOM") }}

+ +

removeAttribute elimina un atributo del elemento especificado.

+ +

Sintaxis

+ +
element.removeAttribute(attrName);
+
+ + + +

Ejemplo

+ +
// <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// ahora: <div id="div1" width="200px">
+
+ +

Notas

+ +

Debe usarse preferiblemente removeAttribute en lugar de establecer el valor del atributo a null usando setAttribute.

+ +

Intentar eliminar un atributo que no existe en el elemento no disparará una excepción.

+ +

{{ DOMAttributeMethods() }}

+ +

Especificación

+ +

DOM Level 2 Core: removeAttribute (introducido en DOM Level 1 Core)

diff --git a/files/es/web/api/element/requestfullscreen/index.html b/files/es/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..823330dbe8 --- /dev/null +++ b/files/es/web/api/element/requestfullscreen/index.html @@ -0,0 +1,104 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +tags: + - Pantalla completa +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("DOM")}}{{seeCompatTable}}
+ +

Asynchronously requests that the element be made full-screen.

+ +

Syntax

+ +
element.mozRequestFullScreen();
+
+ +

Notas

+ +

No esta garantizado que el elemento se cambie a modo pantalla completa. Si la autorización para entrar a modo pantalla completa es permitida, el documento obtendrá un evento "mozfullscreenchange" para hacerle saber que esta en modo pantalla completa en ese momento. Si la autorización es denegada, el documento obtiene un evento "mozfullscreenerror".

+ +

Ve a Using full-screen mode para mas detalles y ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefoxEdge
+ Internet Explorer		OperaSafari
Basic support{{CompatVersionUnknown}}{{property_prefix("webkit")}} (also as webkitRequestFullScreen){{CompatGeckoDesktop("9.0")}} (as mozRequestFullScreen)11 {{property_prefix("ms")}}¹
+ 20¹²		{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Mira también

+ + diff --git a/files/es/web/api/element/runtimestyle/index.html b/files/es/web/api/element/runtimestyle/index.html new file mode 100644 index 0000000000..289c3fe13b --- /dev/null +++ b/files/es/web/api/element/runtimestyle/index.html @@ -0,0 +1,82 @@ +--- +title: Element.runtimeStyle +slug: Web/API/Element/runtimeStyle +tags: + - API + - Necesidad de compatibilidad de los navegadores + - Necesidad de compatibilidad de los navegadores móviles + - Necesidad de ejemplo + - Propiedad +translation_of: Web/API/Element/runtimeStyle +--- +
{{APIRef("DOM")}}
+ +

{{ Non-standard_header() }}

+ +

Sumario

+ +

Element.runtimeStyle es una propiedad exclusiva similar a {{domxref ("HTMLElement.style")}}, excepto sus estilos, que tienen mayor precedencia y modificaciön.It no modifica el contenido del atributo  style . Está disponible en las versiones anteriores de Microsoft Internet Explorer.

+ +

especificación

+ +

No forma parte de ninguna especificación.

+ +

Microsoft tiene una descripción en MSDN.

+ +

Compatibilidad de los Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}6{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/element/scrollheight/index.html b/files/es/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..d281054beb --- /dev/null +++ b/files/es/web/api/element/scrollheight/index.html @@ -0,0 +1,212 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +tags: + - API + - Necesidad de Ejemplo de eliminación DHTML + - Propiedad + - Referencia + - Vista CSSOM +translation_of: Web/API/Element/scrollHeight +--- +

{{APIRef("DOM")}}

+ +

El elemento  Element.scrollHeight atributo unicamente de lectura es una medida de la altura del contenido de un elemento, incluyendo el contenido que no es visible en la pantalla debido al desbordamiento. El valor scrollHeight es igual a la altura mínima (donde la altura incluye el relleno , pero no incluye bordes y márgenes) El elemento lo necesita con el fin de adaptarse a todos los contenidos en el punto de vista sin necesidad de utilizar una barra de desplazamiento vertical. Incluye el  elemento relleno pero no su margen.

+ +
+

Esta propiedad redondea el valor a un número entero. Si se necesita un valor fraccionario, utilizar {{domxref("Element.getBoundingClientRect()")}}.

+
+ +

Sintaxis

+ +
var intElemScrollHeight = element.scrollHeight;
+ +

intElemScrollHeight es una variable que almacena un número entero correspondiente al valor  scrollHeight en pixels del elemento. scrollHeight es una propiedad unicamente de lectura.

+ +

Ejemplo

+ +
+
+

padding-top

+ +

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.

+ +

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.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollHeight.png

+ +

Problemas y Soluciones

+ +

Determina si un elemento ha sido totalmente desplazado

+ +

La siguiente equivalencia devuelve true si un elemento está al final de su desplazamiento, false si no es así.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

scrollHeight Demo

+ +

Asociada al evento onscroll , esta equivalencia puede ser útil para determinar si un usuario ha leido un texto o no (ver también las propiedades de  element.scrollTop y  element.clientHeight ). Por ejemplo:

+ +

HTML

+ +
<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" id="agree" name="accept" />
+    <label for="agree">I agree</label>
+    <input type="submit" id="nextstep" value="Next" />
+  </p>
+</form>
+ +

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

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

{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}{{Spec2("CSSOM View")}}Inicial definición
+ +

Compatibilidad de los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico4.03.0[1]8.0{{CompatVersionUnknown}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] En versiones anteriores a Firefox 21, cuando el contenido de un elemento no genera una barra de desplazamiento vertical,su propiedad scrollHeight es igual a su propiedad clientHeight . Esto puede significar que el contenido es demasiado breve para necesitar una barra de desplazamiento vertical, o que el elemento tiene un estilo CSS con un valor  overflow que desborda el contenido visible (no desplazable).

+ +

Ver También

+ + diff --git a/files/es/web/api/element/scrollintoview/index.html b/files/es/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..7c0b23a429 --- /dev/null +++ b/files/es/web/api/element/scrollintoview/index.html @@ -0,0 +1,151 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +tags: + - Experimental + - Expérimental(2) + - metodo +translation_of: Web/API/Element/scrollIntoView +--- +
{{ APIRef("DOM")}}
+ +

El método  scrollIntoView() de la interfaz  {{domxref("Element")}} desplaza el contenedor principal del elemento de forma que el elemento sobre el cual se invoca scrollIntoView() sea visible al usuario.

+ +

Sintaxis

+ +
element.scrollIntoView(); // Equivalente a element.scrollIntoView(true)
+element.scrollIntoView(alignToTop); // Argumentos booleanos
+element.scrollIntoView(scrollIntoViewOptions); // Argumento objeto
+
+ +

Parámetros

+ +
+
alignToTop
+
Es un valor {{jsxref("Boolean")}}: +
    +
  • Si es true, la parte superior del elemento se alineará con la parte superior del área visible del elemento desplazable antecesor.
    • +
  • Si es false, la parte inferior del elemento se alineará con la parte inferior del área visible del elemento desplazable antecesor.
    • +
+
+
scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
+
Un booleano o un objeto con las siguientes opciones:
+
behavior {{optional_inline}}
+
Establece la transición de la animación.
+ Puede ser auto o smooth. Por defecto es auto.
+
block {{optional_inline}}
+
Establece el alineamiento vertical.
+ Puede ser start, center, end, o nearest. Por defecto es start.
+
inline {{optional_inline}}
+
Establece el alineamiento horizontal
+ Puede ser start, center, end, o nearest. Por defecto es nearest.
+
+ +

Ejemplo

+ +
var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({block: "end", behavior: "smooth"});
+
+ +

Notas

+ +

Puede que el desplazamiento no sea llevado completamente a la parte superior o inferior dependiente de la disposición de otros elementos. 

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Definición inicial
+ + + +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Implementación básica1.0{{ CompatGeckoDesktop(1.0) }}610.0 and possibly older versions4 and possibly older versions
+

Implementan
+ scrollIntoViewOptions

+ 		{{CompatNo}}{{ CompatGeckoDesktop(36) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Implementación básica?{{ CompatGeckoMobile(1.0) }}???
+

Implementan
+ scrollIntoViewOptions

+ 		{{CompatNo}}{{ CompatGeckoMobile(36) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/api/element/scrollleft/index.html b/files/es/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..df527ccdc5 --- /dev/null +++ b/files/es/web/api/element/scrollleft/index.html @@ -0,0 +1,153 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - API + - Necesita Tabla de Compatibilidad + - Necesita Trabajo de Markup + - Necesita tabla de Especificaciones + - Propiedad + - Referencia + - Vista CSSOM +translation_of: Web/API/Element/scrollLeft +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.scrollLeft obtiene o establece el número de píxeles que desplaza el contenido de un elemento hacia la izquierda.

+ +

Tenga en cuenta que si el elemento {{cssxref ( "dirección")}} del elemento es rtl (derecha-a-izquierda), entonces scrollLeft es 0 cuando la barra de desplazamiento está en su posición más a la derecha (al inicio del contenido desplazado) y cada vez más Negativo mientras se desplaza hacia el final del contenido.

+ +

Síntasix

+ +
// Obtener el número de píxeles desplazados
+var sLeft = element.scrollLeft;
+
+ +

SLeft es un número entero que representa el número de píxeles que el elemento ha desplazado hacia la izquierda.

+ +
// Establecer el número de píxeles desplazados
+element.scrollLeft = 10;
+
+ +

ScrollLeft se puede establecer en cualquier valor entero, sin embargo:

+ + + +

Ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    </script>
+</head>
+<body>
+    <div id="container">
+        <div id="content">Lorem ipsum dolor sit amet.</div>
+    </div>
+    <button id="slide" type="button">Slide</button>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}} 
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/api/element/scrolltop/index.html b/files/es/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..5b4fb19139 --- /dev/null +++ b/files/es/web/api/element/scrolltop/index.html @@ -0,0 +1,69 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.scrollTop obtiene o establece el número de pixels que el contenido de un elemento ha sido desplazado (enrollado) hacia arriba. El scrollTop de un elemento es una medida de la distancia desde el límite superior de un elemento al límite superior de su contenido visible. Cuando un elemento no genera una barra de scroll vertical, el valor de su scrollTop es establecido por defecto a 0.

+ +

Sintaxis

+ +
// Obtiene el número de pixels desplazados
+var  intElemScrollTop = someElement.scrollTop;
+
+ +

Después de ejecutar este código, intElemScrollTop es un entero que corresponde al número de pixesl que el contenido del {{domxref("element")}} ha sido desplazado hacia arriba.

+ +
// Establece el número de pixels desplazados
+element.scrollTop = intValue;
+
+ +

scrollTop puede ser establecido a cualquier valor entero, con ciertas salvedades:

+ + + +

Ejemplo

+ +
+
+

padding-top

+ +

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.

+ +

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.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollTop.png

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}} 
+ +

Referencias

+ + diff --git a/files/es/web/api/element/scrolltopmax/index.html b/files/es/web/api/element/scrolltopmax/index.html new file mode 100644 index 0000000000..9e5fc20255 --- /dev/null +++ b/files/es/web/api/element/scrolltopmax/index.html @@ -0,0 +1,80 @@ +--- +title: Element.scrollTopMax +slug: Web/API/Element/scrollTopMax +tags: + - API + - CSSOM View + - Elemento + - Propiedad + - Read-only + - Referencia + - Solo lectura +translation_of: Web/API/Element/scrollTopMax +--- +

{{APIRef("DOM")}}{{Non-standard_header}}

+ +

La propiedad de solo lectura(read-only)  Element.scrollTopMax retorna un {{jsxref("Number")}} que representa el máximo offset posible para el elemento.

+ +

Sintaxis

+ +
var pxl = elt.scrollTopMax;
+ +

Especificaciones

+ +

Esta propiedad no es parte de ninguna especificación.

+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatGeckoDesktop(16) }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatGeckoMobile(16) }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Ver además

+ + diff --git a/files/es/web/api/element/scrollwidth/index.html b/files/es/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..aaeb7486a8 --- /dev/null +++ b/files/es/web/api/element/scrollwidth/index.html @@ -0,0 +1,119 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +translation_of: Web/API/Element/scrollWidth +--- +
{{ APIRef("DOM") }}
+ +

La propiedad de sólo lectura Element.scrollWidth retorna bien la anchura en pixels del contenido de un elemento o bien la anchura del elemento en si, la que sea mayor de ambas. Si el elemento es más ancho que su área contenedora (por ejemplo, si existen barras de desplazamiento para desplazarse a través del contenido),  scrollWidth es mayor que  clientWidth.

+ +
+

El valor de esta propiedad será red redondedo a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var xScrollWidth = element.scrollWidth;
+ +

xScrollWidth es el ancho del contenido de element en pixels.

+ +

Ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <title>Ejemplo</title>
+    <style>
+        div {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        #aDiv {
+            width: 100px;
+        }
+
+        button {
+            margin-bottom: 2em;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="aDiv">
+        FooBar-FooBar-FooBar-FooBar
+    </div>
+    <button id="aButton">
+        Check for overflow
+    </button>
+
+    <div id="anotherDiv">
+        FooBar-FooBar-FooBar-FooBar
+    </div>
+    <button id="anotherButton">
+        Check for overflow
+    </button>
+</body>
+<script>
+    var buttonOne = document.getElementById('aButton'),
+    buttonTwo = document.getElementById('anotherButton'),
+    divOne = document.getElementById('aDiv'),
+    divTwo = document.getElementById('anotherDiv');
+
+    //comprueba si un desbordamiento está ocurriendo
+    function isOverflowing(element) {
+        return (element.scrollWidth > element.offsetWidth);
+    }
+
+    function alertOverflow(element) {
+        if (isOverflowing(element)) {
+            alert('El contenido desborda el contenedor.');
+        } else {
+            alert('Sin desobordamiento!');
+        }
+    }
+
+    buttonOne.addEventListener('click', function() {
+        alertOverflow(divOne);
+    });
+
+    buttonTwo.addEventListener('click', function() {
+        alertOverflow(divTwo);
+    });
+</script>
+</html>
+
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}{{Spec2("CSSOM View")}}Definición inicial
+ +

Browser compatibility

+ + + +

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

+ +

Ver también

+ + + diff --git a/files/es/web/api/element/setattribute/index.html b/files/es/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..725efd11fc --- /dev/null +++ b/files/es/web/api/element/setattribute/index.html @@ -0,0 +1,88 @@ +--- +title: Element.setAttribute +slug: Web/API/Element/setAttribute +tags: + - API + - DOM + - Elemento + - NeedsBrowserCompatibility + - NeedsSpecTable + - Referencia + - metodo + - setAttribute +translation_of: Web/API/Element/setAttribute +--- +

{{APIRef("DOM")}}

+ +

Establece el valor de un atributo en el elemento indicado. Si el atributo ya existe, el valor es actualizado, en caso contrario, el nuevo atributo es añadido con el nombre y valor indicado.

+ +

Para obtener el valor actual de un atributo, se utiliza {{domxref("Element.getAttribute", "getAttribute()")}}; para eliminar un atributo, se llama a {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Sintaxis

+ +
Element.setAttribute(name, value);
+
+ +

Parámetros

+ +
+
name
+
Un {{domxref("DOMString")}} indicando el nombre del atributo cuyo valor se va a cambiar. El nombre del atributo se convierte automáticamente en minúsculas cuando setAttribute() se llama sobre un elemento HTML en un documento HTML.
+
value
+
Un {{domxref("DOMString")}} que contenga el valor que asignar al atributo. Cualquier valor indicado que no sea una cadena de texto se convierte automáticamente en una cadena de texto.
+
+ +

Los atributos booleanos se consideran true si al menos están presentes en el elemento, independientemente de su value actual; como regla, se debería especificar una cadena de texto vacía ("") en value (algunas personas utilizan el nombre del atributo; esto funciona pero no es un standard). Vea un {{anch("Ejemplo", "ejemplo")}} posterior para una demostración práctica.

+ +

Dado que value se convierte en una cadena de texto, indicando null no necesariamente hace lo que se espera. En lugar de eliminar el atributo o establecer su valor para ser {{jsxref("null")}}, establece el valor del atributo a la cadena de texto "null". Si se desea eliminar un atributo, se debe llamar a {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Valor devuelto

+ +

{{jsxref("undefined")}}.

+ +

Excepciones

+ +
+
InvalidCharacterError
+
El atributo especificado name contiene uno o más caracteres que no son válidos en el nombre del atributo.
+
+ +

Ejemplo

+ +

En el siguiente ejemplo, setAttribute() se utiliza para establecer atributos en un {{HTMLElement("button")}}.

+ +

HTML

+ +
<button>Hola Mundo</button>
+ +

JavaScript

+ +
var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+
+ +

Esto demuestra dos cosas:

+ + + +

{{ EmbedLiveSample('Example', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Especificación

+ + + + + +

Notas Gecko

+ +

Utilizando setAttribute() para modificar ciertos atributos, el más notable es value en XUL, funciona de forma inconsistente, ya que el atributo especifica el valor determinado. Para acceder o modificar los valores actuales, se deben utilizar las propiedades. Por ejemplo, utilizar Element.value en lugar de Element.setAttribute().

diff --git a/files/es/web/api/element/setattributens/index.html b/files/es/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..59a4d9809e --- /dev/null +++ b/files/es/web/api/element/setattributens/index.html @@ -0,0 +1,33 @@ +--- +title: Element.setAttributeNS() +slug: Web/API/Element/setAttributeNS +translation_of: Web/API/Element/setAttributeNS +--- +

{{ APIRef("DOM") }}

+ +

setAttributeNS añade un nuevo atributo o cambia el valor de un atributo con el namespace dado y el nombre.

+ +

Sintaxis

+ +
elemento.setAttributeNS(namespace,nombre,valor)
+
+ + + +

Ejemplo

+ +
var d = document.getElementById("d1");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+
+ +

Notas

+ +

{{ DOMAttributeMethods() }}

+ +

Especificación

+ +

DOM Level 2 Core: setAttributeNS

diff --git a/files/es/web/api/element/setcapture/index.html b/files/es/web/api/element/setcapture/index.html new file mode 100644 index 0000000000..b0c3ef52ab --- /dev/null +++ b/files/es/web/api/element/setcapture/index.html @@ -0,0 +1,86 @@ +--- +title: Element.setCapture() +slug: Web/API/Element/setCapture +tags: + - API + - DOM + - Element + - Método(2) + - Referencia +translation_of: Web/API/Element/setCapture +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}

+ +

Llame a este método durante el manejo de un evento mousedown para redirigir todos los eventos de mouse a este elemento hasta que se suelte el botón del mouse o se llame {{domxref ( "document.releaseCapture ()")}}.

+ +

Sintasix

+ +
element.setCapture(retargetToElement);
+
+ +
+
retargetToElement
+
     Si es verdadero, todos los eventos se dirigen directamente a este elemento; Si es falso, los eventos también pueden descargar a los descendientes de este elemento.
+
+ +

Ejemplo

+ +

En este ejemplo, las coordenadas actuales del mouse se dibujan mientras situas el mouse alrededor después de hacer clic y mantener pulsado un elemento.

+ +
<html>
+<head>
+  <title>Mouse Capture Example</title>
+  <style type="text/css">
+    #myButton {
+      border: solid black 1px;
+      color: black;
+      padding: 2px;
+      -moz-box-shadow:black 2px 2px;
+    }
+  </style>
+
+  <script type="text/javascript">
+    function init() {
+      var btn = document.getElementById("myButton");
+      btn.addEventListener("mousedown", mouseDown, false);
+      btn.addEventListener("mouseup", mouseUp, false);
+    }
+
+    function mouseDown(e) {
+      e.target.setCapture();
+      e.target.addEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseUp(e) {
+      e.target.removeEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseMoved(e) {
+      var output = document.getElementById("output");
+      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
+    }
+  </script>
+</head>
+<body onload="init()">
+  <p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p>
+  <p><a id="myButton" href="#">Test Me</a></p>
+  <div id="output">No events yet</div>
+</body>
+</html>
+
+ +

Ver ejemplo en vivo

+ +

Notas

+ +

El elemento no puede desplazarse completamente hacia arriba o hacia abajo dependiendo del diseño de otros elementos.

+ +

Especificación

+ +

Ninguna.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/shadowroot/index.html b/files/es/web/api/element/shadowroot/index.html new file mode 100644 index 0000000000..17af57bb3c --- /dev/null +++ b/files/es/web/api/element/shadowroot/index.html @@ -0,0 +1,83 @@ +--- +title: Element.shadowRoot +slug: Web/API/Element/shadowRoot +translation_of: Web/API/Element/shadowRoot +--- +
{{APIRef("Shadow DOM")}}
+ + + +

La propiedad de solo lectura 'Element.shadowRoot' representa el shadow root alojado por el elemento. Use {{DOMxRef("Element.attachShadow()")}} para agregar un shadow root a un elemento existente.

+ +

Syntax

+ +
var shadowroot = element.shadowRoot;
+
+ +

Value

+ +

A {{DOMxRef("ShadowRoot")}} object instance, or null if the associated shadow root was attached with its {{DOMxRef("ShadowRoot.mode", "mode")}} set to closed. (See {{DOMxRef("Element.attachShadow()")}} for further details).

+ +

Examples

+ +

The following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.

+ +

Inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.

+ +
connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+
+attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}
+ +

In the updateStyle() function itself, we get a reference to the shadow DOM using {{domxref("Element.shadowRoot")}}. From here we use standard DOM traversal techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then update the CSS found inside it:

+ +
function updateStyle(elem) {
+  const shadow = elem.shadowRoot;
+  const childNodes = Array.from(shadow.childNodes);
+
+  childNodes.forEach(childNode => {
+    if (childNode.nodeName === 'STYLE') {
+      childNode.textContent = `
+        div {
+          width: ${elem.getAttribute('l')}px;
+          height: ${elem.getAttribute('l')}px;
+          background-color: ${elem.getAttribute('c')};
+        }
+      `;
+    }
+  });
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-shadowroot', 'shadowRoot')}}{{Spec2('DOM WHATWG')}}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/element/tagname/index.html b/files/es/web/api/element/tagname/index.html new file mode 100644 index 0000000000..5f522efc3e --- /dev/null +++ b/files/es/web/api/element/tagname/index.html @@ -0,0 +1,44 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/tagName +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el nombre del elemento.

+ +

Sintaxis

+ +
elementName = element.tagName
+
+ + + +

Notas

+ +

En XML (y los lenguajes basados en XML tales como XHTML) el código tagName es sensible a las mayúsculas. En HTML, tagName devuelve el nombre del elemento en forma canonica, es decir con todas sus letras en mayúscula. El valor del código of tagName es el mismo que el de la instrucción nodeName.

+ +

Ejemplo

+ +

Si tenemos la siguiente línea de código:

+ +
<span id="born">Cuando yo nací...</span>
+
+ +

y el siguiente script

+ +
var span = document.getElementById("born");
+alert(span.tagName);
+
+ +

en XHTML (o alguna otra forma de XML) el resultado de la alerta será el contenido de "span". En HTML, el contenido será el de "SPAN".

+ +

Especificación

+ +

DOM Level 2 Core: tagName

diff --git a/files/es/web/api/element/wheel_event/index.html b/files/es/web/api/element/wheel_event/index.html new file mode 100644 index 0000000000..6b4e69d173 --- /dev/null +++ b/files/es/web/api/element/wheel_event/index.html @@ -0,0 +1,320 @@ +--- +title: wheel +slug: Web/API/Element/wheel_event +tags: + - eventos +translation_of: Web/API/Element/wheel_event +--- +

El evento "wheel" se dispara cuando la ruleta de un dispositivo (usualmente un ratón) gira. Este evento reemplaza al ahora obsoleto evento {{event("mousewheel")}}.

+ +

Información general

+ +
+
Interfaz
+
{{domxref("WheelEvent")}}
+
Sincronía
+
asíncrono
+
Bubble
+
Si
+
Cancelable
+
Si
+
Target
+
defaultView, Document, Element
+
Acción predet.
+
Scroll, atras/adelante (historial), o zoom.
+
+ +

Propiedades

+ +

Este evento implementa las propiedades de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +

Propiedades de WheelEvent

+ +

{{page("/en-US/docs/Web/API/WheelEvent", "Properties")}}

+ +

Propiedades de MouseEvent

+ +

{{page("/en-US/docs/Web/API/MouseEvent", "Properties")}}

+ +

Propiedades UIEvent

+ +

{{page("/en-US/docs/Web/API/UIEvent", "Properties")}}

+ +

Propiedades Event

+ +

{{page("/en-US/docs/Web/API/Event", "Properties")}}

+ +

Métodos

+ +

Este evento implementa los métodos de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +

Métodos de WheelEvent

+ +

{{page("/en-US/docs/Web/API/WheelEvent", "Methods")}}

+ +

Métodos de MouseEvent

+ +

{{page("/en-US/docs/Web/API/MouseEvent", "Methods")}}

+ +

Métodos de UIEvent

+ +

{{page("/en-US/docs/Web/API/UIEvent", "Methods")}}

+ +

Métodos de Event

+ +

{{page("/en-US/docs/Web/API/Event", "Methods")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM3 Events','DOM3-Events.html#event-type-wheel','wheel')}}{{Spec2('DOM3 Events')}}Definición inicial.
+ +

Compatibilidad

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico31{{CompatVersionUnknown}}{{CompatGeckoDesktop("17.0")}}{{CompatIE("9.0")}}[1]187.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("17.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer solo toma el evento "wheel" mediante addEventListener, no se permite el atributo onwheel en objetos del DOM. Bug report.
+  

+ +

Escuchar al evento en distintos navegadores

+ +

En el siguiente script se crea el método multi-navegador addWheelListener que permite escuchar el evento wheel en diferentes navegadores a la vez que se previene el funcionamiento por defecto.

+ +
// crea el metodo "addWheelListener" global
+// ejemplo: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
+(function(window,document) {
+
+    var prefix = "", _addEventListener, support;
+
+    // detecta el tipo de evento permitido por el navegador
+    if ( window.addEventListener ) {
+        _addEventListener = "addEventListener";
+    } else {
+        _addEventListener = "attachEvent";
+        prefix = "on";
+    }
+
+    // detecta el tipo de evento wheel manejado por el navegador
+    support = "onwheel" in document.createElement("div") ? "wheel" : // Los navegadores modernos permiten "wheel"
+              document.onmousewheel !== undefined ? "mousewheel" : // Webkit e IE soportan al menos "mousewheel"
+              "DOMMouseScroll"; // Asumiremos que el resto de navegadores son Firefox antiguos
+
+    window.addWheelListener = function( elem, callback, useCapture ) {
+        _addWheelListener( elem, support, callback, useCapture );
+
+        // controlaremos MozMousePixelScroll en Firefox antiguos
+        if( support == "DOMMouseScroll" ) {
+            _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
+        }
+    };
+
+    function _addWheelListener( elem, eventName, callback, useCapture ) {
+        elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
+            !originalEvent && ( originalEvent = window.event );
+
+            // Creamos un objeto de evento
+            var event = {
+                // tomamos como referencia el objeto original
+                originalEvent: originalEvent,
+                target: originalEvent.target || originalEvent.srcElement,
+                type: "wheel",
+                deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
+                deltaX: 0,
+                deltaZ: 0,
+                preventDefault: function() {
+                    originalEvent.preventDefault ?
+                        originalEvent.preventDefault() :
+                        originalEvent.returnValue = false;
+                }
+            };
+
+            // calculamos deltaY (y deltaX) dependiendo del evento
+            if ( support == "mousewheel" ) {
+                event.deltaY = - 1/40 * originalEvent.wheelDelta;
+                // Webkit tambien soporta wheelDeltaX
+                originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
+            } else {
+                event.deltaY = originalEvent.detail;
+            }
+
+            // Disparamos el callback
+            return callback( event );
+
+        }, useCapture || false );
+    }
+
+})(window,document);
+ +

Notas para Gecko

+ +

Orden de los eventos en eventos antiguos

+ +

Si el evento wheel no ha sido implementado, los eventos DOMMouseScroll y MozMousePixelScroll se usarán para dar retrocompativilidad. Sus atributos se calculan dependiendo del delta del evento wheel y el padre más cercano. Si el evento wheel o alguno de los anteriores invoca {{ domxref("event.preventDefault()") }}, no ocurrirá nada.

+ +

El orden de ejecución del evento es:

+ +
    +
  1. Eventos wheel en grupo de eventos por defecto (aplicaciones web y add-ons pueden manejar los eventos de este grupo)
    2. +
  2. Un evento DOMMouseScroll vertical en caso de que el deltaY, en consecutivas llamadas del evento se vuelva mayor que 1.0 o menor que -1.0
    3. +
  3. Un evento MozMousePixelScroll vertical en caso de que el deltaY del último evento wheel no sea igual a cero
    4. +
  4. Un evento DOMMouseScroll horizontal en caso de que el deltaX acumule un valor mayor que 1.0 o menor que -1.0
    5. +
  5. Un evento MozMousePixelScroll horizontal en caso de que el deltaX del último evento no sea igual que cero
    6. +
  6. Un evento wheel en el grupo de sistema (Solamente add-ons pueden gestionar este grupo de eventos)
    7. +
+ +


+ ¿Qué ocurre si preventDefault() es llamado?

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
wheel (grupo por defecto de evetos)Se llama preventDefault()    
DOMMouseScroll (Vertical)No se llamaSe llama preventDefault()   
MozMousePixelScroll (Vertical)No se llamadefaultPrevented devuelve trueSe llama preventDefault()  
DOMMouseScroll (Horizontal)No se llamaNo se ve afectadoNo se ve afectadoSe llama preventDefault() 
MozMousePixelScroll (Horizontal)No se llamaNo se ve afectadoNo se ve afectadodefaultPrevented devuelve trueSe llama preventDefault()
wheel (grupo de eventos de sistema)defaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve true
+ +

En caso de que un Add-on necesite conocer si uno de los eventos legacy es usado por contenidos del DOM puede usar el evento wheel de #6. Lee la documentación de nsIEventListenerService para mayor detalle acerca del grupo de eventos de sistema.

+ +

Los valores delta y las acciones por defecto de eventos predefinidos pueden ser personalizados en las preferencias de usuario (details). Por lo tanto, no se debe presuponer que alguna acción en concreto va a ocurrir tras recibir este evento.

+ +

Valores delta

+ +

Los valores delta no indican la cantidad de scroll actual de manera predeterminada. Si el usuario presiona alguna tecla mdificadora mientras mueve la rueda de scroll, dicha acción puede causar otra totalmente diferente a la esperada, como ir adelante o atras por el historial o hacer zoom. Además, incluso cuando la acción sea la esperada, el elemento que la recibe puede ser distinto al deseado.
+ El objetivo del evento wheel solo está definido por la posición del cursor en el momento que se dispara este.

+ +

El valor de deltaMode

+ +

En Windows, los siguientes 3 eventos nativos del DOM causan eventos wheel.

+ +
+
WM_MOUSEWHEEL (Evento wheel vertical del ratón)
+
El deltaMode puede ser DOM_DELTA_LINE o DOM_DELTA_PAGE. Depende de las preferencias de usuario en Windows (Para configuraciones por defecto, debería ser DOM_DELTA_LINE).
+
WM_MOUSEHWHEEL (Evento wheel horizontal del ratón)
+
EldeltaMode puede ser DOM_DELTA_LINE o DOM_DELTA_PAGE. Sin embargo, ni la configuración de velocidad de rueda de ratón de Windows ni ningún UI similar de drivers permite modificar el scroll de páginas. De modo que, normalmente este valor es DOM_DELTA_LINE.
+
WM_GESTURE (Solo utilizado en navegación gestual)
+
El deltaMode es siempre DOM_DELTA_PIXEL. Pero la mayoría de dispositivos táctiles de portatiles emulan la rueda de ratón en lugar de usar este evento. Este evento es usado típicamente en Tablet PC.
+
+ +

En Mac, el valor de deltaMode depende del dispositivo. Si el dispositivo permite alta resolución, el scroll se hará en pixels, de manera que el valor del deltaMode será DOM_DELTA_PIXEL. De todos modos, el usuario puede cambiarlo a DOM_DELTA_LINE con la preferencia "mousewheel.enable_pixel_scrolling".  Si el dispositivo no soporta alta resolución, es siembre DOM_DELTA_LINE.

+ +

En otras plataformas, el valor de deltaMode es siempre DOM_DELTA_LINE.

+ +

Eventos no confiables

+ +

Los eventos wheel no nativos nunca causarán acción por defecto.

+ +

Ver también

+ + diff --git a/files/es/web/api/elementoshtmlparavideo/index.html b/files/es/web/api/elementoshtmlparavideo/index.html new file mode 100644 index 0000000000..4b36d9cba2 --- /dev/null +++ b/files/es/web/api/elementoshtmlparavideo/index.html @@ -0,0 +1,202 @@ +--- +title: Elementos HTML para Video +slug: Web/API/ElementosHTMLparaVideo +translation_of: Web/API/HTMLVideoElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

El interfaz de HTMLVideoElement provee propiedades especiales y metodos para manipular objectos de videos. Tambien, este interfaz hereda propiedades y métodos de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

+ +

La lista de supported media formats (formatos de medios compatibles) varía de un navegador a otro. Debe proveer su video en un formato sencillo que sea compatible con todos los navegadores o proveer varias fuentes de videos in varios formatos, para que así todo navegador que necesite este cubierto.

+ +

{{InheritanceDiagram(600, 140)}}

+ +

Propiedades

+ +

Hereda las propiedades de los interfaces anteriores, {{domxref("HTMLMediaElement")}}, y {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.height")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("height", "video")}}, el cual especifica la altura del area mostrada, en pixeles CSS.
+
{{domxref("HTMLVideoElement.poster")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("poster", "video")}}, el cual especifica que imagen sera mostrada en la ausencia de data de video.
+
{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}
+
Devuelve un unsigned long que contiene la altura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
+
{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}
+
Devuelve un unsigned long que contiene la anchura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
+
{{domxref("HTMLVideoElement.width")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("width", "video")}}, el cual especifica la anchura del area mostrada, en pixeles CSS.
+
+ +

Propiedades especificas para Gecko

+ +
+
{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos de video que han sido analizados del recurso de multimedia.
+
{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos de video que han sido decifrados como imágines.
+
{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos decodificados que han sido  presentados a la canalización de render para pintar.
+
{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos presentados que han sido pintados en la pantalla.
+
{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un double con el tiempo, en segundos, que el último marco de video fue pintado por retrazo.
+
{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un {{domxref("Boolean")}} indicando si existe algún audio asociado con el video.
+
+ +

Métodos

+ +

Hereda los métodos anteriores de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}
+
Devuelve un {{domxref("VideoPlaybackQuality")}} para objetos que contienen las medidas de reproducciones actuales.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}{{Spec2("Media Source Extensions")}}Anadio el metodo getVideoPlaybackQuality() .
{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML WHATWG')}}Sin cambios del {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML5 W3C')}}Definicion incial.
+ +

Compatibilidad con Navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Apoyo basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9.010.50{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Apoyo básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko implementa esto detras de la preferencia media.mediasource.enabled, predispuesto a false.

+ +

Lea Tambien

+ + diff --git a/files/es/web/api/event/bubbles/index.html b/files/es/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..a940b1e4a7 --- /dev/null +++ b/files/es/web/api/event/bubbles/index.html @@ -0,0 +1,47 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - Anidado + - DOM + - Propagación + - Referencia + - Referência(2) + - eventos +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Indica si el evento determinado se propaga (burbujea) a través del DOM o no. Esta propagación se refiere a si el evento viaja desde el elemento donde se originó hasta los elementos padres en orden de anidamiento.

+ +

Sintaxis

+ +
event.bubbles
+
+ +

Retorna un valor Booleano que es true si el evento se propaga en el DOM.

+ +

Ejemplo

+ +
var bool = event.bubbles;
+ +

bool tiene el valor true o false, dependiendo de si el evento puede ser burbuja o no.

+ +

Notas

+ +

Sólo ciertos eventos pueden ser burbuja. Los eventos que pueden ser burbuja tienen esta propiedad con el valor true. Podemos usar esta propiedad para comprobar si un elemento puede ser burbuja o no.

+ +

Ejemplo

+ +
 function goInput(e) {
+  // comprueba si es burbuja y
+  if (!e.bubbles) {
+     // entrega el evento si no lo es
+     passItOn(e);
+  }
+  // está siendo propagado
+  doOutput(e)
+}
+
diff --git a/files/es/web/api/event/cancelable/index.html b/files/es/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..efb6eb04f6 --- /dev/null +++ b/files/es/web/api/event/cancelable/index.html @@ -0,0 +1,38 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Event/cancelable +--- +
{{ ApiRef("DOM") }}
+ +

Resumen

+ +

Indica si el elemento puede ser cancelado o no.

+ +

Sintaxis

+ +
bool =
+event.cancelable;
+
+ +

bool tiene valor true o false, dependiendo de si el evento puede ser desactivado.

+ +

Notas

+ +

Si un evento puede ser cancelado o no, es algo que se determina en el momento en que el evento es inicializado.

+ +

Para cancelar un evento, llama al método preventDefault en el evento. Esto evita que la tarea de implementación ejecute la acción por defecto asociada con el evento.

+ +

Especificación

+ +

DOM Level 2 Events: cancelable

+ +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable" } ) }}

diff --git a/files/es/web/api/event/createevent/index.html b/files/es/web/api/event/createevent/index.html new file mode 100644 index 0000000000..0d04851789 --- /dev/null +++ b/files/es/web/api/event/createevent/index.html @@ -0,0 +1,34 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +tags: + - API + - DOM + - Evento + - metodo +translation_of: Web/API/Document/createEvent +--- +

{{APIRef("DOM")}}

+ +

Crea un nuevo evento, que debe ser inicializado llamando a su método init().

+ +

Sintaxis

+ +
document.createEvent(tipo);
+ +
+
tipo
+
Una string indicando el tipo de evento a crear.
+
+ +

Este método devuelve un nuevo objeto {{ domxref("Event") }} del DOM del tipo indicado, que debe ser inicializado antes de su uso.

+ +

Ejemplo

+ +
var nuevoEvento = document.createEvent("UIEvents");
+ +

Especificación

+ + diff --git a/files/es/web/api/event/currenttarget/index.html b/files/es/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..0c9d9a2a9e --- /dev/null +++ b/files/es/web/api/event/currenttarget/index.html @@ -0,0 +1,75 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - DOM + - Gecko + - Property +translation_of: Web/API/Event/currentTarget +--- +

{{APIRef("DOM")}}

+ +

Identifica el target (objetivo) actual del evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elmento al cual el controlador del evento fue asociado, a diferencia de event.target, que identifica el elemento el el que se produjo el evento.

+ +

Ejemplo

+ +

Es interesante utilizar event.currentTarget cuando se asocia un mismo controlador de eventos a varios elementos.

+ +
function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  console.log(e.currentTarget);
+  // Cuando esta función es usada como un controlador de evento: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i < ps.length; i++){
+  // console: imprime el elemento pulsado <p>
+  ps[i].addEventListener('click', hide, false);
+}
+// console: imprime <body>
+document.body.addEventListener('click', hide, false);
+
+// hace desaparecer párrafos al hacer click alrededor
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM4")}} 
{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}{{Spec2("DOM3 Events")}} 
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.Event.currentTarget")}}

+ +

Ver también

+ +

Comparativa de Event Targets

diff --git a/files/es/web/api/event/defaultprevented/index.html b/files/es/web/api/event/defaultprevented/index.html new file mode 100644 index 0000000000..ff1f9fba79 --- /dev/null +++ b/files/es/web/api/event/defaultprevented/index.html @@ -0,0 +1,81 @@ +--- +title: event.defaultPrevented +slug: Web/API/Event/defaultPrevented +translation_of: Web/API/Event/defaultPrevented +--- +

{{ ApiRef() }}

+ +

Resumen

+ +

Retorna un boleano indicando si {{ domxref("event.preventDefault()") }} fue llamado en el evento o no.

+ +
Nota: Deberías usar este en lugar del que no es estándar, el método obsoleto getPreventDefault() (ver {{ bug(691151) }}).
+ +

Sintaxis

+ +
bool = event.defaultPrevented
+ +

Ejemplo

+ +
 if (e.defaultPrevented) {
+   /* El evento por defecto fue prevenido */
+ }
+
+ +

Compatibilidad del Navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatChrome(18) }}{{ CompatGeckoDesktop("6.0") }}{{ CompatIE(9.0) }}{{ CompatOpera(11.0) }}{{ CompatSafari("5.0") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatSafari(5.0) }}
+
+ +

Especificación

+ + + +

{{ languages( {"zh-cn": "zh-cn/DOM/event.defaultPrevented" } ) }}

diff --git a/files/es/web/api/event/event/index.html b/files/es/web/api/event/event/index.html new file mode 100644 index 0000000000..b1410daf7b --- /dev/null +++ b/files/es/web/api/event/event/index.html @@ -0,0 +1,80 @@ +--- +title: Event() +slug: Web/API/Event/Event +translation_of: Web/API/Event/Event +--- +

{{APIRef("DOM")}}

+ +

El constructor Event() crea un nuevo {{domxref("Event")}}.

+ +

Sintaxis

+ +
 event = new Event(typeArg, eventInit);
+ +

Valores

+ +
+
typeArg
+
Es un {{domxref("DOMString")}} que representa el nombre del evento.
+
eventInit {{optional_inline}}
+
+ +
+
Es un EventInit dictionary, con los siguientes campos: + +
    +
  • "bubbles": (Opcional) {{jsxref("Boolean")}} indica si el evento se propaga. Por defecto es false.
    • +
  • "cancelable": (Opcional) A {{jsxref("Boolean")}} indica si el evento puede ser cancelado. Por defecto es false.
    • +
  • "scoped": (Opcional) {{jsxref("Boolean")}} indica el ámbito de propagación. Si el valor es true, deepPath contendrá el nodo de destino.
    • +
  • "composed": (Opcional) {{jsxref("Boolean")}} que indica si el evento disparará listeners fuera de un shadow root. Por defecto es false. 
    • +
+
+
+ +

Ejemplo

+ +
// crea un evento look que se propaga y no puede cancelarse
+
+var ev = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(ev);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#interface-event','Event()')}}{{Spec2('DOM WHATWG')}}Definición inicial.
{{SpecName('Shadow DOM','#widl-EventInit-scoped', 'scoped')}}{{Spec2('Shadow DOM')}}Añade ámbito a EventInit dictionary.
+ +

Compatibilidad con navegadores

+ +

 

+ + + +

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

+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/event/index.html b/files/es/web/api/event/index.html new file mode 100644 index 0000000000..67cc05b076 --- /dev/null +++ b/files/es/web/api/event/index.html @@ -0,0 +1,185 @@ +--- +title: evento +slug: Web/API/Event +tags: + - para_revisar +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

« Referencia DOM de Gecko

+ +

Introducción

+ +

Éste capítulo describe el Modelo De Evento DOM de nivel 2 como es implementado por Gecko. La propia interfaz de Evento es descrita, así como las interfaces para el registro de evento sobre los nodos en el DOM, manipuladores y "oyentes" (listeners) de eventos, y varios ejemplos mas extensos que muestran como las varias interfaces de evento se relacionan unas  con las otras.

+ +

Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el DOM Level 3 Events draft.

+ +

La interfaz evento (Event) de DOM

+ +

Los gestores de eventos pueden estar atados a varios elementos en el DOM. Cuando un evento ocurre, un objeto de evento es dinámicamente creado y pasado secuencialmente a las "escuchas" (listeners) autorizadas para la gestión del evento. La interfaz Event del DOM es entonces accesible por la función de manejo, vía el objeto de evento puesto como el primer (y único) argumento.

+ +

Given that we don't list the three ways right here, the sentence is unclear, and is not perfectly right either IMO. -Nickolay There are three ways to attach an event listener to an element. With 2 of those techniques, the event object is passed to the handler function implicitly. The remaining technique requires you to specify the <code>event</code> object as a parameter, which is passed explicitly to the event handler function. El ejemplo siguiente muestra como un objeto de evento es pasado a una función de gestión de evento, y puede llamarse desde otra parecida.

+ +

El parámetro "evt" no es pasado en el código de abajo, el objeto de evento es cambiado automáticamente a foo. Todo lo necesario es definir un parámetro en el gestor de evento para recibir el objeto de evento.

+ +
function foo(evt) {
+  // Las funciones de gestión como esta
+  // dan una referencia implícita del
+  // evento que toca manejar
+  // (en este caso se llama "evt").
+  alert(evt);
+}
+table_el.onclick = foo;
+
+ +

Este ejemplo es muy simple pero muestra una característica importante de los eventos en el DOM de Gecko, la cual es que en el DOM se accede a los objetos de eventos a través de las funciones de manejo. Entonces al tener una referencia al objeto de evento, se puede llegar a todas las propiedades y métodos descritos en este capítulo.

+ +

Para más detalles de como los eventos se mueven dentro del DOM, ver: Ejemplo 5: Propagación de evento

+ +

Lista de los gestores de evento del DOM

+ +

Además del objeto event descrito aquí, el Gecko DOM también proporciona métodos para registrar oyentes de eventos en nodos en el DOM, quitando aquellos oyentes de eventos, y enviando eventos desde el DOM.

+ +

Estos y los varios manejos de eventos de elementos HTML o XML son los puntos de entrada principales para los eventos en el DOM. Estos tres métodos se describen en la lista de referencia al elemento.

+ +

Puede también pasar la referencia del objeto del evento como un parámetro predefinido, llamado event, a la función que maneja el evento. Esto es muy parecido a la forma en que trabaja this, pero para objetos de eventos, más bien que las referencias del objeto del elemento.

+ +
<html>
+<head>
+<title>Ejemplo de parámetro de objeto de evento</title>
+
+<script type="text/javascript">
+
+function showCoords(event){
+  alert(
+    "clientX value: " + event.clientX + "\n" +
+    "clientY value: " + event.clientY + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="showCoords(event)">
+<p>Para ver las coordinadas del ratón
+haga clic en cualquier lugar de esta página.</p>
+</body>
+</html>
+
+ +

El parámetro predefinido del objeto event permite pasar tantos parámetros de gestión de evento como sea necesario:

+ +
<html>
+<head>
+<title>Ejemplo de objeto con varios parámetros</title>
+
+<script type="text/javascript">
+
+var par2 = 'hello';
+var par3 = 'world!';
+
+function muestraCoords(evt, p2, p3){
+  alert(
+    "clienteX value: " + evt.clientX + "\n"
+    + "clientY value: " + evt.clientY + "\n"
+    + "p2: " + p2 + "\n"
+    + "p3: " + p3 + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="muestraCoords(event, par2, par3)">
+<p>Para ver las coordinadas del ratón
+haga clic en cualquier lugar de esta página.</p>
+</body>
+</html>
+
+ +

Propiedades

+ +
+
event.altKey 
+
Devuelve un valor indicando si la tecla <alt> fue pulsada durante el evento.
+
event.bubbles 
+
Devuelve un valor que indica si el evento se propaga hacia arriba a través del DOM o no.
+
event.button 
+
Devuelve el botón del ratón.
+
event.cancelBubble {{deprecated_inline}} 
+
Devuelve un valor que indica si la propagación hacia arriba fue cancelada o no.
+
event.cancelable 
+
Devuelve un valor que indica si el evento se puede cancelar.
+
event.charCode 
+
Devuelve el valor Unicode de una tecla de carácter que fue apretada como parte de un evento keypress.
+
event.clientX 
+
Devuelve la posición horizontal del evento.
+
event.clientY 
+
Devuelve la posición vertical del evento.
+
event.ctrlKey 
+
Devuelve un valor que indica si la tecla <Ctrl> fue apretada durante el evento.
+
event.currentTarget 
+
Devuelve una referencia al objetivo actual registrado para el evento.
+
event.detail 
+
Devuelve detalles sobre el evento, dependiendo del tipo de evento.
+
event.eventPhase 
+
Utilizado para indicar qué fase del flujo del evento es actualmente en proceso de evaluación.
+
event.explicitOriginalTarget 
+
El objetivo del evento (específico a Mozilla).
+
event.isChar 
+
Devuelve un valor que indica si el evento produce o no una tecla de carácter.
+
event.keyCode 
+
Devuelve el valor Unicode de una tecla que no es caracter en un evento keypress o cualquier tecla en cualquier otro tipo de evento de teclado.
+
event.layerX 
+
Devuelve la coordenada horizontal del evento relativo a la capa actual.
+
event.layerY 
+
Devuelve la coordenada vertical del evento relativo a la capa actual.
+
event.metaKey 
+
Devuelve un valor booleano indicando si la meta tecla fue presionada durante un evento.
+
event.originalTarget 
+
El objetivo principal de un evento, antes de cualquier reapunte (Especifiación Mozilla).
+
event.pageX 
+
Devuelve la coordenada horizontal del evento, relativo al documento completo.
+
event.pageY 
+
Devuelve la coordenada vertical del evento, relativo al documento completo.
+
event.relatedTarget 
+
Identifica un objetivo secundario para el evento.
+
event.screenX 
+
Devuelve la coordenada horizontal del evento en la pantalla.
+
event.screenY 
+
Devuelve la coordenada vertical del evento en la pantalla.
+
event.shiftKey 
+
Devuelve un valor booleano indicando si la tecla <shift> fue presionada cuando el evento fue disparado.
+
event.target 
+
Devuelve una referencia al objetivo en la cual el evento fue originalmente enviado.
+
event.timeStamp 
+
Devuelve el momento de creación del evento.
+
event.type 
+
Devuelve el nombre del evento (distingue mayúsculas y minúsculas).
+
event.view 
+
El atributo vista identifica la AbstractView del cual el evento fue generado.
+
event.which 
+
Devuelve el valor Unicode de la tecla en un evento del teclado, sin importar el tipo de tecla que se presionó.
+
+ +

Métodos

+ +
+
event.initEvent 
+
Inicia el valor de un evento que se ha creado vía la interfaz DocumentEvent.
+
event.initKeyEvent 
+
Inicia un evento del teclado. (Específico de Gecko).
+
event.initMouseEvent 
+
Inicia un evento del ratón una vez que se ha creado.
+
event.initUIEvent 
+
Inicia un evento de la interfaz de usuario (UI) una vez que se ha creado.
+
event.preventBubble {{obsolete_inline}} 
+
Previene la expansión del evento. Este método es desaconsejado en favor del estándar stopPropagation y ha sido retirado en Gecko 1.9.
+
event.preventCapture {{obsolete_inline}}
+
Este método es desaconsejado en favor del estándar stopPropagation y ha sido retirado en Gecko 1.9.
+
event.preventDefault 
+
Cancela el evento (si éste es anulable).
+
event.stopPropagation 
+
Para la propagación de los eventos más allá en el DOM.
+
diff --git a/files/es/web/api/event/initevent/index.html b/files/es/web/api/event/initevent/index.html new file mode 100644 index 0000000000..360effb8ef --- /dev/null +++ b/files/es/web/api/event/initevent/index.html @@ -0,0 +1,42 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Event/initEvent +--- +
{{ ApiRef("DOM") }}{{deprecated_header}}
+

Resumen

+ +

El método initEvent se usa para dar valor inicial a un evento creado mediante document.createEvent.

+ +

Sintaxis

+ +
event.initEvent(type,bubbles,cancelable)
+
+ +
+
type
+
El tipo de evento.
+
bubbles
+
Un valor binario indicando si el evento debe ser recurrente en la cadena de eventos, o no (ver bubbles).
+
cancelable
+
Un valor binario indicando si el evento puede ser cancelado o no (ver cancelable).
+
+ +

Nota: Un valor binario puede tener sólo valores 1 y 0. En lógica de Boole, cierto (true ) y falso (false ).

+ +

Ejemplo

+ +
// crea un evento "click" que puede ser recurrente y
+// NO puede ser cancelado.
+event.initEvent("click", true, false);
+
+ +

Notas

+ +

Los eventos inicializados de esta forma, deben haber sido creados por el método document.createEvent. Debemos llamar a initEvent para inicializar el evento antes de que pueda ser lanzado con dispatched.

+ +

Especificación

+ +

DOM Level 2 Events: Event.initEvent

diff --git a/files/es/web/api/event/preventdefault/index.html b/files/es/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..e0e6ba18b1 --- /dev/null +++ b/files/es/web/api/event/preventdefault/index.html @@ -0,0 +1,95 @@ +--- +title: event.preventDefault +slug: Web/API/Event/preventDefault +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Event/preventDefault +--- +

{{ApiRef("DOM")}}

+ +

Resumen

+ +

Cancela el evento si este es cancelable, sin detener el resto del funcionamiento del evento, es decir, puede ser llamado de nuevo.

+ +

Sintaxis

+ +
event.preventDefault()
+
+ +

Ejemplo

+ +

Cambiar el estado de una caja de selección es la función por defecto de la acción de hacer clic sobre la caja. Este ejemplo ilustra como hacer que esto no ocurra:

+ +
<html>
+<head>
+<title>ejemplo de preventDefault</title>
+
+<script type="text/javascript">
+
+function stopDefAction(evt) {
+  evt.preventDefault();
+}
+</script>
+</head>
+
+<body>
+
+<p>Por favor, haz clic sobre la caja de selección.</p>
+
+<form>
+<input type="checkbox" onclick="stopDefAction(event);"/>
+<label for="checkbox">Selección</label>
+</form>
+
+</body>
+</html>
+
+ +

Puedes ver preventDefault en acción aquí.

+ +

El siguiente ejemplo demuestra cómo puede evitarse que un texto invalido entre en un campo de formulario mediante preventDefault().

+ +
<html>
+<head>
+<title>preventDefault example</title>
+
+<script type="text/javascript">
+
+function checkName(evt) {
+var charCode = evt.charCode;
+
+  if (charCode != 0) {
+    if (charCode < 97 || charCode > 122) {
+      evt.preventDefault();
+      alert("Por favor usa sólo letras minúsculas." + "\n"
+            + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+
+</script>
+</head>
+
+<body>
+
+<p>Por favor entra tu nombre en letras minúsculas solamente.</p>
+<form>
+<input type="text" onkeypress="checkName(event);"/>
+</form>
+
+</body>
+</html>
+
+ +

Notas

+ +

Llamar a preventDefault en cualquier momento durante la ejecución, cancela el evento, lo que significa que cualquier acción por defecto que deba producirse como resultado de este evento, no ocurrirá.

+ +

Puedes usar event.cancelable para comprobar si el evento es cancelable o no. Llamar a preventDefault para un evento no cancelable, no tiene ningún efecto.

+ +

preventDefault no detiene las siguientes llamadas al evento producidas en el DOM. En su lugar debería usarse event.stopPropagation para ese propósito.

+ +

Especificación

+ +

DOM Level 2 Events: preventDefault

diff --git a/files/es/web/api/event/stoppropagation/index.html b/files/es/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..c92c594950 --- /dev/null +++ b/files/es/web/api/event/stoppropagation/index.html @@ -0,0 +1,103 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +translation_of: Web/API/Event/stopPropagation +--- +
{{APIRef("DOM")}}
+ +

El método stopPropagation() de la interfaz {{domxref("Event")}} evita la propagación adicional del evento actual en las fases de captura y bubbling.

+ +

Sintaxis

+ +
event.stopPropagation();
+ +

Ejemplo

+ +

Ver ejemplo 5: Propagación del evento en el capítulo de Ejemplos para un ejemplo mas detallado de este método y la propagación del evento en el DOM.

+ +

Notas

+ +

Ver las Especificaciones del DOM para la explicación del flujo del eventos. (El Borrador de eventos del DOM nivel 3 tiene una ilustración.)

+ +

preventDefault es un método complementario que puede ser usado para prevenir la acción default del evento cuando este ocurre.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{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")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/api/event/target/index.html b/files/es/web/api/event/target/index.html new file mode 100644 index 0000000000..1e28aef0b3 --- /dev/null +++ b/files/es/web/api/event/target/index.html @@ -0,0 +1,138 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - Evento + - Propiedad + - Referencia +translation_of: Web/API/Event/target +--- +

{{ApiRef("DOM")}}

+ +

La propiedad target de la interfaz del {{domxref("event.currentTarget")}} es una referencia al objeto en el cual se lanzo el evento. Es diferente de {{domxref("event.currentTarget")}} donde el controlador de eventos (event handler) es llamado durante la fase de bubbling or capturing del evento.

+ +

Sintaxis

+ +
const theTarget = algunEvento.target
+ +

Ejemplo

+ +

La propiedad event.target  puede ser usada para implementar una delegación del evento.

+ +
// Crear una lista
+const ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+const li1 = document.createElement('li');
+const li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target se refiere elemento clickado <li>
+  // Esto es diferente de e.currentTarget, que se referiría al padre <ul> en este contexto
+  e.target.style.visibility = 'hidden';
+}
+
+// Incluir el 'listener' a la lista
+// Se ejecutará cuando se haga click en cada <li>
+ul.addEventListener('click', hide, false);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Definición inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Notas de compatibilidad

+ +

En IE 6-8 el evento 'model' es diferente. Los eventos 'listeners' son  are incluidos con el método no estándar {{domxref('EventTarget.attachEvent')}}. En este modelo, el evento 'object' tiene una propiedad {{domxref('Event.srcElement')}}, en vez de la propiedad target, y tiene la misma semántica que event.target.

+ +
function hide(e) {
+  // Soporte en IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

También  ver

+ + diff --git a/files/es/web/api/event/type/index.html b/files/es/web/api/event/type/index.html new file mode 100644 index 0000000000..7f9f02f6e9 --- /dev/null +++ b/files/es/web/api/event/type/index.html @@ -0,0 +1,103 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - API + - DOM + - Evento + - Propiedad + - Referencia +translation_of: Web/API/Event/type +--- +
{{APIRef}}
+ +

La propiedad de sólo-lectura Event.type devuelve una cadena de texto que contiene el tipo de evento. Se establece cuando se contruye el evento y es el nombre que se utiliza normalmente para referirse al evento en cuestión, como click, load o error.

+ +

El argumento event de {{ domxref("EventTarget.addEventListener()") }} y {{ domxref("EventTarget.removeEventListener()") }} no es sensible a mayúsculas.

+ +

Para una lista de tipos de evento displonibles, vea la referencia de eventos

+ +

Sintaxis

+ +
event.type
+
+ +

Ejemplos

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+
+    <title>Event.type Example</title>
+
+    <script>
+        var currEvent;
+        function getEvtType(evt) {
+            console.group();
+
+            currEvent = evt.type;
+            console.log(currEvent);
+
+            document.getElementById("Etype").innerHTML = currEvent;
+
+            console.groupEnd();
+        }
+
+        // Eventos de teclado
+        document.addEventListener("keypress", getEvtType, false); //[second]
+
+        document.addEventListener("keydown", getEvtType, false); //first
+        document.addEventListener("keyup", getEvtType, false); //third
+
+        // Eventos de ratón
+        document.addEventListener("click", getEvtType, false); // third
+
+        document.addEventListener("mousedown", getEvtType, false); //first
+        document.addEventListener("mouseup", getEvtType, false); //second
+
+    </script>
+</head>
+
+<body>
+
+<p>Press any key or click the mouse to get the event type.</p>
+<p>Event type: <span id="Etype" style="color:red">-</span></p>
+
+</body>
+</html>
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}{{ Spec2('DOM2 Events') }}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.Event.type")}}

diff --git a/files/es/web/api/eventlistener/index.html b/files/es/web/api/eventlistener/index.html new file mode 100644 index 0000000000..e0a11040cc --- /dev/null +++ b/files/es/web/api/eventlistener/index.html @@ -0,0 +1,44 @@ +--- +title: EventListener +slug: Web/API/EventListener +translation_of: Web/API/EventListener +--- +

{{APIRef("DOM Events")}}

+ +

Información General del Método

+ + + + + + + +
void handleEvent(in Event event);
+ +

Metodos

+ +

handleEvent()

+ +

Este metodo es llamado cuando un evento ocurre del tipo para el cual la interfaz EventListener fue registrada.

+ +
void handleEvent(
+  in Event event
+);
+
+ +
Parametros
+ +
+
event
+
El DOM {{ domxref("Event") }} a registrar.
+
+ +

Observaciones

+ +

Como la interfaz es marcada con la bandera [function],todas los objetos Function  de javascript automaticamente implementan esta interfaz. Llamando el método {{manch("handleEvent") }} en tales implementaciones automaticamente invocan la funcion.

+ +

Mira también

+ + diff --git a/files/es/web/api/eventsource/index.html b/files/es/web/api/eventsource/index.html new file mode 100644 index 0000000000..db259edd2a --- /dev/null +++ b/files/es/web/api/eventsource/index.html @@ -0,0 +1,168 @@ +--- +title: EventSource +slug: Web/API/EventSource +tags: + - API + - Eventos Server-sent + - Interfaz +translation_of: Web/API/EventSource +--- +
{{APIRef("Websockets API")}}
+ +

La interfaz EventSource se utiliza para recibir eventos server-side. Se realiza la conexión a un servidor sobre HTTP y se reciben eventos en formato text/event-stream sin tener que cerrar la conexión.

+ +
+
+ +

Constructor

+ +
+
{{domxref("EventSource.EventSource", "EventSource()")}}
+
Crea un nuevo  EventSource a partiendo de un valor {{domxref("USVString")}}.
+
+ +

Propiedades

+ +

Esta interfaz también heredará propiedades de su antecesor, {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.readyState")}} {{readonlyinline}}
+
Un número representando el estado de la conexión. Los valores posibles son CONECTANDO (0), ABIERTO (1), o CERRADO (2).
+
{{domxref("EventSource.url")}} {{readonlyinline}}
+
Un valor {{domxref("DOMString")}} representando la URL de la fuente.
+
{{domxref("EventSource.withCredentials")}} {{readonlyinline}}
+
Un valor {{domxref("Boolean")}} indicando si el objecto EventSource ha sido instanciado con credeciales CORS disponibles (true) o no (false, valor por defecto).
+
+ +

Manejadores de Eventos

+ +
+
{{domxref("EventSource.onerror")}}
+
En un {{domxref("EventHandler")}} que se invoca cuando ocurre un error y se envía el evento {{event("error")}} a través del objeto EventSource.
+
{{domxref("EventSource.onmessage")}}
+
Es un {{domxref("EventHandler")}} que se invoca cuando se recibe un evento {{event("message")}}, que indica que se ha enviado un mensaje desde la fuente.
+
{{domxref("EventSource.onopen")}}
+
Es un {{domxref("EventHandler")}} que se invoca cuando se recibe un evento {{event("open")}}, que sucede en el momento que la conexión se abre.
+
+ +

Métodos

+ +

Esta interfaz también heredará métodos de su antecesor, {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.close()")}}
+
Cierra la conexión, si ésta existe, y asigna el valor CLOSED al atributo readyState. Si la conexión ya estaba cerrada, este método no hace nada.
+
+ +

Ejemplos

+ +
var evtSource = new EventSource('sse.php');
+var eventList = document.querySelector('ul');
+
+evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+ +
+

Nota: Está disponible un ejemplo completo en GitHub — ver Simple SSE demo using PHP.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}{{Spec2('HTML WHATWG')}} 
+ + + +

Compatibilidad de navegadoresEdit

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte EventSource6{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatVersionUnknown}}5
Disponible en workers compartidos y dedicados[1]{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte EventSource4.445{{CompatNo}}124.1
Disponible en workers compartidos y dedicados[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Pero todavía no disponible en service workers.

+ +

Ver también

+ + diff --git a/files/es/web/api/eventsource/onopen/index.html b/files/es/web/api/eventsource/onopen/index.html new file mode 100644 index 0000000000..109962298c --- /dev/null +++ b/files/es/web/api/eventsource/onopen/index.html @@ -0,0 +1,127 @@ +--- +title: EventSource.onopen +slug: Web/API/EventSource/onopen +translation_of: Web/API/EventSource/onopen +--- +
{{APIRef('WebSockets API')}}
+ +

La propiedad onopen de la interfaz  {{domxref("EventSource")}}  es un {{domxref("EventHandler")}} llamado cuando un evento  {{event("open")}} es recibido, esto pasa cuando la conexión fue solo abierta.

+ +

Syntax

+ +
eventSource.onopen = function
+ +

Ejemplos

+ +
evtSource.onopen = function() {
+  console.log("Connection to server opened.");
+};
+ +
+

Nota: Tu puedes encontrar un ejemplo completo en GitHub — ve Simple SSE demo using PHP.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}{{Spec2('HTML WHATWG')}}Initial definition
+ + + +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support6{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatVersionUnknown}}5
Available in shared and dedicated workers[1]{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
Caracteristica
+ 		AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support4.445{{CompatNo}}124.1
Available in shared and dedicated workers[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] But not service workers as yet.

+ +

Mira también

+ + diff --git a/files/es/web/api/eventtarget/addeventlistener/index.html b/files/es/web/api/eventtarget/addeventlistener/index.html new file mode 100644 index 0000000000..d5b3aa4aef --- /dev/null +++ b/files/es/web/api/eventtarget/addeventlistener/index.html @@ -0,0 +1,335 @@ +--- +title: element.addEventListener +slug: Web/API/EventTarget/addEventListener +translation_of: Web/API/EventTarget/addEventListener +--- +

{{apiref("DOM Events")}}

+ +

Resumen

+ +

addEventListener() Registra un evento a un objeto en específico. El Objeto especifico puede ser un simple elemento en un archivo, el mismo  documento , una ventana o un  XMLHttpRequest.

+ +

Para registrar más de un eventListener, puedes llamar addEventListener() para el mismo elemento pero con diferentes tipos de eventos o parámetros de captura.

+ +

Sintaxis

+ +
target.addEventListener(tipo, listener[, useCapture]);
+target.addEventListener(tipo, listener[, useCapture, wantsUntrusted {{ Non-standard_inline() }}]); // Gecko/Mozilla only
+ +
+
tipo
+
Una cadena representando el  tipo de evento a escuchar.
+
listener
+
El objeto que recibe una notificación cuando un evento de el tipo especificado ocurre. Debe ser un objeto implementando la interfaz EventListener o solo una function en JavaScript.
+
useCapture {{ optional_inline() }}
+
Si es true, useCapture indica que el usuario desea iniciar la captura.   Después de iniciar la captura, todos los eventos del tipo especificado serán lanzados al listener registrado antes de comenzar  a ser controlados por algún EventTarget que esté por debajo en el arbol DOM del documento. +
Note: For event listeners attached to the event target; the event is in the target phase, rather than capturing and bubbling phases. Events in the target phase will trigger all listeners on an element regardless of the useCapture parameter.
+ +
Note: useCapture became optional only in more recent versions of the major browsers; for example, it was not optional prior to Firefox 6. You should provide that parameter for broadest compatibility.
+
+
+ +
+
wantsUntrusted {{Non-standard_inline}}
+
If true, the listener receives synthetic events dispatched by web content (the default is false for chrome and true for regular web pages). This parameter is only available in Gecko and is mainly useful for the code in add-ons and the browser itself. See Interaction between privileged and non-privileged pages for an example.
+
+ +

Ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>DOM Event Example</title>
+
+<style>
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+</style>
+
+<script>
+// Function to change the content of t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = "three";
+}
+
+// Function to add event listener to t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", modifyText, false);
+}
+
+document.addEventListener("DOMContentLoaded", load, false);
+</script>
+
+</head>
+<body>
+
+<table id="t">
+   <tr><td id="t1">one</td></tr>
+   <tr><td id="t2">two</td></tr>
+</table>
+
+</body>
+</html>
+
+ +

Ver en el JSFiddle

+ +

En el ejemplo anterior , modifyText() es una listener para los eventos click registrados utilzando addEventListener(). Un click en cualquier parte de la tabla notificara al handler y ejecutara la función  modifyText().

+ +

Si quieres pasar parámetros a la función del listener, debes utilizar funciones anónimas.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>DOM Event Example</title>
+
+<style>
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+</style>
+
+<script>
+
+// Function to change the content of t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Function to add event listener to t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", function(){modifyText("four")}, false);
+}
+</script>
+
+</head>
+<body onload="load();">
+
+<table id="t">
+  <tr><td id="t1">one</td></tr>
+  <tr><td id="t2">two</td></tr>
+</table>
+
+</body>
+</html>
+
+ +

Notas

+ +

¿Porqué utilizar addEventListener?

+ +

addEventListener es la forma de registrar un listener de eventos, como se especifica en W3C DOM. Sus beneficios son los siguientes:

+ + + +

La alternativa,  Antigua forma de registrar event listeners es descrita a continuación.

+ +

Adding a listener during event dispatch

+ +

If an EventListener is added to an EventTarget while it is processing an event, it will not be triggered by the current actions but may be triggered during a later stage of event flow, such as the bubbling phase.

+ +

Multiple identical event listeners

+ +

If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and since the duplicates are discarded, they do not need to be removed manually with the removeEventListener method.

+ +

The value of this within the handler

+ +

It is often desirable to reference the element from which the event handler was fired, such as when using a generic handler for a series of similar elements. When attaching a function using addEventListener() the value of this is changed—note that the value of this is passed to a function from the caller.

+ +

In the example above, the value of this within modifyText() when called from the click event is a reference to the table 't'. This is in contrast to the behavior that occurs if the handler is added in the HTML source:

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

The value of this within modifyText() when called from the onclick event will be a reference to the global (window) object.

+ +
Note: JavaScript 1.8.5 introduces the Function.prototype.bind() method, which lets you specify the value that should be used as this for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can later remove it.
+ +

This is an example with and without bind:

+ +
var Something = function(element)
+{
+  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 the binded Something object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+
+ +

A problem in the example above is that you cannot remove the listener with bind. Another solution is using a special function called handleEvent to catch any events:

+ +
var Something = function(element)
+{
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is the Something 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 listners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+
+ +

Legacy Internet Explorer and attachEvent

+ +

In Internet Explorer versions prior to IE 9, you have to use attachEvent rather than the standard addEventListener. To support IE, the example above can be modified to:

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

There is a drawback to attachEvent, the value of this will be a reference to the window object instead of the element on which it was fired.

+ +

Older way to register event listeners

+ +

addEventListener() was introduced with the DOM 2 Events specification. Before then, event listeners were registered as follows:

+ +
// Pass a function reference — do not add '()' after it, which would call the function!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+    // ... function logic ...
+};
+
+ +

This method replaces the existing click event listener(s) on the element if there are any. Similarly for other events and associated event handlers such as blur (onblur), keypress (onkeypress), and so on.

+ +

Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to register event listeners dynamically unless the extra features of addEventListener() are needed.

+ +

Memory issues

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

In the first case, a new (anonymous) function is created at each loop turn. In the second case, the same previously declared function is used as an event handler. This results in smaller memory consumption. Moreover, in the first case, since no reference to the anonymous functions is kept, it is not possible to call element.removeEventListener because we do not have a reference to the handler, while in the second case, it's possible to do myElement.removeEventListener("click", processEvent, false).

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop(1.0) }}9.071.0
useCapture made optional1.06.09.011.60{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile(1.0) }}9.06.01.0
+
+ +

Gecko notes

+ + + +

WebKit notes

+ + + +

See Also

+ + + +

Specification

+ + diff --git a/files/es/web/api/eventtarget/dispatchevent/index.html b/files/es/web/api/eventtarget/dispatchevent/index.html new file mode 100644 index 0000000000..22a15ca8b5 --- /dev/null +++ b/files/es/web/api/eventtarget/dispatchevent/index.html @@ -0,0 +1,35 @@ +--- +title: element.dispatchEvent +slug: Web/API/EventTarget/dispatchEvent +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/EventTarget/dispatchEvent +--- +

{{ ApiRef("DOM Events")}}

+ +

Resumen

+ +

Lanza un evento en el sistema de eventos. El evento está sujeto al mismo comportamiento y capacidades que si fuera un evento de lanzamiento directo.

+ +

Sintaxis

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

Notas

+ +

Como se ve en el ejemplo anterior, dispatchEvent es el último paso en el proceso crear-inicializar-lanzar, que se usa para el lanzamiento manual de eventos en el modelo de implementación de eventos.

+ +

El evento puede ser creado mediante el método document.createEvent e inicializado usando initEvent u otro método, más específicamente, métodos de inicialización como initMouseEvent o initUIEvent.

+ +

Ver también Event object reference.

+ +

Especificación

+ +

DOM Level 2 Events: dispatchEvent

diff --git a/files/es/web/api/eventtarget/index.html b/files/es/web/api/eventtarget/index.html new file mode 100644 index 0000000000..f263590861 --- /dev/null +++ b/files/es/web/api/eventtarget/index.html @@ -0,0 +1,119 @@ +--- +title: EventTarget +slug: Web/API/EventTarget +tags: + - API +translation_of: Web/API/EventTarget +--- +

{{ ApiRef("DOM Events") }}

+ +

EventTarget es una interfaz implementada por los objetos que pueden administrar eventos y sus escuchadores.

+ +

{{domxref("Element")}}, {{domxref("document")}}, y {{domxref("window")}} son los objetivos más comunes de un evento, pero otros objetos pueden serlo también, por ejemplo {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, entre otros.

+ +

Muchos objetivos de eventos tales como: elementos, documentos y ventanas, también admiten la configuración de controladores de eventos a través de propiedades y atributos.

+ +

Métodos

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Registre un controlador de eventos de un tipo de evento específico en EventTarget.
+
{{domxref("EventTarget.removeEventListener()")}}
+
Elimina un detector de eventos del EventTarget.
+
{{domxref("EventTarget.dispatchEvent()")}}
+
Enviar un evento a este EventTarget.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}{{Spec2('DOM3 Events')}}A few parameters are now optional (listener), or accepts the null value (useCapture).
{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Compatibilidad

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}9.071.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}9.06.01.0
+
+ +

Additional methods for Mozilla chrome code

+ +

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

+ + + +

Vea también

+ + diff --git a/files/es/web/api/eventtarget/removeeventlistener/index.html b/files/es/web/api/eventtarget/removeeventlistener/index.html new file mode 100644 index 0000000000..1b022bbe50 --- /dev/null +++ b/files/es/web/api/eventtarget/removeeventlistener/index.html @@ -0,0 +1,217 @@ +--- +title: EventTarget.removeEventListener() +slug: Web/API/EventTarget/removeEventListener +tags: + - API + - DOM + - Event +translation_of: Web/API/EventTarget/removeEventListener +--- +

{{APIRef("DOM Events")}}

+ +

El método EventTarget.removeEventListener() remueve del {{domxref("EventTarget")}} un detector de evento previamente registrado con {{domxref("EventTarget.addEventListener")}}. El detector de evento a ser removido es identificado usando una combinación de de tipos de eventos, la misma funcion del detector de eventos, y muchas opciones adicionales que pueden afectar

+ +

Sintaxis

+ +
target.removeEventListener(type, listener[, options]);
+target.removeEventListener(tipo, listener[, useCapture])
+ +

Parámetros

+ +
+
tipo
+
Un string representando el tipo de evento del que se está removiendo un detector de evento.
+
detector (listener)
+
La función {{domxref("EventListener")}} del manejador de evento a eliminar del objetivo del evento.
+
options {{optional_inline}}
+
Un objeto que especifíca diversas características acerca del detector de eventos. Las opciones disponibles son: +
    +
  • capture: Un {{jsxref("Boolean")}} que indica que eventos de este tipo serán enviados al listener antes de ser enviado a cualquier EventTarget debado de éste en el DOM.
    • +
  • {{non-standard_inline}} mozSystemGroup: Sólo disponible ejecutando XBL o Firefox' chrome, es un {{jsxref("Boolean")}} que define si el detector es añadido al grupo del sistema.
    • +
+
+
useCapture {{optional_inline}}
+
Especifíca si el {{domxref("EventListener")}} que se está eliminando fue registrado como un detector de captura o no. Si no se indica, por defecto useCapture asumirá el valor false.
+
Si un detector se registro dos veces, uno con captura y otro sin, cada uno debe ser eliminado por separado. La eliminación de un detector de captura no afecta a una versión de "no-captura" del mismo detector, y viceversa.
+
+ +

Valor de retorno

+ +

undefined.

+ +

Coincidiendo disparadores de evento para su eliminación

+ +

Habiendose añadido detector de evento llamando {{domxref("EventTarget.addEventListener", "addEventListener()")}}, puede llegar un punto donde se requiera eliminar. Obviamente, se necesita especificar los mismos parámetros de tipo y listener a removeEventListener(), pero que hay acerca de los parámetros de options o de useCapture?

+ +

Mientras addEventListener() permite añadir el mismo detector más de una vez para el mismo tipo, si la opción es diferente, la única opción que removeEventListener() revisará es la bandera de capture/useCapture. Su valor debe coincidir con removeEventListener() para coincidir, pero otros valores no necesitan corresponder.

+ +

Por ejemplo, considerar la siguiente llamada a addEventListener():

+ +
element.addEventListener("mousedown", handleMouseDown, true);
+ +

Ahora, considera  removeEventListener():

+ +
element.removeEventListener("mousedown", handleMouseDown, false);     // Fallo
+element.removeEventListener("mousedown", handleMouseDown, true);      // Éxito
+ +

La primera llamada falla porque el valor de useCapture no coincide. El segundo valor funciona, puesto que useCapture es igual a su valor cuando se añadió el detector.

+ +

Ahora considera lo siguiente:

+ +
element.addEventListener("mousedown", handleMouseDown, { passive: true });
+ +

Aqui, especificamos un objeto options en el cual passive esta definido como true, mientras que otras opciones son dejados con su valor por defecto de false.

+ +

Vea consecutivamente, cada una de las siguientes llamadas a  removeEventListener(). Cualquiera de éstas donde capture o useCapture es true falla; en todas las demás funciona. Solo la configuración capture importa a removeEventListener().

+ +
element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Funciona
+element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Funciona
+element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Falla
+element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Funciona
+element.removeEventListener("mousedown", handleMouseDown, false);                 // Funciona
+element.removeEventListener("mousedown", handleMouseDown, true);                  // Falla
+ +

Vale la pena mencionar que algunos navegadores tienen un comportamiento inconsistente, y a menos que se tengan razones específicas, es probablemente una buena idea usar los mismos valores usados por la llamada a addEventListener() al momento de utilizar removeEventListener().

+ +

Notas

+ +

Si un {{ domxref("EventListener") }} es removido de un {{ domxref("EventTarget") }} cuando aún se está procesando el evento, no será ejecutado. Después de ser removido, un {{ domxref("EventListener") }} no será invocado por el evento al cual se registró, sin embargo se podrá adjuntar de nuevo a dicho evento.

+ +

Llamar {{ domxref("removeEventListener") }}  en algún {{ domxref("EventTarget") }} que no contenga el {{ domxref("EventListener") }} especificado será un acción sin efecto, es decir, se podrá llamar {{ domxref("removeEventListener") }} sin efectos negativos en los scripts.

+ +

Ejemplo

+ +

Este es un ejemplo en donde se agrega y después se elimina un {{ domxref("EventListener") }} 

+ +
var body = document.querySelector('body'),
+    clickTarget = document.getElementById('click-target'),
+    mouseOverTarget = document.getElementById('mouse-over-target'),
+    toggle = false;
+
+function makeBackgroundYellow() {
+    'use strict';
+
+    if (toggle) {
+        body.style.backgroundColor = 'white';
+    } else {
+        body.style.backgroundColor = 'yellow';
+    }
+
+    toggle = !toggle;
+}
+
+clickTarget.addEventListener('click',
+    makeBackgroundYellow,
+    false
+);
+
+mouseOverTarget.addEventListener('mouseover', function () {
+    'use strict';
+
+    clickTarget.removeEventListener('click',
+        makeBackgroundYellow,
+        false
+    );
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}{{Spec2("DOM2 Events")}}Definición inicial
+ +

Compatibilidad de los navegadores

+ + + +

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

+ + + +

Polyfill to support older browsers

+ +

addEventListener() and removeEventListener() are not present in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of addEventListener() and removeEventListener() in implementations which do not natively support it. However, this method will not work on Internet Explorer 7 or earlier, since extending the Element.prototype was not supported until Internet Explorer 8.

+ +
if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}
+
+ +

+ +

Ver también

+ + diff --git a/files/es/web/api/fetch_api/conceptos_basicos/index.html b/files/es/web/api/fetch_api/conceptos_basicos/index.html new file mode 100644 index 0000000000..8c02021de6 --- /dev/null +++ b/files/es/web/api/fetch_api/conceptos_basicos/index.html @@ -0,0 +1,73 @@ +--- +title: Conceptos básicos de Fetch +slug: Web/API/Fetch_API/Conceptos_basicos +tags: + - API + - API Fetch + - Fetch + - conceptos + - guard + - request +translation_of: Web/API/Fetch_API/Basic_concepts +--- +

{{DefaultAPISidebar("Fetch API")}}{{draft}}

+ +
+

La API Fetch proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.

+
+ +
+

Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el foro de discusión de MDN, o Mozilla IRC (#mdn room.)

+
+ +

En pocas palabras

+ +

En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, y {{domxref("Body")}}, junto a un método {{domxref("GlobalFetch.fetch","global fetch")}} para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad.

+ +

Service Workers es un ejemplo de una API que hace un fuerte uso de Fetch.

+ +

Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en {{jsxref("Promise")}}.

+ +

Guard

+ +

Guard es una característica de objetos {{domxref("Headers")}}, con los valores posibles immutable, request, request-no-cors, response, o none, dependiendo de donde el encabezado es usado.

+ +

Cuando un nuevo objeto {{domxref("Headers")}} es creado usando el {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, su guarda (guard) se establece a none (por defecto). Cuando un objeto {{domxref("Request")}} o {{domxref("Response")}} es creado, tiene un objeto  {{domxref("Headers")}} asociado cuyo guarda (guard) se establece como se resume a continuación:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
nuevo tipo de objetocreando el constructorconfiguraciones de guarda (guard) del objeto {{domxref("Headers")}} asociado
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
{{domxref("Request.Request","Request()")}} con {{domxref("Request.mode","mode")}} de no-corsrequest-no-cors
{{domxref("Response")}}{{domxref("Response.Response","Response()")}}response
Métodos {{domxref("Response.error","error()")}} o {{domxref("Response.redirect","redirect()")}}immutable
+ +

Un guarda (guard) de encabezado afecta los métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, y {{domxref("Headers.append","append()")}} que cambían los contenidos del encabezado. Un TypeError es arrojado si se trata modificar un objeto {{domxref("Headers")}} cuyo guarda (guard) es immutable. Sin embargo, la operación funcionará si

+ + diff --git a/files/es/web/api/fetch_api/index.html b/files/es/web/api/fetch_api/index.html new file mode 100644 index 0000000000..13c733a799 --- /dev/null +++ b/files/es/web/api/fetch_api/index.html @@ -0,0 +1,81 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +translation_of: Web/API/Fetch_API +--- +

{{DefaultAPISidebar("Fetch API")}}
+ La API Fetch proporciona una interfaz para recuperar recursos (incluso a través de la red). Resultará familiar a cualquiera que haya usado {{domxref("XMLHttpRequest")}}, pero la nueva API ofrece un conjunto de características más potente y flexible.

+ +

Conceptos y uso

+ +

Fetch ofrece una definición genérica de los objetos {{domxref("Request")}} y {{domxref("Response")}} (y otras cosas relacionadas con las solicitudes de red). Esto permitirá su uso donde sea necesario en un futuro, ya sea para operadores de servicios, API caché y otras cosas similares que manipulen o modifiquen las solicitudes y respuestas, o cualquier otro tipo de caso de uso que pudiera requerirle la generación de sus propias respuestas mediante programación.

+ +

También proporciona una definición para conceptos relacionados, como CORS y la semántica de encabezado HTTP origen, suplantando sus definiciones separadas en otros lugares.

+ +

Para hacer una solicitud y recuperar un recurso, utilice el método {{domxref("GlobalFetch.fetch")}}. Se implementa en múltiples interfaces, específicamente {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}. Esto hace que esté disponible en casi cualquier contexto donde quiera buscar recursos.

+ +

El método fetch() toma un argumento obligatorio, la ruta de acceso al recurso que desea recuperar. Devuelve una {{domxref("Promise")}} que resuelve en {{domxref("Response")}} a esa petición, sea o no correcta. También puede pasar opcionalmente un objeto de opciones init como segundo argumento (ver {{domxref("Request")}}).

+ +

Una vez que {{domxref("Response")}} es recuperada, hay varios métodos disponibles para definir cuál es el contenido del cuerpo y como se debe manejar (ver {{domxref("Body")}}).

+ +

Puede crear una solicitud y respuesta directamente a con los constructores {{domxref("Request.Request","Request()")}} y {{domxref("Response.Response","Response()")}}, pero no es recomendable hacerlo directamente. En su lugar, es preferible que sean creados como resultado de otras acciones de la API (por ejemplo, {{domxref("FetchEvent.respondWith")}} desde los operadores de servicios).

+ +
+

Nota: Puede encontrar mas información sobre las características de la API Fetch en Usando Fetch, y aprender los conceptos en Fetch: conceptos básicos.

+
+ +

Abortar una petición

+ +

Los navegadores han empezado a añadir soporte experimental para las interfaces {{domxref("AbortController")}} y {{domxref("AbortSignal")}} (Conocidas también como La API Abort), las cuales permiten que operaciones como Fetch y XHR puedan ser abortadas si no han terminado todavía. Visita las páginas de las interfaces para más detalles.

+ +

Fetch Interfaces o Métodos

+ +
+
{{domxref("GlobalFetch")}}
+
Contiene el método fetch() utilizado para obtener o inicializar un recurso.
+
{{domxref("Headers")}}
+
Representa los encabezados de la respuesta/solicitud, lo que le permite consultar y tomar diferentes acciones en función de los resultados.
+
{{domxref("Request")}}
+
Representa una solicitud de recursos.
+
{{domxref("Response")}}
+
Representa la respuesta a una solicitud.
+
+ +

Fetch mixin

+ +
+
{{domxref("Body")}}
+
Proporciona métodos relacionados con el contenido de la respuesta/solicitud, lo que le permite declarar cuál es su tipo y cómo debe manejarse.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/fetch_api/utilizando_fetch/index.html b/files/es/web/api/fetch_api/utilizando_fetch/index.html new file mode 100644 index 0000000000..0f647a7e61 --- /dev/null +++ b/files/es/web/api/fetch_api/utilizando_fetch/index.html @@ -0,0 +1,377 @@ +--- +title: Uso de Fetch +slug: Web/API/Fetch_API/Utilizando_Fetch +tags: + - API + - BODY + - Experimental + - Fetch + - Guía + - HTTP + - Petición + - Promesa + - Promise + - Respuesta +translation_of: Web/API/Fetch_API/Using_Fetch +--- +

{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}

+ +
+

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global {{domxref("GlobalFetch.fetch","fetch()")}} que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

+
+ +

Este tipo de funcionalidad se conseguía previamente haciendo uso de {{domxref("XMLHttpRequest")}}. Fetch proporciona una alternativa mejor que puede ser empleada fácilmente por otras tecnologías como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.

+ +

La especificación fetch difiere de JQuery.ajax() en dos formas principales:

+ + + +

Una petición básica de fetch es realmente simple de realizar. Eche un vistazo al siguente código:

+ +
fetch('http://example.com/movies.json')
+  .then(response => response.json())
+  .then(data => console.log(data));
+ +

Aquí estamos recuperando un archivo JSON a través de red e impriminedo en la consola. El uso de fetch() más simple toma un argumento (la ruta del recurso que quieres buscas) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.

+ +

Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el mixin de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).

+ +
+

Nota: El mixin de Body tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease {{anch("Body")}} para más información.

+
+ +

Las peticiones de Fetch son controladas por la directiva de connect-src de Content Security Policy en vez de la directiva de los recursos que se han devuelto.

+ +

Suministrando opciones de petición

+ +

El método fetch() puede aceptar opcionalmente un segundo parámetro, un objeto init que permite controlar un numero de diferentes ajustes:

+ +

Vea {{domxref("GlobalFetch.fetch","fetch()")}}, para ver todas las opciones disponibles y más detalles.

+ +
// Ejemplo implementando el metodo POST:
+async function postData(url = '', data = {}) {
+  // Opciones por defecto estan marcadas con un *
+  const response = await fetch(url, {
+    method: 'POST', // *GET, POST, PUT, DELETE, etc.
+    mode: 'cors', // no-cors, *cors, same-origin
+    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: 'same-origin', // include, *same-origin, omit
+    headers: {
+      'Content-Type': 'application/json'
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: 'follow', // manual, *follow, error
+    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+    body: JSON.stringify(data) // body data type must match "Content-Type" header
+  });
+  return response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData('https://example.com/answer', { answer: 42 })
+  .then(data => {
+    console.log(data); // JSON data parsed by `data.json()` call
+  });
+ +

Tenga en cuenta que  mode: "no-cors" solo permite un conjunto limitado de encabezados en la solicitud:

+ + + +

Comprobando que la petición es satisfactoria

+ +

Una petición promise {{domxref("GlobalFetch.fetch","fetch()")}} será rechazada con {{jsxref("TypeError")}} cuando se encuentre un error de red, aunque esto normalmente significa problemas de permisos o similares — por ejemplo, un 404 no constituye un error de red. Una forma precisa de comprobar que la petición fetch() es satisfactoria pasa por comprobar si la promesa ha sido resuelta, además de comprobar que la propiedad {{domxref("Response.ok")}} tiene el valor true que indica que el estado de la petición HTTP es OK (código 200-299). El código sería algo así:

+ +
fetch('flores.jpg').then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(miBlob) {
+      var objectURL = URL.createObjectURL(miBlob);
+      miImagen.src = objectURL;
+    });
+  } else {
+    console.log('Respuesta de red OK pero respuesta HTTP no OK');
+  }
+})
+.catch(function(error) {
+  console.log('Hubo un problema con la petición Fetch:' + error.message);
+});
+ +

Proporcionando tu propio objeto Request

+ +

En lugar de pasar la ruta al recurso que deseas solicitar a la llamada del método fetch(), puedes crear un objeto de petición utilizando el constructor {{domxref("Request.Request","Request()")}}, y pasarlo como un argumento del método fetch():

+ +
var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+ +

Request() acepta exactamente los mismos parámetros que el método fetch(). Puedes incluso pasar un objeto de petición existente para crear una copia del mismo:

+ +
var anotherRequest = new Request(myRequest, myInit);
+ +

Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de init. La copia debe estar hecha antes de la lectura del <body>, y leyendo el <body> en la copia, se marcará como leido en la petición original.

+ +
+

Nota: Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que clone() no.

+
+ +

Enviar una petición con credenciales incluido

+ +

Para producir que los navegadores envien una petición con las credenciales incluidas, incluso para una llamada de origen cruzado, añadimos credentials: 'include' en el el objeto init que se pasa al método fetch().

+ +
fetch('https://example.com', {
+  credentials: 'include'
+})
+ +

Si solo quieres enviar la credenciales si la URL de la petición está en el mismo origen desde donde se llamada el script, añade credentials: 'same-origin'.

+ +
// El script fué llamado desde el origen 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})
+ +

Sin embargo para asegurarte que el navegador no incluye las credenciales en la petición, usa credentials: 'omit'.

+ +
fetch('https://example.com', {
+  credentials: 'omit'
+})
+ +

Enviando datos JSON

+ +

Usa {{domxref("GlobalFetch.fetch","fetch()")}} para enviar una petición POST con datos codificados en JSON .

+ +
var url = 'https://example.com/profile';
+var data = {username: 'example'};
+
+fetch(url, {
+  method: 'POST', // or 'PUT'
+  body: JSON.stringify(data), // data can be `string` or {object}!
+  headers:{
+    'Content-Type': 'application/json'
+  }
+}).then(res => res.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+ +

Enviando un archivo

+ +

Los archivos pueden ser subido mediante el HTML de un elemento input <input type="file" />, {{domxref("FormData.FormData","FormData()")}} y {{domxref("GlobalFetch.fetch","fetch()")}}.

+ +
var formData = new FormData();
+var fileField = document.querySelector("input[type='file']");
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+fetch('https://example.com/profile/avatar', {
+  method: 'PUT',
+  body: formData
+})
+.then(response => response.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+ +

Cabeceras

+ +

La interfaz {{domxref("Headers")}} te permite crear tus propios objetos de headers mediante el constructor {{domxref("Headers.Headers","Headers()")}}. Un objeto headers es un simple multi-mapa de nombres y valores:

+ +
var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
+ +

Lo mismo se puede lograr pasando un "array de arrays" o un objeto literal al constructor:

+ +
myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});
+ +

Los contenidos pueden ser consultados o recuperados:

+ +
console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
+ +

Algunas de estas operaciones solo serán utiles en  {{domxref("ServiceWorker_API","ServiceWorkers")}}, pero estas disponen de una mejor API  para manipular headers.

+ +

Todos los métodosde de headers lanzan un TypeError si un nombre de cabecera no es un nombre de cabecera HTTP válido. Las operaciones de mutación lanzarán un TypeError si hay un guarda inmutable (ver más abajo). Si no, fallan silenciosamente. Por ejemplo:

+ +
var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Cannot pretend to be a bank!");
+}
+ +

Un buen caso de uso para headers es comprobar cuando el tipo de contenido es correcto antes de que se procese:

+ +
fetch(myRequest).then(function(response) {
+  var contentType = response.headers.get("content-type");
+  if(contentType && contentType.indexOf("application/json") !== -1) {
+    return response.json().then(function(json) {
+      // process your JSON further
+    });
+  } else {
+    console.log("Oops, we haven't got JSON!");
+  }
+});
+ +

Guarda (Guard)

+ +

Desde que las cabeceras pueden ser enviadas  en peticiones y recibidas en respuestas, y tienen limitaciones sobre que información puede y debería ser mutable, los objeto headers tienen una propierdad de guarda. Este no está expuesto a la Web, pero puede afectar a que operaciones de mutación son permitidas sobre el objeto headers.

+ +

Los valores posibles de guarda (guard) son:

+ + + +
+

Nota:  No se debería añadir o establecer una petición a un objeto headers guardado con la cabecera Content-Length. De igual manera, insertar Set-Cookie en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.

+
+ +

Objetos Response

+ +

Cómo has visto anteriormente, las instancias de {{domxref("Response")}} son devueltas cuando fetch() es resuelto.

+ +

Las propiedades de response que usarás son:

+ + + +

Estos pueden también creados programáticamente a través de JavaScript, pero esto solamente es realmete útil en {{domxref("ServiceWorker_API", "ServiceWorkers")}},  cuando pones un objeto response personalizado a una respuesta recibida usando un método {{domxref("FetchEvent.respondWith","respondWith()")}}:

+ +
var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(
+    new Response(myBody, {
+      headers: { "Content-Type" : "text/plain" }
+    })
+  );
+});
+ +

El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).

+ +
+

Nota: El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.

+
+ +

Body

+ +

Tanto las peticiones como las respuestas pueden contener datos body. Body es una instancia de cualquiera de los siguientes tipos:

+ + + +

El mixin de {{domxref("Body")}} define los siguientes metodos para extraer un body (implementado por {{domxref("Request")}} and {{domxref("Response")}}). Todas ellas devuelven una promesa que es eventualmente resuelta con el contenido actual.

+ + + +

Este hace uso de los datos no texttuales mucho mas facil que si fuera con XHR.

+ +

Las peticiones body pueden ser establecidas pasando el parametro body:

+ +
var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+});
+ +

Tanto peticiones y respuestas (y por extensión la function fetch()), intentaran inteligentemente determinar el tipo de contenido. Una petición tambien establecerá automáticamente la propiedad Context-Type de la cabecera si no es ha establecido una.

+ +

Detectar característica

+ +

Puedes comprobar si el navegador soporta  la API de Fetch comprobando la existencia de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} o {{domxref("GlobalFetch.fetch","fetch()")}} sobre el ámbito de {{domxref("Window")}} o {{domxref("Worker")}}. Por ejemplo:

+ +
if (self.fetch) {
+    // run my fetch request here
+} else {
+    // do something with XMLHttpRequest?
+}
+ +

Polyfill

+ +

Para utilizar fetch() en un explorador no soportado, hay disponible un Fetch Polyfill que recrea la funcionalidad para navegadores no soportados.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/fetchevent/index.html b/files/es/web/api/fetchevent/index.html new file mode 100644 index 0000000000..c2f8e4d693 --- /dev/null +++ b/files/es/web/api/fetchevent/index.html @@ -0,0 +1,176 @@ +--- +title: FetchEvent +slug: Web/API/FetchEvent +tags: + - API + - FetchEvent + - Interfaz + - Offline + - Referencia + - Service Workers + - Workers +translation_of: Web/API/FetchEvent +--- +

{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}

+ +

Este es el tipo de evento para eventos "fetch" despachados en el {{domxref("ServiceWorkerGlobalScope", "scope global del service worker", "", 1)}}. Contiene información sobre la búsqueda (fetch), incluyendo la petición (request) y cómo el receptor tratará la respuesta (response).

+ +

Provee el método {{domxref("FetchEvent.respondWith", "event.respondWith()")}}, el cúal nos permite proporcionar una respuesta a esta búsqueda (fetch).

+ +

Constructor

+ +
+
{{domxref("FetchEvent.FetchEvent()", "new FetchEvent()")}}
+
Crea un nuevo objecto FetchEvent. Este constructor no se usa normalmente.  El propio navegador crea estos objetos y los proporciona a los callbacks de eventos "fetch".
+
+ +

Propiedades

+ +

Hereda propiedades del ancestro, {{domxref("Event")}}.

+ +
+
{{domxref("fetchEvent.clientId")}} {{readonlyInline}}
+
El {{domxref("Client.id", "id")}} del mismo origen {{domxref("Client", "client")}} que inició el "fetch".
+
{{domxref("fetchEvent.preloadResponse")}} {{readonlyinline}}
+
Un {{jsxref("Promise")}} para un {{domxref("Response")}}, o vacío si este no es una navegación, o {{domxref("NavigationPreloadManager", "navigation preload", "", 1)}} no esta habilitado.
+
{{domxref("fetchEvent.request")}} {{readonlyInline}}
+
La {{domxref("Request")}} que el navegador intenta crear.
+
+ +

Métodos

+ +

Herada métodos del padre, {{domxref("ExtendableEvent")}}.

+ +
+
{{domxref("fetchEvent.respondWith()")}}
+
Evita el manejo de búsqueda predeterminado del navegador y proporciona (una promesa) una respuesta usted mismo.
+
{{domxref("extendableEvent.waitUntil()")}}
+
+

Extiende el tiempo de vida del evento. Se usa para notificar al navegador las tareas que van más allá de la devolución de una respuesta, como la transmisión y el almacenamiento en caché.

+
+
+ +

Ejemplos

+ +

Este evento fetch, permite al navegador hacer esta acción por defecto para peticiones non-GET. Para peticiones GET  esto intenta retornar una coincidencia en el cache, y  vuelve de nuevo a la red. Si busca una concidencia en el cache, actualiza asincronicamente el cache para la próxima vez.

+ +
addEventListener('fetch', event => {
+  // Permite al navegador hacer este asunto por defecto
+  // para peticiones non-GET.
+  if (event.request.method != 'GET') return;
+
+  // Evita el valor predeterminado, y manejar solicitud nosostros mismos.
+  event.respondWith(async function() {
+    // Intenta obtener la respuesta de el cache.
+    const cache = await caches.open('dynamic-v1');
+    const cachedResponse = await cache.match(event.request);
+
+    if (cachedResponse) {
+      // Si encontramos una coincidencia en el cache, lo devuelve, pero también
+      // actualizar la entrada en el cache en segundo plano.
+      event.waitUntil(cache.add(event.request));
+      return cachedResponse;
+    }
+
+    // Si no encontramos una coincidencia en el cache, usa la red.
+    return fetch(event.request);
+  }());
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}{{Spec2('Service Workers')}}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatChrome(40)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}24{{CompatNo}}
Propiedad preloadResponse {{CompatChrome(59)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(46)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatChrome(40)}}{{CompatChrome(40)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Propiedad preloadResponse {{CompatChrome(59)}}{{CompatChrome(59)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(46)}}{{CompatUnknown}}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)

+ +

Ver también

+ + diff --git a/files/es/web/api/file/filename/index.html b/files/es/web/api/file/filename/index.html new file mode 100644 index 0000000000..2179e85756 --- /dev/null +++ b/files/es/web/api/file/filename/index.html @@ -0,0 +1,35 @@ +--- +title: File.fileName +slug: Web/API/File/fileName +tags: + - API + - Archivos + - DOM + - File API + - Propiedad + - Referencia +translation_of: Web/API/File/fileName +--- +

{{APIRef("File API")}}{{non-standard_header}} {{obsolete_header(7.0)}}

+ +

Devuelve el nombre del archivo. Por razones de seguridad la ruta es excluída de esta propiedad.

+ +
Propiedad deprecada. Utilice {{domxref("File.name")}} en su lugar.
+ +

Sintaxis

+ +
var name = instanceOfFile.fileName;
+ +

Valor

+ +

Una cadena

+ +

Especificación

+ +

No es parte de una especificación.

+ +

Ver también

+ + diff --git a/files/es/web/api/file/index.html b/files/es/web/api/file/index.html new file mode 100644 index 0000000000..006125622e --- /dev/null +++ b/files/es/web/api/file/index.html @@ -0,0 +1,112 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - File API + - Interfaz + - Referencia + - Web +translation_of: Web/API/File +--- +
{{APIRef }}
+ +

La interfaz File provee información acerca de los archivos y permite que el código JavaScript en una página web tenga acceso a su contenido.

+ +

Los objetos File son generalmente recuperados a través de un objeto {{domxref("FileList")}} retornado como resultado de un usuario seleccionado archivos por medio de un elemento {{ HTMLElement("input") }} , desde las operaciones drag y drop de un objeto  {{domxref("DataTransfer")}} , o desde la API mozGetAsFile() en un {{ domxref("HTMLCanvasElement") }}. En Gecko, desde código con privilegios es posible crear objetos File representando cualquier archivo local sin esperar la interacción del usuario (ver {{anch("Implementation notes")}} para más información.)

+ +

Un objeto File es una especie específica de {{DOMxRef("Blob")}}, y puede ser utilizada en cualquier contexto que un Blob puede ser usado. En particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL()")}}, {{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, y {{DOMxRef("XMLHttpRequest", "", "send()")}} aceptan tanto Blobs y Files.

+ +

Ver Utilizando archivos desde aplicaciones web (Using files from web applications) para más información y ejemplos.

+ +

{{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{domxref("File.File", "File()")}}
+
Retorna un nuevo objeto de tipo File.
+
+ +

Propiedades

+ +
+
{{DOMxRef("File.lastModified")}}{{ReadOnlyInline}}
+
Retorna el último tiempo que el archivo se modifico, en milisegundos desde la época de UNIX (1 de enero de 1970 a medianoche).
+
{{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}}{{ReadOnlyInline}} {{Gecko_MinVersion_Inline("15.0")}}
+
Retorna la última fecha (en un objeto {{JSxRef("Date")}}Date) de modificación del archivo referenciada por el objeto File.
+
{{DOMxRef("File.name")}}{{ReadOnlyInline}}
+
Retorna el nombre del archivo referenciada por el objeto File.
+
{{DOMxRef("File.webkitRelativePath")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+
Retorna la ruta relativa de la URL del {{DOMxRef("File")}}.
+
+

File implementa {{DOMxRef("Blob")}}, así que también cuenta con las siguientes propiedades:

+
+
{{DOMxRef("File.size")}}{{ReadOnlyInline}}
+
Retorna el tamaño del archivo en bytes.
+
{{DOMxRef("File.type")}}{{ReadOnlyInline}}
+
Retorna el tipo MIME del archivo.
+
+ +

Métodos

+ +

La interfaz File no define algún método, pero los hereda de la interfaz {{domxref("Blob")}}:

+ +
+
{{DOMxRef("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
Retorna un nuevo objeto Blob conteniendo la información en el rango especificado de bytes de la fuente Blob.
+
{{DOMxRef("Blob.stream()")}}
+
Transforma el archivo File en un {{DOMxRef("ReadableStream")}} que puede ser usado para leer el contenido de File.
+
{{DOMxRef("Blob.text()")}}
+
Transforma el archivo File en una corriente (stream) para leerse hasta completarse. Retorna una promesa que se resuelve con un {{DOMxRef("USVString")}} (texto).
+
{{DOMxRef("Blob.arrayBuffer()")}}
+
Transforma el archivo File en una corriente y leerlo hasta completarse. Devuelve una promesa que resuelve con un {{DOMxRef("ArrayBuffer")}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad en Navegadores

+ +
+ + +

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

+
+ +

Notas de Implementación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/file/lastmodifieddate/index.html b/files/es/web/api/file/lastmodifieddate/index.html new file mode 100644 index 0000000000..8e322a2eec --- /dev/null +++ b/files/es/web/api/file/lastmodifieddate/index.html @@ -0,0 +1,101 @@ +--- +title: File.lastModifiedDate +slug: Web/API/File/lastModifiedDate +tags: + - API + - Archivo + - Archivos + - Deprecado + - File API + - Propiedad + - Referencia + - Solo lectura +translation_of: Web/API/File/lastModifiedDate +--- +
{{APIRef("File API") }} {{deprecated_header}}
+ +

La propiedad de solo lectura File.lastModifiedDate retorna la fecha de ultima modificacion del archivo. Archivos sin una ultima fecha de modificacion conocida retornan la fecha actual.

+ +

Sintaxis

+ +
var time = instanceOfFile.lastModifiedDate
+ +

Valor

+ +

Un objeto Date.

+ +

Ejemplo

+ +
// fileInput es un HTMLInputElement: <input type="file" multiple id="myfileinput">
+var fileInput = document.getElementById("myfileinput");
+
+// files es un objeto FileList (similar a NodeList)
+var files = fileInput.files;
+
+for (var i = 0; i < files.length; i++) {
+  alert(files[i].name + " tiene una fecha de ultima modificacion el " + files[i].lastModifiedDate);
+}
+ +

Especificaciones

+ +

Aunque estaba presente en las primeras versiones de la especificacion de File API, esta propiedad ha sido eliminada de esta y ahora es no-estandar. Usar {{domxref("File.lastModified")}} como reemplazo.

+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.lastModified13.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}10.016.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.lastModified{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vea también

+ + diff --git a/files/es/web/api/file/name/index.html b/files/es/web/api/file/name/index.html new file mode 100644 index 0000000000..c03fefb77e --- /dev/null +++ b/files/es/web/api/file/name/index.html @@ -0,0 +1,70 @@ +--- +title: File.name +slug: Web/API/File/name +tags: + - API + - Archivo + - Archivos + - Propiedad + - Referencia +translation_of: Web/API/File/name +--- +

{{APIRef("File API")}}

+ +

Retorna el nombre del archivo representado por el objeto {{domxref("File")}}. Por razones de seguridad, la ruta de directorios es excluida de esta propiedad.

+ +

Sintaxis

+ +
var nombre = file.name;
+ +

Valor

+ +

Una cadena, conteniendo el nombre del archivo sin la ruta de directorios, por ejemplo: "Mi resumen.rtf".

+ +

Ejemplo

+ +
<input type="file" multiple onchange="processSelectedFiles(this)">
+
+ +
function processSelectedFiles(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i < files.length; i++) {
+    alert("Filename " + files[i].name);
+  }
+}
+ +

Prueba el resultado:

+ +

{{ EmbedLiveSample('Example', 300, 50) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('File API', '#file-attrs', 'name')}}{{Spec2('File API')}}Definicion inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("api.File.name")}}

+
+ +

Vea también

+ + diff --git a/files/es/web/api/file/type/index.html b/files/es/web/api/file/type/index.html new file mode 100644 index 0000000000..b433446aa4 --- /dev/null +++ b/files/es/web/api/file/type/index.html @@ -0,0 +1,72 @@ +--- +title: File.type +slug: Web/API/File/type +tags: + - API + - Archivos + - File API + - Propiedad + - Referencia + - Tipo de archivo +translation_of: Web/API/File/type +--- +
{{APIRef("File API")}}
+ +

Retorna el tipo de media (MIME) del archivo representado por un objeto {{domxref("File")}}.

+ +

Sintaxis

+ +
var tipo = file.type;
+ +

Valor

+ +

Una cadena (string), conteniendo el tipo de media (MIME) indicando el tipo del archivo, por ejemplo "image/png" para imágenes PNG.

+ +

Ejemplo

+ +
<input type="file" multiple onchange="mostrarTipo(this)">
+
+ +
function mostrarTipo(fileInput) {
+  const archivos = fileInput.files;
+
+  for (let i = 0; i < archivos.length; i++) {
+    const nombre = archivos[i].name;
+    const tipo = archivos[i].type;
+    alert("Nombre del archivo: " + nombre + " , Tipo: " + tipo);
+  }
+}
+ +

Note: Based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type. It is assumed based on the file extension; a PNG image file renamed to .txt would give "text/plain" and not "image/png". Moreover, file.type is generally reliable only for common file types like images, HTML documents, audio and video. Uncommon file extensions would return an empty string. Client configuration (for instance, the Windows Registry) may result in unexpected values even for common types. Developers are advised not to rely on this property as a sole validation scheme.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("api.File.type")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/file/using_files_from_web_applications/index.html b/files/es/web/api/file/using_files_from_web_applications/index.html new file mode 100644 index 0000000000..5aceed9d6a --- /dev/null +++ b/files/es/web/api/file/using_files_from_web_applications/index.html @@ -0,0 +1,372 @@ +--- +title: Utilizar ficheros desde aplicaciones web +slug: Web/API/File/Using_files_from_web_applications +tags: + - Basura + - Ficheros + - HTML5 + - HacerNavegadorAgnóstico + - Intermedio + - NecesitaActualizar + - Subir + - ajax actualización +translation_of: Web/API/File/Using_files_from_web_applications +--- +

{{ gecko_minversion_header("1.9.2") }}

+ +

 

+ +

El uso de la API File añadida al DOM en HTML5, ahora hace posible que la página web solicite al usuario que seleccione archivos locales y, a continuación, leer el contenido de esos archivos.  Esta selección se puede hacer, ya sea usando un elemento {{HTMLElement ( "input")}} de HTML o mediante arrastrar y soltar.

+ +

Selección de ficheros utilizando HTML

+ +

Seleccionar solo un fichero usando la API File es sencillo:

+ +
<input type="file" id="input" onchange="handleFiles(this.files)">
+
+ +

Cuando el usuario elige el fichero, la función handleFiles() es llamada con un objeto FileList el cual a su vez contiene un objeto File que representa el fichero elegido por el usuario.

+ +

Si se prefiere permitir al usuario elegir varios ficheros, entonces se pone el atributo multiple en el elemento input:

+ +
<input type="file" id="input" multiple="true" onchange="handleFiles(this.files)">
+
+ +

En este caso, la lista de ficheros pasada a la función handleFiles() contiene un objeto File por cada fichero seleccionado por el usuario. 

+ +

{{ h2_gecko_minversion("Using hidden file input elements using the click() method", "2.0") }}

+ +

Comenzando en Gecko 2.0 {{ geckoRelease("2.0") }}, se puede ocultar el realmente feo {{ HTMLElement("input") }} y representar tu propio interfaz para abrir el picker de ficheros y pintar que fichero o ficheros ha seleccionado el usuario. Esto se puede hacer añadiendo al elemento input la característica "display:none" en su css, o estilo y llamando al método click() del elemento {{ HTMLElement("input") }}.

+ +

Como aparece en este HTML:

+ +
<form>
+  <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+</form>
+
+<a href="javascript:doClick()">Select some files</a>
+
+ +

Tu método doClick() puede parecerse al siguiente:

+ +
function doClick() {
+  var el = document.getElementById("fileElem");
+  if (el) {
+    el.click();
+  }
+}
+
+ +

Obviamente puedes cambiar como quieras, el estilo del botón para abrir el picker de ficheros.

+ +

Añadir dinámicamente un listener tipo change

+ +

Si tu campo input ha sido creado usando una libreria JavaScript como jQuery, se necesitará usar {{ domxref("element.addEventListener()") }} para añadir el manejador de eventos tipo change, como en el ejemplo siguiente:

+ +
var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  var fileList = this.files;
+
+  /* now you can work with the file list */
+}
+
+ +

Nota: en este caso, la función handleFiles() mira la lista de ficheros con la finalidad de aceptar un parametro, mientras los eventos listeners sean añadidos de esta manera no pueden aceptar un parametro del input.

+ +

{{ h1_gecko_minversion("Using blob URLs", "2.0") }}

+ +

Gecko 2.0 {{ geckoRelease("2.0") }} introduce soporte para los métodos de DOM {{ domxref("window.createBlobURL()") }} y {{ domxref("window.revokeBlobURL()") }}. El cual te permite crear un simple string con la URL que referenciar cualquier dato que pueda referenciar usando un objeto File DOM, esto incluye los ficheros locales del usuario del dispositivo.

+ +

Cuando tienes un objeto File te gusta poder referenciarlo con una URL desde el HTML, la manera de crear tu propio blob URL para poder hacer esto es la siguiente:

+ +
var blobURL = window.createBlobURL(fileObj);
+
+ +

El blob URL es un string que identifica el objeto File. Cada vez que se llama a {{ domxref("window.createBlobURL()") }}, un único blob URL se crea. Cada vez que esto pasa debe de ser liberado. Cuando el documento se cierra, se libera automáticamente, pero si tu página lo usa dinámicamente deberás liberarlos explicitamente llamando a {{ domxref("window.revokeBlobURL()") }}:

+ +
window.revokeBlobURL(blobURL);
+
+ +

Selección de ficheros usando drag and drop

+ +

También se puede dejar al usuario arrastrar los ficheros en tu aplicación web.

+ +

El primer paso para establecer la zona de arrastre, el lugar en donde dejar los ficheros arrastrados. La parte exacta en donde se coloque esta zona de arrastre dentro de tu aplicación, dependerá del diseño de la aplicación, pero crear el elemento es sencillo:

+ +
var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

En este ejemplo se transforma el elemento de ID "dropbox" en la zona de arrastre. Esto se hace añadiendo listeners para lo eventos de dragenter, dragover, y drop.

+ +

Realmente en este caso no se necesita hacer nada con los eventos dragenter y dragover, por lo que ambas funciones seran muy sencillas. Sólo pararán la propagacion de eventos y prevendran las acciones por defecto:

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

La verdadera magia ocurre en la función drop():

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Aquí se recupera el campo dataTransfer del evento, a partir de ahi se extraen la lista de ficheros, y se pasan a handleFiles(). A partir de este punto se manejan los ficheros de igual manera tanto si se han obtenido usado el elemento input o drag and drop.

+ +

Recuperando la información de los ficheros selecionados

+ +

El objeto FileList es dado por el DOM y lista todos los ficheros selecionados por el usuario, cada uno es un objeto File. Para determinar el número de ficheros que han sido seleccionados se comprueba la longitud de la lista con el atributo length:

+ +
var numFiles = files.length;
+
+ +

Al objeto File se accede de manera sencilla, accediendo a la lista como si fuera un array:

+ +
for (var i = 0; i < files.length; i++) {
+  var file = files[i];
+  ..
+}
+
+ +

El bucle itera por todos los ficheros de la lista.

+ +

Cada objeto File tiene tres atributos que contienen información util sobre el fichero.

+ +
+
name
+
Es de solo lectura y es el nombre del fichero sin ninguna información sobre el path.
+
size
+
Es de solo lectura y es el tamaño del fichero en bytes como un entero de 64-bit.
+
type
+
Es de solo lectura y contiene MIME type del fichero, o "" si el tipo no puede ser determinado.
+
+ +

Ejemplo: Mostrando miniaturas de una selección de imágenes del usuario

+ +

Digamos que usted esta desarrollando el próximo gran sitio web para compartir fotos, y quiere usar HTML5 para mostrar previsualizaciones de miniaturas de imágenes antes de que el usuario actual las suba. Basta con establecer su elemento input o zona de arrastre como se indicó anteriormente, y hacer una llamada a una función handleFiles() como la siguiente.

+ +
function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+    var imageType = /image.*/;
+
+    if (!file.type.match(imageType)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img);
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Aquí nuestro bucle recorre los archivos seleccionados por el usuario y mira el atributo type de cada archivo para ver si es una imagen (haciendo que una expresión regular coincida con la cadena de texto "image.*"). Para cada archivo que sea una imagen, creamos un nuevo elemento img. Se puede usar CSS para establecer bordes bonitos, sombras, y especificar el tamaño de la imagen, el de manera que ni siquiera necesita hacerse aquí.

+ +

Cada imagen tiene la clase CSS "obj" añadida, para hacerla mas fácil buscarla en el árbol del DOM. Además añadimos un atributo file a cada imagen especificando el Fichero para la imagen; esto nos permitira traer el hecho de subir las imágenes más tarde. Finalmente, usamos {{ domxref("Node.appendChild()") }} para añadir la nueva miniatura en el área de la previsualización de nuestro documento.

+ +

A continuación establecemos el FileReader para controlar la carga de la imagen de forma asíncrona y enlazarla con el elemento img. Después de crear el nuevo objeto FileReader, configuramos su función onload, luego llamamos a readAsDataURL() para comenzar la operación de lectura en segundo plano. Cuando el contenido completo de la imagen ha sido cargado, se convierte a  data: URL, el cuál es pasado al callback onload. Nuestra implementación de esta rutina simplemente establece el atributo src del elemento img cargado, cuyo resultado es la imagen apareciendo en la miniatura en la pantalla del usuario.

+ +

{{ h1_gecko_minversion("Example: Using blob URLs to display images", "2.0") }}

+ +

Este ejemplo el objeto blob URLs para mostrar las miniaturas de las imágenes. Además, se muestra otra información del archivo incluyendo sus nombres y tamaños. Tú puedes ver el ejemplo (tenga en cuenta que se requiere una versión Nghtly de Firefox del 23 de september 23 o mas reciente, o Firefox 4.0 beta 7).

+ +

El HTML que representa la interfaz es::

+ +
<form>
+  <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+</form>
+<a href="javascript:doClick()">Seleccione algunos archivos</a>
+<div id="fileList">
+  <p>¡No se han seleccionado archivos!</p>
+</div>
+
+ +

Esto establece nuestro elemento {{ HTMLElement("input") }} de nuestro, así como un enlace que invoca el selector de archivos, ya que mantenmos el input file oculto para prevenir mostrar un UI menos atractivo. Esto se explica anteriormente en al la sección {{ anch("Using hidden file input elements using the click() method") }}, así como el método doClick() que invoca el el selector de archivos.

+ +

El método handleFiles() es el siguiente:

+ +
function handleFiles(files) {
+  var d = document.getElementById("fileList");
+  if (!files.length) {
+    d.innerHTML = "<p>¡No se han seleccionado archivos!</p>";
+  } else {
+    var list = document.createElement("ul");
+    d.appendChild(list);
+    for (var i=0; i < files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.createBlobURL(files[i]);;
+      img.height = 60;
+      img.onload = function() {
+        window.revokeBlobURL(this.src);
+      }
+      li.appendChild(img);
+
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+
+ +

Esto comienza buscando la URL del {{ HTMLElement("div") }} con la ID "fileList". Este es el bloque donde vamos a insertar la lista de archivos incluyendo las miniaturas.

+ +

Si el objeto {{ domxref("FileList") }} pasado a handleFiles() es null, simplemente establecemos el bloque inner HTML para mostrar "¡No se han seleccionado archivos!". En caso contrario, comenzamos a construir nuestra lista de archivos como sigue:

+ +
    +
  1. Un nuevo elemento de lista desordenada ({{ HTMLElement("ul") }} es creado.
    2. +
  2. El nuevo elemento de la lista es insertado en el bloque {{ HTMLElement("div") }} llamando a si método {{ domxref("element.appendChild()") }}.
    3. +
  3. Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado files: +
      +
    1. Se crea un nuevo elemento de lista ({{ HTMLElement("li") }}) y lo inserta en la lista.
      2. +
    2. Se crea un nuevo elemento imagen ({{ HTMLElement("img") }}).
      3. +
    3. Establece en la fuente de la imagen un nuevo blob URL representandoel archivo, usando {{ domxref("window.createBlobURL()") }} para crear el blob URL.
      4. +
    4. Se establece el alto de la imagen en 60 pixels.
      5. +
    5. Se configura el controlador para el evento load para liberar el blob URL, puesto que ya no es necesario una vez que la imagen ha sido cargada. Esto se hace llamando al método {{ domxref("window.revokeBlobURL()") }}, pasando la cadena en el blob URL como se ha especificado para img.src.
      6. +
    6. Se añade el nuevo elemento de la lista a la lista.
      7. +
    +
    4. +
+ +

Ejemplo: Subiendo un archivo seleccionado por el usuario

+ +

Otra cosa que podrías querer hacer es dejar que el usuario suba el archivo o los archivos seleccionados (como las imagenes seleccionadas usando el ejemplo anterior) al servidor. Esto se puede hacer de forma asíncrona muy facilmente.

+ +

Creando las tareas de subida

+ +

Continuando con el código que contruye las miniaturas en el ejemplo anterior, hay que recordar que cada imagen en miniatura se encuentra en la clase CSS "obj", con el correspondiente File adjunto en un attributo file. Vamos a seleccionar todas las imágenes que el usuario ha seleccionado facilmente para subirlas usando {{ domxref("Document.querySelectorAll()") }}, como sigue:

+ +
function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

La segunda línea crea un array, llamado imgs, de todos los elementos  en el documento con la clase CSS "obj". En nuestro caso, estos serán todas las miniaturas de las imágenes. Una vez que tenemos esa lista,    of all the elements in the document with the CSS class "obj". In our case, these will be all the image thumbnails. Once we have that list, es trivial pasar por la lista, creando una nueva instancia de FileUpload por cada una. Subiendo el correspondiente archivo por cada uno de ellos.

+ +

Manipulando el proceso de carga de un archivo

+ +

La función FileUpload acepta dos entradas: un elemento de imagen y un archivo desde el que leer los datos de la imagen.

+ +
function FileUpload(img, file) {
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var 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');
+  xhr.sendAsBinary(file.getAsBinary());
+}
+
+ +

La función FileUpload() mostrada arriba crea un throbber, el cual es usado para mostrar la información del progreso, a continuación se crea un XMLHttpRequest para manejar la subida de los datos.

+ +

Antes de subir los datos de hecho, se toman varias medidas preparatorias:

+ +
    +
  1. El listener del progreso de la carga del XMLHttpRequest's se configura para actualizar el throbber con una nueva información de porcentaje, por lo que a medida que progresa la carga, el throbber será actualizado en base a la última información.
    2. +
  2. El evento "load" de la carga del XMLHttpRequest's se configura para actualizar el throbber con el 100% como la información de progreso (para asegurar que el indicador de progreso realmente alcanza el 100%, en caso de las peculiaridades de granularidad durante el proceso). Entoces se elimina el throbber, puesto que ya no es necesario. Esto causa que el throbber desaparezca una vez la carga está completa.
    3. +
  3. La petición para cargar la imagen se inicia llamando al método XMLHttpRequest's open() para comenzar a generar una petición de tipo POST.
    4. +
  4. El MIME type para la carga se establece llamando a la función deXMLHttpRequest overrideMimeType(). En este caso, estamos usando un MIME type genérico; usted puede o no puede necesitar establecer MIME type en absoluto, dependiendo de su necesidad.
    5. +
  5. Finalmente, se llama a la función sendAsBinary() del XMLHttpRequest es llamada para subir el contenido del archivo. TEsto es necesario ser revisado, actualmete se está usando la rutina sincronizada en desuso getAsBinary() para extraer los datos del archivo..
    6. +
+ +

Manipulación del proceso de carga para un archivo, de forma asíncrona

+ +
function fileUpload(file) {
+  // Please report improvements to: marco.buratto at tiscali.it
+
+  var fileName = file.name;
+  var fileSize = file.size;
+  var fileData = file.getAsBinary(); // works on TEXT data ONLY.
+
+  var boundary = "xxxxxxxxx";
+  var uri = "serverLogic.php";
+
+  var xhr = new XMLHttpRequest();
+
+  xhr.open("POST", uri, true);
+  xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
+  xhr.setRequestHeader("Content-Length", fileSize);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) {
+
+        if (xhr.responseText != "") {
+          alert(xhr.responseText); // display response.
+        }
+      }
+    }
+  }
+
+  var body = "--" + boundary + "\r\n";
+  body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n";
+  body += "Content-Type: application/octet-stream\r\n\r\n";
+  body += fileData + "\r\n";
+  body += "--" + boundary + "--";
+
+  xhr.send(body);
+  return true;
+}
+
+ +

Esto necesita ser modificado para funcionar con datos binarios también.

+ +

Ver también

+ + + +

{{ HTML5ArticleTOC() }}

diff --git a/files/es/web/api/file/webkitrelativepath/index.html b/files/es/web/api/file/webkitrelativepath/index.html new file mode 100644 index 0000000000..749914e234 --- /dev/null +++ b/files/es/web/api/file/webkitrelativepath/index.html @@ -0,0 +1,132 @@ +--- +title: File.webkitRelativePath +slug: Web/API/File/webkitRelativePath +tags: + - Archivo + - Entidades Archivo y Directorio de la API + - File API + - Propiedad + - Referencia + - Solo lectura + - Web +translation_of: Web/API/File/webkitRelativePath +--- +

{{APIRef("File API")}}{{non-standard_header}}

+ +

La propiedad File.webkitRelativePath de solo lectura contiene un {{domxref("USVString")}} el cual especifica la ruta relativa del archivo al directorio seleccionado por el usuario en un elemento {{HTMLElement("input")}} con su {{htmlattrxref("webkitdirectory", "input")}} atributo definido.

+ +

Sintaxis

+ +
var rulaRelativa = File.webkitRelativePath
+ +

Valor

+ +

Un {{domxref("USVString")}} conteniendo la ruta del archivo relativa al directorio padre seleccionado por el usuario.

+ +

Ejemplo

+ +

En este ejemplo,un seleccionador de directorios es mostrado al usuario para permitirle seleccionar uno o mas directorios. Cuando el evento {{event("change")}} ocurre, una lista de todos los archivos contenidos dentro de la gerarquia de directorio seleccionado es generado y mostrado.

+ +

HTML

+ +
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
+<ul id="listing"></ul>
+ +

JavaScript

+ +
document.getElementById("filepicker").addEventListener("change", function(event) {
+  let output = document.getElementById("listing");
+  let files = event.target.files;
+
+  for (let i=0; i<files.length; i++) {
+    let item = document.createElement("li");
+    item.innerHTML = files[i].webkitRelativePath;
+    output.appendChild(item);
+  };
+}, false);
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{ SpecName('File System API', '#dom-file-webkitrelativepath', 'webkitRelativePath') }}{{ Spec2('File System API') }}Especificacion inicial.
+ +

Esta API no tiene especificacion W3C o WHATWG.

+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico13 {{ property_prefix("webkit") }}{{ CompatGeckoDesktop(49) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidChrome para AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basico{{ CompatNo }}0.16 {{ property_prefix("webkit") }}{{ CompatGeckoMobile(49) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

Vea también

+ + diff --git a/files/es/web/api/fileerror/index.html b/files/es/web/api/fileerror/index.html new file mode 100644 index 0000000000..c748ea51af --- /dev/null +++ b/files/es/web/api/fileerror/index.html @@ -0,0 +1,193 @@ +--- +title: FileError +slug: Web/API/FileError +translation_of: Web/API/FileError +--- +

{{APIRef("File System API")}}{{obsolete_header()}}

+ +

Se ha presentado un error al utilizar la interfaz {{ domxref("FileReader") }}.

+ +
+

Nota: Esta interfaz es obsoleta de acuerdo a la última especificación. Use la nueva DOM4 {{ domxref("DOMError") }} en su lugar.

+
+ +

La File System API, a FileError Representa un error que puede surgir al acceder al sistema de archivos utilizando la API asíncrona. Se extiende la interfaz FileERror descrita en la escritura del archivo y añadiendo así códigos de error nuevos.

+ +

FileError Objects son pasados una vez se haya lanzado un error. Los objetos tiene un código que muestra el tipo de error que haya ocurrido.

+ +

Mejores prácticas

+ +

La mayoría de la gente no lee la página de errores y excepciones a menos que estén perpletos. Así que los siguientes tips, son algúnos consejos que podrían ayudar a evitar algunos problemas.

+ +

Errores de retrollamada.

+ +

Aunque las devoluciones de llamada de error son opcionales, usted debe incluirlos en los argumentos de los métodos. Una aplicación web puede fallar por diversas razones, por lo que no requiere pasar el resto de su día adivinando lo que está pasando y/o realizando el sistema.

+ +

No haga funcionar su aplicación desde ruta://  (file://)

+ +

Por razones de seguridad, los navegadores no le permiten ejecutar su aplicación desde file://. De hecho, muchas de las API de almacenamiento de gran alcance(como sistema de archivos, BlobBuilder y FileReader) lanzan errores si ejecuta la aplicación a nivel local de file://. Cuando estás haciendo una prueba de su aplicación y no deseas configurar un servidor web, puede pasarse por alto la restricción de seguridad en Chrome. Simplemente comienza a Chrome con la restricción de seguridad en Chrome con la bandera --allow-file- access-from-files Utilice la bandera sólo para propósitos de prueba.

+ +

Tradución a español en proceso...

+ +

Hasta el momento se ha traducido hasta este punto, las tablas que verás a continuación contienen pequeñas descripciones báscicas de la implementación y el análisis del tema que se está observando.

+ +

Atributo

+ + + + + + + + + + + + + + + + +
AttributeTypeDescription
codeunsigned shortThe most appropriate error code for the condition. See {{anch("Error codes")}} for possible values.
+ +

Error codes

+ +

{{ Note("Do not rely on the numeric values of the constants, which might change as the specifications continue to change. Use the constant names instead.") }}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
ENCODING_ERR5The URL is malformed. Make sure that the URL is complete and valid.
INVALID_MODIFICATION_ERR9The modification requested is not allowed. For example, the app might be trying to move a directory into its own child or moving a file into its parent directory without changing its name.
INVALID_STATE_ERR7The operation cannot be performed on the current state of the interface object. For example, the state that was cached in an interface object has changed since it was last read from disk.
NO_MODIFICATION_ALLOWED_ERR6The state of the underlying file system prevents any writing to a file or a directory.
NOT_FOUND_ERR1A required file or directory could not be found at the time an operation was processed. For example, a file did not exist but was being opened.
NOT_READABLE_ERR4The file or directory cannot be read, typically due to permission problems that occur after a reference to a file has been acquired (for example, the file or directory is concurrently locked by another application).
PATH_EXISTS_ERR12The file or directory with the same path already exists.
QUOTA_EXCEEDED_ERR10Either there's not enough remaining storage space or the storage quota was reached and the user declined to give more space to the database. To ask for more storage, see Managing HTML5 Offline Storage.
SECURITY_ERR2 +

Access to the files were denied for one of the following reasons:

+ +
    +
  • The files might be unsafe for access within a Web application.
    • +
  • Too many calls are being made on file resources.
    • +
  • Other unspecified security error code or situations.
    • +
+
TYPE_MISMATCH_ERR11The app looked up an entry, but the entry found is of the wrong type. For example, the app is asking for a directory, when the entry is really a file.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}0.16{{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Gecko notes

+ + + +

See also

+ + diff --git a/files/es/web/api/filereader/index.html b/files/es/web/api/filereader/index.html new file mode 100644 index 0000000000..d5d0f5e349 --- /dev/null +++ b/files/es/web/api/filereader/index.html @@ -0,0 +1,182 @@ +--- +title: FileReader +slug: Web/API/FileReader +translation_of: Web/API/FileReader +--- +

{{ APIRef("File API") }}

+ +

Sumario

+ +

 

+ +

El objeto FileReader permite que las aplicaciones web lean ficheros (o información en buffer) almacenados en el cliente de forma asíncrona, usando los objetos {{domxref("File")}} o {{domxref("Blob")}} dependiendo de los datos que se pretenden leer.

+ +

 

+ +

El objeto File puede ser obtenido desde un objeto {{domxref("FileList")}} devuelto como resultado de la selección de archivos por parte del usuario en un elemento {{HTMLElement("input")}}, desde el objeto DataTransfer producido por una operación de arrastre (drag and drop) o desde la API mozGetAsFile () en un {{domxref("HTMLCanvasElement")}}.

+ +

Constructor

+ +
FileReader FileReader();
+ +

Mira el artículo Using files from web applications para más detalles y ejemplos.

+ +

Propiedades

+ +
+
{{domxref("FileReader.error")}} {{readonlyinline}}
+
Un {{domxref("DOMError")}} que representa el error que ocurrió al momento de leer el archivo.
+
{{domxref("FileReader.readyState")}} {{readonlyinline}}
+
Devuelve un entero que indica el estado de FileReader. Puede ser uno de los siguientes: + + + + + + + + + + + + + + + + + + +
EMPTY0No ha sido leido ningún dato aún.
LOADING1La información está siendo leída.
DONE2Se ha completado la solicitud de lectura.
+
+
{{domxref("FileReader.result")}} {{readonlyinline}}
+
El contenido del fichero. Esta propieda es válida solo cuando la propiedad FileReader.readyState es 2, es decir, cuando la lectura ha finalizado. El formato de la información depende de los métodos usados al iniciar la operación de lectura.
+
+ +

Controladores de eventos

+ +
+
{{domxref("FileReader.onabort")}}
+
Un controlador para el evento {{event("abort")}}. Este evento se activa cada vez que se interrumpe la operación de lectura.
+
{{domxref("FileReader.onerror")}}
+
Un controlador para el evento {{event("error")}}. Este evento se activa cada vez que la operación de lectura encuentra un error.
+
{{domxref("FileReader.onload")}}
+
Un controlador para el evento {{event("load")}}. Este evento se activa cada vez que la operación de lectura se ha completado satisfactoriamente.
+
{{domxref("FileReader.onloadstart")}}
+
Un controlador para el evento {{event("loadstart")}}. Este evento se activa cada vez que comienza la lectura.
+
{{domxref("FileReader.onloadend")}}
+
Un controlador para el evento {{event("loadend")}}. Este evento se activa cada vez que  la operación de lecura se ha completado (ya sea con éxito o fallo).
+
{{domxref("FileReader.onprogress")}}
+
Un controlador para el evento {{event("progress")}}. Este evento se activa mientras se está leyendo el contenido del objeto {{domxref("Blob")}}.
+
+ +
+

Nota: Como FileReader hereda de {{domxref("EventTarget")}}, todos esos eventos también pueden ser escuchados usando el método {{domxref("EventTarget.addEventListener()","addEventListener")}}.

+
+ +

 

+ +

Métodos

+ +

 

+ +
+
{{domxref("FileReader.abort()")}}
+
Interrumpe la operación de lectura. A su regreso readyState será DONE.
+
{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}
+
Comienza la lectura del contenido del objeto {{ domxref("Blob") }} especificado, una vez terminada, el atributo result contiene un  {{domxref("ArrayBuffer")}} representando los datos del fichero.
+
{{domxref("FileReader.readAsBinaryString()")}}
+
Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo result contiene los datos binarios en bruto del archivo como una cadena.
+
{{domxref("FileReader.readAsDataURL()")}}
+
Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo result contiene un data: URL que representa los datos del fichero.
+
{{domxref("FileReader.readAsText()")}}
+
Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo result contiene el contenido del fichero como una cadena de texto.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API','#FileReader-interface','FileReader')}}{{Spec2('File API')}}Definición inicial.
+ +

Soporte en los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet Explorer*Opera*Safari
Soporte básico{{ CompatGeckoDesktop("1.9.2") }}71012.026.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Soporte básico3231011.56.1
+
+ +

Notas de implementación

+ + + +

Notas específicas para Gecko

+ + + +

See also

+ + diff --git a/files/es/web/api/filereader/onload/index.html b/files/es/web/api/filereader/onload/index.html new file mode 100644 index 0000000000..d3172638fd --- /dev/null +++ b/files/es/web/api/filereader/onload/index.html @@ -0,0 +1,29 @@ +--- +title: FileReader.onload +slug: Web/API/FileReader/onload +tags: + - Archivo + - Controlador de Eventos + - Lector de Archivos + - Propiedad + - Referencia +translation_of: Web/API/FileReader/onload +--- +

{{APIRef}}

+ +

La propiedad FileReader.onload contiene un controlador de evento ejecutado cuando {{event('load')}}  es ejecutado, cuando el  contenido es leído con readAsArrayBuffer, readAsBinaryString, readAsDataURL o readAsText está habilitado.

+ +

Ejemplo

+ +
// Respuest desde un <input type="file" onchange="onChange(event)">
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    // El texto del archivo se mostrará por consola aquí
+    console.log(event.target.result)
+  };
+
+  reader.readAsText(file);
+}
+
diff --git a/files/es/web/api/filereader/readasarraybuffer/index.html b/files/es/web/api/filereader/readasarraybuffer/index.html new file mode 100644 index 0000000000..c8ebd96ae7 --- /dev/null +++ b/files/es/web/api/filereader/readasarraybuffer/index.html @@ -0,0 +1,37 @@ +--- +title: FileReader.readAsArrayBuffer() +slug: Web/API/FileReader/readAsArrayBuffer +tags: + - File + - FileReader + - Leer archivo +translation_of: Web/API/FileReader/readAsArrayBuffer +--- +

{{APIRef("File API")}}

+ +

El método readAsArrayBuffer es usado para iniciar la lectura del contenido especificado en {{domxref("Blob")}} o {{domxref("File")}}. Cuando finaliza la operación de lectura, el método {{domxref("FileReader.readyState","readyState")}} devuelve DONE, y el evento {{event("loadend")}} es lanzado. Al mismo tiempo, el atributo {{domxref("FileReader.result","result")}} contiene {{domxref("ArrayBuffer")}} que representa los datos del archivo.

+ +

Sintaxis

+ +
instanceOfFileReader.readAsArrayBuffer(blob);
+ +

Parámetros

+ +
+
blob
+
El {{domxref("Blob")}} o {{domxref("File")}} (archivo) que se va a leer.
+
+ +

Especificaciones

+ +

{{page("/es-ES/docs/Web/API/FileReader","Specifications")}}

+ +

Compatibilidad del navegador

+ +

{{page("/es-ES/docs/Web/API/FileReader","Browser compatibility")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/filereader/readasdataurl/index.html b/files/es/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..a4f7155a70 --- /dev/null +++ b/files/es/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,68 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +tags: + - Archivos + - Referencia + - metodo +translation_of: Web/API/FileReader/readAsDataURL +--- +

{{APIRef("File API")}}

+ +

El método readAsDataURL es usado para leer el contenido del especificado {{domxref("Blob")}} o {{domxref("File")}}.  Cuando la operación de lectura es terminada, el {{domxref("FileReader.readyState","readyState")}} se convierte en DONE, y el {{event("loadend")}} es lanzado. En ese momento, el atributo {{domxref("FileReader.result","result")}} contiene  la información como una URL representando la información del archivo como una cadena de caracteres codificados en base64.

+ +

Sintaxis

+ +
instanceOfFileReader.readAsDataURL(blob);
+ +

Parametros

+ +
+
blob
+
El {{domxref("Blob")}} o {{domxref("File")}} desde el cual leer.
+
+ +

Ejemplo

+ +

HTML

+ +
<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="Image preview...">
+ +

JavaScript

+ +
function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.onloadend = function () {
+    preview.src = reader.result;
+  }
+
+  if (file) {
+    reader.readAsDataURL(file);
+  } else {
+    preview.src = "";
+  }
+}
+ +

Resultado en vivo

+ +

{{EmbedLiveSample("Ejemplo", "100%", 240)}}

+ +
Nota: el constructor FileReader()  no es soportado por Internet Explorer version anterior a la 10. Para una completa compatibilidad de codigo puedes ver nuestra Posibler solución de compatibilidad para vista previa de imagenes entre navegadores. Ve también este ejemplo más poderoso.
+ +

Especificaciones

+ +

{{page("/en-US/docs/Web/API/FileReader","Specifications")}}

+ +

Compatibilidad de navegadores

+ +

{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}

+ +

Tambien ver

+ + diff --git a/files/es/web/api/filereader/readastext/index.html b/files/es/web/api/filereader/readastext/index.html new file mode 100644 index 0000000000..0eaa0e636b --- /dev/null +++ b/files/es/web/api/filereader/readastext/index.html @@ -0,0 +1,109 @@ +--- +title: FileReader.readAsText() +slug: Web/API/FileReader/readAsText +tags: + - API + - File API + - api de lectura de archivos + - leer archivos +translation_of: Web/API/FileReader/readAsText +--- +
{{APIRef("File API")}}
+ +

El método readAsText se usa para leer el contenido de un tipo {{domxref("Blob")}} o {{domxref("File")}}. Cuando la operación de lectura se completa, el atributo {{domxref("FileReader.readyState","readyState")}} cambia a DONE, el evento {{event("loadend")}} se dispara y el atributo {{domxref("FileReader.result","result")}} contiene el contenido del archivo como una cadena de texto.

+ +

Sintaxis

+ +
instanceOfFileReader.readAsText(blob[, encoding]);
+ +

Parametros

+ +
+
blob
+
Una variable de tipo {{domxref("Blob")}} o {{domxref("File")}} de la cual se leerán los datos.
+
encoding {{optional_inline}}
+
Una cadena de texto especificando la codificación de caracteres que se usará en los datos leidos. Por defecto, se utiliza UTF-8 si el parametro no se especifica
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Initial definition
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.2")}}[1]7{{CompatVersionUnknown}}10[2]12.02[3]6.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support323{{CompatVersionUnknown}}1011.56.1
+
+ +

[1] Anterior a Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos los parámetros de tipo {{domxref("Blob")}} eran de tipo {{domxref("File")}} ; esto ha sido actualizado para emparejarse a la especificacion de manera correcta. Anterior a Gecko 13.0 {{geckoRelease("13.0")}} la propiedad FileReader.error devolvía un objeto de tipo {{domxref("FileError")}}. Esta interfaz ha sido eliminada y ahora la propiedad FileReader.error devuelve el objeto {{domxref("DOMError")}} como está definido en el borrador de FileAPI.

+ +

[2] IE9 tiene una File API Lab.

+ +

[3] Opera tiene soporte parcial in 11.1.

+ +

Vea también

+ + diff --git a/files/es/web/api/filereader/result/index.html b/files/es/web/api/filereader/result/index.html new file mode 100644 index 0000000000..83104c8e28 --- /dev/null +++ b/files/es/web/api/filereader/result/index.html @@ -0,0 +1,107 @@ +--- +title: FileReader.result +slug: Web/API/FileReader/result +tags: + - API + - Archivos + - Ficheros +translation_of: Web/API/FileReader/result +--- +
{{APIRef("File API")}}
+ +
 
+ +
La propiedad result de {{domxref("FileReader")}} retorna el contenido del archivo. Esta propiedad es válida únicamente después de que la operación de lectura del archivo es completada. El formato de la infomación devuelta depende de cuál de los métodos de lectura fue usado.
+ +

Sintaxis

+ +
var file = instanceOfFileReader.result
+
+ +

Valor

+ +

Una cadena de texto apropiada o un {{domxref("ArrayBuffer")}} dependiendo de cuál método de lectura haya provocado la operación de lectura. El valor es null si la lectura no se ha completado aún o no fue exitosa.

+ +

Los tipos de resultados son descritos a continuación.

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MétodoDescripción
readAsArrayBuffer()result es un ArrayBuffer de JavaScript que contiene la información binaria.
readAsBinaryString() +

result contiene la información binaria del archivo en una cadena de texto.

+
readAsDataURL() +

result es una cadena de texto que representa una URL con la propiedad data: que contiene la información leída del archivo.

+
readAsText()result es una cadena de texto con el contenido del archivo.
+ +

Ejemplo

+ +

Este ejemplo representa una función read(), que lee un archivo de un file input. Funciona creando un objeto de {{domxref("FileReader")}} y creando un listener para los eventos load de tal manera que cuando el archivo es leído, la propiedad result es obtenida y pasada a la función callback proporcionada a read().

+ +

El contenido es manejado como texto.

+ +
var fileInput = document.querySelector('input[type="file"]');
+
+function read(callback) {
+  var file = fileInput.files.item(0);
+  var reader = new FileReader();
+
+  reader.onload = function() {
+    callback(reader.result);
+  }
+
+  reader.readAsText(file);
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Definición inicial
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.FileReader.result")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/filesystem/index.html b/files/es/web/api/filesystem/index.html new file mode 100644 index 0000000000..62f5e91b4b --- /dev/null +++ b/files/es/web/api/filesystem/index.html @@ -0,0 +1,118 @@ +--- +title: FileSystem +slug: Web/API/FileSystem +translation_of: Web/API/FileSystem +--- +

{{APIRef("File System API")}} {{non-standard_header}}

+ +

La interfaz de la API FileSystem  para la entrada de archivos y directorios es usada para representar un sistema de archivos.  Estos objetos pueden ser obtenidos desde la propiedad {{domxref("FileSystemEntry.filesystem", "filesystem")}} en cualquier entrada del sistema de archivos . Algunos navegadores ofrecen APIs adicionales para crear y administrar el sistema de archivos , como el metodo de Chrome {{domxref("Window.requestFileSystem", "requestFileSystem()")}}.

+ +

This interface will not grant you access to the users filesystem. Instead you will have a "virtual drive" within the browser sandbox. If you want to gain access to the users filesystem you need to invoke the user by eg. installing a Chrome extension. The relevant Chrome API can be found here.

+ +
+

Because this is a non-standard API, whose specification is not currently on a standards track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it. Check the {{anch("Browser compatibility")}} section for details.

+
+ +

Conceptos Basicos

+ +

Hay dos formas de acceder a un objeto FileSystem :

+ +
    +
  1. You can directly ask for one representing a sandboxed file system created just for your web app directly by calling window.requestFileSystem().  If that call is successful, it executes a callback handler, which receives as a parameter a FileSystem object describing the file system.
    2. +
  2. You can get it from a file system entry object, through its {{domxref("FileSystemEntry.filesystem", "filesystem")}} property.
    3. +
+ +

Propiedades

+ +
+
{{domxref("FileSystem.name")}} {{ReadOnlyInline}}
+
A {{domxref("USVString")}} representing the file system's name. This name is unique among the entire list of exposed file systems.
+
{{domxref("FileSystem.root")}} {{ReadOnlyInline}}
+
A {{domxref("FileSystemDirectoryEntry")}} object which represents the file system's root directory. Through this object, you can gain access to all files and directories in the file system.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File System API')}}{{Spec2('File System API')}}Draft of proposed API
+ +

This API has no official W3C or WHATWG specification.

+ +

Compatibilidad entre navegadores 

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte basico13{{ property_prefix("webkit") }}{{ CompatGeckoDesktop(50) }}{{ CompatNo }}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}} {{ property_prefix("webkit") }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo }}0.16{{ property_prefix("webkit") }}{{ CompatGeckoMobile(50) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

[1] Microsoft Edge implements this interface under the name WebKitFileSystem, and supports its use only in drag-and-drop scenarios using the {{domxref("DataTransferItem.webkitGetAsEntry()")}} method. It's not available for use in file or folder picker panels (such as when you use an {{HTMLElement("input")}} element with the {{domxref("HTMLInputElement.webkitdirectory")}} attribute.

+ +

See also

+ + diff --git a/files/es/web/api/fullscreen_api/index.html b/files/es/web/api/fullscreen_api/index.html new file mode 100644 index 0000000000..0914c6d627 --- /dev/null +++ b/files/es/web/api/fullscreen_api/index.html @@ -0,0 +1,297 @@ +--- +title: Fullscreen API +slug: Web/API/Fullscreen_API +translation_of: Web/API/Fullscreen_API +--- +

{{DefaultAPISidebar("Fullscreen API")}}

+ +

La API Fullscreen provee una manera fácil de presentar contenido web usando la pantalla completa del usuario. La API permite indicar al navegador que un elemento y sus hijos, si los tiene, ocupar la pantalla completa, ocultando toda la interfaz del usuario y otras aplicaciones de la pantalla mientras se esté en pantalla completa.

+ +
+

De momento, no todos los navegadores usan la versión sin prefijo de la API. Consulta la tabla que resume las diferencias de prefijos y nombres.

+
+ +

Activando modo de pantalla completa

+ +

Para cualquier elemento que quieras presentar en pantalla completa (como por ejemplo, un elemento {{ HTMLElement("video") }}), puedes presentarlo en pantalla completa, simplemente invocando a su método requestFullscreen().

+ +

Consideremos este elemento {{ HTMLElement("video") }}:

+ +
<video controls id="myvideo">
+  <source src="somevideo.webm"></source>
+  <source src="somevideo.mp4"></source>
+</video>
+
+ +

Podemos poner este video en pantalla completa con un script como éste:

+ +
var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+}
+
+ +

Diferencias de presentación

+ +

Cabe aclarar una diferencia clave entre las implementaciones de Gecko y WebKit: Gecko automáticamente añade reglas CSS al elemento para ajustarlo a las dimensiones de la pantalla: "width: 100%; height: 100%". WebKit no hace esto; en su lugar, centra el elemento con su mismo tamaño original en un fondo negro. Para obtener el mismo comportamiento en WebKit, necesitas añadir manualmente las reglas CSS "width: 100%; height: 100%;" al elemento:

+ +
#myvideo:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+ +

Por otro lado, si quieres emular el comportamiento de WebKit en Gecko, necesitarías colocar el elemento a presentar dentro de otro elemento, con las reglas CSS necesarias para ajustarlo a la apariencia requerida, y será dicho elemento contenedor el que se establecerá para aparecer en pantalla completa.

+ +

Notificación

+ +

Cuando el modo de pantalla completa sea invocado exitosamente, el documento que contiene al elemento recibe un evento {{ event("fullscreenchange") }}. Cuando se sale del modo de pantalla completa, el documento recibe de nuevo un evento {{ event("fullscreenchange") }}. Nótese que el evento {{ event("fullscreenchange") }} no provee información alguna sobre si el documento está entrando o saliendo a modo de pantalla completa, pero puedes saber si está en dicho modo si la propiedad {{ domxref("document.fullscreenElement", "fullscreenElement") }} del documento no es nula.

+ +

Cuando la solicitud de pantalla completa falla

+ +

No es garantía que se pueda cambiar a modo de pantalla completa. Por ejemplo, los elementos {{ HTMLElement("iframe") }} tienen un atributo {{ HTMLAttrXRef("allowfullscreen", "iframe") }} para decidir si se permitirá que el contenido se muestre en pantalla completa. Además, ciertos tipos de contenido, como plug-ins en ventana, no pueden ser presentados en modo de pantalla completa. Intentar hacerlo con elementos que no lo permitan (o el padre o descendente de un elemento así), no funcionará. En su lugar, el elemento que solicitó la pantalla completa recibirá un evento fullscreenerror. En Firefox, cuando falla una solicitud de pantalla completa, el navegador registrará un mensaje de error en la consola, explicando la falla de la solicitud. En Chrome y versiones recientes de Opera, sin embargo, no se genera ninguna advertencia.

+ +
+

Nota: Las solicitudes de pantalla completa necesitan ser invocadas dentro de un manejador de eventos, o de otro modo, serán denegadas.

+
+ +

Saliendo del modo de pantalla completa

+ +

El usuario siempre tendrá la habilidad de salir del modo de pantalla completa por su propia cuenta; véase {{ anch("Things_your_users_want_to_know", "Cosas que los usuarios querrán saber") }}. Incluso se puede hacer programáticamente, llamando al método {{domxref("exitFullscreen()")}}.

+ +

Otra información

+ +

El objeto {{ domxref("document") }} provee información adiciional que puede ser útil al desarrollar aplicaciones de pantalla completa:

+ +
+
{{ domxref("document.fullscreenElement", "fullscreenElement") }}
+
El atributo fullscreenElement apunta al {{ domxref("element", "elemento") }} actualmente en modo pantalla. Si no es nulo, el documento está en pantalla completa, y si es nulo, no lo está.
+
{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
+
El atributo fullscreenEnabled indica si el documento está actualmente en un estado que permitiría solicitudes al modo de pantalla completa.
+
+ +

Cosas que los usuarios querrán saber

+ +

Puedes asegurarte de hacer saber a los usuarios que pueden presionar la tecla ESC (o F11) para salir del modo de pantalla completa.

+ +

Adicionalmente, navegando a otra página, cambiando de pestaña, o cambiando a otra aplicación(usando, por ejemplo, Alt-Tab) mientras se está en pantalla completa, también se saldrá de dicho modo.

+ +

Ejemplo

+ +

En este ejemplo, se presenta un video en una página web. Presionando la tecla Return o Enter el usuario podrá moverse entre modo de ventana o de pantalla completa para la presentación del video.

+ +

Ver ejemplo en vivo

+ +

Observando la tecla Enter

+ +

Cuando la página se carga, este código se ejecuta para establecer un evento para cuando se presione la tecla Enter.

+ +
document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+
+ +

Cambiando entre modo de pantalla completa y modo de ventana

+ +

Este código es llamado cuando el usuario presiona la tecla Enter, como se ve arriba.

+ +
function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+
+ +

En este código, primero se observa si el atributo fullscreenElement de {{ domxref("document") }} (comprobando si tiene prefijo moz, ms, o webkit). Si es null, el documento está en modo de ventana actualmente, así que necesitamos cambiarlo a modo de pantalla completa. Esto se hace llamando a la función {{ domxref("element.requestFullscreen()") }}.

+ +

Si el modo de pantalla completa está activado (fullscreenElement no es null), llamamos a la función {{ domxref("document.exitFullscreen()") }}.

+ +

Prefijado

+ +

De momento, no todos los navegadores están implementando la versión sin prefijo de la API. Aquí está la tabla que resume los prefijos y diferencias de nombres entre ellos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EstándarBlink (Chrome y Opera)Gecko (Firefox)Internet Explorer 11EdgeSafari (WebKit)
{{domxref("Document.fullscreen")}}webkitIsFullScreenmozFullScreen-webkitIsFullScreenwebkitIsFullScreen
{{domxref("Document.fullscreenEnabled")}}webkitFullscreenEnabledmozFullScreenEnabledmsFullscreenEnabledwebkitFullscreenEnabledwebkitFullscreenEnabled
{{domxref("Document.fullscreenElement")}}webkitFullscreenElementmozFullScreenElementmsFullscreenElementwebkitFullscreenElementwebkitFullscreenElement
{{domxref("Document.onfullscreenchange")}}onwebkitfullscreenchangeonmozfullscreenchangeonmsfullscreenchangeonwebkitfullscreenchangeonwebkitfullscreenchange
{{domxref("Document.onfullscreenerror")}}onwebkitfullscreenerroronmozfullscreenerroronmsfullscreenerroronwebkitfullscreenerroronwebkitfullscreenerror
{{domxref("Document.exitFullscreen()")}}webkitExitFullscreen()mozCancelFullScreen()msExitFullscreen()webkitExitFullscreen()webkitExitFullscreen()
{{domxref("Element.requestFullscreen()")}}webkitRequestFullscreen()mozRequestFullScreen()msRequestFullscreen()webkitRequestFullscreen()webkitRequestFullscreen()
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Versión inicial.
+ +

Browser compatibility

+ +

All browsers implement this APIs. Nevertheless some implement it with prefixed names we slightly different spelling: e.g. instead of requestFullscreen(), there is a MozRequestFullScreen().

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico15 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.0 {{ property_prefix("-webkit") }}
fullscreenEnabled20 {{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.1 {{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
fullscreenEnabled{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Véase también

+ + diff --git a/files/es/web/api/gamepad_api/index.html b/files/es/web/api/gamepad_api/index.html new file mode 100644 index 0000000000..ea16ef2b62 --- /dev/null +++ b/files/es/web/api/gamepad_api/index.html @@ -0,0 +1,95 @@ +--- +title: Gamepad API +slug: Web/API/Gamepad_API +tags: + - API + - Experimental + - Gamepad API + - juegos +translation_of: Web/API/Gamepad_API +--- +
{{DefaultAPISidebar("Gamepad API")}}
+ +

Gamepad API es la manera de los desarrolladores de acceder y responder a las señales de los gamepads y otros controles para juegos de una manera simple y consistente. Éste contiene tres interfaces, dos eventos y una función especializada, para responder a los gamepads siendo conectados y desconectados, y acceder a otra información sobre los mismos gamepads, y que botones y otros controles están siendo presionados.

+ +

Interfaces

+ +
+
Gamepad
+
Representa un gamepad/control conectado a la computadora.
+
GamepadButton
+
Representa un botón en uno de los gamepads conectados.
+
GamepadEvent
+
El evento objeto representa eventos que son enviados a los gamepads.
+
+ +

Extensiones experimentales de los gamepads

+ +
+
GamepadHapticActuator
+
Representa el hardware en el control designado para proveer retroalimentación háptica al usuario (si está disponible), más comunmente hardware de vibración.
+
GamepadPose
+
Representa la posición de un control (ej. posición y orientación el espacio 3D) en el caso de un controllador WebVR. Éste no es usado por el nuevo estándar WebXR.
+
+ +

Ver también las extensiones para la interfaz del navegador, para caracteristicas que le permitan acceder a la información mencionada.

+ +

Extensiones y otras interfaces

+ + + +
+
{{domxref("Navigator.getGamepads()")}}
+
Una extensión a el objeto {{domxref("Navigator")}} que devuelve un arreglo de objetos {{domxref("Gamepad")}}, uno para cada gamepad conectado.
+
+ +

Eventos del Window

+ +
+
{{domxref("Window.ongamepadconnected")}}
+
Representa un manejador de evento que se ejecutará cuando un gamepad es conectado (cuando se dispara el evento {{event('gamepadconnected')}}).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Representa un manejador de evento que se ejecutará cuando un gamepad es desconectado (cuando se dispara el evento {{event('gamepaddisconnected')}}).
+
+ +

Guías y tutoriales

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("GamepadExtensions")}}{{Spec2("GamepadExtensions")}}Defines the {{anch("Experimental Gamepad extensions")}}.
{{SpecName("Gamepad", "", "The Gamepad API specification")}}{{Spec2("Gamepad")}}Initial definition
+ +

Compatibilidad del navegador

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/gamepadbutton/index.html b/files/es/web/api/gamepadbutton/index.html new file mode 100644 index 0000000000..666d75b9a9 --- /dev/null +++ b/files/es/web/api/gamepadbutton/index.html @@ -0,0 +1,90 @@ +--- +title: GamepadButton +slug: Web/API/GamepadButton +tags: + - API + - API Gamepad + - Referencia + - juegos +translation_of: Web/API/GamepadButton +--- +
{{APIRef("Gamepad API")}}
+ +

La interfaz GamepadButton define un botón individual de un gamepad u otro control, dando acceso al estado actual de diferentes tipos de botones disponibles en el dispositivo de control.

+ +

Un objeto GamepadButton se devuelve al solicitar cualquier valor del array devuelto por la propiedad buttons de la interfaz {{domxref("Gamepad")}}.

+ +
+

Nota: Este es el caso en Firefox Gecko 28 en adelante; Chrome y versiones anteriores de Firefox continúan devolviendo un array de valores dobles cuando se accede a esta propiedad.

+
+ +

Propiedades

+ +
+
{{domxref("GamepadButton.value")}} {{readonlyInline}}
+
Un valor doble usado para representar el estado actual de botones análogos, así como los gatillos de muchos gamepads modernos. Los valores se normalizan al rango 0.0 —1.0, donde 0.0 representa un botón que no está presionado, y 1.0 representa un botón que está completamente presionado.
+
{{domxref("GamepadButton.pressed")}} {{readonlyInline}}
+
Un valor {{domxref("Boolean")}} que indica el estado el botón, ya sea que actualmente se encuentre presionado (true) o sin presionar (false).
+
+ +

Ejemplo

+ +

El siguiente código se toma de mi demostración del botón del API de Gamepad (puedes ver el demo en vivo, y encontrar el código fuente en Github.) Nota que el código — en Chrome {{domxref("Navigator.getGamepads")}} necesita un prefijo webkit y los valores del botón serán guardados como un array de valores dobles, mientras qe en Firefox {{domxref("Navigator.getGamepads")}} no se necesita un prefijo, y los valores de los botones se guardan como un array de objetos {{domxref("GamepadButton")}}; estas son las propiedades {{domxref("GamepadButton.value")}} o {{domxref("GamepadButton.pressed")}} a las que necesitamos acceder, dependiendo de qué tipo de botones haya. En este simple ejemplo yo solo he permitido estos.

+ +
function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+
+    if(gp.buttons[0] == 1) {
+      b--;
+    } else if(gp.buttons[1] == 1) {
+      a++;
+    } else if(gp.buttons[2] == 1) {
+      b++;
+    } else if(gp.buttons[3] == 1) {
+      a--;
+    }
+  } else {
+    var gp = navigator.getGamepads()[0];
+
+    if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {
+      b--;
+    } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) {
+      a++;
+    } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) {
+      b++;
+    } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) {
+      a--;
+    }
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = rAF(gameLoop);
+};
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Gamepad", "#gamepadbutton-interface", "GamepadButton")}}{{Spec2("Gamepad")}}Definición inicial
+ +

Compatibilidad de Navegadores

+ +

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

+ +

Recomendado

+ +

Usando la API de Gamepad

diff --git a/files/es/web/api/geolocation/clearwatch/index.html b/files/es/web/api/geolocation/clearwatch/index.html new file mode 100644 index 0000000000..ceb2cec832 --- /dev/null +++ b/files/es/web/api/geolocation/clearwatch/index.html @@ -0,0 +1,134 @@ +--- +title: Geolocation.clearWatch() +slug: Web/API/Geolocation/clearWatch +translation_of: Web/API/Geolocation/clearWatch +--- +
+
{{ APIref("Geolocation API") }}
+ +
El método Geolocation.clearWatch() se utiliza para eliminar el registro de controladores de monitoreo lugar/error previamente instalados usando Geolocation.watchPosition().
+
+ +

Sintaxis

+ +
navigator.geolocation.clearWatch(id);
+ +

Parametros

+ +
+
id
+
El número de identificación que devuelve el método Geolocation.watchPosition() al instalar el controlador que desea eliminar.
+
+ +

Ejemplo

+ +
var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the 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);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial.
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removido en 15.0
+ Reintroducido en 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidChrome for AndroidFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/geolocation/getcurrentposition/index.html b/files/es/web/api/geolocation/getcurrentposition/index.html new file mode 100644 index 0000000000..436a002971 --- /dev/null +++ b/files/es/web/api/geolocation/getcurrentposition/index.html @@ -0,0 +1,130 @@ +--- +title: Geolocation.getCurrentPosition() +slug: Web/API/Geolocation/getCurrentPosition +translation_of: Web/API/Geolocation/getCurrentPosition +--- +

{{ APIref("Geolocation API") }}

+ +

Resumen

+ +

El método Geolocation.getCurrentPosition() se utiliza para obtener la posición de un dispositivo.

+ +

Sintaxis

+ +
navigator.geolocation.getCurrentPosition(success, error, options)
+ +

Parámetros

+ +
+
success
+
Una función de devolución de llamada que toma un objeto de posición({{domxref("Position")}}) como único parámetro de entrada.
+
error {{optional_inline}}
+
Una función de devolución de llamada opcional que toma un objeto {{domxref("PositionError")}} como único parámetro de entrada.
+
options {{optional_inline}}
+
Un objeto opcional {{domxref("PositionOptions")}}.
+
+ +

Ejemplo

+ +
var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Your current position is:');
+  console.log('Latitude : ' + crd.latitude);
+  console.log('Longitude: ' + crd.longitude);
+  console.log('More or less ' + crd.accuracy + ' meters.');
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Eliminado en 15.0
+ Reintroducido en 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobil (Gecko)IE MobileOpera MobilSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/geolocation/index.html b/files/es/web/api/geolocation/index.html new file mode 100644 index 0000000000..56d37a2314 --- /dev/null +++ b/files/es/web/api/geolocation/index.html @@ -0,0 +1,114 @@ +--- +title: Geolocalización +slug: Web/API/Geolocation +translation_of: Web/API/Geolocation +--- +
{{APIRef("Geolocation API")}}
+ +

La interfaz Geolocalización representa un objeto capaz de obtener mediante programación la posición del dispositivo. Se da acceso Web de la ubicación del dispositivo. Esto permite a un sitio Web o aplicación ofrecer resultados personalizados basados ​​en la ubicación del usuario.

+ +

Se obtiene un objeto con esta interfaz mediante la propiedad {{domxref("NavigatorGeolocation.geolocation")}} implementado por el objeto {{domxref("Navigator")}}.

+ +
+

Nota: Por razones de seguridad, cuando una página web intenta obtener acceso a la información de ubicación, se notifica al usuario y le pide conceder el permiso. Tenga en cuenta que cada navegador tiene sus propias políticas y métodos para solicitar este permiso.

+
+ +

Propiedades

+ +

La interfaz de Geolocalización no implementa ni hereda propiedades.

+ +

Métodos

+ +

La interfaz Geolocation no hereda ningún método.

+ +
+
Geolocation.getCurrentPosition()
+
Determina la ubicación actual del dispositivo y devuelve un objeto de posición({{domxref("Position")}}) con los datos.
+
Geolocation.watchPosition()
+
+ +

Devuelve un valor de largo(long) que representa la función de devolución de llamada de reciente creación que se invoca cada vez que cambia la ubicación del dispositivo.

+ +
+
Geolocation.clearWatch()
+
Elimina el controlador especial instalado previamente utilizando watchPosition().
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad en navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removido en 15.0
+ Reintroducido en 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/geolocation/watchposition/index.html b/files/es/web/api/geolocation/watchposition/index.html new file mode 100644 index 0000000000..dbd6a1170d --- /dev/null +++ b/files/es/web/api/geolocation/watchposition/index.html @@ -0,0 +1,138 @@ +--- +title: Geolocation.watchPosition() +slug: Web/API/Geolocation/watchPosition +translation_of: Web/API/Geolocation/watchPosition +--- +

{{ APIref("Geolocation API") }}

+ +

El método Geolocation.watchPosition() se utiliza para registrar una función de controlador que se llamará automáticamente cada vez que la posición del dispositivo cambia. También puede, opcionalmente, especificar una función de devolución de la gestión de errores.

+ +

Este método devuelve un valor de ID de seguimiento que se puede utilizar para anular el registro del controlador pasándolo al método Geolocation.clearWatch().

+ +

Sintaxis

+ +
id = navigator.geolocation.watchPosition(success, error, options)
+ +

Parámetros

+ +
+
success
+
Una función de devolución de llamada que toma un objeto de posición({{domxref("Position")}}) como parámetro de entrada.
+
error {{optional_inline}}
+
Una función de devolución de llamada opcional que toma un objeto {{domxref("PositionError")}} como parámetro de entrada.
+
options {{optional_inline}}
+
Un objeto opcional {{domxref("PositionOptions")}}.
+
+ +

Ejemplo

+ +
var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the 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);
+
+ +

Especificacines

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Eliminado en 15.0
+ Reintroducido en 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobil (Gecko)IE MobileOpera MobilSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/geolocationcoordinates/index.html b/files/es/web/api/geolocationcoordinates/index.html new file mode 100644 index 0000000000..e59758e448 --- /dev/null +++ b/files/es/web/api/geolocationcoordinates/index.html @@ -0,0 +1,113 @@ +--- +title: Coordinates +slug: Web/API/GeolocationCoordinates +translation_of: Web/API/GeolocationCoordinates +--- +
{{APIRef("Geolocation API")}}
+ +

La interfaz Coordinates representa la posición y altitud del dispositivo en la Tierra, así como la precisión con la cual estas propiedades son calculadas.

+ +

Propiedades

+ +

La interfaz Coordinates no hereda ninguna propiedad.

+ +
+
{{domxref("Coordinates.latitude")}} {{readonlyInline}}
+
Devuelve un double que representa la latitud de la posición en grados con decimales.
+
{{domxref("Coordinates.longitude")}} {{readonlyInline}}
+
Devuelve un double que representa la longitud de la posición en grados con decimales.
+
{{domxref("Coordinates.altitude")}} {{readonlyInline}}
+
Devuelve un double que representa la altitud de la posición en metros, relativo al nivel del mar. Este valor puede ser null si la implementación no puede proporcionar la información.
+
{{domxref("Coordinates.accuracy")}} {{readonlyInline}}
+
Devuelve un double que representa la precisión de las propiedades latitude y longitude, expresada en metros.
+
{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}}
+
Devuelve un double que representa la precisión de la propiedad altitude expresada en metros. Este valor puede ser null.
+
{{domxref("Coordinates.heading")}} {{readonlyInline}}
+
Devuelve un double que representa la dirección en la que el dispositivo está viajando. Este valor, indicado en grados, indica la distancia real a la que el dispositivo se encuentra del norte. 0 grados representa el norte real, y la dirección se determina en el sentido de la agujas del reloj (lo que significa que el este es 90 grados y el oeste es 270 grados). Si speed es 0, heading es NaN. En caso de que el dispositivo no pueda proporcionar la información de heading, este valor es null.
+
{{domxref("Coordinates.speed")}} {{readonlyInline}}
+
Devuelve un double que representa la velocidad del dispositivo en metros por segundo. Este valor puede ser null.
+
+ +

Métodos

+ +

La interfaz Coordinates no implementa ni edita ningún método.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation', '#coordinates', 'Coordinates')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/geolocationcoordinates/latitude/index.html b/files/es/web/api/geolocationcoordinates/latitude/index.html new file mode 100644 index 0000000000..0bff2b5c34 --- /dev/null +++ b/files/es/web/api/geolocationcoordinates/latitude/index.html @@ -0,0 +1,97 @@ +--- +title: Coordinates.latitude +slug: Web/API/GeolocationCoordinates/latitude +translation_of: Web/API/GeolocationCoordinates/latitude +--- +
{{APIRef("Geolocation API")}}
+ +

Coordinates.latitude es una propiedad de sólo lectura que devuelve un double representando la latitud de la posición en grados decimales.

+ +

Sintaxis

+ +
lat = coordinates.latitude
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Geolocation', '#lat', 'Coordinates.latitude')}}{{Spec2('Geolocation')}}Especificación Inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico5{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown}}10.60{{CompatUnknown}}
+
+ +

Mirar también

+ + diff --git a/files/es/web/api/geolocationposition/index.html b/files/es/web/api/geolocationposition/index.html new file mode 100644 index 0000000000..23c3881e5c --- /dev/null +++ b/files/es/web/api/geolocationposition/index.html @@ -0,0 +1,63 @@ +--- +title: Position +slug: Web/API/GeolocationPosition +tags: + - API + - Contexto seguro + - Geolocalización + - Geolocation API + - Interfaz + - Posición + - Position +translation_of: Web/API/GeolocationPosition +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

La interfaz Position representa la posición del dispositivo en cuestión en un momento dado. La posición, representada por el objeto {{domxref("Coordinates")}}, comprende la posición en dos dimensiones del dispositivo en un esferoide representando la Tierra y además su altitud y velocidad.

+ +

Propiedades

+ +

La interfaz Position no hereda ninguna propiedad.

+ +
+
{{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}
+
Devuelve un objeto {{domxref("Coordinates")}} que indica la posición actual.
+
{{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
+
Devuelve un  {{domxref("DOMTimeStamp")}} indicando el momento en que la localización ha sido recuperada.
+
+ +

Métodos

+ +

La interfaz Position no implementa ni hereda ningún método.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation', '#position', 'Position')}}{{Spec2('Geolocation')}}Especificación inicial.
+ +

Compatibilidad de navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/globaleventhandlers/index.html b/files/es/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..7cc46be5aa --- /dev/null +++ b/files/es/web/api/globaleventhandlers/index.html @@ -0,0 +1,272 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM HTML + - GlobalEventHandlers + - Mixin + - Referencia + - combinación + - eventos +translation_of: Web/API/GlobalEventHandlers +--- +
{{ApiRef("DOM HTML")}}
+ +

La combinación («mixin» en inglés) GlobalEventHandlers describe los controladores de eventos comunes a varias interfaces como {{DOMxRef("HTMLElement")}}, {{DOMxRef("Document")}} o {{DOMxRef("Window")}}. Cada una de estas interfaces puede, por supuesto, agregar más controladores de eventos además de los que se enumeran a continuación.

+ +
+

Nota: GlobalEventHandlers es una combinación («mixin») y no una interfaz; en realidad, no puedes crear un objeto de tipo GlobalEventHandlers.

+
+ +

Propiedades

+ +

Esta interfaz no incluye ninguna propiedad excepto los controladores de eventos que se enumeran a continuación.

+ +

Controladores de eventos

+ +

Estos controladores de eventos se definen en el mixin {{DOMxRef("GlobalEventHandlers")}} y se implementan mediante {{DOMxRef("HTMLElement")}}, {{DOMxRef("Document")}}, {{DOMxRef("Window ")}}, así como por {{DOMxRef("WorkerGlobalScope")}} para «Web Workers».

+ +
+
+
{{DOMxRef("GlobalEventHandlers.onabort")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{DOMxRef("HTMLMediaElement/abort_event", "abort")}}.
+
{{DOMxRef("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("animationcancel")}}, lo cual indica que una {{web.link("/s/docs/Web/CSS/CSS_Animations", "animación CSS")}} se ha cancelado.
+
{{DOMxRef("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("animationend")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Animations", "la animación CSS")}} se ha detenido.
+
{{DOMxRef("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
+
Un {{DOMxRef("EventHandler")}} llamado cuando se ha enviado un evento {{event("animationiteration")}}, indica que una {{web.link("/es/docs/Web/CSS/CSS_Animations", "animación CSS")}} ha comenzado a reproducir una nueva iteración de la secuencia de animación.
+
{{DOMxRef("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("animationstart")}}, lo cual indica que una {{web.link("/es/docs/Web/CSS/CSS_Animations", "animación CSS")}} se ha comenzado a reproducir.
+
{{DOMxRef("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("auxclick")}}, el cual indica que se ha presionado un botón no principal en un dispositivo de entrada (por ejemplo, un botón central del ratón).
+
{{DOMxRef("GlobalEventHandlers.onblur")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("blur")}}.
+
{{DOMxRef("GlobalEventHandlers.onerror")}}
+
Es un {{DOMxRef("OnErrorEventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("error")}}.
+
{{DOMxRef("GlobalEventHandlers.onfocus")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("focus")}}.
+
{{DOMxRef("GlobalEventHandlers.oncancel")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("cancel")}}.
+
{{DOMxRef("GlobalEventHandlers.oncanplay")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("canplay")}}.
+
{{DOMxRef("GlobalEventHandlers.oncanplaythrough")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("canplaythrough")}}.
+
{{DOMxRef("GlobalEventHandlers.onchange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("change")}}.
+
{{DOMxRef("GlobalEventHandlers.onclick")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("click")}}.
+
{{DOMxRef("GlobalEventHandlers.onclose")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("close")}}.
+
{{DOMxRef("GlobalEventHandlers.oncontextmenu")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("contextmenu")}}.
+
{{DOMxRef("GlobalEventHandlers.oncuechange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("cuechange")}}.
+
{{DOMxRef("GlobalEventHandlers.ondblclick")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dblclick")}}.
+
{{DOMxRef("GlobalEventHandlers.ondrag")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("drag")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragend")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragend")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragenter")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragenter")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragexit")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragexit")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragleave")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragleave")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragover")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragover")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragstart")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragstart")}}.
+
{{DOMxRef("GlobalEventHandlers.ondrop")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("drop")}}.
+
{{DOMxRef("GlobalEventHandlers.ondurationchange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("durationchange")}}.
+
{{DOMxRef("GlobalEventHandlers.onemptied")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("emptied")}}.
+
{{DOMxRef("GlobalEventHandlers.onended")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("ended")}}.
+
{{DOMxRef("GlobalEventHandlers.onformdata")}}
+
Es un {{DOMxRef("EventHandler")}} para procesar eventos {{event("formdata")}}, que se activa después de que se construye la lista de entrada que representa los datos del formulario.
+
{{DOMxRef("GlobalEventHandlers.ongotpointercapture")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el tipo de evento {{event("gotpointercapture")}}.
+
{{DOMxRef("GlobalEventHandlers.oninput")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("input")}}.
+
{{DOMxRef("GlobalEventHandlers.oninvalid")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("invalid")}}.
+
{{DOMxRef("GlobalEventHandlers.onkeydown")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("keydown")}}.
+
{{DOMxRef("GlobalEventHandlers.onkeypress")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("keypress")}}.
+
{{DOMxRef("GlobalEventHandlers.onkeyup")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("keyup")}}.
+
{{DOMxRef("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{DOMxRef("GlobalEventHandlers.onloadeddata")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadeddata ")}}.
+
{{DOMxRef("GlobalEventHandlers.onloadedmetadata")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadedmetadata")}}.
+
{{DOMxRef("GlobalEventHandlers.onloadend")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadend")}} (cuando el progreso se haya detenido en la carga de un recurso).
+
{{DOMxRef("GlobalEventHandlers.onloadstart")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadstart")}} (cuando el progreso ha comenzado a cargar un recurso).
+
{{DOMxRef("GlobalEventHandlers.onlostpointercapture")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el tipo de evento {{event("lostpointercapture")}}.
+
{{DOMxRef("GlobalEventHandlers.onmousedown")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mousedown")}}.
+
{{DOMxRef("GlobalEventHandlers.onmouseenter")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseenter")}}.
+
{{DOMxRef("GlobalEventHandlers.onmouseleave")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseleave")}}.
+
{{DOMxRef("GlobalEventHandlers.onmousemove")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mousemove")}}.
+
{{DOMxRef("GlobalEventHandlers.onmouseout")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseout")}}.
+
{{DOMxRef("GlobalEventHandlers.onmouseover")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseover")}}.
+
{{DOMxRef("GlobalEventHandlers.onmouseup")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseup")}}.
+
{{DOMxRef("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mousewheel")}}. Desaprobado. Utiliza onwheel en su lugar.
+
{{DOMxRef("GlobalEventHandlers.onwheel")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("wheel")}}.
+
{{DOMxRef("GlobalEventHandlers.onpause")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pause")}}.
+
{{DOMxRef("GlobalEventHandlers.onplay")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("play")}}.
+
{{DOMxRef("GlobalEventHandlers.onplaying")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("playing")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerdown")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerdown")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointermove")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointermove")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerup")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerup")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointercancel")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointercancel")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerover")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerover")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerout")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerout")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerenter")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerenter")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerleave")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerleave")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerlockchange")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerlockerror")}}.
+
{{DOMxRef("GlobalEventHandlers.onprogress")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("progress")}}.
+
{{DOMxRef("GlobalEventHandlers.onratechange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("ratechange")}}.
+
{{DOMxRef("GlobalEventHandlers.onreset")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("reset")}}.
+
{{DOMxRef("GlobalEventHandlers.onresize")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("resize")}}.
+
{{DOMxRef("GlobalEventHandlers.onscroll")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("scroll")}}.
+
{{DOMxRef("GlobalEventHandlers.onseeked")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("seeked")}}.
+
{{DOMxRef("GlobalEventHandlers.onseeking")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("seek")}}.
+
{{DOMxRef("GlobalEventHandlers.onselect")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("select")}}.
+
{{DOMxRef("GlobalEventHandlers.onselectstart")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("selectionchange")}}, es decir, cuando el usuario comience a realizar una nueva selección de texto en una página web.
+
{{DOMxRef("GlobalEventHandlers.onselectionchange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genera el evento {{event("selectionchange")}}, es decir, cuando cambia el texto seleccionado en una página web.
+
{{DOMxRef("GlobalEventHandlers.onshow")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("show")}}.
+
{{DOMxRef("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("sort")}}.
+
{{DOMxRef("GlobalEventHandlers.onstalled")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("stalled")}}.
+
{{DOMxRef("GlobalEventHandlers.onsubmit")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("submit")}}.
+
{{DOMxRef("GlobalEventHandlers.onsuspend")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("suspend")}}.
+
{{DOMxRef("GlobalEventHandlers.ontimeupdate")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("timeupdate")}}.
+
{{DOMxRef("GlobalEventHandlers.onvolumechange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("volumechange")}}.
+
{{DOMxRef("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchcancel")}}.
+
{{DOMxRef("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchend")}}.
+
{{DOMxRef("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchmove")}}.
+
{{DOMxRef("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchstart")}}.
+
{{DOMxRef("GlobalEventHandlers.ontransitioncancel")}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitioncancel")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "se canceló la transición CSS")}}.
+
{{DOMxRef("GlobalEventHandlers.ontransitionend")}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitionend")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "la transición CSS")}} se ha terminado de reproducir.
+
{{DOMxRef("GlobalEventHandlers.ontransitionrun")}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitionrun")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "la transición CSS")}} se está ejecutando, aunque no necesariamente se inició.
+
{{DOMxRef("GlobalEventHandlers.ontransitionstart")}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitionstart")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "la transición CSS")}} ha comenzado a realizar la transición.
+
{{DOMxRef("GlobalEventHandlers.onwaiting")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("waiting")}}.
+
+
+ +

Métodos

+ +

Esta interfaz no define métodos

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Selection API",'', 'Extensión a GlobalEventHandlers')}}{{Spec2('Selection API')}}Agrega en el cambio de selección.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extensión de Document')}}{{Spec2('Pointer Lock')}}Agrega onpointerlockchange y onpointerlockerror en {{DOMxRef("Document")}}. Está implementado experimentalmente en GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{ Spec2('HTML WHATWG') }}Sin cambios desde la última instantánea, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Instantánea de {{SpecName("HTML WHATWG")}}. Agregó onsort desde la instantánea de {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{ Spec2('HTML5 W3C') }}Instantánea de {{SpecName("HTML WHATWG")}}. Creación de GlobalEventHandlers (propiedades en el destino anterior).
+ +

Compatibilidad del navegador

+ +
+ + +

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

+
+ +

Ve también

+ + diff --git a/files/es/web/api/globaleventhandlers/onblur/index.html b/files/es/web/api/globaleventhandlers/onblur/index.html new file mode 100644 index 0000000000..204cce4ab1 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onblur/index.html @@ -0,0 +1,90 @@ +--- +title: GlobalEventHandlers.onblur +slug: Web/API/GlobalEventHandlers/onblur +translation_of: Web/API/GlobalEventHandlers/onblur +--- +
{{ApiRef("HTML DOM")}}
+ +

La propiedad onblur retorna el código del manejador de evento onBlur, si existe, en el elemento actual.

+ +

Sintaxis

+ +
element.onblur = function;
+
+ + + +
element.onblur = function() { console.log("¡evento onblur detectado!"); };
+
+ +

Ejemplo

+ +
<html>
+
+<head>
+<title>ejemplo de evento onblur</title>
+
+<script type="text/javascript">
+
+var elem = null;
+
+function initElement()
+{
+  elem = document.getElementById("foo");
+  // NOTA: doEvent(); ó doEvent(param); no funcionará aquí.
+  // Debe ser una referencia a un nombre de función, no una llamada a función.
+  elem.onblur = doEvent;
+};
+
+function doEvent()
+{
+  elem.value = 'Bye-Bye';
+  console.log("¡Evento onblur detectado!")
+}
+</script>
+
+<style type="text/css">
+<!--
+#foo {
+border: solid blue 2px;
+}
+-->
+</style>
+</head>
+
+<body onload="initElement();">
+<form>
+<input type="text" id="foo" value="Hola!" />
+</form>
+
+<p>Haga click en el elemento superior to darle el foco, luego click fuera del elemento.<br />
+Recarge la página desde la barra de navegación.</p>
+
+</body>
+</html>
+
+ +

Notas

+ +

El evento blur es generado cuando un elemento pierde el foco.

+ +

A diferencia de MSIE --en el cual la mayoría de tipos de elementos reciben el evento blur--  la mayoría de elementos de los navegadores basados en Gecko NO funcionan con este evento.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/es/web/api/globaleventhandlers/onchange/index.html b/files/es/web/api/globaleventhandlers/onchange/index.html new file mode 100644 index 0000000000..a51f7d25d8 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onchange/index.html @@ -0,0 +1,97 @@ +--- +title: GlobalEventHandlers.onchange +slug: Web/API/GlobalEventHandlers/onchange +translation_of: Web/API/GlobalEventHandlers/onchange +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +

La propiedad onchange establece y devuelve el event handler para el evento {{event("change")}}.

+ +

Sintaxis

+ +
element.onchange = handlerFunction;
+var handlerFunction = element.onchange;
+
+ +

handlerFunction debería ser null o una  Función de javascript espeficiando el manejador para el evento.

+ +

Notas

+ +

Mir el la págna Manejadores de eventos DOM para más información sobre cómo trabajar con los manejadore on.

+ +

Mira la documentación para el evento {{event("change")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte báico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/onclick/index.html b/files/es/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..62d6c622ec --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,139 @@ +--- +title: GlobalEventHandlers.onclick +slug: Web/API/GlobalEventHandlers/onclick +translation_of: Web/API/GlobalEventHandlers/onclick +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +
+ +

La propiedad onclick devuelve el manejador del evento click del elemento actual.

+ +
Note: Cuando uses el evento click para ejecutar algo, considera agregar la misma acción al evento keydown, para permitirle el uso a personas que no usan mouse o pantalla táctil.
+ +

Sintaxis

+ +
element.onclick = functionRef;
+
+ +

Donde functionRef es una función - muchas veces el nombre de la función está declarado ya en otro sitio o como una expresión de la función .Ver "JavaScript Guide:Functions" para más detalles.

+ +

el único argumento pasado a la función  manejador de evento especificamente {{domxref("MouseEvent")}} object. Dentro del manejador, this será el elemento sobre él  el evento ha sido invocado.

+ +

Ejemplo

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>onclick event example</title>
+    <script>
+      function initElement() {
+        var p = document.getElementById("foo");
+        // NOTE: showAlert(); or showAlert(param); will NOT work here.
+        // Must be a reference to a function name, not a function call.
+        p.onclick = showAlert;
+      };
+
+      function showAlert(event) {
+        alert("onclick Event detected!");
+      }
+    </script>
+    <style>
+      #foo {
+        border: solid blue 2px;
+      }
+    </style>
+  </head>
+  <body onload="initElement();">
+    <span id="foo">My Event Element</span>
+    <p>click on the above element.</p>
+  </body>
+</html>
+
+ +

O se puede usar una función anoníma, como esa:

+ +
p.onclick = function(event) { alert("moot!"); };
+
+ +

Notas

+ +

El evento click se genera cuando el usuario hace clic en un elemento. El evento clic ocurrirá después de los eventos mousedown y mouseup.

+ +

Solo se puede asignar un controlador click a un objeto a la vez con esta propiedad. Puede que prefiera utilizar el método {{domxref ("EventTarget.addEventListener()")}} en su lugar, ya que es más flexible y forma parte de la especificación DOM Events.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/onclose/index.html b/files/es/web/api/globaleventhandlers/onclose/index.html new file mode 100644 index 0000000000..20ddb639f5 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onclose/index.html @@ -0,0 +1,52 @@ +--- +title: GlobalEventHandlers.onclose +slug: Web/API/GlobalEventHandlers/onclose +tags: + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onclose +--- +
{{ApiRef("HTML DOM")}}
+ +

Un gestor de eventos para los eventos de cerrar enviados a la ventana. (No disponible con Firefox 2 o Safari)

+ +

Sintaxis

+ +
window.onclose = funcRef;
+
+ +

Parámetros

+ + + +

Ejemplo

+ +
window.onclose = resetThatServerThing;
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con Navegadores

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onclose")}}

+
diff --git a/files/es/web/api/globaleventhandlers/onerror/index.html b/files/es/web/api/globaleventhandlers/onerror/index.html new file mode 100644 index 0000000000..44c921b4ad --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onerror/index.html @@ -0,0 +1,65 @@ +--- +title: GlobalEventHandlers.onerror +slug: Web/API/GlobalEventHandlers/onerror +translation_of: Web/API/GlobalEventHandlers/onerror +--- +
{{ ApiRef("HTML DOM") }}
+ +

Un manejador de eventos para errores en scripts en tiempo de ejecución.

+ +

Note that some/many error events do not trigger window.onerror, you have to listen for them specifically.

+ +

Sintaxis

+ +
window.onerror = funcRef;
+
+ +

Parámetros

+ + + +

Ejemplos

+ +
// Example 1:
+
+// Prevent error dialogs from displaying -which is the window's normal
+// behavior- by overriding the default event handler for error events that
+// go to the window.
+window.onerror = null;
+
+// Example 2:
+
+var gOldOnError = window.onerror;
+// Override previous handler.
+window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
+  if (gOldOnError)
+    // Call previous handler.
+    return gOldOnError(errorMsg, url, lineNumber);
+
+  // Just let default handler run.
+  return false;
+}
+
+ +

Notas

+ +

El evento de error es lanzado cuando ocurre un error en el script.

+ +

Cuando se use el marcado html en línea (<body onerror="alert('an error occurred')>...), los argumentos son anónimos. Pueden ser referenciados usando desde arguments{{ mediawiki.external(0) }} hasta arguments{{ mediawiki.external(2) }}.

+ +

No hay llamante Components.stack.caller que recuperar. (Vea bug 355430.)

+ +

Especificación

+ +

JavaScript 1.1

diff --git a/files/es/web/api/globaleventhandlers/onfocus/index.html b/files/es/web/api/globaleventhandlers/onfocus/index.html new file mode 100644 index 0000000000..e29b3fb84b --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onfocus/index.html @@ -0,0 +1,94 @@ +--- +title: GlobalEventHandlers.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +
{{ApiRef("HTML DOM")}}
+ +

La propiedad onfocus devuelve un manejador de eventos para el evento onFocus en el elemento actual.

+ +

Sintaxis

+ +
element.onfocus = event handling code
+
+ +

Notas

+ +

El evento focus se dispara cuando el usuario establece el foco en el elemento.

+ +

Para que el evento onfocus se dispare en elementos que no sean inputs, los mismos deben establecerse con el atributo  {{htmlattrxref("tabindex")}}  (vea Building keyboard accessibility back in para mas detalles).

+ +

A diferencia de MSIE, en que casi toda clase de elemento puede recibir el evento focus,  en los navegadores Gecko en los que casi todos los elementos NO reciben este evento.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con los Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/oninput/index.html b/files/es/web/api/globaleventhandlers/oninput/index.html new file mode 100644 index 0000000000..18785b9fe3 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/oninput/index.html @@ -0,0 +1,86 @@ +--- +title: GlobalEventHandlers.oninput +slug: Web/API/GlobalEventHandlers/oninput +translation_of: Web/API/GlobalEventHandlers/oninput +--- +
{{ ApiRef("HTML DOM") }}
+ +

Un controlador de eventos para el evento input en la ventana. El evento input es llamado cuando el valor de un elemento {{ HTMLElement("input") }} ha cambiado. 

+ +

Este evento se propaga. Si está soportado en la ventana, también estará soportado en elementos {{ HTMLElement("input") }}.

+ +

Ejemplo

+ +
<script>
+
+window.addEventListener('input', function (e) {
+ console.log("Evento keyup detectado! proveniente de este elemento:", e.target);
+}, false);
+
+</script>
+
+<input placeholder="Tipee aquí y vea la consola.">
+
+ +

Especificaciones

+ +

HTML - APIs de elementos de entrada comunes (input)

+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}2910{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vea también

+ + diff --git a/files/es/web/api/globaleventhandlers/onkeydown/index.html b/files/es/web/api/globaleventhandlers/onkeydown/index.html new file mode 100644 index 0000000000..4eea7b0c68 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onkeydown/index.html @@ -0,0 +1,93 @@ +--- +title: GlobalEventHandlers.onkeydown +slug: Web/API/GlobalEventHandlers/onkeydown +translation_of: Web/API/GlobalEventHandlers/onkeydown +--- +
{{ApiRef("HTML DOM")}}
+ +

La propiedad onkeydown devuelve un manejador para el evento onKeyDown del elemento actual.

+ +

Sintaxis

+ +
element.onkeydown = event handling code
+ +

Notas

+ +

El evento keydown se lanza cuando el usuario presiona una tecla.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/onkeyup/index.html b/files/es/web/api/globaleventhandlers/onkeyup/index.html new file mode 100644 index 0000000000..f6b97819eb --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onkeyup/index.html @@ -0,0 +1,100 @@ +--- +title: GlobalEventHandlers.onkeyup +slug: Web/API/GlobalEventHandlers/onkeyup +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +
{{ApiRef("HTML DOM")}}
+ +

La propiedad onkeyup devuelve un manejador para el evento onKeyUp del elemento actual.

+ +

Sintaxis

+ +
element.onkeyup = event handling code
+
+ +

Ejemplo

+ +
 <input type="text" onKeyUp="keyWasPressed(event)">
+ <script>function keyWasPressed(evt){ console.log(evt.keyCode) }</script>
+
+ +

Notas

+ +

El evento keyup se lanza cuando el usuario suelta la tecla que ha sido presionada.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeyup','onkeyup')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/onload/index.html b/files/es/web/api/globaleventhandlers/onload/index.html new file mode 100644 index 0000000000..b97cf40b4f --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onload/index.html @@ -0,0 +1,51 @@ +--- +title: window.onload +slug: Web/API/GlobalEventHandlers/onload +tags: + - window.onload +translation_of: Web/API/GlobalEventHandlers/onload +--- +

{{ ApiRef() }}

+

Sumario

+

Un evento tipo handler para el evento load event de el {{ domxref("window") }}.

+

Syntax

+
window.onload = funcRef;
+
+ +

Ejemplos

+
window.onload = function() {
+  init();
+  doSomethingElse();
+};
+
+
<!doctype html>
+<html>
+  <head>
+    <title>Ejemplo Onload</title>
+    <script>
+      function load() {
+        alert("evento load detectado!");
+      }
+      window.onload = load;
+    </script>
+  </head>
+  <body>
+    <p>El Evento load se dispara cuando el documento ha terminado de cargarse!</p>
+  </body>
+</html>
+
+

Notas

+

El evento load dispara el evento al final del proceso de carga del documento. En este punto, todos los objetos del documento son DOM,  y todas las imágenes y sub-frames han terminado de cargarse.

+

Existen también los  Eventos DOM Específicos como DOMContentLoaded y DOMFrameContentLoaded (los cuales pueden ser manejados usando {{ domxref("element.addEventListener()") }}) y son ejecutados despues de que el DOM de la página ha sido construido, pero no esperear a que otros recursos terminen de cargar.

+

Especificación

+

Este evento tipo handler se encuentra especificado en HTML.

+

Ver También

+ +

{{ languages( { "fr": "fr/DOM/window.onload", "pl": "pl/DOM/window.onload" } ) }}

diff --git a/files/es/web/api/globaleventhandlers/onloadedmetadata/index.html b/files/es/web/api/globaleventhandlers/onloadedmetadata/index.html new file mode 100644 index 0000000000..01bbdcefd8 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onloadedmetadata/index.html @@ -0,0 +1,48 @@ +--- +title: GlobalEventHandlers.onloadedmetadata +slug: Web/API/GlobalEventHandlers/onloadedmetadata +translation_of: Web/API/GlobalEventHandlers/onloadedmetadata +--- +
{{ ApiRef("HTML DOM") }}
+ +

The onloadedmetadata property of the {{domxref("GlobalEventHandlers")}} mixin is the {{domxref("EventHandler")}} for processing {{event("loadedmetadata")}} events.

+ +

The loadedmetadata event is fired when the metadata has been loaded.

+ +

Syntax

+ +
element.onloadedmetadata = handlerFunction;
+var handlerFunction = element.onloadedmetadata;
+
+ +

handlerFunction should be either null or a JavaScript function specifying the handler for the event.

+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','#handler-onloadedmetadata','onloadedmetadata')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.GlobalEventHandlers.onloadedmetadata")}}

+ +

See also

+ + diff --git a/files/es/web/api/globaleventhandlers/onresize/index.html b/files/es/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..5d18902f04 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,71 @@ +--- +title: GlobalEventHandlers.onresize +slug: Web/API/GlobalEventHandlers/onresize +tags: + - API + - DOM + - Propiedad +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

La propiedad GlobalEventHandlers.onresize contiene un {{domxref("EventHandler")}} desencadenado cuando un evento {{event("resize")}} es recibido.

+ +

Sintaxis

+ +
window.onresize = funcRef;
+
+ +

Parametros

+ + + +

Ejemplo

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize test</title>
+
+<script type="text/javascript">
+
+window.onresize = resize;
+
+function resize()
+{
+ alert("resize event detected!");
+}
+</script>
+</head>
+
+<body>
+<p>Resize the browser window to fire the resize event.</p>
+</body>
+</html>
+
+ +

Notas

+ +

El evento resize es activado después de que la ventana ha sido redimensionada.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónStatusComentario
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/es/web/api/globaleventhandlers/onscroll/index.html b/files/es/web/api/globaleventhandlers/onscroll/index.html new file mode 100644 index 0000000000..017085065a --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onscroll/index.html @@ -0,0 +1,80 @@ +--- +title: GlobalEventHandlers.onscroll +slug: Web/API/GlobalEventHandlers/onscroll +translation_of: Web/API/GlobalEventHandlers/onscroll +--- +
{{ApiRef("HTML DOM")}}
+ +

Un manejador de eventos para desplazamiento en element.

+ +

Sintaxis

+ +
element.onscroll = functionReference
+
+ +

Parámetros

+ +

functionReference es una referencia a una función para ser ejecutada cuando  element es desplazado (enrollado).

+ +

Example

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+  <meta charset="UTF-8" />
+  <style>
+  #container {
+    position: absolute;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    width: auto;
+    left: 0;
+    right: 0;
+    overflow: auto;
+  }
+
+  #foo {
+    height:1000px;
+    width:1000px;
+    background-color: #777;
+    display: block;
+  }
+
+  </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="foo"></div>
+    </div>
+
+    <script type="text/javascript">
+      document.getElementById('container').onscroll = function() {
+        console.log("scrolling");
+      };
+    </script>
+  </body>
+</html>
+ +

Notas

+ +

El evento es generado cuando el usuario realiza desplazamiento (scrolls) sobre el contenido de un elemento. Element.onscroll es equivalente a element.addEventListener("scroll" ... ).

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}{{Spec2("DOM3 Events")}}Definición inicial
diff --git a/files/es/web/api/globaleventhandlers/onselect/index.html b/files/es/web/api/globaleventhandlers/onselect/index.html new file mode 100644 index 0000000000..a97e18c74a --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onselect/index.html @@ -0,0 +1,74 @@ +--- +title: GlobalEventHandlers.onselect +slug: Web/API/GlobalEventHandlers/onselect +translation_of: Web/API/GlobalEventHandlers/onselect +--- +
+
{{ ApiRef("HTML DOM") }}
+ +
Un manejador de evento para el evento select en la ventana.
+
+ +

 

+ +

Sintaxis

+ +
window.onselect = funcRef;
+
+ + + +

Ejemplo

+ +
<html>
+<head>
+
+<title>onselect test</title>
+
+<style type="text/css">
+.text1 { border: 2px solid red; }
+</style>
+
+<script type="text/javascript">
+
+window.onselect = selectText;
+
+function selectText()
+{
+ alert("¡detectado evento select!");
+}
+</script>
+</head>
+
+<body>
+<textarea class="text1" cols="30" rows="3">
+Resalte algo de este texto
+con el puntero del ratón
+para disparar el evento onselect.
+</textarea>
+</body>
+</html>
+
+ +

Notas

+ +

El evento select sólo se genera cuando es seleccionado texto dentro de un control de entrada (INPUT) de tipo text o textarea. El evento es disparado después de que el texto haya sido seleccionado.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecifiaciónEstadoObservaciones
{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/es/web/api/globaleventhandlers/onselectstart/index.html b/files/es/web/api/globaleventhandlers/onselectstart/index.html new file mode 100644 index 0000000000..9ef1886a4f --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onselectstart/index.html @@ -0,0 +1,98 @@ +--- +title: GlobalEventHandlers.onselectstart +slug: Web/API/GlobalEventHandlers/onselectstart +translation_of: Web/API/GlobalEventHandlers/onselectstart +--- +
{{ApiRef('DOM')}}{{SeeCompatTable}}
+ +

La propiedad GlobalEventHandlers.onselectstart representa el manejador de evento que es invocado cuando un evento {{event("selectstart")}} alcanza el objeto.

+ +

Sintaxis

+ +
obj.onselectstart = function;
+
+ + + +

Ejemplo

+ +
document.onselectstart = function() { console.log("¡Selección iniciada!"); };
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('Selection API','','GlobalEventHandlers.onselectstart')}}{{Spec2('Selection API')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop(43)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
onselectionchange{{CompatGeckoMobile(43)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esto está implementado subordinado a la preferencia dom.select_events.enabled, que por defecto es false, excepto en las versiones Nightly.

+ +

Ver también

+ + diff --git a/files/es/web/api/globaleventhandlers/onsubmit/index.html b/files/es/web/api/globaleventhandlers/onsubmit/index.html new file mode 100644 index 0000000000..948f7c9e57 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onsubmit/index.html @@ -0,0 +1,125 @@ +--- +title: GlobalEventHandlers.onsubmit +slug: Web/API/GlobalEventHandlers/onsubmit +translation_of: Web/API/GlobalEventHandlers/onsubmit +--- +
{{ApiRef("HTML DOM")}}
+ +

Manejador de eventos del evento submit para el objeto window.

+ +

Sintaxis

+ +
window.onsubmit = funcRef;
+
+ +

Parametros

+ + + +

Ejemplo

+ +
<html>
+<script>
+function reg() {
+  window.captureEvents(Event.SUBMIT);
+  window.onsubmit = hit;
+}
+
+function hit() {
+  console.log('hit');
+}
+</script>
+
+<body onload="reg();">
+<form>
+  <input type="submit" value="submit" />
+</form>
+<div id="d"> </div>
+</body>
+</html>
+
+ +

Notas

+ +

El evento submit se genera cuando el usuario hace click en el boton submit en un formulario (<input type="submit"/>).

+ +

El evento submit no se genera cuando el usuario llama a la función form.submit() directamente.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onsubmit','onsubmit')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser Compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/ontouchstart/index.html b/files/es/web/api/globaleventhandlers/ontouchstart/index.html new file mode 100644 index 0000000000..db51db726f --- /dev/null +++ b/files/es/web/api/globaleventhandlers/ontouchstart/index.html @@ -0,0 +1,126 @@ +--- +title: GlobalEventHandlers.ontouchstart +slug: Web/API/GlobalEventHandlers/ontouchstart +translation_of: Web/API/GlobalEventHandlers/ontouchstart +--- +
{{ApiRef("HTML DOM")}}
+ +

Un {{domxref("GlobalEventHandlers","global event handler")}} para el evento {{event("touchstart")}}.

+ +

{{SeeCompatTable}}

+ +
+

Nota: Este atributo no ha sido estandarizado formalmente. Está especificado en la especificación {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} y no en {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}. Este atributo no está totalmente implementado.

+
+ +

Sintaxis

+ +
var startHandler = cualquierElemento.ontouchstart;
+
+ +

Valor devuelto

+ +
+
startHandler
+
El manejador del evento touchstart para el elemento cualquierElemento.
+
+ +

Ejemplo

+ +

Este ejemplo muestra dos formas de utilizar ontouchstart para establecer un manejador de evento touchstart.

+ +
<html>
+<script>
+function startTouch(ev) {
+ // Procesar el evento
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.ontouchstart = startTouch;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Tócame ... </div>
+<div id="target2" ontouchstart="startTouch(event)"> Tócame ... </div>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchstart')}}{{Spec2('Touch Events 2')}}Versión no estable.
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support     
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome para AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support        
+
+ +

Ver también

+ + diff --git a/files/es/web/api/globaleventhandlers/onunload/index.html b/files/es/web/api/globaleventhandlers/onunload/index.html new file mode 100644 index 0000000000..a665fc2027 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onunload/index.html @@ -0,0 +1,45 @@ +--- +title: window.onunload +slug: Web/API/GlobalEventHandlers/onunload +translation_of: Web/API/WindowEventHandlers/onunload +--- +

{{ ApiRef() }}

+

Test Summary

+

The unload event is raised when the document is unloaded.

+

Syntax

+
window.onunload = funcRef;
+
+ +

Example

+
<html>
+<head>
+
+<title>onunload test</title>
+
+<script type="text/javascript">
+
+window.onunload = unloadPage;
+
+function unloadPage()
+{
+ alert("unload event detected!");
+}
+</script>
+</head>
+
+<body>
+<p>Reload a new page into the browser<br />
+ to fire the unload event for this page.</p>
+<p>You can also use the back or forward buttons<br />
+ to load a new page and fire this event.</p>
+</body>
+</html>
+
+

Notes

+

Note that using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. See Using Firefox 1.5 caching for details.

+

Browsers equipped with pop-up window blockers will ignore all window.open() method calls in onunload event handler functions.

+

Specification

+

{{ DOM0() }}

+

{{ languages( {"zh-cn": "zh-cn/DOM/window.onunload" } ) }}

diff --git a/files/es/web/api/headers/index.html b/files/es/web/api/headers/index.html new file mode 100644 index 0000000000..cb65b6aa11 --- /dev/null +++ b/files/es/web/api/headers/index.html @@ -0,0 +1,135 @@ +--- +title: Headers +slug: Web/API/Headers +tags: + - API + - Experimental + - Fetch + - Headers + - Interface + - Reference +translation_of: Web/API/Headers +--- +
{{ APIRef("Fetch") }}
+ +
La interfaz Headers de la Fetch API permite realizar diversas acciones en los Headers de solicitud y respuesta HTTP.Estas acciones incluyen recuperar, establecer, agregar y eliminar. Un objeto Header tiene una lista  asociada que inicialmente está vacía, y consta de cero o más pares de nombre y valor.
+ +
Es posible añadir metodos de uso como {{domxref("Headers.append","append()")}} (ver{{anch(" ejemplos")}}.) En todos los métodos de esta interfaz, los nombres de los encabezados se relacionan con una secuencia de bytes sensible a mayúsculas y minúsculas.
+ +
Por razones de seguridad, algunos headers pueden ser controlados unicamente por el user agent. Estos headers incluyen los {{Glossary("Forbidden_header_name", "nombres prohibidos para headers", 1)}}  y {{Glossary("Forbidden_response_header_name", "nombres prohibidos de Headers response", 1)}}.
+ +

A Headers object also has an associated guard, which takes a value of immutable, request, request-no-cors, response, or none. This affects whether the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods will mutate the header. For more information see {{Glossary("Guard")}}.

+ +

You can retrieve a Headers object via the {{domxref("Request.headers")}} and {{domxref("Response.headers")}} properties, and create a new Headers object using the {{domxref("Headers.Headers()")}} constructor.

+ +

An object implementing Headers can directly be used in a {{jsxref("Statements/for...of", "for...of")}} structure, instead of {{domxref('Headers.entries()', 'entries()')}}: for (var p of myHeaders) is equivalent to for (var p of myHeaders.entries()).

+ +
+

Note: you can find more out about the available headers by reading our HTTP headers reference.

+
+ +

Constructor

+ +
+
{{domxref("Headers.Headers()")}}
+
Creates a new Headers object.
+
+ +

Methods

+ +
+
{{domxref("Headers.append()")}}
+
Appends a new value onto an existing header inside a Headers object, or adds the header if it does not already exist.
+
{{domxref("Headers.delete()")}}
+
Deletes a header from a Headers object.
+
{{domxref("Headers.entries()")}}
+
Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.
+
{{domxref("Headers.forEach()")}}
+
Executes a provided function once for each array element.
+
{{domxref("Headers.get()")}}
+
Returns a {{domxref("ByteString")}} sequence of all the values of a header within a Headers object with a given name.
+
{{domxref("Headers.has()")}}
+
Returns a boolean stating whether a Headers object contains a certain header.
+
{{domxref("Headers.keys()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all keys of the key/value pairs contained in this object.
+
{{domxref("Headers.set()")}}
+
Sets a new value for an existing header inside a Headers object, or adds the header if it does not already exist.
+
{{domxref("Headers.values()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all values of the key/value pairs contained in this object.
+
+ +
+

Note: To be clear, the difference between {{domxref("Headers.set()")}} and {{domxref("Headers.append()")}} is that if the specified header does already exist and does accept multiple values, {{domxref("Headers.set()")}} will overwrite the existing value with the new one, whereas {{domxref("Headers.append()")}} will append the new value onto the end of the set of values. See their dedicated pages for example code.

+
+ +
+

Note: All of the Headers methods will throw a TypeError if you try to pass in a reference to a name that isn't a valid HTTP Header name. The mutation operations will throw a TypeError if the header has an immutable {{Glossary("Guard")}}. In any other failure case they fail silently.

+
+ +
+

Note: When Header values are iterated over, they are automatically sorted in lexicographical order, and values from duplicate header names are combined.

+
+ +

Obsolete methods

+ +
+
{{domxref("Headers.getAll()")}}
+
Used to return an array of all the values of a header within a Headers object with a given name; this method has now been deleted from the spec, and {{domxref("Headers.get()")}} now returns all values instead of just one.
+
+ +

Examples

+ +

In the following snippet, we create a new header using the Headers() constructor, add a new header to it using append(), then return that header value using get():

+ +
var myHeaders = new Headers();
+
+myHeaders.append('Content-Type', 'text/xml');
+myHeaders.get('Content-Type') // should return 'text/xml'
+
+ +

The same can be achieved by passing an array of arrays or an object literal to the constructor:

+ +
var myHeaders = new Headers({
+    'Content-Type': 'text/xml'
+});
+
+// or, using an array of arrays:
+myHeaders = new Headers([
+    ['Content-Type', 'text/xml']
+]);
+
+myHeaders.get('Content-Type') // should return 'text/xml'
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#headers-class','Headers')}}{{Spec2('Fetch')}} 
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + + +

 

diff --git a/files/es/web/api/history/index.html b/files/es/web/api/history/index.html new file mode 100644 index 0000000000..03bcb13185 --- /dev/null +++ b/files/es/web/api/history/index.html @@ -0,0 +1,86 @@ +--- +title: History +slug: Web/API/History +tags: + - API + - HTML DOM + - History API + - Interface + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/API/History +--- +
{{ APIRef("History API") }}
+ +

The History interface allows manipulation of the browser session history, that is the pages visited in the tab or frame that the current page is loaded in.

+ +

Properties

+ +

The History interface doesn't inherit any property.

+ +
+
{{domxref("History.length","length")}} {{readOnlyInline}}
+
Returns an Integer representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns 1.
+
{{domxref("History.scrollRestoration","scrollRestoration")}}
+
Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either auto or manual.
+
{{domxref("History.state","state")}} {{readOnlyInline}}
+
Returns an any value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a {{event("popstate")}} event.
+
+ +

Methods

+ +

The History interface doesn't inherit any methods.

+ +
+
{{domxref("History.back","back()")}}
+
This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's Back button. Equivalent to history.go(-1). +
Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.
+
+
{{domxref("History.forward","forward()")}}
+
This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's Forward button; this is equivalent to history.go(1). +
Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.
+
+
{{domxref("History.go","go()")}}
+
Asynchronously loads a page from the session history, identified by its relative location to the current page, for example -1 for the previous page or 1 for the next page. If you specify an out-of-bounds value (for instance, specifying -1 when there are no previously-visited pages in the session history), this method silently has no effect. Calling go() without parameters or a value of 0 reloads the current page. Internet Explorer lets you specify a string, instead of an integer, to go to a specific URL in the history list.
+
{{domxref("History.pushState","pushState()")}}
+
Pushes the given data onto the session history stack with the specified title (and, if provided, URL). The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized.  Note that all browsers but Safari currently ignore the title parameter. For more information, see Working with the History API.
+
{{domxref("History.replaceState","replaceState()")}}
+
Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized.  Note that all browsers but Safari currently ignore the title parameter. For more information, see Working with the History API.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML WHATWG')}}Adds the scrollRestoration attribute.
{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/history/length/index.html b/files/es/web/api/history/length/index.html new file mode 100644 index 0000000000..f8d8bd65ba --- /dev/null +++ b/files/es/web/api/history/length/index.html @@ -0,0 +1,56 @@ +--- +title: History.length +slug: Web/API/History/length +tags: + - API + - DOM HTML + - Historial de navegación + - History + - Lectura + - Navegador + - Propiedad + - historial +translation_of: Web/API/History/length +--- +
{{APIRef("History API")}}
+ +

La propiedad de sólo lectura History.length retorna un entero representando el número de elementos en el historial de la sesión, incluyendo la página cargada actualmente. Por ejemplo, para una página cargada en una nueva pestaña esta propiedad retorna 1.

+ +

Sintaxis

+ +
const length = history.length
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}{{Spec2('HTML WHATWG')}}Sin cambios desde {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}{{Spec2('HTML5 W3C')}}Definición Inicial.
+ +

Compatibilidad de Navegadores

+ + + +

{{Compat("api.History.length")}}

+ +

Mira también

+ + diff --git a/files/es/web/api/history/pushstate/index.html b/files/es/web/api/history/pushstate/index.html new file mode 100644 index 0000000000..29de4cf521 --- /dev/null +++ b/files/es/web/api/history/pushstate/index.html @@ -0,0 +1,96 @@ +--- +title: History.pushState() +slug: Web/API/History/pushState +tags: + - API + - DOM HTML + - Historial de navegación + - History + - History API + - Navegador + - Sesion + - URL + - Web + - historial + - pushState +translation_of: Web/API/History/pushState +--- +
{{APIRef("History API")}}
+ +

En un documento HTML, el método history.pushState() anexa un registro en la sesión de historial del navegador.

+ +

Sintaxis

+ +
history.pushState(state, title, [url])
+ +

Parámetros

+ +
+
state
+
El objeto state es un objeto de JavaScript asociado al nuevo registro en el historial creado por pushState(). Cuando el usuario navega al nuevo registro, un evento {{event("popstate")}} es accionado, y la propiedad state del evento contiene una copia del objeto state del registro en el historial.
+
El objeto state puede ser cualquier cosa que pueda ser serializada. Porque Firefox guarda los objetos  state en el disco del usuario para que así puedan ser restaurados luego de que el usuario reinicia el navegador, se impone un límite de 640k caracteres en la representación serializada de un objeto state. Si pasas un objeto state con una representación serializada más grande que lo mencionado, a pushState(), el método arrojará una excepción. Si necesitas más espacio que el mencionado, es recomendable que uses {{domxref("Window.sessionStorage", "sessionStorage")}} y/o {{domxref("Window.localStorage", "localStorage")}}.
+
title
+
La mayoría de los navegadores ignoran este parámetro, sin embargo, podrían usarlo en el futuro. Pasar una cadena de texto vacía aquí, debería ser seguro contra futuros cambios en el método. Alternativamente, podrías pasar un título corto por el estado al cual te estás moviendo. Si necesitas que el título sea modificado, puedes usar {{domxref("Document.title", "document.title")}}.
+
url {{optional_inline}}
+
La URL del nuevo registro en el historial, se define en este parámetro. Es importante destacar que el navegador no intentará cargar esta URL luego de una llamada a pushState(), pero podría intentar cargar esta URL luego, por ejemplo, luego de que el usuario reinicie el navegador. La nueva URL no necesita ser absoluta; puede ser relativa a la URL actual. La nueva URL debe tener el mismo {{glossary("origin")}} que la URL actual; de otra manera, pushState() arrojará una excepción. Si este parámetro no es especificado, por defecto se usa la URL del documento actual.
+
+ +

Descripción

+ +

En cierto sentido, llamar a pushState() es similar a window.location = "#foo", ambos crearán y activarán un nuevo registro en el historial asociado al documento actual. Pero pushState() tiene unas ventajas adicionales:

+ + + +

Cabe destacar que pushState() nunca hace que el evento {{event("hashchange")}} sea accionado, incluso si la nueva URL difiere de la URL antigua sólo en su hash.

+ +

En otros documentos, crea u nelemento con una URI null.

+ +

Ejemplos

+ +

Esto crea un nuevo registro en el historial del navegador, estableciendo state, title, y url.

+ +

JavaScript

+ +
const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML WHATWG')}}Ningún cambio desde {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML5 W3C')}}Definición Inicial.
+ +

Compatibilidad en Navegadores

+ + + +

{{Compat("api.History.pushState")}}

+ +

Mira también

+ + diff --git a/files/es/web/api/htmlanchorelement/index.html b/files/es/web/api/htmlanchorelement/index.html new file mode 100644 index 0000000000..57cb21820e --- /dev/null +++ b/files/es/web/api/htmlanchorelement/index.html @@ -0,0 +1,279 @@ +--- +title: HTMLAnchorElement +slug: Web/API/HTMLAnchorElement +tags: + - API + - HTML DOM + - Interfaz + - Referencia +translation_of: Web/API/HTMLAnchorElement +--- +
{{APIRef ("HTML DOM")}}
+La interfaz HTMLAnchorElement representa elementos de hipervínculo y proporciona propiedades y métodos especiales (más allá de los de la interfaz de objeto {{domxref ("HTMLElement")}} regular de la que heredan) para manipular el diseño y la presentación de dichos elementos.
+ +

Propiedades

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Hereda propiedades de su elemento primario, {{domxref ("HTMLElement")}}, y las implementa desde {{domxref ("HTMLHyperlinkElementUtils")}}.

+ +

{{domxref ("HTMLAnchorElement.accessKey")}}
+ Es un {{domxref ("DOMString")}} que representa un solo carácter que cambia el foco de entrada al hipervínculo.

+ +


+ {{domxref ("HTMLAnchorElement.charset")}} {{obsolete_inline}}
+ Es un {{domxref ("DOMString")}} que representa la codificación de caracteres del recurso vinculado.

+ +


+ {{domxref ("HTMLAnchorElement.coords")}} {{obsolete_inline}}
+ Es un {{domxref ("DOMString")}} que representa una lista de coordenadas separadas por comas.

+ +

 

+ +
+
{{domxref ("HTMLAnchorElement.download")}} {{experimental_inline}}
+ Es un {{domxref ("DOMString")}} que indica que el recurso vinculado está destinado a descargarse en lugar de mostrarse en el navegador. El valor representa el nombre propuesto del archivo. Si el nombre no es un nombre de archivo válido del sistema operativo subyacente, el navegador lo adaptará.
+

+ {{domxref ("HTMLHyperlinkElementUtils.hash")}}
+ Es un {{domxref ("USVString")}} que representa el identificador de fragmento, incluida la marca hash inicial ('#'), si la hay, en la URL a la que se hace referencia.
+

+ {{domxref ("HTMLHyperlinkElementUtils.host")}}
+ Es un {{domxref ("USVString")}} que representa el nombre de host y el puerto (si no es el puerto predeterminado) en la URL a la que se hace referencia.
+

+ {{domxref ("HTMLHyperlinkElementUtils.hostname")}}
+ Es un {{domxref ("USVString")}} que representa el nombre de host en la URL referenciada.
+
 
+
{{domxref ("HTMLHyperlinkElementUtils.href")}}
+ Es un {{domxref ("USVString")}} que refleja el atributo HTML {{htmlattrxref ("href", "a")}}, que contiene una URL válida de un recurso vinculado.
+

+ {{domxref ("HTMLAnchorElement.hreflang")}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("hreflang", "a")}}, que indica el idioma del recurso vinculado.
+

+ {{domxref ("HTMLAnchorElement.media")}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("media", "a")}}, que indica los medios previstos para el recurso vinculado.
+

+ {{domxref ("HTMLAnchorElement.name")}} {{obsolete_inline}}
+ Es un {{domxref ("DOMString")}} que representa el nombre del ancla.
+ {{domxref ("HTMLHyperlinkElementUtils.password")}}
+ Es un {{domxref ("USVString")}} que contiene la contraseña especificada antes del nombre de dominio.
+
 
+
{{domxref ("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}
+ Devuelve un {{domxref ("USVString")}} que contiene el origen de la URL, que es su esquema, su dominio y su puerto.
+

+ {{domxref ("HTMLHyperlinkElementUtils.pathname")}}
+ Es un {{domxref ("USVString")}} que representa el componente del nombre de ruta, si lo hay, de la URL referenciada.
+

+ {{domxref ("HTMLHyperlinkElementUtils.port")}}
+ Es un {{domxref ("USVString")}} que representa el componente de puerto, si lo hay, de la URL a la que se hace referencia.
+

+ {{domxref ("HTMLHyperlinkElementUtils.protocol")}}
+ Es un {{domxref ("USVString")}} que representa el componente de protocolo, incluidos los puntos finales (':'), de la URL a la que se hace referencia.
+

+ {{domxref ("HTMLAnchorElement.referrerPolicy")}} {{experimental_inline}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo {{htmlattrxref ("referrerpolicy", "a")}} HTML que indica qué referencia usar.
+

+ {{domxref ("HTMLAnchorElement.rel")}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("rel", "a")}}, que especifica la relación del objeto de destino con el objeto vinculado.
+

+ {{domxref ("HTMLAnchorElement.relList")}} {{readonlyInline}}
+ Devuelve un {{domxref ("DOMTokenList")}} que refleja el atributo HTML {{htmlattrxref ("rel", "a")}}, como una lista de tokens.
+

+ {{domxref ("HTMLAnchorElement.rev")}} {{obsolete_inline}}
+ Es un {{domxref ("DOMString")}} que representa el atributo HTML {{htmlattrxref ("rev", "a")}}, que especifica la relación del objeto de enlace con el objeto de destino.
+

+ {{domxref ("HTMLHyperlinkElementUtils.search")}}
+ Es un {{domxref ("USVString")}} que representa el elemento de búsqueda, incluido el signo de interrogación principal ('?'), Si lo hay, de la URL a la que se hace referencia.
+

+ {{domxref ("HTMLAnchorElement.shape")}} {{obsolete_inline}}
+ Es un {{domxref ("DOMString")}} que representa la forma del área activa.
+

+ {{domxref ("HTMLAnchorElement.tabindex")}}
+ Es un largo que contiene la posición del elemento en el orden de navegación de tabulación para el documento actual.
+

+ {{domxref ("HTMLAnchorElement.target")}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("target", "a")}}, que indica dónde mostrar el recurso vinculado.
+

+ {{domxref ("HTMLAnchorElement.text")}}
+ Es un {{domxref ("DOMString")}} un sinónimo de la propiedad {{domxref ("Node.textContent")}}.
+

+ {{domxref ("HTMLAnchorElement.type")}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("type", "a")}}, que indica el tipo MIME del recurso vinculado.
+

+ {{domxref ("HTMLHyperlinkElementUtils.nombre de usuario")}}
+ Es un {{domxref ("USVString")}} que contiene el nombre de usuario especificado antes del nombre de dominio.
+
+ +

Metodos

+ +

Hereda los métodos de su padre, {{domxref ("HTMLElement")}}, y los implementa desde {{domxref ("HTMLHyperlinkElementUtils")}}.

+ +

{{domxref ("HTMLElement.blur ()")}}
+ Elimina el foco del teclado del elemento actual.
+ {{domxref ("HTMLElement.focus ()")}}
+ Da el foco del teclado al elemento actual.
+ {{domxref ("HTMLHyperlinkElementUtils.toString ()")}}
+ Devuelve un {{domxref ("USVString")}} que contiene la URL completa. Es un sinónimo de {{domxref ("URLUtils.href")}}, aunque no se puede usar para modificar el valor.
+ Los métodos blur () y focus () se heredan de {{domxref ("HTMLElement")}} de HTML5 on, pero se definieron en HTMLAnchorElement en DOM Level 2 HTML y especificaciones anteriores.

+ +

 

+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EpecificacionEstadoCommentario
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Se agregó la propiedad de referencia.
{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}{{Spec2('HTML WHATWG')}}Se agregó el refe. Se agregó la siguiente propiedad: descargar.
+ Técnicamente, las propiedades relacionadas con URL, medios, host, nombre de host, ruta, puerto, protocolo, búsqueda y hash, se han movido a la interfaz {{domxref ("URLUtils")}}, y HTMLAreaElement implementa esta propiedad de interface.
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}{{Spec2('HTML5 W3C')}}Los métodos blur () y focus (), así como las propiedades tabindex y accessKey, ahora están definidos en {{domxref ("HTMLElement")}}.
+ Las siguientes propiedades ahora están obsoletas: charset, coords, name, rev y shape.
+ Se han agregado las siguientes propiedades: hash, host, nombre de host, medios, ruta, puerto, protocolo, relList, búsqueda y texto.
{{SpecName('DOM2 HTML', 'html.html#ID-48250443', 'HTMLAnchorElement')}}{{Spec2('DOM2 HTML')}}Sin cambios desde {{SpecName ("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}{{Spec2('DOM1')}}definicion Inicial .
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download{{CompatChrome(14)}}{{CompatVersionUnknown}}20{{CompatUnknown}}15{{CompatUnknown}}
username, password, and origin{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrerPolicy{{CompatChrome(51)}}{{CompatUnknown}}{{CompatGeckoDesktop("50")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download{{CompatChrome(14)}}{{CompatChrome(14)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username, password, and origin{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrerPolicy{{CompatChrome(51)}}{{CompatChrome(51)}}{{CompatUnknown}}{{CompatGeckoMobile("50")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver tambien

+ + diff --git a/files/es/web/api/htmlaudioelement/index.html b/files/es/web/api/htmlaudioelement/index.html new file mode 100644 index 0000000000..0d725ebb14 --- /dev/null +++ b/files/es/web/api/htmlaudioelement/index.html @@ -0,0 +1,77 @@ +--- +title: HTMLAudioElement +slug: Web/API/HTMLAudioElement +tags: + - DOM + - HTML + - Media + - para_revisar +translation_of: Web/API/HTMLAudioElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

La interfaz HTMLAudioElement proporciona acceso a las propiedades de los elementos {{ HTMLElement("audio") }}, así como métodos para manipularlos. Se deriva de la interfaz HTMLMediaElement; se implementa por medio de {{ interface("nsIDOMHTMLMediaElement") }}.

+ +

Para obtener más detalles sobre cómo usar las caracterísitcas de transmisión de sonido que expone esta interfaz, por favor consulta Introducción a la extensión de la API de sonido.

+ +

Propiedades

+ + + + + + + + + + + + + + +
NombreTipoDescripción
mozCurrentSampleOffset {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}unsigned long longIndica el desplazamiento actual de la transmisión de sonido que fue creada por una llamada a mozWriteAudio(). Esta posición de desplazamiento se especifica como el número de muestras desde que se inició la transmisión.
+ +

Métodos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre y argumentosRetornoDescripción
Audio()HTMLAudioElementConstructor para elementos de audio. La propiedad preload del objeto devuelto se establece en auto.
Audio(en DOMString src)HTMLAudioElementConstructor para elementos de audio. La propiedad preload del objeto devuelto se establece a auto; la propiedad src se establece al valor del argumento . El navegador comienza una selección asíncrona del recurso antes de que devuelva el objeto.
+

mozSetup(in PRUint32 channels, in PRUint32 rate) {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}

+ 		-Configura la transmisión de sonido para escritura. Especificas como parámetros el número de canales (1 para mono o 2 para estéreo), a continuación la frecuencia de muestreo ((44100 for 44.1kHz, por ejemplo).
mozWriteAudio(in jsval data) {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}unsigned longInserta en la transmisión la escritura de sonido en la posición de desplazamiento actual . Devuelve el número de bytes que se han escrito en la transmisión.
+ +

Consulta también

+ + + +

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

diff --git a/files/es/web/api/htmlcanvaselement/getcontext/index.html b/files/es/web/api/htmlcanvaselement/getcontext/index.html new file mode 100644 index 0000000000..cb77b1594e --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/getcontext/index.html @@ -0,0 +1,284 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +translation_of: Web/API/HTMLCanvasElement/getContext +--- +
{{APIRef("Canvas API")}}
+ +

El método HTMLCanvasElement.getContext() retorna un contexto de dibujo en el lienzo, o {{jsxref("null")}} si el identificador del contexto no está soportado.

+ +

Sintaxis

+ +
canvas.getContext(contextType, contextAttributes);
+
+ +

Parámetros

+ +
+
contextType
+
Es una  {{domxref("DOMString")}} que contiene el identificador del contexto que define el contexto de dibujo asociado a el lienzo. Los posibles valores son: +
    +
  • "2d", dando lugar a la creación de un objeto {{domxref("CanvasRenderingContext2D")}} que representa un contexto de renderizado de dos dimensiones.
    • +
  • "webgl" (o "experimental-webgl") el cual creará  un objeto {{domxref("WebGLRenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan WebGL version 1 (OpenGL ES 2.0).
    • +
  • "webgl2" (o "experimental-webgl2") el cual creará un objeto {{domxref("WebGL2RenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan WebGL version 2 (OpenGL ES 3.0). {{experimental_inline}}
    • +
  • "bitmaprenderer" el cuál creará un {{domxref("ImageBitmapRenderingContext")}} que únicamente provee funcionalidad para remplazar el contenido del lienzo con un {{domxref("ImageBitmap")}} dado.
    • +
+ +

Nota: Los identificadores  "experimental-webgl" o "experimental-webgl2" son usados en nuevas implementaciones de WebGL. Estas implementaciones no han logrado aprobar el conjunto de pruebas de conformidad o la situación de los controladores gráficos en la plataforma no es estable aun. Khronos Group certifica las implementaciones de WebGL bajo ciertas reglas de conformidad.

+
+
contextAttributes
+
+

Puedes usar varios atributos al momento de crear tu contexto de renderizado. Por ejemplo:

+ + 
canvas.getContext('webgl',
+                 { antialias: false,
+                   depth: false });
+ Atributos del contexto 2d: + +
    +
  • alpha: Booleano que indica si el lienzo contiene canal alfa. Si es asignado falso, el naveagdor sabe que el fondo siempre es opaco, lo cual puede acelerar el dibujado de contenido transparente e imágenes.
    • +
  • {{non-standard_inline}} (Gecko únicamente) willReadFrequently: Booleano que indica si muchas operaciones de read-back están planeadas o no. Esto forzará el uso de software (en lugar de aceleración de hardware) y puede ahorrar memoria al llamar {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} constantemente. Esta opción solo está disponible si gfx.canvas.willReadFrequently.enable es verdadero(lo cual solo está asignado por defecto en B2G/Firefox OS).
    • +
  • {{non-standard_inline}} (Blink únicamente) storage: Cadena que indica si el almacenamiento es usado ("persistent"  por defecto).
    • +
+ Atributos del contexto WebGL: + +
    +
  • alpha: Booleano que indica si el lienzo contiene un buffer alfa.
    • +
  • depth: Booleano que indica si el buffer de dibujo tiene un buffer de profundidad de al menos 16 bits.
    • +
  • stencil: Booleano que indica si el buffer de dibujo tiene un stencil de al menos 8 bits.
    • +
  • antialias: Booleano que indica si se debe aplicar anti-aliasing.
    • +
  • premultipliedAlpha: Booleano que indica que el compositor de páginas asumirá que el buffer de dibujo contiene colores con alfa premultiplicado.
    • +
  • preserveDrawingBuffer: Si es verdadero los buffers no se limpiarán y mantendrán sus valores hasta que el autor los limpie o los sobreescriba.
    • +
  • +

    failIfMajorPerformanceCaveat: Booleano que indica si un contexto será creado si el rendimiento del sistema es bajo.

    +
    • +
+
+
+ +

Valor de retorno

+ +

Un {{domxref("RenderingContext")}} que puede ser:

+ + + +

Si contextType no corresponde con un posible contexto de dibujo retorna null.

+ +

Ejemplos

+ +

Dado este elemento {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas" width="300" height="300"></canvas>
+
+ +

Puedes obtener un contexto 2d del canvas con el código siguiente:

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+
+ +

Ahora tienes el contexto de renderizado 2D para un canvas y puedes dibujar en él.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML WHATWG')}}Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5 W3C')}}Snapshot del {{SpecName('HTML WHATWG')}} que contiene la definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2d context){{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatIE(9)}}{{CompatOpera(9)}}{{CompatSafari(3.1)}}
webgl context{{CompatChrome(9)}}[1]
+ {{CompatChrome(33)}}		{{CompatVersionUnknown}}{{CompatGeckoDesktop('1.9.2')}}[1]
+ {{CompatGeckoDesktop('24')}}		11.0[2]9.0[3]5.1[2]
webgl2 context {{experimental_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop('25')}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}
2d alpha context attribute32{{CompatUnknown}}{{CompatGeckoDesktop(30)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+

failIfMajorPerformanceCaveat attribute

+ 		{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(41)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
bitmaprenderer context{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop(46)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2d context){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
webgl2 context {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
2d alpha context attribute{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(30)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
failIfMajorPerformanceCaveat attribute{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
bitmaprenderer context{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(46)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Chrome 9 y Gecko 1.9.2 inicialmente implementaron esta como experimental-webgl. A partir de Chrome 33 y Gecko 24 es implementado como webgl estándar.

+ +

[2] Internet Explorer 11, WebKit 5.1 y Firefox Mobile implementaron esto como  experimental-webgl.

+ +

[3] Opera 9 implementó esto como experimental-webgl, behind a user preference, in version 15.0 the user preference got removed.

+ +

[4] Gecko 25 implements this as "experimental-webgl2" behind the user preference webgl.enable-prototype-webgl2. Starting with Gecko 42, the string "webgl2" is used behind the same preference.

+ +

See also

+ + diff --git a/files/es/web/api/htmlcanvaselement/height/index.html b/files/es/web/api/htmlcanvaselement/height/index.html new file mode 100644 index 0000000000..0d2fa7f2e2 --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/height/index.html @@ -0,0 +1,121 @@ +--- +title: HTMLCanvasElement.height +slug: Web/API/HTMLCanvasElement/height +tags: + - Propiedad +translation_of: Web/API/HTMLCanvasElement/height +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

La propiedad HTMLCanvasElement.height es un entero positivo que refleja el atributo {{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}}  interpretado en pixeles CSS. Cuando el atributo no esta especificado o esta puesto en un valor invalido(ej. Número negativo), es usado el valor por defecto de 150.

+ +

Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.width")}}.

+ +

Syntax

+ +
var pxl = canvas.height;
+canvas.height = pxl;
+
+ +

Ejemplos

+ +

Dado el siguiente elemento {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas" width="300" height="300"></canvas>
+
+ +

Puedes obtener la altura del canvas con el siguiente codigo:

+ +
var canvas = document.getElementById("canvas");
+console.log(canvas.height); // 300
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónStatusComentarios
{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML WHATWG')}}No hay cambios desde la ultima foto {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5 W3C')}}Foto que contiene la definición inicial {{SpecName('HTML WHATWG')}}.
+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatChrome(4) }}{{ CompatGeckoDesktop("1.9.2") }}{{ CompatIE(9) }}{{ CompatOpera(9) }}{{ CompatSafari(3.1) }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/htmlcanvaselement/index.html b/files/es/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..07a570f193 --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/index.html @@ -0,0 +1,249 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+
+ +

La interfaz HTMLCanvasElement provee propiedades y métodos para manipular la capa de presentación de los elementos de tipo canvas. La interfaz HTMLCanvasElement también hereda las propiedades y métodos de la interfaz {{domxref("HTMLElement")}} .

+ +

Propiedades

+ +

Hereda propiedades de la interfaz padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Un entero positivo que se asocia al atributo HTML {{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretada en píxeles CSS. Cuando el atributo no está especificado, o si este se inicializa a un valor inválido, como un negativo, el valor 150 es usado por defecto.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
Un {{jsxref("Boolean")}} asociado al atributo HTML {{htmlattrxref("moz-opaque", "canvas")}} del elemento {{HTMLElement("canvas")}} . Proporciona al canvas una forma de saber si  la transparencia será considerada un factor. Si el canvas conoce que no hay transparencia, el desempeño de renderezación será optimizado.
+
{{domxref("HTMLCanvasElement.width")}}
+
Un entero positivo asociado al atributo HTML {{htmlattrxref("width", "canvas")}} del elemento canvas {{HTMLElement("canvas")}} interpretado en píxeles CSS. Cuando el atributo no está especificado, o si se inicializa a un valor inválido, como un negativo, se utiliza el valor 300 por defecto.
+
+ +

Métodos

+ +

Herada métodos de la interfaz padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Retorna un {{domxref("CanvasCaptureMediaStream")}} que es una captura de video en tiempo real, de la superficie del canvas.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Retorna el contexto del dibujado del canvas, o bien null(nulo) si el ID de contexto no está soportado. Un contexto de dibujo, te permite dibujar sobre el canvas. Llamando al método getContext con el parámetro "2d" retorna un objeto {{domxref("CanvasRenderingContext2D")}} , mientras que el llamarlo con el parámetroca "experimental-webgl" (o "webgl") retorna un objeto {{domxref("WebGLRenderingContext")}} . Este tipo de contexto sólo está disponible en navegadores que implementen WebGL.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Retorna una data-URL conteniendo una representación de la imagen en el formato especificado por el tipo de parámetro(png por defecto). La imagen de retorno se encuentra a una resolución de 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Crea un objeto {{domxref("Blob")}} representando la imagen contenida en el canvas; este archivo puede ser cacheado en disco o bien almacenado en memoria, lo cual dependerá del "user-agent"(especificación del navegador).
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Retorna un objeto {{domxref("File")}} representando una imagen contenida en el canvas; este archivo es del tipo memory-based, con su nombre especificado. Si el tipo no se especifica, el tipo usado por defecto es image/png.
+
{{domxref("HTMLCanvasElement.mozFetchAsStream()")}} {{non-standard_inline}}
+
Crea un nuevo flujo de entrada, el cual una vez listo, proveerá los contenidos del canvas como datos de imagen. Cuando el nuevo flujo está listo, la retrollamada específica el método {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}} es invocada. Si no se especifica el tipo, el tipo de imagen por defecto es image/png. +
Nota: Sólo puede ser invocado desde Chrome.
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Añade el método  captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}El método getContext()ahora retorna un objeto {{domxref("RenderingContext")}} en vez de un objeto opaco.
+ Los métodos  probablySupportsContext(), setContext() y transferControlToProxy() han sido añadidos.
{{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')}}Definición Inicial.
+ +

Compatibilidad en Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (2D context)4.0{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
webgl context9.0 as experimental-webgl
+ ~33 as webgl		{{CompatGeckoDesktop('1.9.2')}} as experimental-webgl
+ {{CompatGeckoDesktop('24')}} as webgl		11.0 as experimental-webgl9.0 as experimental-webgl, behind a user pref.
+ 15.0 as experimental-webgl		5.1 as experimental-webgl
+ ~8.0 as webgl
toBlob(){{CompatNo}} (bug 67587){{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}}
mozFetchAsStream() {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop('13')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (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){{CompatNo}} (bug 67587){{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}}
mozFetchAsStream() {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('13')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Opera Mini 5.0 y posteriores poseen soporte parcial.

+ +

[2] Soporte para un tercer parámetro, ha sido añadido sólo en Gecko 25: cuando se utiliza con el tipo "image/jpeg", este argumento especifica la calida de imagen.

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlcanvaselement/toblob/index.html b/files/es/web/api/htmlcanvaselement/toblob/index.html new file mode 100644 index 0000000000..4759cd6250 --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/toblob/index.html @@ -0,0 +1,261 @@ +--- +title: HTMLCanvasElement.toBlob() +slug: Web/API/HTMLCanvasElement/toBlob +translation_of: Web/API/HTMLCanvasElement/toBlob +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

EL metodo HTMLCanvasElement.toBlob() crea un objeto {{domxref("Blob")}} que representa la imagen contenida en el canvas; este archivo puede ser cacheado en el disco oo guardado en la memoria a desicion del  user agent. Si la propiedad type no se especifica el tipo de la imagen será image/png. La imagen creada tiene una resolución de 96dpi.
+ El tercer argumento es usado con las imagenes  image/jpeg para especificar la calidad de salida.

+ +

Syntax

+ +
void canvas.toBlob(callback, type, encoderOptions);
+
+ +

Parameters

+ +
+
callback
+
A callback function with the resulting {{domxref("Blob")}} object as a single argument.
+
type {{optional_inline}}
+
A {{domxref("DOMString")}} indicating the image format. The default type is image/png.
+
encoderOptions {{optional_inline}}
+
A {{jsxref("Number")}} between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default value for image quality is used. Other arguments are ignored.
+
+ +

Return value

+ +

None.

+ +

Examples

+ +

Getting a file representing the canvas

+ +

Once you have drawn content into a canvas, you can convert it into a file of any supported image format. The code snippet below, for example, takes the image in the {{HTMLElement("canvas")}} element whose ID is "canvas", obtains a copy of it as a PNG image, then appends a new {{HTMLElement("img")}} element to the document, whose source image is the one created using the 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);
+});
+
+ +

Note that here we're creating a PNG image; if you add a second parameter to the toBlob() call, you can specify the image type. For example, to get the image in JPEG format:

+ +
 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality
+ +
+

A way to convert a canvas to an ico (Mozilla only)

+ +

This uses -moz-parse to convert the canvas to ico. Windows XP doesn't support converting from PNG to ico, so it uses bmp instead. A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.

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

Save toBlob to disk with OS.File (chrome/add-on context only)

+ +
+

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

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

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{{CompatNo}}[1]{{CompatGeckoDesktop('19')}}{{CompatIE(10)}}{{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}[2]
Image quality parameter (jpeg){{CompatNo}}{{CompatGeckoDesktop('25')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
Image quality parameter (jpeg){{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Chrome does not implement this feature yet. See bug 67587.

+ +

[2] WebKit does not implement this feature yet. See {{WebKitBug("71270")}}.

+ +

See also

+ + diff --git a/files/es/web/api/htmlcanvaselement/todataurl/index.html b/files/es/web/api/htmlcanvaselement/todataurl/index.html new file mode 100644 index 0000000000..30e2fdd71a --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/todataurl/index.html @@ -0,0 +1,159 @@ +--- +title: HTMLCanvasElement.toDataURL() +slug: Web/API/HTMLCanvasElement/toDataURL +tags: + - API + - Canvas + - HTMLCanvasElement + - Lienzo + - Referencia + - metodo +translation_of: Web/API/HTMLCanvasElement/toDataURL +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

El método HTMLCanvasElement.toDataURL() devuelve un data URI el cual contiene una representación de la imagen en el formato especificado por el parámetro type (por defecto es PNG). La imagen obtenida tendrá una resolución de 96 dpi.

+ + + +

Sintaxis

+ +
canvas.toDataURL(tipo, opcionesCodificación);
+
+ +

Parámetros

+ +
+
tipo{{optional_inline}}
+
Un {{domxref("DOMString")}} indicando el formato de la imagen. El tipo por defecto es image/png.
+
opcionesCodificación{{optional_inline}}
+
Un {{jsxref("Number")}} entre 0 y 1 indicando la calidad de la imagen si el tipo solicitado es image/jpeg o image/webp.
+ Si este argumento es cualquier otra cosa, se usa el valor por defecto de la imagen. El valor por defecto es 0.92. Otros argumentos se ignoran.
+
+ +

Valor devuelto

+ +

Un {{domxref("DOMString")}} que contiene el valor data URI.

+ +

Ejemplos

+ +

Dado un elemento {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas" width="5" height="5"></canvas>
+
+ +

Puedes obtener el data-URL del canvas con las siguientes líneas:

+ +
var canvas = document.getElementById('canvas');
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+
+ +

Establecer la calidad de imagen con jpegs

+ +
var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
+// "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
+var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
+var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
+
+ +

Ejemplo: Cambiar imágenes dinámicamente

+ +

Se puede usar esta técnica junto con los eventos del mouse para cambiar las imágenes de manera dinámica (escala de grises versus color en este ejemplo):

+ +

HTML

+ +
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />
+ +

JavaScript

+ +
window.addEventListener('load', quitarColor);
+
+function verImgEnColor() {
+  this.style.display = 'none';
+  this.nextSibling.style.display = 'inline';
+}
+
+function verImgEnGris() {
+  this.previousSibling.style.display = 'inline';
+  this.style.display = 'none';
+}
+
+function quitarColor() {
+  var aImages = document.getElementsByClassName('escalagrises'),
+      nImgsLen = aImages.length,
+      oCanvas = document.createElement('canvas'),
+      oCtx = oCanvas.getContext('2d');
+  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
+    var oColorImg = aImages[nImgId];
+    nWidth = oColorImg.offsetWidth;
+    nHeight = oColorImg.offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oColorImg, 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
+    aPix = oImgData.data;
+    nPixLen = aPix.length;
+    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oGrayImg = new Image();
+    oGrayImg.src = oCanvas.toDataURL();
+    oGrayImg.onmouseover = verImgEnColor;
+    oColorImg.onmouseout = verImgEnGris;
+    oCtx.clearRect(0, 0, nWidth, nHeight);
+    oColorImg.style.display = "none";
+    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+  }
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML WHATWG')}}Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML5 W3C')}}Snapshot del {{SpecName('HTML WHATWG')}} con la definición inicial.
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("api.HTMLCanvasElement.toDataURL")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlcanvaselement/width/index.html b/files/es/web/api/htmlcanvaselement/width/index.html new file mode 100644 index 0000000000..1eb26275af --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/width/index.html @@ -0,0 +1,119 @@ +--- +title: HTMLCanvasElement.width +slug: Web/API/HTMLCanvasElement/width +translation_of: Web/API/HTMLCanvasElement/width +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

TLa propiedad  HTMLCanvasElement.width es un entero positivo que refleja el atributo {{htmlattrxref("width", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretado en pixeles CSS. Cuando el atributo no esta especificado o se define con un valor invalido (ej. Número negativo), es usado el valor por defecto de 150.

+ +

Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.height")}}, that controls the size of the canvas.

+ +

Syntax

+ +
var pxl = canvas.width;
+canvas.width = pxl;
+
+ +

Ejemplos

+ +

Dado el siguiente elemento {{HTMLElement("canvas")}} :

+ +
<canvas id="canvas" width="300" height="300"></canvas>
+
+ +

Puedes obtener el ancho del canvas con el siguiente codigo:

+ +
var canvas = document.getElementById("canvas");
+console.log(canvas.width); // 300
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónStatusComentarios
{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML WHATWG')}}No hay cambios desde la ultima foto {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML5 W3C')}}Foto que contiene la definición inicial {{SpecName('HTML WHATWG')}}.
+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
BSoporte Básico{{ CompatChrome(4) }}{{ CompatGeckoDesktop("1.9.2") }}{{ CompatIE(9) }}{{ CompatOpera(9) }}{{ CompatSafari(3.1) }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/htmlcollection/index.html b/files/es/web/api/htmlcollection/index.html new file mode 100644 index 0000000000..6d255f4536 --- /dev/null +++ b/files/es/web/api/htmlcollection/index.html @@ -0,0 +1,99 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +tags: + - API + - DOM + - HTML DOM + - HTMLCollection + - Interfaz + - Lista de elementos + - Referencia + - Referência DOM +translation_of: Web/API/HTMLCollection +--- +

{{APIRef("HTML DOM")}}

+ +

La interfaz HTMLCollection representa una colección genérica (objeto tipo array similar a arguments) de elementos (en orden de documento) y ofrece métodos y propiedades para seleccionarlos de la lista.

+ +
Nota: Esta interfaz se llama HTMLCollection por razones históricas (antes del DOM moderno, las colecciones que implementaban esta interfaz sólo podían tener elementos HTML como sus ítems).
+ +

Una HTMLCollection en el DOM de HTML está viva; se actualiza automáticamente cuando el documento subyacente cambia.

+ +

Propiedades

+ +
+
{{domxref("HTMLCollection.length")}} {{readonlyInline}}
+
Devuelve el numero de ítems en la colección.
+
+ +

Métodos

+ +
+
{{domxref("HTMLCollection.item()")}}
+
Devuelve el nodo específicado en el índice en base cero dentro de la lista. Devuelve null si el índice está fuera de rango.
+
{{domxref("HTMLCollection.namedItem()")}}
+
Devuelve el nodo específico cuyo ID o, en último caso, cuyo nombre coincide con la cadena especificada por name. La coincidencia por nombre sólo se hace como último recurso, sólo en HTML, y sólo si el elemento referenciado soporta el atributo name. Devuelve null si no existe ningún nodo con el nombre indicado.
+
+ +

Uso en JavaScript

+ +

HTMLCollection también expone a sus miembros directamente como propiedades tanto por name como por index. Los IDS de HTML deben contener : y . como caracteres válidos, los cuales necesitan del uso de corchetes para acceder a sus propiedades. Actualmente las HTMLCollections no reconocen los IDS puramente numéricos, lo que causaría conflicto con el acceso al estilo array, aunque HTML5 sí permite estos.

+ +

Por ejemplo, suponiendo que hay un elemento <form> en el documento y que su id es "myForm":

+ +
var elem1, elem2;
+
+// document.forms es un HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // muestra: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // muestra: "true"
+
+elem1 = document.forms["named.item.with.periods"];
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{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') }}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

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

+ +

Vea también

+ + diff --git a/files/es/web/api/htmlcontentelement/getdistributednodes/index.html b/files/es/web/api/htmlcontentelement/getdistributednodes/index.html new file mode 100644 index 0000000000..c4aad9ddb8 --- /dev/null +++ b/files/es/web/api/htmlcontentelement/getdistributednodes/index.html @@ -0,0 +1,95 @@ +--- +title: HTMLContentElement.getDistributedNodes() +slug: Web/API/HTMLContentElement/getDistributedNodes +tags: + - Necesita traducción +translation_of: Web/API/HTMLContentElement/getDistributedNodes +--- +

{{ APIRef("Web Components") }}

+ +

The HTMLContentElement.getDistributedNodes() method returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <content> element.

+ +

Syntax

+ +
var nodeList = object.getDistributedNodes()
+
+ +

Example

+ +
// Get the distributed nodes
+var nodes = myContentObject.getDistributedNodes();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] If Shadow DOM is not enabled in Firefox, <content> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.

+ +

See also

+ + diff --git a/files/es/web/api/htmlcontentelement/index.html b/files/es/web/api/htmlcontentelement/index.html new file mode 100644 index 0000000000..637210416d --- /dev/null +++ b/files/es/web/api/htmlcontentelement/index.html @@ -0,0 +1,110 @@ +--- +title: HTMLContentElement +slug: Web/API/HTMLContentElement +tags: + - Necesita traducción +translation_of: Web/API/HTMLContentElement +--- +

{{ APIRef("Web Components") }}

+ +

{{Deprecated_header}}

+ +

The HTMLContentElement interface represents a {{HTMLElement("content")}} HTML Element, which is used in Shadow DOM. 

+ +

Properties

+ +

This interface inherits the properties of {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLContentElement.select")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("select", "content") }} HTML attribute. The value is a comma-separated list of CSS selectors that select the content to insert in place of the <content> element.
+
+ +

Methods

+ +

This interface inherits the methods of {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLContentElement.getDistributedNodes()")}}
+
Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <content> element. 
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] If Shadow DOM is not enabled in Firefox, <content> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.

+ +

See also

+ + + +
+
 
+
diff --git a/files/es/web/api/htmlcontentelement/select/index.html b/files/es/web/api/htmlcontentelement/select/index.html new file mode 100644 index 0000000000..916be57621 --- /dev/null +++ b/files/es/web/api/htmlcontentelement/select/index.html @@ -0,0 +1,95 @@ +--- +title: HTMLContentElement.select +slug: Web/API/HTMLContentElement/select +tags: + - Necesita traducción +translation_of: Web/API/HTMLContentElement/select +--- +

{{ APIRef("Web Components") }}

+ +

The HTMLContentElement.select property reflects the select attribute. It is a {{domxref("DOMString")}} containing a space-separated list of CSS selectors that select the content to insert in place of the <content> element.

+ +

Syntax

+ +
object.select = "CSSselector CSSselector ...";
+
+ +

Example

+ +
// Select <h1> elements and elements with class="error"
+myContentObject.select = "h1 .error";
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] If Shadow DOM is not enabled in Firefox, <content> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.

+ +

See also

+ + diff --git a/files/es/web/api/htmldivelement/index.html b/files/es/web/api/htmldivelement/index.html new file mode 100644 index 0000000000..164b6f7108 --- /dev/null +++ b/files/es/web/api/htmldivelement/index.html @@ -0,0 +1,125 @@ +--- +title: HTMLDivElement +slug: Web/API/HTMLDivElement +tags: + - API + - HTML DOM + - Interfaz + - NeedsNewLayout + - Referencia +translation_of: Web/API/HTMLDivElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +
 
+ +

La interfaz HTMLDivElement provee propiedades especiales (más allá de la interfaz regular {{domxref("HTMLElement")}} que también está disponible por herencia) para manipular elementos div.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Propiedades

+ +

Hereda las propiedades de su padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que representa una propiedad enumerada que indica la alineación de los contenidos del elemento con respecto al contexto circundante. Los posibles valores son "left", "right", "justify", and "center".
+
+ +

Métodos

+ +

No hay métodos específicos; hereda los métodos de su padre, {{domxref("HTMLElement")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "grouping-content.html#the-div-element", "HTMLDivElement")}}{{Spec2('HTML WHATWG')}}No hay cambios de  {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}{{Spec2('HTML5 W3C')}}No hay cambios de {{SpecName("DOM2 HTML")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}{{Spec2('DOM2 HTML')}}No hay cambios de {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FuncionalidadChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FuncionalidadAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/change_event/index.html b/files/es/web/api/htmlelement/change_event/index.html new file mode 100644 index 0000000000..25642a5322 --- /dev/null +++ b/files/es/web/api/htmlelement/change_event/index.html @@ -0,0 +1,143 @@ +--- +title: 'HTMLElement: Evento change' +slug: Web/API/HTMLElement/change_event +tags: + - Change + - DOM + - Evento + - HTML + - Referencia + - Web +translation_of: Web/API/HTMLElement/change_event +--- +
{{APIRef}}
+ +

El evento change se dispara para elementos {{HTMLElement("input")}}, {{HTMLElement("select")}}, y {{HTMLElement("textarea")}} cuando una alteración al valor de un elemento es confirmada por el usuario. A diferencia del evento {{event("input")}}, el evento change no es disparado necesariamente por cada alteración al valor value del elemento

+ + + + + + + + + + + + + + + + + + + + +
BurbujasSí
CancelableNo
Interfaz{{domxref("Event")}}
Propiedad del manejador del eventoonchange
+ +

Dependiendo del tipo de elemento siendo cambiado y la forma en que el usuario interactua con el elemento, el evento change dispara en un momento diferente:

+ + + +

La especificaciones HTML listan los tipos de <input> que deberían disparar el evento change.

+ +

Ejemplos

+ +

Ejemplos Live: Elemento select

+ +
+

HTML

+ +
<label>Elija un sabor de nieve:
+    <select class="nieve" name="nieve">
+        <option value="">Seleccione Uno …</option>
+        <option value="chocolate">Chocolate</option>
+        <option value="sardina">Sardina</option>
+        <option value="vainilla">Vainilla</option>
+    </select>
+</label>
+
+<div class="resultado"></div>
+ + + +

JS

+ +
const selectElement = document.querySelector('.nieve');
+
+selectElement.addEventListener('change', (event) => {
+    const resultado = document.querySelector('.resultado');
+    resultado.textContent = `Te gusta el sabor ${event.target.value}`;
+});
+
+
+ +

Resultado

+ +

{{ EmbedLiveSample('select-example', '100%', '75px') }}

+ +

Elemento de entrada de texto

+ +

Para algunos elementos, incluyendo <input type="text">, el evento change no se lanza hasta que el campo pierde el foco. Prueba a introducir algo en el campo anterior, y luego pulsa en algún otro lugar para lanzar el evento.

+ +

HTML

+ +
<input placeholder="Enter some text" name="name"/>
+<p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('change', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Text_input_element', '100%', '75px') }}

+ +

Especificaciones

+ + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', "indices.html#event-change", "change")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.change_event")}}

+ +

Diferentes navegadores no siempre concuerdan cuando un evento change debería ser disparado para ciertos tipo de interacciones. Por ejemplo, navegación por teclado en en elementos {{HTMLElement("select")}} nunca disparan el evento change en Gecko hasta que el usuario presiona Enter o cambia el foco fuera del <select> (ver {{bug("126379")}}). A partir de Firefox 63 (Quantum), sin embargo, este comportamiento es consistente entre los mayores navegadores.

diff --git a/files/es/web/api/htmlelement/click/index.html b/files/es/web/api/htmlelement/click/index.html new file mode 100644 index 0000000000..0f6d7983c7 --- /dev/null +++ b/files/es/web/api/htmlelement/click/index.html @@ -0,0 +1,88 @@ +--- +title: HTMLElement.click() +slug: Web/API/HTMLElement/click +tags: + - HTMLElement + - Referencia + - metodo +translation_of: Web/API/HTMLElement/click +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

El método HTMLElement.click() simula el click de un ratón físico en un elemento HTML.

+ +

Cuando click() se usa en un elemento que soporte este método (como un elemento {{HTMLElement("input")}}), el elemento lanza el evento asociado al click. Luego, este evento iniciará otros eventos asociados al clicado en elementos más altos en la jerarquía del documento html (o de la cadena de eventos).

+ +

Sintaxis

+ +
elemento.click()
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}{{Spec2('DOM2 HTML')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.click")}}

+ + +

Traducción en Español:

+ + + +
+
¿Necesitas ayuda? • Guía editorial • Guía de estilo
+ +
+
+
 
+ +
Borrador autoguardado:
+
+ +
+
+
 
+ +
+
 
+
+
+
+
+
+ +
+
+
+
+
+
+
 
+
+
+
+
+
+
+ +

 

diff --git a/files/es/web/api/htmlelement/contenteditable/index.html b/files/es/web/api/htmlelement/contenteditable/index.html new file mode 100644 index 0000000000..bbb0749b7f --- /dev/null +++ b/files/es/web/api/htmlelement/contenteditable/index.html @@ -0,0 +1,57 @@ +--- +title: HTMLElement.contentEditable +slug: Web/API/HTMLElement/contentEditable +translation_of: Web/API/HTMLElement/contentEditable +--- +
{{APIRef("HTML DOM")}}
+ +

La propiedad contentEditable de la interfaz {{domxref("HTMLElement")}} especifica si el elemento es editable o no. Este atributo puede tener los siguientes valores:

+ + + +

Se puede usar la propiedad {{domxref("HTMLElement.isContentEditable")}} para comprobar el valor {{jsxref("Boolean")}} de esta propiedad.

+ +

Sintáxis

+ +
editable = element.contentEditable
+element.contentEditable = 'true'
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.contentEditable")}}

+ +

In Internet Explorer, contenteditable cannot be applied to the {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}}, and {{htmlelement("tr")}} elements directly. A content editable {{htmlelement("span")}} or {{htmlelement("div")}} element can be placed inside the individual table cells.

+ +

See also

+ + diff --git a/files/es/web/api/htmlelement/dataset/index.html b/files/es/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..10c6f555f9 --- /dev/null +++ b/files/es/web/api/htmlelement/dataset/index.html @@ -0,0 +1,132 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +
{{ APIRef("HTML DOM") }}
+ +

La propiedad dataset en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los atributos de datos personalizados (data-*) de cada uno de los elementos. Está disponible el acceso en HTML y en el DOM.  Dentro del map of DOMString, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad dataset puede leerse, pero no modificarse directamente.  En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del dataset, que representan a cada atributo correspondiente. Además un HTML data-attribute y su correspondiente DOM dataset.property no comparten el mismo nombre, pero son siempre similares:

+ + + +

Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo Using data attributes.

+ +

Conversion de nombres

+ +

dash-style a camelCase: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas

+ + + +

camelCase a dash-style: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:

+ + + +

La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.

+ +

Por ejemplo, el atributo nombrado data-abc-def corresponde a la clave abcDef.

+ + + +

Accediendo valores

+ + + +

Definiendo valores

+ + + +

Sintaxis

+ + + +

Ejemplos

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
const el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// set the data attribute
+el.dataset.dateOfBirth = '1960-10-03';
+// Result: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Result: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Result: 'someDataAttr' in el.dataset === true
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.dataset")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/focus/index.html b/files/es/web/api/htmlelement/focus/index.html new file mode 100644 index 0000000000..d615cbf12e --- /dev/null +++ b/files/es/web/api/htmlelement/focus/index.html @@ -0,0 +1,164 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +tags: + - API + - HTML DOM + - HTMLElement + - Referencia + - metodo +translation_of: Web/API/HTMLOrForeignElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

El método HTMLElement.focus() fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.

+ +

Sintaxis

+ +
element.focus();
+element.focus(focusOption); // Object parameter
+ +

Parámetros

+ +
+
focusOptions {{optional_inline}} {{experimental_inline}}
+
Es un objeto con la siguiente propiedad:
+
+
+
preventScroll {{optional_inline}}
+
Es un valor Boolean: +
    +
  • Si es false, el método hará scroll hasta que el elemento esté visible en la ventana del navegador
    • +
  • Si es true,  el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.
    • +
+
+
+
+
+ +

Ejemplos

+ +

Enfocar un campo de texto

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

HTML

+ +
<input type="text" id="myTextField" value="Campo de texto.">
+<p></p>
+<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el campo de texto!</button>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

Enfocar un botón

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+
+ +

HTML

+ +
<button type="button" id="myButton">Púlsame!</button>
+<p></p>
+<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el botón!</button>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ + + +

Enfocar con focusOption

+ +

JavaScript

+ +
focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+
+ +

HTML

+ +
<button type="button" onclick="focusScrollMethod()">¡Púlsame para enfocar el botón!</button>
+<button type="button" onclick="focusNoScrollMethod()">¡Púlsame para enfocar el botón sin hacer scroll!</button>
+
+<div id="container" style="height: 1000px; width: 1000px;">
+<button type="button" id="myButton" style="margin-top: 500px;">¡Púlsame!</button>
+</div>
+
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_prevent_scroll') }}

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
+ +

Notas

+ +

Si se llama a HTMLElement.focus() desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método event.preventDefault() para evitar que el foco abandone HTMLElement.

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.focus")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/index.html b/files/es/web/api/htmlelement/index.html new file mode 100644 index 0000000000..d27114fccc --- /dev/null +++ b/files/es/web/api/htmlelement/index.html @@ -0,0 +1,402 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API +translation_of: Web/API/HTMLElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +
+ +
La interfaz HTMLElement representa cualquier elemento HTML. Algunos elementos implementan directamente esta interfaz, otros la implementan a través de una interfaz que hereda de ella.
+ +

Properties

+ +

Hereda propiedades de su padre, {{domxref("Element")}}, y los implementalo de  {{domxref("GlobalEventHandlers")}} y {{domxref("TouchEventHandlers")}}.

+ +
+
{{domxref("HTMLElement.accessKey")}}
+
Es un {{domxref("DOMString")}} que representa la clave de acceso al elemento.
+
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
+
Devuelve un {{domxref("DOMString")}} que contiene la clave asignada del elemento.
+
{{domxref("HTMLElement.contentEditable")}}
+
Es un  {{domxref("DOMString")}}, donde el valor "true" significa que el elemento es editable y si el valor es "false" significa que no lo es.
+
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
+
Devuelve un {{domxref("Boolean")}} si el contenido del elemento puede ser editado.
+
{{domxref("HTMLElement.contextMenu")}}
+
Es un  {{domxref("HTMLMenuElement")}} que representa el menú contextual asociado al elemento. Puede ser null
+
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
+
Devuelve un {{domxref("DOMStringMap")}} que permite el acceso de lectura y escritura de los atributos personalizados del elemento (data-*) .
+
{{domxref("HTMLElement.dir")}}
+
Es un {{domxref("DOMString")}}, que refleja el atributo global dir, representando la direccionalidad del elemento. Los posibles valores son "ltr", "rtl", and "auto".
+
{{domxref("HTMLElement.draggable")}}
+
Es un {{jsxref("Boolean")}} que indica si el elemento puede ser arrastrado..
+
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
+
Devuelve un {{domxref("DOMSettableTokenList")}} que refleja el atributo global dropzone y describe el comportamiento del elemento con respecto a una operación de soltar.
+
{{domxref("HTMLElement.hidden")}}
+
Es un {{jsxref("Boolean")}} que indica si el elemento está oculto.
+
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
+
Es un {{jsxref("Boolean")}}...
+
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
+
Es un {{domxref("DOMString")}}…
+
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
+
Devuelve un {{jsxref("Object")}}…
+
{{domxref("HTMLElement.lang")}}
+
Es un {{domxref("DOMString")}} que representa el lenguaje de los atributos del elemento, texto, y contenido del elemento.
+
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un double que contiene la altura de, en relación al diseño (layout).
+
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
+
Devuelve un double, que representa la distancia desde el borde izquierdo del elemento hasta el borde izquierdo del elemento padre offsetParent'.
+
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
+
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's top border to its offsetParent's top border.
+
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the width of an element, relative to the layout.
+
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("HTMLPropertiesCollection")}}…
+
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
+
Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it hasn't an effect on all of them.
+
{{domxref("HTMLElement.style")}}
+
Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
+
{{domxref("HTMLElement.tabIndex")}}
+
Is a long representing the position of the element in the tabbing order.
+
{{domxref("HTMLElement.title")}}
+
Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
+
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}}
+
+ +

Event handlers

+ +

La mayoria de las propiedades de los eventos, del formulario onXYZ, estan definidas en las interfaces {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implementadas por HTMLElement. Otras pocas son especificas de HTMLElement.

+ +
+
{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}
+
Returns the event handling code for the copy event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}
+
Returns the event handling code for the cut event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
+
Returns the event handling code for the paste event ({{bug("280959")}}).
+
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchstart")}} event.
+
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchend")}} event.
+
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchmove")}} event.
+
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchenter")}} event.
+
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchleave")}} event.
+
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchcancel")}} event.
+
+ +

Methods

+ +

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

+ +
+
{{domxref("HTMLElement.blur()")}}
+
Removes keyboard focus from the currently focused element.
+
{{domxref("HTMLElement.click()")}}
+
Sends a mouse click event to the element.
+
{{domxref("HTMLElement.focus()")}}
+
Makes the element the current keyboard focus.
+
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
+
Makes the spell checker runs on the element.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
+ Added the following method: forceSpellcheck().
+ Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
+ Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}17.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.10)
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.24)
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}9.0{{CompatUnknown}}11.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.style", "style")}}{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}8.01111.106
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}12.0{{CompatNo}}
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatNo}}11.60
+ (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoDesktop("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support +

{{CompatGeckoMobile("1.0")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoMobile("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/htmlelement/innertext/index.html b/files/es/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..403f3c0bc1 --- /dev/null +++ b/files/es/web/api/htmlelement/innertext/index.html @@ -0,0 +1,84 @@ +--- +title: HTMLElement.innerText +slug: Web/API/HTMLElement/innerText +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("HTML DOM")}}
+ +

The innerText property of the {{domxref("HTMLElement")}} interface represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.

+ +
+

Note: innerText is easily confused with {{domxref("Node.textContent")}}, but there are important differences between the two. Basically, innerText is aware of the rendered appearance of text, while textContent is not.

+
+ +

Syntax

+ +
const renderedText = htmlElement.innerText
+htmlElement.innerText = string
+ +

Value

+ +

A {{domxref("DOMString")}} representing the rendered text content of an element. If the element itself is not being rendered (e.g detached from the document or is hidden from view), the returned value is the same as the {{domxref("Node.textContent")}} property.

+ +

Example

+ +

This example compares innerText with {{domxref("Node.textContent")}}. Note how innerText is aware of things like {{htmlElement("br")}} elements, and ignores hidden elements.

+ +

HTML

+ +
<h3>Source element:</h3>
+<p id="source">
+  <style>#source { color: red; }</style>
+Take a look at<br>how this text<br>is interpreted
+       below.
+  <span style="display:none">HIDDEN TEXT</span>
+</p>
+<h3>Result of textContent:</h3>
+<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
+<h3>Result of innerText:</h3>
+<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
+ +

JavaScript

+ +
const source = document.getElementById('source');
+const textContentOutput = document.getElementById('textContentOutput');
+const innerTextOutput = document.getElementById('innerTextOutput');
+
+textContentOutput.innerHTML = source.textContent;
+innerTextOutput.innerHTML = source.innerText;
+ +

Result

+ +

{{EmbedLiveSample("Example", 700, 450)}}

+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history.
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.innerText")}}

+ +

See also

+ + diff --git a/files/es/web/api/htmlelement/input_event/index.html b/files/es/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..ab082e4a06 --- /dev/null +++ b/files/es/web/api/htmlelement/input_event/index.html @@ -0,0 +1,329 @@ +--- +title: Evento input +slug: Web/API/HTMLElement/input_event +tags: + - DOM + - Evento + - InputEvent + - Referencia +translation_of: Web/API/HTMLElement/input_event +--- +
{{APIRef}}
+ +

El evento input se dispara cuando el valor (value) de un elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} ha sido cambiado. 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BurbujasYes
CancelableNo
Interfaz{{DOMxRef("InputEvent")}}
Objectivo{{domxref("Element")}}
Acción por defectoNone
Propiedad del manejador del evento{{domxref("GlobalEventHandlers.oninput")}}
+ +

El evento también aplica a los elementos con la propiedad {{domxref("HTMLElement.contentEditable", "contenteditable")}} habilidado, y para cualquier otro elemento cuando la propiedad {{domxref("Document.designMode", "designMode")}} esta encendida. En el caso de un contenteditable y designMode, el objetivo del evento es el  the event target is the editing host. Si estas propiedades aplian a múltiples elementos, el host de edición es el elemento ancestro más cercano cuyo padre no es editable.

+ +

Para elementos <input> con type=checkbox o type=radio, el evento input debería disparar cuando el usuario alterna el control, por la especificación HTML5. Sin embargo, históricamente no siempre es el caso. Revise la compatibilidad o use el evento {{event("change")}} en su lugar para estos tipos.

+ +
+

Nota: A diferencia de input, el evento {{event("change")}} no es disparado necesariamente por cada alteración al valor (value) de un elemento.

+
+ +

Ejemplos

+ +

Este ejemplo registra el valor siempre que se cambia el valor del elemento {{HtmlElement("input")}}.

+ +

HTML

+ +
<input placeholder="Ingrese algún texto" name="nombre"/>
+<p id="valores"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('valores');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.srcElement.value;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Examples")}}

+ +

(Funciona en la versión en inglés)

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("api.HTMLElement.input")}}

+ + + +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/offsetheight/index.html b/files/es/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..82f683d7c5 --- /dev/null +++ b/files/es/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,65 @@ +--- +title: HTMLElement.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +tags: + - API + - Propiedad + - Referencia +translation_of: Web/API/HTMLElement/offsetHeight +--- +
{{ APIRef("HTML DOM") }}
+ +

La propiedad de sólo lectura HTMLElement.offsetHeight devuelve el alto de un elemento, incluyendo el padding vertical y los bordes, en píxeles, como un número entero.

+ +

Generalmente, offsetHeight es una medida en píxeles que representa la altura CSS del elemento, incluyendo cualquier borde, padding, y barras de desplazamiento horizontales (si existieran). No incluye el alto de pseudo-elementos como ::before y ::after. Para el objeto body del documento, la medida incluye la altura total del contenido lineal en lugar de la altura CSS del elemento. Los elementos flotantes que se extienden por debajo de otros contenidos lineales son ignorados

+ +

Si un elemento está oculto (por ejemplo, al establecer style.display a "none" en el elemento o uno de sus ancestros), se devuelve 0.

+ +
+

Esta propiedad redondea el valor a un entero. Si necesitas un  valor decimal, usa {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var intElemOffsetHeight = element.offsetHeight;
+ +

intElemOffsetHeight es una variable que almacena el entero correspondiente al valor de offsetHeight en píxeles de un elemento. La propiedad offsetHeight es de sólo lectura.

+ +

Ejemplo

+ +

Image:Dimensions-offset.png

+ +

El ejemplo de la imagen de superior muestra una barra de desplazamiento y un offsetHeight que cabe en la ventana. Sin embargo, los elementos no desplazables podrían tener un offsetHeight mucho más grande que el área visible. Esos elementos están típicamente contenidos en elementos desplazables (scroll); con lo cual esos elementos no desplazables podrían ser parcial o completamente invisibles, dependiendo de la configuración de scrollTop del elemento contenedor.

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}{{Spec2('CSSOM View')}} 
+ +

Notas

+ +

offsetHeight es una pripiedad del modelo del objeto DHTML que fue inicialmente introducido por MSIE. A veces se le conoce como las dimensiones físicas/gráficas de un elemento, o la altura border-box del elemento.

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/offsetleft/index.html b/files/es/web/api/htmlelement/offsetleft/index.html new file mode 100644 index 0000000000..0067faf65f --- /dev/null +++ b/files/es/web/api/htmlelement/offsetleft/index.html @@ -0,0 +1,141 @@ +--- +title: HTMLElement.offsetLeft +slug: Web/API/HTMLElement/offsetLeft +translation_of: Web/API/HTMLElement/offsetLeft +--- +
{{ APIRef("HTML DOM") }}
+ +

La propiedad de solo lectura HTMLElement.offsetLeft devuelve el número de píxeles a la izquierda del elemento actual con respecto al nodo {{domxref("HTMLElement.offsetParent")}} .

+ +

Para los elementos de bloque, offsetTop, offsetLeft, offsetWidth, y offsetHeight determina el borde de la caja del elemento relativo al offsetParent.

+ +

Sin embargo, para los elementos inline (por ejemplo span), que puede ser cortado de un línea a otra, offsetTop, and offsetLeft describe la posición de la primer borde de la caja (usar {{domxref("Element.getClientRects()")}} para obtener el ancho y el alto), mientras que offsetWidth y offsetHeight describen las dimensiones de los límites (usar {{domxref("Element.getBoundingClientRect()")}} para obtener su posición). Por lo tanto, una caja con left, top, width y height del offsetLeft, offsetTop, offsetWidth, offsetHeight, no definirá los límites para un span con texto que continúa en otra línea.

+ +

Sintaxis

+ +
left = element.offsetLeft;
+
+ +

left es un entero que representa la posición de la izquierda del elemento actual con respecto al padre.

+ +

Ejemplo

+ +
var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft > 5) {
+  // posición izquierda muy larga: hacer algo
+}
+
+ +

This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.

+ +

Image:offsetLeft.jpg

+ +
<div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;">
+  <span>Short span. </span>
+  <span id="long">Long span that wraps within this div.</span>
+</div>
+
+<div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10">
+</div>
+
+<script>
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = long.offsetTop + document.body.scrollTop + "px";
+  box.style.width = long.offsetWidth + "px";
+  box.style.height = long.offsetHeight + "px";
+</script>
+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}{{Spec2('CSSOM View')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".

+ +

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

+ +

See also

+ + diff --git a/files/es/web/api/htmlelement/offsetparent/index.html b/files/es/web/api/htmlelement/offsetparent/index.html new file mode 100644 index 0000000000..4fb14be33d --- /dev/null +++ b/files/es/web/api/htmlelement/offsetparent/index.html @@ -0,0 +1,52 @@ +--- +title: HTMLElement.offsetParent +slug: Web/API/HTMLElement/offsetParent +tags: + - API + - CSSOM View + - Propiedad + - Reference + - Referencia +translation_of: Web/API/HTMLElement/offsetParent +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

La propiedad de solo lectura HTMLElement.offsetParent retorna una referencia al objeto, el cual es el elemento contenedor posicionado más cercano (más cercano en la jerarquía contenedora). Si el elemento es no-posicionado, td, th, table o el body más cercano es retornado.

+ +

offsetParent retorna null cuando el elemento style.display tiene asignado none. offsetParent es útil porque {{domxref("HTMLElement.offsetTop","offsetTop")}} y {{domxref("HTMLElement.offsetLeft","offsetLeft")}} son relativos a su borde de relleno.

+ +

Sintaxis

+ +
parentObj = element.offsetParent;
+
+ + + +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}{{Spec2('CSSOM View')}} 
+ +

Compatibilidad de Browser

+ + + +

{{Compat("api.HTMLElement.offsetParent")}}

diff --git a/files/es/web/api/htmlelement/offsettop/index.html b/files/es/web/api/htmlelement/offsettop/index.html new file mode 100644 index 0000000000..0b5f19708a --- /dev/null +++ b/files/es/web/api/htmlelement/offsettop/index.html @@ -0,0 +1,61 @@ +--- +title: HTMLElement.offsetTop +slug: Web/API/HTMLElement/offsetTop +translation_of: Web/API/HTMLElement/offsetTop +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

La propiedad de sólo lectura HTMLElement.offsetTop retorna la distancia del elemento actual respecto al borde superior del nodo {{domxref("HTMLelement.offsetParent","offsetParent")}}.

+ +

Sintaxis

+ +
topPos = element.offsetTop;
+
+ +

Parámetros

+ + + +

Ejemplo

+ +
var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos > 10) {
+  // objeto está posicionado a más de
+  // de 10 pixels de distancia de su padre
+}
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}{{Spec2('CSSOM View')}} 
+ +

Compatibilidad con navegadores

+ + + + +

{{Compat("api.HTMLElement.offsetTop")}}

+ +

In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".

+ +

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

diff --git a/files/es/web/api/htmlelement/offsetwidth/index.html b/files/es/web/api/htmlelement/offsetwidth/index.html new file mode 100644 index 0000000000..13a9a7e454 --- /dev/null +++ b/files/es/web/api/htmlelement/offsetwidth/index.html @@ -0,0 +1,62 @@ +--- +title: HTMLElement.offsetWidth +slug: Web/API/HTMLElement/offsetWidth +translation_of: Web/API/HTMLElement/offsetWidth +--- +
{{ APIRef("HTML DOM") }}
+ +

La propiedad de solo lectura HTMLElement.offsetWidth  devuelve el ancho del layout del elemento. Esta medida incluye los bordes del elemento asignados al mismo en los estilos CSS.

+ +

Sintáxis

+ +
var offsetWidth =element.offsetWidth;
+
+ +

offsetWidth es una propiedad de solo lectura.

+ +
+

Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa: {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Ejemplo

+ +

 

+ +

             Image:Dimensions-offset.png

+ + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}{{Spec2('CSSOM View')}} 
+ +

Notas

+ +

offsetWidth es una propiedad del  DHTML "object model" que fue inicialmente introducido por MSIE. A veces es referido como box-width.

+ +

Compatibilidad con Navegadores

+ +

{{Compat("api.HTMLElement.offsetWidth")}}

+ + + + diff --git a/files/es/web/api/htmlelement/style/index.html b/files/es/web/api/htmlelement/style/index.html new file mode 100644 index 0000000000..62c8903b72 --- /dev/null +++ b/files/es/web/api/htmlelement/style/index.html @@ -0,0 +1,52 @@ +--- +title: Element.style +slug: Web/API/HTMLElement/style +translation_of: Web/API/ElementCSSInlineStyle/style +--- +

{{ ApiRef("HTML DOM") }}

+ +

Resumen

+ +

Devuelve un objeto que representa el atributo style del elemento.

+ +

Ejemplo

+ +
var div = document.getElementById("div1");
+div.style.marginTop = ".25in";
+
+ +

Notas

+ +

Ya que la propiedad style tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones in-line hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. 

+ +

Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style in-line y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.

+ +

Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar window.getComputedStyle en su lugar.

+ +

Mira la lista de Propiedades CSS del DOM (DOM CSS Properties List) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.

+ +

Generalmente es mejor usarla propiedad style que usar elt.setAttribute('style', '...'), ya que el uso de la propiedad style no reemplazará otras propiedades CSS que puedan especificarse en el atributo style.

+ +

Los estilos no pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en elt.style = "color: blue;". Esto es porque el atributo style devuelve un objeto del tipo CSSStyleDeclaration. En su lugar, pueds establecer las propiedades como:

+ +
elt.style.color = "blue";  // Asignación directa
+
+var st = elt.style;
+st.color = "blue";  // Asignación Indirecta
+
+ +

El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos elt y sus valores heredados: 

+ +
var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(elt, null);
+for (x in st)
+  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
+
+ +

 

+ +

Especificación

+ +

DOM Level 2 Style: ElementCSSInlineStyle.style

diff --git a/files/es/web/api/htmlformelement/index.html b/files/es/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..4409f7e160 --- /dev/null +++ b/files/es/web/api/htmlformelement/index.html @@ -0,0 +1,109 @@ +--- +title: form +slug: Web/API/HTMLFormElement +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías +translation_of: Web/API/HTMLFormElement +--- +
{{APIRef("HTML DOM")}}
+

Interfaz del elemento formulario de HTML

+ +

Los elementos FORM comparten todas las propiedades y métodos de los otros elementos HTML descritos en el capítulo del elemento. También tienen la interfaz especial HTMLFormElement.

+ +

Esta interfaz proporciona métodos para crear y modificar los elementos FORM usando el DOM. El siguiente ejemplo muestra como crear un nuevo formulario, como modificar sus atributos y enviarlo:

+ +
// Crea un formulario
+var f = document.createElement("form");
+
+// Lo añade en el cuerpo ('body') del documento
+document.body.appendChild(f);
+
+// Añade los atributos de acción y método
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Llama el método de enviar el formulario
+f.submit();
+
+ +

Además, el siguiente documento HTML muestra como se puede extraer información de un formulario y cambiar algunos de sus atributos.

+ +
<title>Ejemplo de formulario</title>
+<script type="text/javascript">
+  function getFormInfo() {
+    var info;
+
+    // Obtiene una referencia utilizando la colección de formularios
+    var f = document.forms["formularioA"];
+    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["formularioA"].elements['tex'].value = info;
+  }
+
+  // Se pasa la referencia al formulario desde el
+  // atributo al hacer clic ('onclick') del botón con la ayuda de este.formulario ('this.form')
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+
+<h1>Ejemplo de formulario</h1>
+
+<form name="formularioA" id="formularioA"
+ action="/cgi-bin/test" method="POST">
+ <p>Haga clic en "Info" para ver informaciones de este formulario.
+    Haga clic en "Set" para cambiar los parámetros y otra vez en "Info" para ver los efectos</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>
+
+ +

Propiedades

+ +
+
form.elements (todos los elementos del formulario) 
+
.elements devuelve una colección de todos los controles que hay en el formulario FORM.
+
form.length
+
.length devuelve la cantidad de controles que hay en el formulario
+
form.name
+
.name devuelve el nombre del formulario actual en forma de cadena.
+
form.acceptCharset
+
.acceptCharset devuelve una lista del conjunto de caracteres soportados para el actual elemento FORM.
+
form.action
+
.action obtiene/configura la acción del elemento FORM.
+
form.enctype
+
.enctype gets/sets the content type of the FORM element.
+
form.encoding
+
.encoding gets/sets the content type of the FORM element.
+
form.method
+
.method obtiene/configura el método HTTP utilizado para enviar el formulario.
+
form.target
+
.target obtiene/configura el objetivo de la acción (i.e., the frame to render its output in).
+
+ +

Métodos

+ +
+
form.submit
+
submit() manda el formulario.
+
form.reset
+
reset() restaura el formulario, lo devuelve al estado inicial.
+
diff --git a/files/es/web/api/htmlformelement/reset/index.html b/files/es/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..43f3df8e37 --- /dev/null +++ b/files/es/web/api/htmlformelement/reset/index.html @@ -0,0 +1,59 @@ +--- +title: HTMLFormElement.reset() +slug: Web/API/HTMLFormElement/reset +tags: + - API + - HTML DOM + - HTMLFormElement + - Method + - NeedsMarkupWork + - NeedsSpecTable + - Referencia +translation_of: Web/API/HTMLFormElement/reset +--- +
{{APIRef("HTML DOM")}}
+ +

El método HTMLFormElement.reset() restaura los elementos de un formulario a sus valores por defecto. Este método hace lo mismo que haciendo clic en el botón de restauración.

+ +

Si un control del formulario (como el botón de restaurar) tiene el nombre o un id de reset enmascarará el método de restauración del formulario. No restaura otros atributos del campo, como el de disabled.

+ +

Síntaxis

+ +
HTMLFormElement.reset()
+
+ +

Ejemplo

+ +
document.getElementById('myform').reset();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#dom-form-reset', 'HTMLFormElement: reset')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.HTMLFormElement.reset")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/htmlheadelement/index.html b/files/es/web/api/htmlheadelement/index.html new file mode 100644 index 0000000000..0327683cbe --- /dev/null +++ b/files/es/web/api/htmlheadelement/index.html @@ -0,0 +1,72 @@ +--- +title: HTMLHeadElement +slug: Web/API/HTMLHeadElement +translation_of: Web/API/HTMLHeadElement +--- +
{{APIRef("HTML DOM")}}
+ +

La interfaz HTMLHeadElement contiene la información descriptiva, o metadata, para un documento. Este objeto hereda las propiedades y métodos descritos en la interfaz {{domxref("HTMLElement")}}.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Propiedades

+ +

Hereda las propiedades del padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLHeadElement.profile")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que representa las URI de uno o más perfiles de metadatos (separados por espacios en blanco).
+
+ +

Métodos

+ +

No hay un método especifico; hereda los métodos del padre, {{domxref("HTMLElement")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', "#htmlheadelement", "HTMLHeadElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "document-metadata.html#the-head-element", "HTMLHeadElement")}}{{Spec2('HTML5.1')}}Sin cambio desde {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "document-metadata.html#the-head-element", "HTMLHeadElement")}}{{Spec2('HTML5 W3C')}}La siguiente propiedad ha sido removida: profile.
{{SpecName('DOM2 HTML', 'html.html#ID-77253168', 'HTMLHeadElement')}}{{Spec2('DOM2 HTML')}}Sin cambio
{{SpecName('DOM1', 'level-one-html.html#ID-77253168', 'HTMLHeadElement')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad con Navegadores

+ + + +

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

+ +

Vea también

+ + diff --git a/files/es/web/api/htmlhtmlelement/index.html b/files/es/web/api/htmlhtmlelement/index.html new file mode 100644 index 0000000000..f079c9a07a --- /dev/null +++ b/files/es/web/api/htmlhtmlelement/index.html @@ -0,0 +1,121 @@ +--- +title: HTMLHtmlElement +slug: Web/API/HTMLHtmlElement +tags: + - API + - HTML DOM + - Interface + - Referencia +translation_of: Web/API/HTMLHtmlElement +--- +
{{ APIRef("HTML DOM") }}
+ +

The HTMLHtmlElement interface serves as the root node for a given HTML document.  This object inherits the properties and methods described in the {{domxref("HTMLElement")}} interface.

+ +

You can retrieve the HTMLHtmlElement object for a given document by reading the value of the {{domxref("document.documentElement")}} property.

+ +

Properties

+ +

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

+ +
+
{{domxref("HTMLHtmlElement.version")}}  {{ obsolete_inline() }}
+
Is a {{domxref("DOMString")}} representing the version of the HTML Document Type Definition (DTD) that governs this document. This property should not be used any more as it is non-conforming. Simply omit it.
+
+ +

Methods

+ +

No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "semantics.html#the-html-element", "HTMLHtmlElement")}}{{Spec2('HTML WHATWG')}}Live specification, no change since last snapshot
{{SpecName('HTML5.1', "semantics.html#the-html-element", "HTMLHtmlElement")}}{{Spec2('HTML5.1')}}No change since the last snapshot
{{SpecName('HTML5 W3C', "semantics.html#the-html-element", "HTMLHtmlElement")}}{{Spec2('HTML5 W3C')}}The version element has been removed, as it is non-conforming.
{{SpecName('DOM2 HTML', 'html.html#ID-33759296', 'HTMLHtmlElement')}}{{Spec2('DOM2 HTML')}}Reflecting the element change in {{SpecName("HTML4.01")}}, the version property is now deprecated.
{{SpecName('DOM1', 'level-one-html.html#ID-33759296', 'HTMLHtmlElement')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/htmlimageelement/image/index.html b/files/es/web/api/htmlimageelement/image/index.html new file mode 100644 index 0000000000..7bf5d299b5 --- /dev/null +++ b/files/es/web/api/htmlimageelement/image/index.html @@ -0,0 +1,46 @@ +--- +title: Image() +slug: Web/API/HTMLImageElement/Image +translation_of: Web/API/HTMLImageElement/Image +--- +
{{ APIRef("HTML DOM") }}
+ +

Constructor del elemento de Imagen

+ +

Acepta dos parametros opcionales: Image([unsigned long width, unsigned long height])

+ +

Devuelve un  HTMLImageElement instanciado  justo como document.createElement('img') would.

+ +

Ejemplo:

+ +
var myImage = new Image(100, 200);
+myImage.src = 'picture.jpg';
+console.log(myImage);
+ +
Resultado:
+ +
<img width="100" height="200" src="picture.jpg">
+
+ +
+ + + + + + + + + + + + + +
SpecificationStatusComment
HTML5
+ La definición del constructor de imagen, en esta especificación.		RecommendaciónUn constructor (con 2 parametros opcionales) han sido agregados.
+ Las siguientes propiedades ahora son obsoletas: name, border, align, hspace, vspace, and longdesc.
+ The following properties are now unsigned long, instead of long: height, and width.
+ Las siguientes propiedadeas ahora han sido agrgados: crossorigin,
+
+ +
 
diff --git a/files/es/web/api/htmlimageelement/index.html b/files/es/web/api/htmlimageelement/index.html new file mode 100644 index 0000000000..55c8a5e306 --- /dev/null +++ b/files/es/web/api/htmlimageelement/index.html @@ -0,0 +1,344 @@ +--- +title: HTMLImageElement +slug: Web/API/HTMLImageElement +tags: + - API + - HTML DOM + - Interfaz + - Reference +translation_of: Web/API/HTMLImageElement +--- +
{{APIRef("HTML DOM")}}
+ +

La interfaz HTMLImageElement provee de propiedas especiales y métodos (más allá de las interfaces {{domxref("HTMLElement")}}, también tiene disponible la herencia) para manipular el diseño y la presentación de elementos {{HTMLElement("img")}}.

+ +

Propiedades

+ +

Heredadas de su padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que indica el alineamiento de la imagen respecto al contexto que la rodea.
+
{{domxref("HTMLImageElement.alt")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("alt", "img")}}, indicando texto de respaldo a la imagen.
+
{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que indica el ancho del borde alrededor de la imagen. Este está desaprobado y debe usarse la propiedad CSS {{cssxref("border")}} en su lugar.
+
{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}
+
Devuelve un {{domxref("Boolean")}} que es true si el navegador ha terminado de buscar la imagen, sea o no exitoso. También devuelve true si la imagen no tiene valor {{domxref("HTMLImageElement.src", "src")}}.
+
{{domxref("HTMLImageElement.crossOrigin")}}
+
Es un {{domxref("DOMString")}} representa la configuración CORS para el elemento imagen. Ver Atributos de configuración CORS para más detalles.
+
{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("DOMString")}}
+
{{domxref("HTMLImageElement.height")}}
+
Es un unsigned long que refleja el atributo HTML {{htmlattrxref("height", "img")}}, indica el alto de la imagen en píxeles CSS.
+
{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}
+
Es un long que representa el espacio a izquierda y derecha de la imagen.
+
{{domxref("HTMLImageElement.isMap")}}
+
Es un {{domxref("Boolean")}} que refleja el atributo HTML {{htmlattrxref("ismap", "img")}}, indica que la imagen es parte del mapa de imagen del lado del servidor.
+
{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que representa la URI de una larga descripción de la imagen.
+
{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que referencia una copia de la imagen en mala calidad (pero más rápida cargando)
+
{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}}.
+
{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}
+
Devuelve un unsigned long  que representa el alto intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0.
+
{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}
+
Devuelve un unsigned long que representa el ancho intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0.
+
{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("referrerpolicy", "img")}} indica la referencia a usar para buscar la imagen.
+
{{domxref("HTMLImageElement.src")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("src", "img")}} HTML attribute, contiene la URL completa de la imagen, incluido la base del URI
+
{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}
+
Es un {{domxref("DOMString")}}
+
{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("srcset", "img")}}, contiene una ista de imágenes candidatas, separadas por una coma (',', U+002C COMMA). Una imagen candidata es una URL seguida por 'w' con el ancho, o una 'x' seguida de la densidad del píxel.
+
{{domxref("HTMLImageElement.useMap")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("usemap", "img")}}, contiene una URL parcial del mapa del elemento.
+
{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}
+
Es un long que representa el espacio sobre y bajo la imagen.
+
{{domxref("HTMLImageElement.width")}}
+
Es un unsigned long que refleja el atributo HTML {{htmlattrxref("width", "img")}}, indica el ancho de la imagen en píxeles CSS.
+
{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un long que representa el hueco horizontal hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.
+
{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}
+
Devuelve un long que representa el hueco vertical hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.
+
+ +

Métodos

+ +

Heredados de su padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLImageElement.Image()", "Image()")}}
+
El constructor Image(), toma dos unsigned long opcionales, ancho y alto del recurso, crea una instacia de creates HTMLImageElement no insertada en el árbol DOM.
+
+ +

Ejemplo

+ +
var img1 = new Image(); // HTML5 Constructor
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // Uso DOM HTMLImageElement
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// Usando la primera imagen en el documento
+alert(document.images[0].src);
+
+ +

Especificiaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecicifaciónEstadoComentario
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Añadida la propiedad referrerPolicy.
{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}{{Spec2('CSSOM View')}}Añadidas propiedades x e y
{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML WHATWG')}}Las siguientes propiedades han sido añadidas: srcset, currentSrc y sizes.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML5 W3C')}}Un constructor (con 2 parámetros opcionales) añadido. Las siguientes propiedades quedaron obsoletas: name, border, align, hspace, vspace, y longdesc. Las siguientes propiedades son ahora unsigned long, en lugar de long: height, y width.Las siguientes propiedades fueron añadidas: crossorigin, naturalWidth, naturalHeight, y complete.
{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM2 HTML')}}La propiedad lowSrc fue eliminada.
+ Las siguientes propiedades son ahora long, en lugar de DOMString: height, width, hspace, y vspace.
{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Compatibilidad con navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
naturalWidth, naturalHeight{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
complete{{CompatVersionUnknown}}{{CompatVersionUnknown}}5[4]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatChrome(34)}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}21{{CompatSafari(7.1)}}
currentSrc {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(33)}}[3]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
x e y{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop(42)}} [5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
naturalWidth, naturalHeight{{CompatUnknown}}{{CompatUnknown}}9{{CompatUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
complete{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatNo}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}iOS 8
currentSrc {{experimental_inline}}{{CompatNo}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatNo}}{{CompatGeckoMobile(33)}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
x e y{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatNo}}{{CompatGeckoMobile(42)}} [5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Las propiedades x e y fueron eliminadas en Gecko 7.0 {{geckoRelease("7.0")}} pero reestablecidas en Gecko 14.0 {{geckoRelease("14.0")}} por razones de compatibilidad.

+ +

[2] Esta característica está detras de la preferencia dom.image.srcset.enabled, por defecto false.

+ +

[3] Esta característica está detras de la preferencia dom.image.picture.enabled, por defecto false.

+ +

[4] IE reporta false para imágenes rotas.

+ +

[5] Esta propiedad fue nombrada referrer desde Firefox 42 a 44.

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlinputelement/index.html b/files/es/web/api/htmlinputelement/index.html new file mode 100644 index 0000000000..049ddd7942 --- /dev/null +++ b/files/es/web/api/htmlinputelement/index.html @@ -0,0 +1,673 @@ +--- +title: HTMLInputElement +slug: Web/API/HTMLInputElement +tags: + - API + - HTML DOM + - HTMLInputElement + - Input + - Interface + - NeedsContent + - NeedsMarkupWork + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLInputElement +--- +
{{ APIRef("HTML DOM") }}
+ +

La interface HTMLInputElement proporciona propiedades y métodos especiales para manipular las opciones, estructura y presentacion de los elementos {{HtmlElement("input")}}.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades relacionadas al formulario padre
form {{readonlyInline}}{{domxref("HTMLFormElement")}} object:  Retorna una referencia al elemento {{HtmlElement("form")}} padre
formActionstring: Retorna / Establece los atributos de los elementos {{ htmlattrxref("formaction", "input") }}, conteniendo la URI de un programa que procesa la información enviada por el elemento. Esto invalida al atributo {{ htmlattrxref("action", "form") }} del formulario padre.
formEncTypestring: Returns / Sets the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.
formMethodstring: Returns / Sets the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.
formNoValidateboolean: Returns / Sets the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.
formTargetstring: Returns / Sets the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades que aplican a cualquier tipo de elemento input que no se encuentre escondido
namestring: Returns / Sets the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.
typestring: Returns / Sets the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.
disabledboolean: Returns / Sets the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }} 
autofocusboolean: Returns / Sets the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
requiredboolean: Returns / Sets the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.
valuestring: Returns / Sets the current value of the control. +

Nota: Si el usuario ingresa un valor diferente al esperado, esto puede retornar una cadena vacía.

+
validity {{readonlyInline}}{{domxref("ValidityState")}} object: Returns the validity state that this element is in.
validationMessage {{readonlyInline}}string: Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints.
willValidate {{readonlyInline}}{{jsxref("Boolean")}}: Indicates whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
+ + + + + + + + + + + + + + + + + +
Propiedades que aplican solo a los elementos de tipo checkbox o radio
checked boolean: Returns / Sets the current state of the element when {{htmlattrxref("type","input")}} is checkbox or radio.
defaultCheckedboolean: Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.
indeterminateboolean: indicates that the checkbox is neither on nor off. Changes the appearance to resemble a third state. Does not affect the value of the checked attribute, and clicking the checkbox will set the value to false.
+ + + + + + + + + + + + + + + + + + + + + +
Propiedades que sólo aplican a los elementos de tipo image
altstring: Returns / Sets the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is image.
heightstring: Returns / Sets the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
srcstring: Returns / Sets the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is image; otherwise it is ignored.
widthstring: Returns / Sets the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades que sólo aplican a los elementos de tipo file
acceptstring: Returns / Sets the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is file.
allowdirs {{non-standard_inline}}boolean: Part of the non-standard Directory Upload API; indicates whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.
filesReturns/accepts a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.
{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}boolean: Returns the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.
{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}Array of {{domxref("FileSystemEntry")}} objects describing the currently-selected files or directories.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to text/number-containing or elements
autocompletestring: Returns / Sets the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). Possible values are:
+ "on": the browser can autocomplete the value using previously stored value
+ "off": the user must explicity enter a value
maxLengthlong: Returns / Sets the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the maximum length of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
sizeunsigned long: Returns / Sets the element's {{ htmlattrxref("size", "input") }} attribute, containing size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is text or password, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to text, search, tel, url, email, or password; otherwise it is ignored.
patternstring: Returns / Sets the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a regular expression that the control's value is checked against.  Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
placeholderstring: Returns / Sets the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
readOnlyboolean: Returns / Sets the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.
+ {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, range, color, checkbox, radio, file, or a button type.
minstring: Returns / Sets the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.
maxstring: Returns / Sets the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
selectionStartunsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.
selectionEndunsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
selectionDirectionstring: Returns / Sets the direction in which selection occurred. Possible values are:
+ "forward" if selection was performed in the start-to-end direction of the current locale,
+ "backward" for the opposite direction,
+ "none" if the direction is unknown."
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades aun no categorizadas
defaultValuestring: Returns / Sets the default value as originally specified in the HTML that created this object.
dirNamestring: Returns / Sets the directionality of the element.
accessKeystring: Returns a string containing a single character that switches input focus to the control when pressed.
list {{readonlyInline}}{{domxref("HTMLElement")}} object: Returns the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be null if no HTML element found in the same tree.
multipleboolean: Returns / Sets the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).
files{{domxref("FileList")}} array: Returns the list of selected files.
{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}{{domxref("NodeList")}} array: Returns a list of {{ HTMLElement("label") }} elements that are labels for this element.
stepstring: Returns / Sets the element's {{ htmlattrxref("step", "input") }} attribute, which works with {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
valueAsDate{{jsxref("Date")}} object: Returns / Sets the value of the element, interpreted as a date, or null if conversion is not possible.
valueAsNumberdouble: Returns the value of the element, interpreted as one of the following, in order: +
    +
  • a time value
    • +
  • a number
    • +
  • NaN if conversion is impossible
    • +
+
autocapitalize {{experimental_inline}}string: defines the capitalization behavior for user input. Valid values are none, off, characters, words, or sentences.
+ +
+
{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}
+
string: represents the alignment of the element. Use CSS instead.
+
{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}
+
string: represents a client-side image map.
+
+ +

Métodos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
focus()Focus on the input element; keystrokes will subsequently go to this element.
blur()Removes focus from input; keystrokes will subsequently go nowhere.
select()Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.
click()Simulates a click on the element.
setSelectionRange()Selects a range of text in the element (but does not focus it). The optional selectionDirection parameter may be "forward" or "backward" to establish the direction in which selection was set, or "none" if the direction is unknown or not relevant. The default is "none". Specifying a selectionDirection parameter sets the value of the selectionDirection property.
setRangeText() +
+
+

Replaces a range of text with the new text. If the start and end arguments are not provided, the range is assumed to be the selection.The final argument determines how the selection should be set after the text has been replaced. The possible values are:

+ +
+
"select"
+
Selects the newly inserted text.
+
"start"
+
Moves the selection to just before the inserted text.
+
"end"
+
Moves the selection to just after the selected text.
+
"preserve"
+
Attempts to preserve the selection. This is the default.
+
+
+
+
setCustomValidity()Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
checkValidity()Returns a {{jsxref("Boolean")}} that is false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.
+ +
+
{{domxref("HTMLInputElement.stepDown()")}}
+
Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,
    • +
  • if the element has no {{htmlattrxref("step","input")}} value,
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}. 
    • +
+
+
{{domxref("HTMLInputElement.stepUp()")}}
+
Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,
    • +
  • if the element has no {{htmlattrxref("step","input")}} value,
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • +
+
+
+

Métodos no estandarizados

+
+
+

{{domxref("HTMLInputElement.mozSetFileArray()")}}{{non-standard_inline}}

+
+
Sets the files selected on the input to the given array of {{domxref("File")}} objects.  This is an alternative to mozSetFileNameArray() which can be used in frame scripts: a chrome script can open files as File objects and send them via message manager.
+
{{domxref("HTMLInputElement.mozGetFileNameArray()")}}{{non-standard_inline}}
+
Returns an array of all the file names from the input.
+
{{domxref("HTMLInputElement.mozSetFileNameArray()")}}{{non-standard_inline}}
+
Sets the filenames for the files selected on the input.  Not for use in frame scripts, because it accesses the file system.
+
+ +

Eventos

+ +

Responde a este elemento usando addEventListener() o asignando una respuesta a la propiedad oneventname de esta interface:

+ +
+
input
+
Se activa cuando el value de un elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} ha sido modificado.
+
+

Nota: Esto es actualmente gatillado en la interface {{domxref("HTMLElement")}} y también aplica a los elementos contenteditable, pero lo hemos listado acá porque es más utilizado con los elementos de entrada de formularios.

+
+
+

También disponible por la propiedad manipuladora oninput.

+
+
invalid
+
Fired when an element does not satisfy its constraints during constraint validation.
+
Also available via the oninvalid event handler property.
+
search
+
Fired when a search is initiated on an {{HTMLElement("input")}} of type="search".
+
Also available via the onsearch event handler property.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "forms.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML5 W3C')}}Technically, the  tabindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on {{domxref("HTMLElement")}}.
+ The following properties are now obsolete: align and useMap.
+ The following properties have been added: autocomplete, autofocus, dirName, files, formAction, formEncType, formMethod, formNoValidate, formTarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectionDirection, selectionEnd, selectionStart, step, validationMessage, validity, valueAsDate, valueAsNumber, width, and willValidate.
+ The following methods have been added: checkValidity(), setCustomValidity(), setSelectionRange(), stepUp(), and stepDown().
{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM2 HTML')}}The size property is now an unsigned long. The type property must be entirely given in lowercase characters.
{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
autocomplete & autofocus properties{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
files property{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9)}}[2]10{{CompatUnknown}}{{CompatUnknown}}
multiple property{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
indeterminate property{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
list property{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
formAction, formEncType, formMethod, formTarget properties{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(2)}}[3]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
formNoValidate, validationMessage, validity, willValidate properties and setCustomValidity() and checkValidity() methods.{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(2)}}10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
pattern, placeholder, required properties{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(2)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
height and weight properties{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(16)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
labels property{{CompatChrome(14.0)}}{{CompatNo}}{{CompatGeckoDesktop("56")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
min, max, and step for <input type="number">{{CompatVersionUnknown}}{{CompatVersionUnknown}}Experimental, and without specific UI, since {{CompatGeckoDesktop(16)}}: behind the pref dom.experimental_forms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
stepUp and stepDown methods{{CompatUnknown}}{{CompatVersionUnknown}}Experimental since {{CompatGeckoDesktop(16)}}: behind the pref dom.experimental_forms
+
+ There are still differences with the latest spec: {{bug(835773)}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
min, max, and step properties for <input type="range">{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
min, max, and step properties for <input type="date">{{CompatVersionUnknown}}{{CompatVersionUnknown}}Experimental, and without specific UI, since {{CompatGeckoDesktop(20)}}: behind the pref dom.experimental_forms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
min, max, and step properties for other date-related type values{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
mozGetFileNameArray() and mozSetFileNameArray() methods {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("1.9.2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozSetFileArray() method {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("38")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
autocapitalize{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}[3]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
autocapitalize{{CompatNo}}{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

[1] Implemented in {{bug("556743")}}.

+ +

[2] The files property was made settable in Firefox 57 ({{bug(1384030)}}).

+ +

[3] In Firefox 56, the implementation has been updated so that the formAction property returns the correct form submission URL, as per spec, when the associated <input> is being used to submit a form ({{bug(1366361)}}).

+ +

Vea también

+ + diff --git a/files/es/web/api/htmlinputelement/invalid_event/index.html b/files/es/web/api/htmlinputelement/invalid_event/index.html new file mode 100644 index 0000000000..e5dec7a141 --- /dev/null +++ b/files/es/web/api/htmlinputelement/invalid_event/index.html @@ -0,0 +1,108 @@ +--- +title: Evento invalid +slug: Web/API/HTMLInputElement/invalid_event +tags: + - Evento + - Referencia + - eventos + - formulários + - invalid + - inválido +translation_of: Web/API/HTMLInputElement/invalid_event +--- +
{{APIRef}}
+ +

El evento invalid se dispara cuando se ha comprobado la validez de un elemento que se puede enviar y no satisface sus restricciones.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Interfaz{{DOMxRef("Event")}}
BurbujasNo
CancelableSí
Objetivos{{domxref("Element")}}
Acción por defectoVaría (puede prevenir que un formulario sea enviado)
+ +

Este evento puede ser útil para desplegar un resumen de los problemas con un formulario al enviarlo. Cuando un formulario se envía, los eventos invalid son disparados en cada control del formulario que es inválido, y entonces en el mismo elemento form. La válidez de los elementos presentados se comprueba antes de enviar al propio {{HtmlElement("form")}}, o despúes del método checkValidity() de un elemento o su propio <form> es llamado. No es revisada al perder el foco (on blur).

+ +

Ejemplo

+ +

Si un formulario es enviado con un valor inválido, los elementos pressentados son revisados, y si un error es encontrado, el evento invalid se disparará en el elemento invalid. En este ejemplo, el valor inválido del input dispara un evento invalid, y el valor inválido es registrado.

+ +

HTML

+ +
<form action="#">
+  <ul>
+    <li><label>Enter an integer between 1 and 10: <input type="number" min="0" max="10" required></label></li>
+    <li><input type="submit" value="submit"></li>
+  </ul>
+</form><p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('invalid', logValue);
+
+function logValue(e) {
+  log.textContent += e.srcElement.value;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

+ +

(Funciona en la versión en inglés)

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML WHATWG')}} 
{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML5.1')}} 
{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML5 W3C')}} 
+ +

Ver también

+ + diff --git a/files/es/web/api/htmlinputelement/select/index.html b/files/es/web/api/htmlinputelement/select/index.html new file mode 100644 index 0000000000..645932d012 --- /dev/null +++ b/files/es/web/api/htmlinputelement/select/index.html @@ -0,0 +1,51 @@ +--- +title: HTMLInputElement.select() +slug: Web/API/HTMLInputElement/select +tags: + - API + - HTML DOM + - HTMLInputElement + - NeedsCompatTable + - Referencia + - metodo +translation_of: Web/API/HTMLInputElement/select +--- +
{{ APIRef("HTML DOM") }}
+ +

El método HTMLInputElement.select() selecciona todo el texto en un elemento {{HTMLElement("textarea")}} o un elemento{{HTMLElement("input")}} con un campo de texto.

+ +

Sintaxis

+ +
element.select()
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}{{Spec2('HTML WHATWG')}} 
+ +

Notas

+ +

Llamando a element.select() no necesariamente se enfoca el campo, por lo que suele utilizarse junto con {{domxref("HTMLElement.focus()")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/htmllabelelement/index.html b/files/es/web/api/htmllabelelement/index.html new file mode 100644 index 0000000000..50df0281c2 --- /dev/null +++ b/files/es/web/api/htmllabelelement/index.html @@ -0,0 +1,82 @@ +--- +title: HTMLLabelElement +slug: Web/API/HTMLLabelElement +tags: + - API + - HTML DOM + - HTMLLabeledElement + - Interface + - Referencia +translation_of: Web/API/HTMLLabelElement +--- +
{{ APIRef("HTML DOM") }}
+ +

La interfaz HTMLLabelElement proporciona acceso a propiedades especificas de los elementos {{HTMLElement("label")}}. A su vez, hereda métodos y propiedades de la interfaz base {{domxref("HTMLElement")}}.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Propiedades

+ +

Heredando propiedades de los elementos padres {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLLabelElement.control")}} {{ReadOnlyInline}}
+
Es un {{domxref("HTMLElement")}} representando el control a la cual cada etiqueta esta asociado.
+
{{domxref("HTMLLabelElement.form")}} {{ReadOnlyInline}}
+
Es un objeto {{domxref("HTMLFormElement")}} representado el formulario al cual el control etiquetado está asociado, arrojando el valor null, si no hay asociado ningun control o si ese control no está asociado con un formulario. En otras palabras, esto es un atajo para: HTMLLabelElement.control.form.
+
{{domxref("HTMLLabelElement.htmlFor")}}
+
Este es un contenedor de caracteres que contiene el ID del control etiquetado, esto es lo que refleja el atributo {{htmlattrxref("for", "label")}}
+
+ +

Métodos

+ +

No hay metodos específicos, hereda los metodos de los elelemtos padres, {{domxref("HTMLElement")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "#htmllabelelement", "HTMLLabelElement")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "forms.html#the-label-element", "HTMLLabelElement")}}{{Spec2('HTML5 W3C')}}La propiedad accessKey ahora está definida en: {{domxref("HTMLElement")}}.
+ La siguiente propiedad ha sido agregada: control.
{{SpecName('DOM2 HTML', 'html.html#ID-13691394', 'HTMLLabelElement')}}{{Spec2('DOM2 HTML')}}Sin cambios desde: {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-13691394', 'HTMLLabelElement')}}{{Spec2('DOM1')}}definición inicial
+ +

Compatibilidad de Navegador Web

+ +
+ + +

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/htmllielement/index.html b/files/es/web/api/htmllielement/index.html new file mode 100644 index 0000000000..93c6555b63 --- /dev/null +++ b/files/es/web/api/htmllielement/index.html @@ -0,0 +1,118 @@ +--- +title: HTMLLIElement +slug: Web/API/HTMLLIElement +tags: + - API + - HTML DOM +translation_of: Web/API/HTMLLIElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

La interfaz HTMLLIElement expone las propiedades y los métodos específicos (más allá de los definidos por la interfaz regular {{domxref ("HTMLElement")}} que también tiene disponible por herencia) para manipular elementos de la lista.

+ +

Propiedades

+ +

Hereda las propiedades de su elemento primario, {{domxref ("HTMLElement")}}.

+ +
+
{{domxref("HTMLLIElement.type")}} {{obsolete_inline}}
+
Es un {{domxref ("DOMString")}} que representa el tipo de las viñetas, "disco", "cuadrado" o "círculo". Como la forma estándar de definir el tipo de lista es a través de la propiedad CSS {{cssxref ("list-style-type")}}, use los métodos CSSOM para establecerlo a través de un script.
+
{{domxref("HTMLLIElement.value")}}
+
Es un largo que indica la posición ordinal del elemento de lista dentro de un {{HTMLElement ("ol")}} dado. Refleja el atributo {{htmlattrxref ("valor", "li")}} del elemento HTML {{HTMLElement ("li")}} y puede ser menor que 0. Si el elemento {{HTMLElement ("li")}} Elemento no es hijo de un elemento {{HTMLElement ("ol")}}, la propiedad no tiene ningún significado.
+
+ +

Metodos

+ +

No specific method; inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('HTML WHATWG', "grouping-content.html#the-li-element", "HTMLLIElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "grouping-content.html#the-li-element", "HTMLLIElement")}}{{Spec2('HTML5 W3C')}}The following property is now obsolete: type.
{{SpecName('DOM2 HTML', 'html.html#ID-74680021', 'HTMLLIElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-74680021', 'HTMLLIElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Compatibilidad con Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}  [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Prior to Firefox 10, Gecko incorrectly reflected negative {{htmlattrxref("value", "li")}} attributes to 0.

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlmediaelement/canplay_event/index.html b/files/es/web/api/htmlmediaelement/canplay_event/index.html new file mode 100644 index 0000000000..4eb6386c37 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/canplay_event/index.html @@ -0,0 +1,109 @@ +--- +title: 'HTMLMediaElement: canplay' +slug: Web/API/HTMLMediaElement/canplay_event +translation_of: Web/API/HTMLMediaElement/canplay_event +--- +

El evento canplay es lanzado cuando el elemento <video> o <audio> puede ser iniciado o fue iniciado satisfactoriamente.

+ +

Lo que puede evitar que el evento canplay se dispare puede ser por alguna de estás razones:

+ + + +
<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Evento oncanplay - Javascript</title>
+    <script>
+        function Start() {
+            alert("Start")
+        }
+    </script>
+</head>
+<body>
+
+<video controls autoplay oncanplay="Start()">
+     <source src="audio.mp4" type="video/mp4">
+</video>
+
+</body>
+</html>
+ +

Intente especificar mal la ruta del src y comprobrará que el evento no funciona.

+ +

General info

+ +
+
Specification
+
HTML5 media
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
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.
+ + + + diff --git a/files/es/web/api/htmlmediaelement/index.html b/files/es/web/api/htmlmediaelement/index.html new file mode 100644 index 0000000000..c507549375 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/index.html @@ -0,0 +1,231 @@ +--- +title: HTMLMediaElement +slug: Web/API/HTMLMediaElement +translation_of: Web/API/HTMLMediaElement +--- +

{{APIRef("HTML DOM")}}

+ +

La interfaz HTMLMediaElement añade a {{domxref("HTMLElement")}} las propiedades y métodos necesarios para soportar las capacidades básicas relacionadas con los medios de comunicación que son comunes en audio y vídeo. Los elementos {{domxref("HTMLVideoElement")}}} y {{domxref("HTMLAudioElement")}}} heredan esta interfaz.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

Esta interfaz también hereda propiedades de sus antepasados {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}} y {{domxref("EventTarget")}}.

+ +
+
{{domxref("HTMLMediaElement.audioTracks")}}
+
Un {{domxref("AudioTrackList")}}} que lista los {{domxref("AudioTrack")}} objetos contenidos en el elemento.
+
{{domxref("HTMLMediaElement.autoplay")}}
+
Un {{jsxref("Booleano")}} que refleja el {{htmlattrxref("autoplay", "video")}}. Atributo HTML, que indica si la reproducción debe comenzar automáticamente tan pronto como haya suficiente material disponible para hacerlo sin interrupción. +
Los sitios que reproducen automáticamente audio (o vídeos con una pista de audio) pueden ser una experiencia desagradable para los usuarios, por lo que deben evitarse en la medida de lo posible. Si debe ofrecer la funcionalidad de autojuego, debe hacer que se active (requiriendo que el usuario lo habilite específicamente). Sin embargo, esto puede ser útil a la hora de crear elementos multimedia cuya fuente se establecerá más adelante, bajo el control del usuario.
+
+
{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}
+
Devuelve un objeto {{domxref("TimeRanges")}}} que indica los rangos de la fuente de medios que el navegador ha almacenado en el búfer (si existe) en el momento en que se accede a la propiedad almacenada en el búfer.
+
{{domxref("HTMLMediaElement.controller")}}
+
Es un objeto {{domxref("MediaController")}}} que representa el controlador de medios asignado al elemento, o nulo si no se asigna ninguno.
+
{{domxref("HTMLMediaElement.controls")}}
+
Es un {{jsxref('booleano')}} que refleja el {{htmlattrxref("controles", "vídeo")}}}[1]. Atributo HTML, que indica si deben visualizarse las posiciones de la interfase de usuario para controlar el recurso.
+
{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}
+
Devuelve un {{domxref("DOMTokenList")}} que ayuda al agente de usuario a seleccionar qué controles mostrar en el elemento multimedia cuando el agente de usuario muestra su propio conjunto de controles. La DOMTokenList toma uno o más de los tres valores posibles: nodownload, nofullscreen y noremoteplayback.
+
{{domxref("HTMLMediaElement.crossOrigin")}}
+
Es un {{domxref("DOMString")}}} que indica la configuración CORS para este elemento multimedia.
+
{{domxref("HTMLMediaElement.currentSrc")}} {{readonlyinline}}
+
Devuelve un {{domxref("DOMString")}}} con la URL absoluta del recurso multimedia elegido.
+
{{domxref("HTMLMediaElement.currentTime")}}
+
Es un doble indicador del tiempo de reproducción actual en segundos. Fijar este valor busca que los medios de comunicación se adapten a los nuevos tiempos.
+
{{domxref("HTMLMediaElement.defaultMuted")}}
+
Es un {{jsxref('booleano')}} que refleja el {{htmlattrxref("silenciado", "video")}}}. Atributo HTML, que indica si la salida de audio del elemento multimedia debe silenciarse de forma predeterminada.
+
{{domxref("HTMLMediaElement.defaultPlaybackRate")}}
+
Es un doble que indica la velocidad de reproducción predeterminada del material.
+
{{domxref("HTMLMediaElement.disableRemotePlayback")}}
+
Es un {{jsxref('Booleano')}} que establece o devuelve el estado de reproducción remota, indicando si el elemento multimedia puede tener una interfaz de reproducción remota.
+
{{domxref("HTMLMediaElement.duration")}} {{readonlyinline}}
+
Devuelve un doble indicando la longitud del material en segundos, o 0 si no hay datos de material disponibles.
+
{{domxref("HTMLMediaElement.ended")}} {{readonlyinline}}
+
Devuelve un {{jsxref('Booleano')}} que indica si el elemento multimedia ha terminado de reproducirse.
+
{{domxref("HTMLMediaElement.error")}} {{readonlyinline}}
+
Returns a {{domxref("MediaError")}} object for the most recent error, or null if there has not been an error.
+
{{domxref("HTMLMediaElement.loop")}}
+
Is a {{jsxref('Boolean')}} that reflects the {{htmlattrxref("loop", "video")}} HTML attribute, which indicates whether the media element should start over when it reaches the end.
+
{{domxref("HTMLMediaElement.mediaGroup")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("mediagroup", "video")}} HTML attribute, which indicates the name of the group of elements it belongs to. A group of media elements shares a common {{domxref('MediaController')}}.
+
{{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}}
+
Returns a {{domxref("MediaKeys")}} object or null. MediaKeys is a set of keys that an associated HTMLMediaElement can use for decryption of media data during playback.
+
{{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}}
+
Returns a {{jsxref('Boolean')}}. Related to audio stream capture.
+
{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}
+
Is a double that provides access to the fragment end time if the media element has a fragment URI for currentSrc, otherwise it is equal to the media duration.
+
{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}
+
+

Is a unsigned long that indicates the number of samples that will be returned in the framebuffer of each MozAudioAvailable event. This number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total).

+ +

The mozFrameBufferLength property can be set to a new value for lower latency, larger amounts of data, etc. The size given must be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the loadedmetadata event fires, when the audio info is known, but before the audio has started or MozAudioAvailable events have begun firing.

+
+
{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+
Returns a double representing the number of samples per second that will be played. For example, 44100 samples per second is the sample rate used by CD audio.
+
{{domxref("HTMLMediaElement.muted")}}
+
Is a {{jsxref('Boolean')}} that determines whether audio is muted. true if the audio is muted and false otherwise.
+
{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}
+
Returns a unsigned short (enumeration) indicating the current state of fetching the media over the network.
+
{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}
+
Returns a {{jsxref('Boolean')}} that indicates whether the media element is paused.
+
{{domxref("HTMLMediaElement.playbackRate")}}
+
Is a double that indicates the rate at which the media is being played back. 
+
{{domxref("HTMLMediaElement.played")}} {{readonlyinline}}
+
Returns a {{domxref('TimeRanges')}} object that contains the ranges of the media source that the browser has played, if any.
+
{{domxref("HTMLMediaElement.preload")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("preload", "video")}} HTML attribute, indicating what data should be preloaded, if any. Possible values are: none, metadata, auto.
+
{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}
+
Is a {{jsxref('Boolean')}} that determines if the pitch of the sound will be preserved. If set to false, the pitch will adjust to the speed of the audio. This is implemented with prefixes in Firefox (mozPreservesPitch) and WebKit (webkitPreservesPitch).
+
{{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}}
+
Returns a unsigned short (enumeration) indicating the readiness state of the media.
+
{{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}}
+
Returns a {{domxref('TimeRanges')}} object that contains the time ranges that the user is able to seek to, if any.
+
{{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}}
+
Returns a {{jsxref('Boolean')}} that indicates whether the media is in the process of seeking to a new position.
+
{{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}}
+
Returns a {{domxref("DOMString")}} that is the unique ID of the audio device delivering output, or an empty string if it is using the user agent default. This ID should be one of the MediaDeviceInfo.deviceid values returned from {{domxref("MediaDevices.enumerateDevices()")}}, id-multimedia, or id-communications.
+
{{domxref("HTMLMediaElement.src")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "video")}} HTML attribute, which contains the URL of a media resource to use.
+
{{domxref("HTMLMediaElement.srcObject")}}
+
Is a {{domxref('MediaStream')}} representing the media to play or that has played in the current HTMLMediaElement, or null if not assigned.
+
{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}
+
Returns the list of {{domxref("TextTrack")}} objects contained in the element.
+
{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}
+
Returns the list of {{domxref("VideoTrack")}} objects contained in the element. +
+

Gecko sólo soporta la reproducción de una sola pista, y el análisis de los metadatos de las pistas sólo está disponible para los medios con el formato de contenedor Ogg.

+
+
+
{{domxref("HTMLMediaElement.volume")}}
+
Is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest).
+
+ +

Event handlers

+ +
+
 
+
{{domxref("HTMLMediaElement.onencrypted")}}
+
Sets the {{domxref('EventHandler')}} called when the media is encrypted.
+
{{domxref("HTMLMediaElement.onwaitingforkey")}}
+
Sets the {{domxref('EventHandler')}} called when playback is blocked while waiting for an encryption key.
+
+ +

Obsolete attributes

+ +

These attributes are obsolete and should not be used, even if a browser still supports them.

+ +
+
{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns a double that indicates the initial playback position in seconds.
+
{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+
Returns a double representing the number of channels in the audio resource (e.g., 2 for stereo).
+
+ +

Obsolete event handlers

+ +
+
{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}
+
Sets the {{domxref("EventHandler")}} called when the media element is interrupted because of the Audio Channel manager. This was Firefox-specific, having been implemented for Firefox OS, and was removed in Firefox 55.
+
{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}
+
Sets the {{domxref('EventHandler')}} called when the interruption is concluded. This was Firefox-specific, having been implemented for Firefox OS, and was removed in Firefox 55.
+
+ +

Methods

+ +

This interface also inherits methods from its ancestors {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}}, and {{domxref('EventTarget')}}.

+ +
+
{{domxref("HTMLMediaElement.addTextTrack()")}}
+
Adds a text track (such as a track for subtitles) to a media element.
+
{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}
+
Returns {{domxref("MediaStream")}}, captures a stream of the media content.
+
{{domxref("HTMLMediaElement.canPlayType()")}}
+
Determines whether the specified media type can be played back.
+
{{domxref("HTMLMediaElement.fastSeek()")}}
+
Directly seeks to the given time.
+
{{domxref("HTMLMediaElement.load()")}}
+
Resets the media to the beginning and selects the best available source from the sources provided using the {{htmlattrxref("src", "video")}} attribute or the {{HTMLElement("source")}} element.
+
{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}
+
[enter description]
+
{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}
+
[enter description]
+
{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}
+
Returns {{jsxref('Object')}}, which contains properties that represent metadata from the playing media resource as {key: value} pairs. A separate copy of the data is returned each time the method is called. This method must be called after the loadedmetadata event fires.
+
{{domxref("HTMLMediaElement.pause()")}}
+
Pauses the media playback.
+
{{domxref("HTMLMediaElement.play()")}}
+
Begins playback of the media.
+
{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}
+
Seeks to the next frame in the media. This non-standard, experimental method makes it possible to manually drive reading and rendering of media at a custom speed, or to move through the media frame-by-frame to perform filtering or other operations.
+
{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}
+
Returns {{jsxref("Promise")}}. Sets the {{domxref("MediaKeys")}} keys to use when decrypting media during playback.
+
{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}
+
Sets the ID of the audio device to use for output and returns a {{jsxref("Promise")}}. This only works when the application is authorized to use the specified device.
+
+ +

Obsolete methods

+ +

These methods are obsolete and should not be used, even if a browser still supports them.

+ +
+
{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}
+
This method, available only in Mozilla's implementation, loads data from another media element. This works similarly to load() except that instead of running the normal resource selection algorithm, the source is simply set to the other element's currentSrc. This is optimized so this element gets access to all of the other element's cached and buffered data; in fact, the two elements share downloaded data, so data downloaded by either element is available to both.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}{{Spec2('EME')}}Adds {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, {{domxref("setMediaKeys")}}, {{domxref("onencrypted")}}, and {{domxref("onwaitingforkey")}}.
{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}{{Spec2('Media Capture')}}Adds sinkId and setSinkId(), and captureStream().
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/htmlmediaelement/loadeddata_event/index.html b/files/es/web/api/htmlmediaelement/loadeddata_event/index.html new file mode 100644 index 0000000000..6606275c6a --- /dev/null +++ b/files/es/web/api/htmlmediaelement/loadeddata_event/index.html @@ -0,0 +1,130 @@ +--- +title: 'HTMLMediaElement: loadeddata event' +slug: Web/API/HTMLMediaElement/loadeddata_event +tags: + - Audio + - HTMLMediaElement + - Referências + - Video + - eventos +translation_of: Web/API/HTMLMediaElement/loadeddata_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

El evento loadeddata se arroja cuando el cuadro en la posición de reproducción actual del medio ha terminado de cargarse; a menudo el primer marco

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BurbujasNo
CancelableNo
Interfaz{{DOMxRef("Event")}}
ObjetivoElement
Acción por defectoNinguno
Propiedad del controlador de eventos{{domxref("GlobalEventHandlers.onloadeddata")}}
EspecificaciónHTML5 media
+ +
+

Tenga en cuenta que este evento no se activará en dispositivos móviles / tablet, si el protector de datos está activado en configuración del navegador.

+
+ +

Ejemplos

+ +

Estos ejemplos agregan un escucha de eventos para el evento de loadeddata del HTMLMediaElement, luego publican un mensaje cuando ese controlador de eventos ha respondido al disparo del evento.

+ +

Utilizando addEventListener():

+ +
const video = document.querySelector('video');
+
+video.addEventListener('loadeddata', (event) => {
+  console.log('Hurra! El readyState solo aumentó a ' +
+      'HAVE_CURRENT_DATA or mayor por primera vez.');
+});
+ +

Utilizando el onloadeddata propiedad del controlador de eventos:

+ +
const video = document.querySelector('video');
+
+video.onloadeddata = (event) => {
+  console.log('Hurra! El readyState solo aumentó a ' +
+      'HAVE_CURRENT_DATA or mayor por primera vez.');
+};
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstado
{{SpecName('HTML WHATWG', "media.html#event-media-loadeddata", "loadeddata media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadeddata", "loadeddata media event")}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.HTMLMediaElement.loadeddata_event")}}

+ +

Eventos Relacionados

+ + + +

Ver También

+ + diff --git a/files/es/web/api/htmlmediaelement/pause/index.html b/files/es/web/api/htmlmediaelement/pause/index.html new file mode 100644 index 0000000000..10e276e508 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/pause/index.html @@ -0,0 +1,52 @@ +--- +title: HTMLMediaElement.pause() +slug: Web/API/HTMLMediaElement/pause +translation_of: Web/API/HTMLMediaElement/pause +--- +

{{APIRef("HTML DOM")}}

+ +

El método HTMLMediaElement.pause() pausará la reproducción de los medios, si los medios ya están en pausa, este método no tendrá efecto.

+ +

Sintaxis

+ +
HTMLMediaElement.pause()
+ +

Parametros

+ +

Ninguno.

+ +

Valor de retorno

+ +

Ninguno.

+ +

Excepciones

+ +

Ninguno.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-pause', 'pause()')}}{{Spec2('HTML WHATWG')}}Initial definition; living specification.
{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-pause','pause()')}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("api.HTMLMediaElement.pause")}}

diff --git a/files/es/web/api/htmlmediaelement/paused/index.html b/files/es/web/api/htmlmediaelement/paused/index.html new file mode 100644 index 0000000000..3bf4430dae --- /dev/null +++ b/files/es/web/api/htmlmediaelement/paused/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLMediaElement.paused +slug: Web/API/HTMLMediaElement/paused +translation_of: Web/API/HTMLMediaElement/paused +--- +
{{APIRef("HTML DOM")}}
+ +

La propiedad HTMLMediaElement.paused es solo de lectura, indica si el elemento multimedia está en pausa.

+ +

Sintaxis

+ +
var pausado = audioOVideo.paused
+ +

Valor

+ +

Es un {{domxref("Boolean")}}. Mostrara true si está pausado y false en caso contrario.

+ +

Ejemplo

+ +
var obj = document.createElement('video');
+console.log(obj.paused); // true
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "#dom-media-paused", "HTMLMediaElement.paused")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.paused")}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.HTMLMediaElement.paused")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlmediaelement/play/index.html b/files/es/web/api/htmlmediaelement/play/index.html new file mode 100644 index 0000000000..3931470b78 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/play/index.html @@ -0,0 +1,124 @@ +--- +title: HTMLMediaElement.play() +slug: Web/API/HTMLMediaElement/play +translation_of: Web/API/HTMLMediaElement/play +--- +
{{APIRef("HTML DOM")}}
+ +

El método play() de {{domxref("HTMLMediaElement")}} intenta comenzar la reproducción de los medios. Devuelve una promesa ({{jsxref("Promise")}}) que se resuelve cuando la reproducción se ha iniciado con éxito. Si no se inicia la reproducción por cualquier motivo, como problemas de permisos, la promesa será rechazada.

+ +

Sintaxis

+ +
var promesa = HTMLMediaElement.play();
+ +

Parametros

+ +

Ninguno.

+ +

Valor de retorno

+ +

Es una promesa({{jsxref("Promise")}}) que se resuelve cuando se inicia la reproducción, o se rechaza si por algún motivo no se puede iniciar la reproducción.

+ +
+

Nota: Los navegadores más antiguos pueden no devolver un valor de play().

+
+ +

Excepciones

+ +

El controlador de rechazo de la promesas se llama con un nombre de excepción pasado como su único parámetro de entrada (a diferencia de una excepción tradicional que se lanza). Los posibles errores incluyen:

+ +
+
NotAllowedError( Error no permitido)
+
El agente de usuario(navegador) o el sistema operativo no permiten la reproducción de medios en el contexto o situación actual. Esto puede suceder, por ejemplo, si el navegador requiere que el usuarion inicie explícitamente la reproducción de medios haciendo clic en el botón "reproducir".
+
NotSupportedError( Error no admitido)
+
La fuente de medios (que puede especificarse como {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, o {{domxref("File")}}) no representa un formato de medios compatible.
+
+ +

Se pueden informar otras excepciones, según los detalles de implementación del navegador, la implementación del reproductor de medios, etc.

+ +

Notas

+ +

Aunque generalmente se considera que el término "reproducción automática" se refiere a páginas que comienzan a reproducir contenido multimedia inmediatamente después de cargarse, las políticas de reproducción automática de los navegadores web también se aplican a cualquier reproducción de contenido multimedia que inicia por script, incluidas las llamadas a el método play().

+ +

Si el {{Glossary("user agent")}} está configurado para no permitir la reproducción automática o iniciada por script de medios, llamando el método play() hara que la promesa devuelta sea rechazada inmediatamente con un NotAllowedError. Los sitios web deben estar preparados para manejar esta situación. Por ejemplo, un sitio no debe presentar una interfaz de usuario que suponga que la reproducción ha comenzado automáticamenta, sino que debe actualizar su interfaz de usuario en función de si la promesa devuelta se resulve o se rechaza. Mira el {{anch("Example", "Ejemplo")}} abajo para más información.

+ +
+

Nota: El método play() puede hacer que se le pida al usuario que otorgue permiso para reproducir medios, lo que puede ocacionar un posible retraso antes de que se resuelva la promesa devuelta. Asegúrese de que su código no espere una  respuesta inmediata.

+
+ +

Para obtener información más detallada sobre la reproducción automática y el bloqueo de reproducción automática, consulte nuestro artículo Guía de reproducción automática para medios y API de audio web.

+ +

Ejemplo

+ +

Este ejemplo muestra cómo confirmar que la reproducción ha comenzado y cómo manejar adecuadamente la reproducción automática bloqueada:

+ +
let videoElem = document.getElementById("video");
+let playButton = document.getElementById("playbutton");
+
+playButton.addEventListener("click", handlePlayButton, false);
+playVideo();
+
+async function playVideo() {
+  try {
+    await videoElem.play();
+    playButton.className = "playing";
+  } catch(err) {
+    playButton.className = "";
+  }
+}
+
+function handlePlayButton() {
+  if (videoElem.paused) {
+    playVideo();
+  } else {
+    videoElem.pause();
+    playButton.className = "";
+  }
+}
+ +

En este ejemplo, la reproducción de video se activa y desactiva por la función async playVideo(). Intenta reproducir el video y, si tiene éxito, establece el nombre de clase del elemento playButton en "playing". Si la reproducción no se inicia, la clase del elemento playButton se borra, restaurando su apariencia predeterminada. Esto garantiza que el bóton de reproducción coincida con el estado real de reproducción al observar la resolución o el rechazo de {{jsxref("Promise")}} devuelto por el método play().

+ +

Cuando se ejecuta este ejemplo, comienza recogiendo referencias al elemento {{HTMLElement("video")}}, así como al {{HTMLElement("button")}} utilizado para activar y desactivar la reproducción. Luego configura un controlador de eventos para el evento {{event("click")}} en el botón de alternancia de reproducción e intenta comenzar automáticamente la reproducción llamando al método playVideo().

+ +

Puedes probar o remezclar este ejemplo en tiempo real en Glitch.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}{{Spec2('HTML WHATWG')}}Initial definition; living specification.
{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-play','play()')}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +
+

Nota: Las versiones WHATWG y W3C de la especificación difieren (a partir de agosto de 2018) en cuanto a si este método devuelve una {{jsxref("Promise")}} o nada en absoluto, respectivamente.

+
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.HTMLMediaElement.play")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlmediaelement/timeupdate_event/index.html b/files/es/web/api/htmlmediaelement/timeupdate_event/index.html new file mode 100644 index 0000000000..e7c931cf64 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/timeupdate_event/index.html @@ -0,0 +1,82 @@ +--- +title: 'HTMLMediaElement: timeupdate' +slug: Web/API/HTMLMediaElement/timeupdate_event +translation_of: Web/API/HTMLMediaElement/timeupdate_event +--- +

El evento timeupdate es llamado cuando el tiempo indicado por el atributo currentTime es actualizado.

+ +

La frecuencia del evento depende de la carga del sistema, pero se encuentra en un rango de 4Hz y 66Hz (asumiendo que los manejadores de eventos no toman mas de 250ms para correr). Se recomienda a los User agents variar la frecuencia del evento basados en la carga del sistema y el costo promedio de procesamiento del evento cada vez que corre, para que las actualizaciones a la UI no sean mas frecuentes que las que el user agent puede manejar confortablemente mientras se decodifica el video.

+ +

Información General

+ +
+
Specification
+
HTML5 media
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None.
+
+ +

Propiedades

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

Eventos Relacionados

+ + diff --git a/files/es/web/api/htmlselectelement/checkvalidity/index.html b/files/es/web/api/htmlselectelement/checkvalidity/index.html new file mode 100644 index 0000000000..fe4755de95 --- /dev/null +++ b/files/es/web/api/htmlselectelement/checkvalidity/index.html @@ -0,0 +1,53 @@ +--- +title: HTMLSelectElement.checkValidity() +slug: Web/API/HTMLSelectElement/checkValidity +tags: + - API + - Constraint Validation API + - HTML DOM + - HTMLSelectElement + - Referencia + - metodo +translation_of: Web/API/HTMLSelectElement/checkValidity +--- +
{{ APIRef("HTML DOM") }}
+ +

El método HTMLSelectElement.checkValidity() comprueba si el elemento tiene restricciones y si las cumple. Si el elemento no cumple sus restricciones, el navegador lanza un evento cancelable {{event("invalid")}} al momento y luego devuelve false.

+ +

Sintaxis

+ +
var result = selectElt.checkValidity();
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}{{Spec2('HTML WHATWG')}}Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', 'forms.html#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}{{Spec2('HTML5 W3C')}}Definición inicial, snapshot de {{SpecName('HTML WHATWG')}}
+ +

Compatibilidad en navegadores

+ + + +

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

+ +

Ver también

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

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

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

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

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

Methods

+ +

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

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

Example

+ +

Get information about the selected option

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

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

+ +

Specifications

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

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/htmlselectelement/setcustomvalidity/index.html b/files/es/web/api/htmlselectelement/setcustomvalidity/index.html new file mode 100644 index 0000000000..b5477a5ed0 --- /dev/null +++ b/files/es/web/api/htmlselectelement/setcustomvalidity/index.html @@ -0,0 +1,52 @@ +--- +title: HTMLSelectElement.setCustomValidity() +slug: Web/API/HTMLSelectElement/setCustomValidity +translation_of: Web/API/HTMLSelectElement/setCustomValidity +--- +
{{ APIRef("HTML DOM") }}
+ +

El metodo HTMLSelectElement.setCustomValidity() define el mensaje de validación personalizado para el elemento seleccionado con el mensaje especifico. Usa una string vacia para indicar que ese elemento no tiene error de validación customizado.

+ +

Syntax

+ +
selectElt.setCustomValidity(string);
+ +

Parameters

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}{{Spec2('HTML5 W3C')}}Initial definition, snapshot of {{SpecName('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/htmlshadowelement/getdistributednodes/index.html b/files/es/web/api/htmlshadowelement/getdistributednodes/index.html new file mode 100644 index 0000000000..782506dff6 --- /dev/null +++ b/files/es/web/api/htmlshadowelement/getdistributednodes/index.html @@ -0,0 +1,93 @@ +--- +title: HTMLShadowElement.getDistributedNodes() +slug: Web/API/HTMLShadowElement/getDistributedNodes +tags: + - Necesita traducción +translation_of: Web/API/HTMLShadowElement/getDistributedNodes +--- +
{{APIRef("Web Components")}}
+ +

The HTMLShadowElement.getDistributedNodes() method returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <shadow> element.

+ +

Syntax

+ +
var nodeList = object.getDistributedNodes()
+
+ +

Example

+ +
// Get the distributed nodes
+var nodes = myShadowObject.getDistributedNodes();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}{{Spec2('Shadow DOM')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatNo}}{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/htmlshadowelement/index.html b/files/es/web/api/htmlshadowelement/index.html new file mode 100644 index 0000000000..4a83b2f733 --- /dev/null +++ b/files/es/web/api/htmlshadowelement/index.html @@ -0,0 +1,117 @@ +--- +title: HTMLShadowElement +slug: Web/API/HTMLShadowElement +tags: + - Necesita traducción +translation_of: Web/API/HTMLShadowElement +--- +
{{APIRef("Web Components")}}{{obsolete_header}}
+ +

The HTMLShadowElement interface represents a {{HTMLElement("shadow")}} HTML Element, which is used in Shadow DOM.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

This interface inherits the properties of {{domxref("HTMLElement")}}.

+ +

Methods

+ +

This interface inherits the methods of {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLShadowElement.getDistributedNodes()")}}
+
Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <shadow> element. 
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}{{Spec2('Shadow DOM')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatGeckoDesktop("28")}}[1]{{CompatNo}}26{{CompatNo}}
{{domxref("HTMLShadowElement.getDistributedNodes", "getDistributedNodes()")}}35{{CompatNo}}{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile("28")}}[1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLShadowElement.getDistributedNodes", "getDistributedNodes()")}}37{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] If Shadow DOM is not enabled in Firefox, <shadow> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.

+ +

See also

+ + diff --git a/files/es/web/api/htmlstyleelement/index.html b/files/es/web/api/htmlstyleelement/index.html new file mode 100644 index 0000000000..33ffecb551 --- /dev/null +++ b/files/es/web/api/htmlstyleelement/index.html @@ -0,0 +1,125 @@ +--- +title: HTMLStyleElement +slug: Web/API/HTMLStyleElement +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías + - para_revisar +translation_of: Web/API/HTMLStyleElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Notas

+ +

Vea las siguientes páginas para información sobre alguno de los objetos utilizados para manipular propiedades CSS especificadas utilizando el DOM:

+ + + +

Material que se moverá a otras páginas

+ +

El objeto básico style, presenta los estilos definidos para el DOM en su especificación de nivel 2. Los estilos se definen mediante las interfaces StyleSheet y CSSStyleSheet. Estas interfaces contienen  miembros tales como insertRule, selectorText, y parentStyleSheet que permiten acceder y manipular las reglas de estilo individuales de que se compone una hoja de estilos CSS.

+ +

Para obtener los objetos style de un document, podemos usar la propiedad document.styleSheets y llegar a los distintos objetos por su índice (por ejemplo: document.styleSheets{{ mediawiki.external(0) }} es la primer stylesheet definida en el documento, etc.). Aunque hay varias formas y sintaxis para expresar una stylsheet para un documento, Netscape implementa exclusivamente, CSS, de manera que el objeto style obtenido por este método, es a la vez StyleSheet y CSSStyleSheet.

+ +
var ss = document.styleSheets[1];
+ss.cssRules[0].style.backgroundColor="blue";
+
+ +

La lista de propiedades disponibles en el DOM se encuentra en la página: DOM CSS Properties List.

+ +

El elemento propiedad style puede ser usado también para leer o establecer el estilo de un elemento. Sin embargo, esta propiedad solo devuelve atributos de estilo que han sido establecidos in-line (por ejemplo: <td style="background-color: lightblue"> devuelve la cadena "background-color: lightblue" o directamente para ese elemento usando element.style.propertyName, aún si hay otros estilos definidos para ese elemento en un stylesheet).

+ +

De igual manera, cuando establecemos esa propiedad en un elemento, sobreescribimos y borramos cualquier estilo que hubiera sido fijado en alguna otra parte para la propiedad particular de ese elemento que estamos estableciendo. Por ejemplo, estableciendo la propiedad border sobreescribimos cualquier asignación que se establezca en la sección principal o en una hoja de estilo externa, sobre la propiedad border del elemento. Sin embargo, esto no afectará ninguna otra declaración de propiedad que se haga para el estilo del elemento, tales como padding o margin o font-size, por ejemplo.

+ +

Para cambiar el estilo de un elemento en particular, podemos adaptar el siguiente ejemplo para el elemento al que quieres cambiar su estilo/s.

+ +
<html>
+<head>
+<title>ejemplo simple de estilo</title>
+
+<script type="text/javascript">
+
+function alterStyle(elem) {
+  elem.style.background = 'green';
+}
+
+function resetStyle(elemId) {
+  elem = document.getElementById(elemId);
+  elem.style.background = 'white';
+}
+</script>
+
+<style type="text/css">
+#p1 {
+ border: solid blue 2px;
+}
+</style>
+</head>
+
+<body>
+
+<!-- pasar la referencia al objeto del elemento, como parámetro 'this'. -->
+<p id="p1" onclick="alterStyle(this)";>
+ Haz clic aquí para cambiar el color de fondo. </p>
+
+<!-- pasar el identificador 'pl' de otro elemento a modificar. -->
+<button onclick="resetStyle('p1');">Volver al color de fondo original</button>
+
+</body>
+</html>
+
+ +

El método getComputedStyle() en el objeto document.defaultView devuelve todos los estilos que han sido asignados al elemento. Para una explicación del uso de este método, consulta el capítulo de ejemplos en: Example 6: getComputedStyle (en).

+ +

El objeto estilo (style) de DOM

+ +

El objeto style representa una sentencia de estilo individual. Al contrario de las reglas individuales disponibles en la colección: document.styleSheets, se accede al objeto style a partir del document o desde el elemento para el cual se aplica el estilo. Representa pues, el estilo in-line de ese elemento.

+ +

Más importante que los dos procedimientos que señalamos aquí, es el uso del objeto style para establecer las propiedades de un elemento:

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+ <head>
+  <title>Ejemplo de la Propiedad style</title>
+  <link rel="StyleSheet" href="example.css" type="text/css">
+  <script type="text/javascript">
+    function stilo()
+    {
+      document.getElementById("d").style.color = "orange";
+    }
+  </script>
+ </head>
+
+ <body>
+  <div id="d" class="thunder">Trueno</div>
+  <button onclick="stilo()">ss</button>
+ </body>
+</html>
+
+ +

Los atributos media y type de style pueden o no estar presentes. Ten en cuenta que también puedes cambiar el estilo de un elemento haciendo una referencia a él y luego usando el método setAttribute para especificar la propiedad CSS y su valor.

+ +
var el = document.getElementById("some-element");
+el.setAttribute("style", "background-color:darkblue;");
+
+ +

Ten presente, si embargo, que el método setAttribute eliminará cualquier otra propiedad que haya podido ser definida en el estilo del objeto. Si el elemento some-element arriba, tenia un atributo de estilo in-line como style="font-size: 18px", ese valor habrá sido eliminado por el uso de setAttribute.

+ +
Propiedades
+ +
+
style.media 
+
Especifica el destino intencionado de la información de estilo
+
style.type 
+
Devuelve el tipo de estilo que esta siendo aplicado por esta declaración.
+
+ +

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

diff --git a/files/es/web/api/htmltableelement/align/index.html b/files/es/web/api/htmltableelement/align/index.html new file mode 100644 index 0000000000..de10e6cbc6 --- /dev/null +++ b/files/es/web/api/htmltableelement/align/index.html @@ -0,0 +1,40 @@ +--- +title: HTMLTableElement.align +slug: Web/API/HTMLTableElement/align +translation_of: Web/API/HTMLTableElement/align +--- +
+
{{APIRef("HTML DOM")}}{{deprecated_header()}}
+
+ +

La propiedad HTMLTableElement.align representa la alineación de la tabla.

+ +

Sintaxis

+ +
HTMLTableElement.align =alignment;
+varalignment =HTMLTableElement.align;
+ +

Parámetros

+ +
+
alignment {{deprecatedGeneric('inline','HTML4')}}
+
alignment es una cadena con uno de los siguientes valores: +
    +
  • left
    • +
  • center
    • +
  • right
    • +
+
+
+ +

Ejemplo

+ +
// Establecer la alineación de una tabla
+var t = document.getElementById('TableA');
+t.align = 'center';
+ +

Especificación

+ + diff --git a/files/es/web/api/htmltableelement/index.html b/files/es/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..56ef6ad502 --- /dev/null +++ b/files/es/web/api/htmltableelement/index.html @@ -0,0 +1,72 @@ +--- +title: table +slug: Web/API/HTMLTableElement +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías + - para_revisar +translation_of: Web/API/HTMLTableElement +--- +
{{ ApiRef() }}
+ +

Interfaz del elemento tabla HTML

+ +

Los objetos table revelan la interfaz del HTMLTableElement la cual posee métodos y propiedades especiales (más allá del interfaz regular del objeto del elemento que también tienen disponibles mediante herencia) para manipular la vista y presentación de tablas en HTML.

+ +

Propiedades

+ +
+
table.caption
+
caption devuelve la leyenda de la tabla.
+
table.tHead
+
tHead devuelve el encabezado de la tabla.
+
table.tFoot
+
tFoot devuelve el pie de la tabla.
+
table.rows
+
rows devuelve las filas de la tabla.
+
table.tBodies
+
tBodies devuelve los cuerpos de la tabla.
+
+ +
+
table.align {{Deprecated_inline}}
+
align da/define el alineamiento de la tabla.
+
table.bgColor{{Deprecated_inline}}
+
bgColor da/define el color de fondo de la tabla.
+
table.border {{Deprecated_inline()}}
+
border da/define el borde de la tabla.
+
table.cellPadding
+
cellPadding da/define el relleno interno de las celdas.
+
table.cellSpacing
+
cellSpacing da/define el espacio entre celdas.
+
table.frame
+
frame especifica que lados de la tabla tienen borde.
+
table.rules
+
rules especifica cuales de los bordes internos son visibles.
+
table.summary
+
summary da/define el resumen de la tabla.
+
table.width
+
width da/define el ancho de la tabla.
+
+ +

Métodos

+ +
+
table.createTHead
+
createTHead crea el encabezado de la tabla.
+
table.deleteTHead
+
deleteTHead elimina el encabezado de la tabla.
+
table.createTFoot
+
createTFoot crea el pie de tabla.
+
table.deleteTFoot
+
deleteTFoot elimina el pie de tabla.
+
table.createCaption
+
createCaption crea una nueva leyenda para la tabla.
+
table.deleteCaption
+
deleteCaption elimina la leyenda de tabla.
+
table.insertRow
+
insertRow inserta una nueva fila.
+
table.deleteRow
+
deleteRow elimina una fila.
+
diff --git a/files/es/web/api/htmltableelement/insertrow/index.html b/files/es/web/api/htmltableelement/insertrow/index.html new file mode 100644 index 0000000000..a3e49f3ac0 --- /dev/null +++ b/files/es/web/api/htmltableelement/insertrow/index.html @@ -0,0 +1,144 @@ +--- +title: HTMLTableElement.insertRow() +slug: Web/API/HTMLTableElement/insertRow +translation_of: Web/API/HTMLTableElement/insertRow +--- +
+
+
{{APIRef("HTML DOM")}}
+
+
+ +

El método HTMLTableElement.insertRow() inserta una nueva fila en la tabla.

+ +

Sintaxis

+ +
var row = HTMLTableElement.insertRow(optional index = -1);
+ + + +

Ejemplo

+ +
<table id="TableA">
+<tr>
+<td>Antigua fila superior</td>
+</tr>
+</table>
+<script type="text/javascript">
+
+function addRow(tableID) {
+  // Obtiene una referencia a la tabla
+  var tableRef = document.getElementById(tableID);
+
+  // Inserta una fila en la tabla, en el índice 0
+  var newRow   = tableRef.insertRow(0);
+
+  // Inserta una celda en la fila, en el índice 0
+  var newCell  = newRow.insertCell(0);
+
+  // Añade un nodo de texto a la celda
+  var newText  = document.createTextNode('Nueva fila superior');
+  newCell.appendChild(newText);
+}
+
+// Llama a addRow() con el ID de la tabla
+addRow('TableA');
+
+</script>
+ +

Para ser válida en un documento HTML, una TR debe contener al menos un elemento TD.

+ +

Observese que insertRow inserta la fila diréctamente en la tabla y retorna una referencia a la nueva fila. La fila no necesita ser añadida separadamente (p.e. con document.appendChild()) tal sería el caso si se usase document.createElement() para crear el nuevo elemento TR.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}{{Spec2("DOM2 HTML")}}Especificó con más detalle dónde se inserta la fila.
{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}{{Spec2("DOM1")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico43[1]5.5104
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] A partir deGecko 20.0 {{geckoRelease("20.0")}} el argumento index se estableció como opcional y con valor por defecto -1 según la especificación HTML.

+ +

Ver también

+ + diff --git a/files/es/web/api/idbcursor/continue/index.html b/files/es/web/api/idbcursor/continue/index.html new file mode 100644 index 0000000000..90679783b1 --- /dev/null +++ b/files/es/web/api/idbcursor/continue/index.html @@ -0,0 +1,194 @@ +--- +title: IDBCursor.continue() +slug: Web/API/IDBCursor/continue +tags: + - API + - Almacen + - Basededatos + - Continuar + - CursorIDB + - IndexadoIDB + - Referencia + - metodo +translation_of: Web/API/IDBCursor/continue +--- +

{{APIRef("IndexedDB")}}

+ +

El siguiente() método de la  {{domxref("IDBCursor")}} interfaz, avanza el cursor hacia la siguiente posición a lo largo de su dirección, para el elemento cuya tecla marque la opción de una tecla parámetro. si ninguna tecla es especificada, el cursor avanzará hacia la siguiente posición, bazado en su dirección actual.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
cursor.continue(optionalKey);
+ +

Parámetros

+ +
+
Tecla opcional
+
La tecla para posisionar al cursor en.
+
+ +

Excepciones

+ +

Este método puede plantear un{{domxref("DOMException")}} con una {{domxref("DOMError")}} de uno de los siguientes tipos:

+ + + + + + + + + + + + + + + + + + + + + + +
ExcepciónDescripción
TransactionInactiveErrorEsta transacción en el Cursor IDB está inactiva.
DataError +

El parámetro de una tecla podría tener una de las siguientes condiciones:

+ +
    +
  • La tecla no es una tecla valida.
    • +
  • La tecla está más atrás o en el mismo sitio que la posición del cursor y además la dirección del cursor es la siguiente o la única siguiente.
    • +
  • La tecla está más adelante o en el mismo sitio que la posición del cursor y además la dirección del cursor es previa o la única previa.
    • +
+
InvalidStateErrorEl cursor está siendo reiterado o se ha reiterado mas allá de su final.
+  
+ +

Ejemplo

+ +

En este simple fragmento nosotros creamos una transacción, recuperar un objeto del almacen, despues usamos un cursor para interactuar a traves de todos los registros en almacen de objetos. El cursor no requiere que nosotros seleccionemos los datos basados en una tecla; podemos tomarlo todo. También es importante resaltar que en cada interacción de la cadena, puedes tomar datos desde el registro actual debajo del objeto del cursor usando cursor.value.foo. Para dar un ejemplo completo, puedes mirar nuestra IDBCursor example (view example live.)

+ +
function displayData() {
+  var transaction = db.transaction(['rushAlbumList'], "readonly");
+  var objectStore = transaction.objectStore('rushAlbumList');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
+      list.appendChild(listItem);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationEstadoComentarios
{{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico23{{property_prefix("webkit")}}
+ 24		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, parcial157.1
Disponible en workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico4.4{{CompatGeckoMobile("22.0")}}1.0.110228
Disponible en workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+

Ten cuidado en Chrome ya que todavía están siendo implementado las antiguas especificaciones con las nuevas. Del mismo modo que todavía tiene la propiedad webkitIndexedDB aun si el indexedDB sin prefijo esta presente.

+
+ +

Te puede interesar

+ + + +

 

diff --git a/files/es/web/api/idbcursor/index.html b/files/es/web/api/idbcursor/index.html new file mode 100644 index 0000000000..841bf6f9be --- /dev/null +++ b/files/es/web/api/idbcursor/index.html @@ -0,0 +1,194 @@ +--- +title: IDBCursor +slug: Web/API/IDBCursor +tags: + - API + - Database + - IDBCursor + - IndexedDB + - Interface + - NeedsTranslation + - Reference + - Référence(2) + - Storage + - TopicStub +translation_of: Web/API/IDBCursor +--- +

{{APIRef("IndexedDB")}}

+ +

La interfaz IDBCursor de la IndexedDB API representa un cursor para atravesar o iterar varios registros de una base de datos.

+ +

El cursor tiene una fuente que indica el índice o el almacén de objetos sobre el que se está iterando. Tiene una posición dentro del rango y se mueve en una dirección que aumenta o disminuye en el orden de las Keys de registro. El cursor permite a una aplicación procesar asincrónicamente todos los registros del rango del cursor.

+ +

Puede tener un número ilimitado de cursores al mismo tiempo. Siempre se obtiene el mismo objeto IDBCursor que representa un cursor determinado. Las operaciones se realizan en el índice subyacente o en el almacén de objetos.

+ +

{{AvailableInWorkers}}

+ +

Methods

+ +
+
{{domxref("IDBCursor.advance()")}}
+
Establece el número de veces que un cursor debe mover su posición hacia adelante.
+
{{domxref("IDBCursor.continue()")}}
+
Avanza el cursor a la siguiente posición a lo largo de su dirección, hasta el elemento cuya key coincide con el parámetro clave opcional.
+
+ +
+
{{domxref("IDBCursor.delete()")}}
+
Devuelve un objeto {{domxref("IDBRequest")}} y, en un hilo separado, elimina el registro en la posición del cursor, sin cambiar la posición del cursor. Esto se puede utilizar para borrar registros específicos.
+
{{domxref("IDBCursor.update()")}}
+
Devuelve un objeto {{domxref("IDBRequest")}} y, en un hilo separado, actualiza el valor en la posición actual del cursor en el almacén de objetos. Esto se puede utilizar para actualizar registros específicos.
+
+ +

Propiedades

+ +
+
{{domxref("IDBCursor.source")}} {{readonlyInline}}
+
Devuelve {{domxref("IDBObjectStore")}} o {{domxref("IDBIndex")}}} que el cursor está iterando. Esta función nunca devuelve nulo o lanza una excepción, incluso si el cursor está siendo iterado, ha iterado más allá de su final, o su transacción no está activa.
+
{{domxref("IDBCursor.direction")}} {{readonlyInline}}
+
+
Devuelve la dirección de desplazamiento del cursor. Ver Constants para valores posibles.
+
{{domxref("IDBCursor.key")}} {{readonlyInline}}
+
Devuelve la key del registro en la posición del cursor. Si el cursor está fuera de su rango, se fija en undefined. La key del cursor puede ser de cualquier tipo de datos.
+
{{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}
+
Devuelve la key primaria efectiva actual del cursor. Si el cursor está siendo iterado o ha iterado fuera de su rango, se fija en undefined. La key principal del cursor puede ser cualquier tipo de datos.
+
+ +

Constants

+ +
{{ deprecated_header(13) }}
+ +
+

These constants are no longer available — they were removed in Gecko 25. You should use the string constants directly instead. ({{ bug(891944) }})

+
+ + + +

Ejemplo

+ +

En este simple fragmento creamos una transacción, recuperamos un almacén de objetos y usamos un cursor para iterar todos los registros del almacén de objetos. El cursor no nos obliga a seleccionar los datos en base a una key; podemos simplemente cogerlos todos. También tenga en cuenta que en cada iteración del bucle, puede tomar datos del registro actual bajo el objeto del cursor utilizando cursor.value.foo. Para un ejemplo completo de funcionamiento, vea nuestro IDBCursor example (view example live.)

+ +
function displayData() {
+  var transaction = db.transaction(['rushAlbumList'], "readonly");
+  var objectStore = transaction.objectStore('rushAlbumList');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
+      list.appendChild(listItem);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}}{{Spec2('IndexedDB')}}
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{property_prefix("webkit")}}
+ 24 [1]		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, partial157.1
Available in workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support4.4{{CompatGeckoMobile("22.0")}}1.0.110228
Available in workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +

[1]Be careful in Chrome as it still implements the old specification along with the new one. Similarly it still has the prefixed webkitIndexedDB property even if the unprefixed indexedDB is present.

+ +

See also

+ + diff --git a/files/es/web/api/idbdatabase/index.html b/files/es/web/api/idbdatabase/index.html new file mode 100644 index 0000000000..c16635051b --- /dev/null +++ b/files/es/web/api/idbdatabase/index.html @@ -0,0 +1,258 @@ +--- +title: IDBDatabase +slug: Web/API/IDBDatabase +tags: + - API + - Database + - IDBDatabase + - IndexedDB + - Interface + - NeedsTranslation + - Reference + - Storage + - TopicStub + - accessing data + - asynchronous access + - transactions +translation_of: Web/API/IDBDatabase +--- +

{{APIRef("IndexedDB")}}

+ +
+

The IDBDatabase interface of the IndexedDB API provides a connection to a database; you can use an IDBDatabase object to open a transaction on your database then create, manipulate, and delete objects (data) in that database. The interface provides the only way to get and manage versions of the database.

+ +

{{AvailableInWorkers}}

+
+ +
+

Note: Everything you do in IndexedDB always happens in the context of a transaction, representing interactions with data in the database. All objects in IndexedDB — including object stores, indexes, and cursors — are tied to a particular transaction. Thus, you cannot execute commands, access data, or open anything outside of a transaction.

+
+ +

Methods

+ +

Inherits from: EventTarget

+ +
+
{{domxref("IDBDatabase.close()")}}
+
Returns immediately and closes the connection to a database in a separate thread.
+
{{domxref("IDBDatabase.createObjectStore()")}}
+
Creates and returns a new object store or index.
+
{{domxref("IDBDatabase.deleteObjectStore()")}}
+
Destroys the object store with the given name in the connected database, along with any indexes that reference it.
+
{{domxref("IDBDatabase.transaction()")}}
+
Immediately returns a transaction object ({{domxref("IDBTransaction")}}) containing the {{domxref("IDBTransaction.objectStore")}} method, which you can use to access your object store. Runs in a separate thread.
+
+ +

Properties

+ +
+
{{domxref("IDBDatabase.name")}} {{readonlyInline}}
+
A {{ domxref("DOMString") }} that contains the name of the connected database.
+
{{domxref("IDBDatabase.version")}} {{readonlyInline}}
+
A 64-bit integer that contains the version of the connected database. When a database is first created, this attribute is an empty string.
+
{{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}
+
A {{ domxref("DOMStringList") }} that contains a list of the names of the object stores currently in the connected database.
+
+ +

Event handlers

+ +
+
{{domxref("IDBDatabase.onabort")}}
+
Fires when access of the database is aborted.
+
{{domxref("IDBDatabase.onclose")}}
+
Fires when the {{event("close")}} event occurs; this happens when the database is unexpectedly closed, such as during application shutdown.
+
{{domxref("IDBDatabase.onerror")}}
+
Fires when access to the database fails.
+
{{domxref("IDBDatabase.onversionchange")}}
+
+

Fires when a database structure change ({{domxref("IDBOpenDBRequest.onupgradeneeded")}} event or {{domxref("IDBFactory.deleteDatabase()")}} was requested elsewhere (most probably in another window/tab on the same computer). This is different from the version change transaction (see {{domxref("IDBVersionChangeEvent")}}), but it is related.

+
+
+ +

Example

+ +

In the following code snippet, we open a database asynchronously ({{domxref("IDBFactory")}}), handle success and error cases, and create a new object store in the case that an upgrade is needed ({{ domxref("IDBdatabase") }}). For a complete working example, see our To-do Notifications app (view example live.)

+ +
// Let us open our database
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  // these two event handlers act on the IDBDatabase object, when the database is opened successfully, or not
+  DBOpenRequest.onerror = function(event) {
+    note.innerHTML += '<li>Error loading database.</li>';
+  };
+
+  DBOpenRequest.onsuccess = function(event) {
+    note.innerHTML += '<li>Database initialised.</li>';
+
+    // store the result of opening the database in the db variable. This is used a lot later on
+    db = DBOpenRequest.result;
+
+    // Run the displayData() function to populate the task list with all the to-do list data already in the IDB
+    displayData();
+  };
+
+  // This event handles the event whereby a new version of the database needs to be created
+  // Either one has not been created before, or a new version number has been submitted via the
+  // window.indexedDB.open line above
+
+  DBOpenRequest.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '<li>Error loading database.</li>';
+    };
+
+    // Create an objectStore for this database using IDBDatabase.createObjectStore
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // define what data items the objectStore will contain
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += '<li>Object store created.</li>';
+  };
+ +

This next line opens up a transaction on the Database, then opens an object store that we can then manipulate the data inside of.

+ +
    var objectStore = db.transaction('toDoList').objectStore('toDoList');
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}}{{Spec2('IndexedDB')}}Initial version
{{SpecName("IndexedDB 2", "#database-interface", "IDBDatabase")}}{{Spec2("IndexedDB 2")}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)[1]Internet ExplorerOperaSafari (WebKit)
Basic support23 {{property_prefix("webkit")}}
+ 24		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop(16)}}		10, partial157.1
Available in workers{{CompatVersionUnknown}}{{CompatGeckoDesktop(37)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
{{event("close")}} event{{CompatVersionUnknown}}{{CompatGeckoDesktop(50)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari MobileChrome for Android
Basic support4.4{{CompatVersionUnknown}}{{CompatGeckoMobile(22)}}1.0.110228{{CompatVersionUnknown}}
Available in workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(37)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
{{event("close")}} event{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(50)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}). Previously in a readwrite transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk. In Firefox 40+ the complete event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The complete event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare most consumers should not need to concern themselves further. If you must ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see {{domxref("IDBDatabase.transaction")}}).

+ +

See also

+ + + +

 

diff --git a/files/es/web/api/idbdatabase/transaction/index.html b/files/es/web/api/idbdatabase/transaction/index.html new file mode 100644 index 0000000000..8e8fcfedd6 --- /dev/null +++ b/files/es/web/api/idbdatabase/transaction/index.html @@ -0,0 +1,229 @@ +--- +title: IDBDatabase.transaction() +slug: Web/API/IDBDatabase/transaction +tags: + - Almacenamiento + - Base de datos + - Referencia + - metodo + - transacción +translation_of: Web/API/IDBDatabase/transaction +--- +

{{ APIRef("IndexedDB") }}

+ +
+

El método transaction() [transacción] de la interfaz {{domxref("IDBDatabase")}} retorna inmediatamente un objeto de transacción ({{domxref("IDBTransaction")}}) que contiene el método {{domxref("IDBTransaction.objectStore")}}, el cual puedes usar para acceder a tu almacén de objetos.

+ +

{{AvailableInWorkers}}

+
+ +

Sintáxis

+ +
var transaccion = db.transaction(["toDoList"], "readwrite");
+ +

Retorna

+ +

Un objeto {{domxref("IDBTransaction")}}.

+ +

Excepciones

+ +

Éste método puede invocar una excepción {{domxref("DOMException")}} de alguno de los siguientes tipos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ExcepciónDescripción
InvalidStateError +

El método close() ha sido llamado previamente en esta instancia de {{domxref("IDBDatabase")}}.

+
NotFoundErrorUn almacén de objetos especificado en el parámetro storeNames ha sido borrado o removido.
TypeErrorEl valor para el parámetro mode es inválido.
InvalidAccessErrorLa función fue llamada con una lista vacía de nombres de almacenes.
+  
+ +

Ejemplo

+ +

En este ejemplo abrimos la conexión a una base de datos, luego usamos transaction() para abrir una transacción en dicha base de datos. Para un ejemplo completo, vea nuestra aplicación To-do Notifications (ver ejemplo en vivo).

+ +
var db;
+
+// Abrimos nuestra base de datos:
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Base de datos inicializada.</li>';
+
+  // almacenar el resultado de la apertura de la base de datos en la variable db. Esto es bastante usado más abajo:
+  db = DBOpenRequest.result;
+
+  // ejecutar la función displayData() para popular la lista de tareas con los datos "to-do" que existen actualmente en la Base de Datos Indizada (IDB):
+  displayData();
+
+};
+
+// abrir una transacción lectura/escritura, lista para añadir los datos:
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// reportar cuando haya éxito al abrir la transacción
+transaction.oncomplete = function(event) {
+  note.innerHTML += '<li>Transacción completa: modificación a la base de datos finalizada.</li>';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '<li>Transacción no abierta debido a un error. No se permite duplicar ítems.</li>';
+};
+
+// después deberías continuar y hacerle algo a esta base de datos a través del almacén de objetos:
+var objectStore = transaction.objectStore("toDoList");
+// etc.
+ +

Parámetros

+ +
+
storeNames
+
Son los nombres de los almacenes de objetos e índices que están en el ámbito de la nueva transacción, declarados como un arreglo de cadenas de texto. Especifíca solamente aquellos a los que necesitas acceso.
+ Si necesitas acceder a un solo almacén, puedes especificar su nombre como una cadena. Por tanto las siguientes líneas son equivalentes:
+
+ 
var transaction = db.transaction(['my-store-name']);
+var transaction = db.transaction('my-store-name');
+
+
Si necesitas acceder a todos los almacenes de objetos en la base de datos, puedes usar la propiedad {{domxref("IDBDatabase.objectStoreNames")}}: + 
var transaction = db.transaction(db.objectStoreNames);
+
+
Pasar un arreglo vació como parámetro  arrojará una excepción.
+
mode
+
Opcional. Los tipos de acceso que pueden desempeñarse en la transacción. Las transacciones son abiertas en uno de tres modos: readonly [sólo lectura], readwrite [lectura/escritura], y readwriteflush [descarga de lectura/escritura] (no-estándar, sólo para Firefox). El modo versionchange [cambio de versión] no puede ser especificado aquí. Si no provees un parámetro, el modo predeterminado será readonly [sólo lectura]. Para evitar ralentizar las cosas, no abras una transacción readwrite [lectura/escritura] a menos que realmente necesites escribir en la base de datos.
+
Si necesitas abrir un almacén de objetos en modo readwrite para cambiar los datos, usa lo siguiente: + 
var transaction = db.transaction('my-store-name', "readwrite");
+ +

Desde Firefox 40, las transacciones de IndexedDB tienen garantías de durabilidad relajadas para aumentar el rendimiento (ver {{Bug("1112702")}}), lo cual es el mismo comportamiento de otros navegadores que soportan IndexedDB. Es decir, anteriormente en una transacción readwrite el evento {{domxref("IDBTransaction.oncomplete")}} era invocado sólo cuando se garantizaba que todos los datos habían sido vaciados al disco duro. En Firefox 40+ el evento complete es accionado después de indicársele al Sistema Operativo que escriba los datos al disco pero esta confirmación podría suceder poco antes de que los datos hayan sido verdaderamente escritos en él. Si bien dicho evento puede entonces ser entregado un poco antes de tiempo, de cualquier modo, existe una pequeña probabilidad de que la entera transacción se pierda si el SO se bloquea o si ha ocurrido una pérdida de energía antes de que los datos efectivamente se descarguen al disco duro. Como esas catastróficas circunstancias son más bien raras, la mayoría de los consumidores no deberían preocuparse demasiado.

+ +
+

Nota: En Firefox, si deseas asegurar la durabilidad por alguna razón (por ejemplo, que estés almacenando datos críticos que no puedan ser recalculados después) puedes forzar una transacción a descargar al disco antes de invocar el evento complete creando una transacción que use un modo experimental readwriteflush  (no-estándar) (ver {{domxref("IDBDatabase.transaction")}}). Esto actualmente es experimental, y puede usarse únicamente si la configuración dom.indexedDB.experimental es igual a true en about:config.

+
+
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilidad con Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico23{{property_prefix("webkit")}}
+ 24		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, parcial157.1
Disponible en workers [obreros web]{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Móvil (Gecko)Firefox OSIE PhoneOpera MóvilSafari MóvilChrome para Android
Soporte básico4.4{{CompatVersionUnknown}}{{CompatGeckoMobile("22.0")}}1.0.110228{{CompatVersionUnknown}}
Disponible en workers [obreros web]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/idbobjectstore/add/index.html b/files/es/web/api/idbobjectstore/add/index.html new file mode 100644 index 0000000000..1a28ff194c --- /dev/null +++ b/files/es/web/api/idbobjectstore/add/index.html @@ -0,0 +1,193 @@ +--- +title: IDBObjectStore.add +slug: Web/API/IDBObjectStore/add +tags: + - API + - Add + - Almacenamiento + - Base de datos + - IDBObjectStore + - IndexedDB + - Referencia +translation_of: Web/API/IDBObjectStore/add +--- +

{{ APIRef("IDBObjectStore") }}

+
+

El metodo add() de la interfaz {{domxref("IDBObjectStore")}} retorna un objeto {{domxref("IDBRequest")}}, y, un hilo separado, crea un clone estructurado del valor, y almacena el valor clonado en el almacén de objetos. Esto es para agregar nevos registros a un almacén de objetos.

+

Para determinar si la operación de agregar fue completada satisfactoriamente, escucha el evento complete de la transaccion en adicion al evento success de la peticion IDBojectStore.add, porque la transaccion y todavía puede fallar después de lanzar el evento success. En otras palabras, el eventos success sólo es lanzado cuando la transacción ha sido puesta en cola satisfactoriamente.

+

El método agregar es un método de sólo inserción. Si un registro ya existe en el almacén de objetos con el argumento key como su clave, entonces un error ConstrainError es lanzado en el objeto petición devuelto. Para actualizar registros existentes, debes usar el método {{domxref("IDBObjectStore.put")}} en su lugar.

+
+

Sintaxis

+
var request = objectStore.add(myItem, optionalKey);
+

Retorno

+

Un objeto {{domxref("IDBRequest")}} en el que los eventos subsecuentes relacionados a esta operación son lanzados.

+

Excepciones

+

Este método puede generar un {{domxref("DOMException")}} con un {{domxref("DOMError")}} de uno de los siguiente tipos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExcepciónDescripción
ReadOnlyErrorLa transacción asociada con esta operación está en un modo de sólo lectura.
TransactionInactiveErrorEsta transacción de {{domxref("IDBObjectStore")}}'s está inactiva.
DataError +

Cualquiera de los siguientes condiciones aplica:

+
    +
  • El almacén de objetos usa llaves en línea o tiene un generador de llaves, y una argumento llave fue proporcionado.
    • +
  • El almacén de objetos usa llaves fuera de línea y no tiene un generador de llaves, y un argumento llave fue proporcionado.
    • +
  • El almacén de objetos usa llaves en línea pero no un generador de llaves, y la ruta de la llave del almacén de objetos no da una llave válida.
    • +
  • El argumento llave fue proporcionado pero no contiene una llave válida.
    • +
+
InvalidStateErrorEl {{domxref("IDBObjectStore")}} ha sido borrado o removido.
DataCloneErrorLos datos siendo almacenados no pueden ser clonados por el algoritmo de clonado estructurado interno.
+

Ejemplo

+

En el siguiente código, abrimos una transacción read/write en nuestra base de datos y agregado algunos datos al almacén de datos usando add(). También ten en cuenta que las funciones adjuntas a los manejadores de eventos de la transacción para informar en la salida de la apertura de transacciones en el evento de éxito o falla. Para un ejemplo completo funcionando, mira nuestra aplicación To-do Notifications (ver ejemplo).

+
// Abrimos nuestra base de datos
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Database initialised.</li>';
+
+  // Almacenar el resultado de la apertura de la base de datos en la variable db. Esta es usada mucho después
+  db = DBOpenRequest.result;
+
+  // Ejecuta la función addData() para agregar los datos
+  addData();
+};
+
+function addData() {
+  // Crea un nuevo objeto listo para ser insertado en la IDB
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // Inicia una transacción de lectura/escritura db transaction, lista para agregar los datos
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // Informa sobre el éxito de la inicio de la transacción
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction completed: database modification finished.</li>';
+  };
+
+
+  transaction.onerror = function(event) {
+  note.innerHTML += '<li>Transaction not opened due to error. Duplicate items not allowed.</li>';
+  };
+
+  // Crea una almacén de objetos en la transacción
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Agrega nuestro objeto newItem al almacén de objetos
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    //Informa sobre el éxito de nuestro nuevo elemento en la base de datos
+    note.innerHTML += '<li>New item added to database.</li>';
+  };
+};
+

Parámetros

+
+
+ value
+
+ El valor para ser almacenado.
+
+ key
+
+ La llave a usar para identificar el registro. Si no es especificada, el resultado es nulo.
+
+

Especificación

+ + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}}{{Spec2('IndexedDB')}} 
+

Compatibilidad de navegadores

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico23{{property_prefix("webkit")}}
+ 24		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, partial157.1
+
+
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico4.4{{CompatGeckoMobile("22.0")}}1.0.11022{{CompatNo}}
+
+

Ver también

+ diff --git a/files/es/web/api/idbobjectstore/index.html b/files/es/web/api/idbobjectstore/index.html new file mode 100644 index 0000000000..32bb499284 --- /dev/null +++ b/files/es/web/api/idbobjectstore/index.html @@ -0,0 +1,207 @@ +--- +title: IDBObjectStore +slug: Web/API/IDBObjectStore +tags: + - API +translation_of: Web/API/IDBObjectStore +--- +

{{APIRef("IndexedDB")}}

+ +
+

The IDBObjectStore interface of the IndexedDB API represents an object store in a database. Records within an object store are sorted according to their keys. This sorting enables fast insertion, look-up, and ordered retrieval.

+
+ +

Methods

+ +
+
{{domxref("IDBObjectStore.add")}}
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store. This is for adding new records to an object store.
+
{{domxref("IDBObjectStore.clear")}}
+
Creates and immediately returns an {{domxref("IDBRequest")}} object, and clears this object store in a separate thread. This is for deleting all current records out of an object store.
+
{{domxref("IDBObjectStore.delete")}}
+
returns an {{domxref("IDBRequest")}} object, and, in a separate thread, deletes the current object store. This is for deleting individual records out of an object store.
+
{{domxref("IDBObjectStore.get")}}
+
returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns the object store selected by the specified key. This is for retrieving specific records from an object store.
+
{{domxref("IDBObjectStore.createIndex")}}
+
Creates a new index during a version upgrade, returning a new {{domxref("IDBIndex")}} object in the connected database.
+
{{domxref("IDBObjectStore.deleteIndex")}}
+
Destroys the specified index in the connected database, used during a version upgrade.
+
{{domxref("IDBObjectStore.index")}}
+
Opens an index from this object store after which it can, for example, be used to return a sequence of records sorted by that index using a cursor.
+
{{domxref("IDBObjectStore.put")}}
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store. This is for updating existing records in an object store when the transaction's mode is readwrite.
+
{{domxref("IDBObjectStore.openCursor")}} 
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns a new {{domxref("IDBCursorWithValue")}} object. Used for iterating through an object store by primary key with a cursor.
+
+ +

Properties

+ +
+
{{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}
+
A list of the names of indexes on objects in this object store.
+
{{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}
+
The key path of this object store. If this attribute is null, the application must provide a key for each modification operation.
+
{{domxref("IDBObjectStore.name")}} {{readonlyInline}}
+
The name of this object store.
+
{{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}
+
The name of the transaction to which this object store belongs.
+
{{domxref("IDBObjectStore.autoIncrement")}} {{readonlyInline}}
+
The value of the auto increment flag for this object store.
+
+ +

Obsolete methods

+ +
+
{{domxref("IDBObjectStore.openKeyCursor")}} 
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns a new {{domxref("IDBCursorWithValue")}}. Used for iterating through an object store with a key. However, this is now handled by {{domxref("IDBObjectStore.openCursor")}}, if a value is specified.
+
+ +

Example

+ +

This example shows a variety of different uses of ObjectStores, from updating the data structure with {{domxref("IDBObjectStore.createIndex")}} inside an onupgradeneeded function, to adding a new item to our object store with {{domxref("IDBObjectStore.add")}}. For a full working example, see our To-do Notifications app (view example live.)

+ +
// Let us open our database
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Database initialised.</li>';
+
+  // store the result of opening the database in the db variable.
+  db = DBOpenRequest.result;
+};
+
+// This event handles the event whereby a new version of the database needs to be created
+// Either one has not been created before, or a new version number has been submitted via the
+// window.indexedDB.open line above
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '<li>Error loading database.</li>';
+  };
+
+  // Create an objectStore for this database
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // define what data items the objectStore will contain
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '<li>Object store created.</li>';
+};
+
+// Create a new item to add in to the object store
+var newItem = [
+  { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: 'December', year: 2013, notified: "no" }
+];
+
+// open a read/write db transaction, ready for adding the data
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// report on the success of opening the transaction
+transaction.oncomplete = function(event) {
+  note.innerHTML += '<li>Transaction opened for task addition.</li>';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '<li>Transaction not opened due to error. Duplicate items not allowed.</li>';
+};
+
+// create an object store on the transaction
+var objectStore = transaction.objectStore("toDoList");
+// add our newItem object to the object store
+var objectStoreRequest = objectStore.add(newItem[0]);
+
+objectStoreRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>New item added to database.</li>';
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}}{{Spec2('IndexedDB')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{property_prefix("webkit")}}
+ 24		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, partial157.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support4.4{{CompatGeckoMobile("22.0")}}1.0.11022{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/es/web/api/imagebitmap/index.html b/files/es/web/api/imagebitmap/index.html new file mode 100644 index 0000000000..31a33886b9 --- /dev/null +++ b/files/es/web/api/imagebitmap/index.html @@ -0,0 +1,65 @@ +--- +title: ImageBitmap +slug: Web/API/ImageBitmap +tags: + - API + - Canvas + - Imagen de mapa de bits + - Referencia +translation_of: Web/API/ImageBitmap +--- +
{{APIRef("Canvas API")}}
+ +

The ImageBitmap interface represents a bitmap image which can be drawn to a {{HTMLElement("canvas")}} without undue latency. It can be created from a variety of source objects using the {{domxref("ImageBitmapFactories.createImageBitmap", "createImageBitmap()")}} factory method. ImageBitmap provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.

+ +

Properties

+ +
+
{{domxref("ImageBitmap.height")}} {{readonlyInline}}
+
Is an unsigned long representing the height, in CSS pixels, of the ImageData.
+
{{domxref("ImageBitmap.width")}} {{readonlyInline}}
+
Is an unsigned long representing the width, in CSS pixels, of the ImageData.
+
+ +

Methods

+ +
+
{{domxref("ImageBitmap.close()")}}
+
+

Disposes of all graphical resources associated with an ImageBitmap.

+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "webappapis.html#imagebitmap", "ImageBitmap")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/imagebitmaprenderingcontext/index.html b/files/es/web/api/imagebitmaprenderingcontext/index.html new file mode 100644 index 0000000000..4fb6f8816f --- /dev/null +++ b/files/es/web/api/imagebitmaprenderingcontext/index.html @@ -0,0 +1,37 @@ +--- +title: ImageBitmapRenderingContext +slug: Web/API/ImageBitmapRenderingContext +translation_of: Web/API/ImageBitmapRenderingContext +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

El interface ImageBitmapRenderingContext es un lienzo de contexto renderizado que sólo permite la funcionalidad de reemplazar el contenido del lienzo ( <canvas> ) con el  {{domxref("ImageBitmap")}} dado. La identificación de contenido (el primer argumento a {{domxref("HTMLCanvasElement.getContext()")}} o {{domxref("OffscreenCanvas.getContext()")}}  es "bitmaprenderer".

+ +

Esta interface es posible en ambos , la ventana y el "worker context"  (contexto de tabajo).

+ +

Métodos

+ +
+
{{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}}
+
+

Muestra el ImageBitmap en el lienzo asociado con el contexto de renderizado. La propiedad del ImageBitmap se transfiere al lienzo. Este se llamaba transferImageBitmap(), pero se renombra en un cambio especulativo . El viejo nombre se mantiene como un alias para evitar una ruptura del código.

+
+
+ +

Especificaciones

+ +

Escrito como una propuesta en la especificaación OffscreenCanvas.

+ +

Compatibilidad del Buscador

+ +
+ + +

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/index.html b/files/es/web/api/index.html new file mode 100644 index 0000000000..eb83cedc1b --- /dev/null +++ b/files/es/web/api/index.html @@ -0,0 +1,37 @@ +--- +title: Referencia de la API Web +slug: Web/API +tags: + - API + - Aterrizaje + - DOM + - Referencia + - Web +translation_of: Web/API +--- +

Cuando escribimos código para la web utilizando JavaScript, podemos usar gran número de APIs disponibles. A continuación mostramos una lista de todas las interfaces (es decir, tipos de objetos) que puedes usar al desarrollar tu aplicación o sitio Web. Para obtener una lista de las API que contiene cada una de estas interfaces, consulta la referencia de la API Web.

+ +
{{APIListAlpha}}
+ +
+ +

Especificaciones

+ +

Esta es una lista de todas las APIs que están disponibles.

+ +

{{ListGroups}}

+ +

Interfaces

+ +


+ Esta es una lista de todas las interfaces (es decir, tipos de objetos) que están disponibles

+ +

{{APIListAlpha}}

+ +

Ve también

+ + + + diff --git a/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html b/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html new file mode 100644 index 0000000000..34d4fdd438 --- /dev/null +++ b/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html @@ -0,0 +1,216 @@ +--- +title: Conceptos Básicos +slug: Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB +translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +--- +

IndexedDB es una manera de almacenar datos de manera persistente en el navegador. Dado que permite la creación de aplicaciones web con capacidades de consulta mejoradas, éstas pueden funcionar tanto en línea como fuera de línea. IndexedDB es útil para aplicaciones que almacenan una gran cantidad de datos (catálogos de DVDs en una biblioteca, por ejemplo) y para aplicaciones que no necesitan de una conexión permanente a internet para funcionar (clientes de correo, listas de tareas y blocs de notas, por ejemplo).

+ +

Sobre este documento

+ +

Esta introducción discute conceptos y terminologías fundamentales en IndexedDB. Provee una visión general y orienta sobre los conceptos clave. Para aprender más sobre los términos relacionados con IndexedDB, vea la sección de Definiciones.

+ +

Para un tutorial sobre cómo usar la API, vea Usando IndexedDB. Para ver la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus sub-páginas, que documentan los tipos de objetos utilizados por IndexedDB, así como los métodos de las API síncrona y asíncrona.

+ +

Visión general de IndexedDB

+ +

IndexedDB le permite almacenar y obtener objetos indizados a partir de una "llave". Todos los cambios realizados a la base de datos ocurren dentro de transacciones. Como la mayoría de las soluciones de almacenamiento web, IndexedDB sigue una política de mismo origen, por lo que aún cuando se puede acceder a datos almacenados en un dominio, no se pueden acceder a datos a través de distintos dominios.

+ +

La API incluye una variante asíncrona y una síncrona. La variante asíncrona puede ser utilizada en la mayoría de los casos, incluyendo WebWorkers, mientras la variante síncrona está diseñada para ser utilizada solo con WebWorkers. Actualmente, ninguno de los navegadores principales soportan la API síncrona. Sin embargo, aún cuando la API síncrona sea soportada, en la mayoría de los casos de uso de IndexedDB lo más probable es que se utilice la API asíncrona.

+ +

IndexedDB es una alternativa a WebSQL, que fue marcada como obsoleta por W3C el 18 de Noviembre de 2010. Aún cuando IndexedDB y WebSQL son soluciones para el almacenamiento, éstas no ofrecen las mismas funcionalidades. WebSQL es un sistema relacional de acceso a datos, mientras que IndexedDB es un sistema de tablas indizadas.

+ +

Conceptos principales

+ +

Si usted tiene alguna idea de cómo trabajan otros tipos de bases de datos, podría tener algún conflicto de conceptos al trabajar con IndexedDB. Por esta razón mantenga los siguientes conceptos importantes en mente:

+ + + +

Definiciones

+ +

Esta sección define y explica los términos utilizados en la API de IndexedDB.

+ +

Base de Datos

+ +
+
base de datos
+
Un repositorio de información, típicamente compuesto de uno o más  almacenes de objetos. Cada base de datos debe tener: +
    +
  • Nombre. Identifica la base de datos dentro de un mismo origen y no cambia a lo largo de la existencia de ésta. El nombre puede ser cualquier cadena de caracteres (incluyendo una vacía).
    • +
  • +

    Versión actual. Cuando una base de datos se crea por primera vez, la versión es el número entero 1 si no se indica otra cosa. Cada base de datos puede tener una y sólo una versión en cualquier momento.

    +
    • +
+
+
almacén de objetos
+
+

El mecanismo a través del cual los datos son almacenados en la base de datos. El almacén de objetos mantiene registros de manera persistente, que son pares de llave-valor. Los registros dentro de un almacén de objetos son ordenados de acuerdo con las llaves en orden ascendente.

+ +

Todo almacén de objetos debe tener un nombre que es único a lo largo de su base de datos. Opcionalmente puede tener un generador de llaves y una ruta de llaves. Si el almacén tiene una ruta de llaves, éste utiliza llaves en línea; si no, utiliza llaves fuera de línea.

+ +

Para documentación de referencia sobre los almacenes de objetos, vew IDBObjectStore o IDBObjectStoreSync.

+
+
versión
+
Cuando una base de datos es creada por primera vez, su versión es 1. Cada base de datos tiene una versión en cualquier momento y no puede tener varias versiones al mismo tiempo. La única manera de cambiar la versión es abrir la base de datos con una versión mayor a la actual. Esto arranca una transacción versionchange y dispara el evento upgradeneeded. El único momento cuando se puede actualizar el esquema de la base de datos es dentro del manejador de este evento.
+
Nota: Esta definición describe la especificación más actual, que solo está implementada por las versiones más nuevas de los navegadores. Los navegadores más antiguos implementaron el método IDBDatabase.setVersion(), que ya ha sido marcado obsoleto y removido.
+
conexión a la base de datos
+
Una operación creada al abrir una base de datos. Una base de datos puede tener múltiples conexiónes al mismo tiempo.
+
transacción
+
+

Un conjunto atómico y durable de operaciónes de acceso y modificación de datos sobre una base de datos particular. Esta es la manera cómo se interactúa con los datos de una base de datos. De hecho, cualquier lectura o modificación de datos en la base de datos debe ocurrir dentro de una transacción.

+ +

Una conexión a la base de datos puede tener varias transacciones activas, siempre que las operaciones de escrituras no tengan ámbitos que se solapen. El ámbito de las transacciones, que es definido al momento en que éstas son creadas, determina con qué almacenes de datos puede interactuar ésta y permanece constante a lo largo de su existencia. Así, por ejemplo, si una conexión tiene una transacción escribiendo con un ámbito que abarca solo el almacén flyingMonkey, se puede iniciar una segunda que tenga como ámbito los almacenes unicornCentaur y unicornPegasus. En el caso de las transacciones de lectura, se pueden tener varias aún cuando se solapen.

+ +

Se espera que las transacciones tengan una existencia corta, de manera que el navegador puede cancelar una transacción que tome demasiado tiempo para liberar recursos que la misma tenga bloqueados. Usted puede abortar la transacción, lo que deshace los cambios hechos a la base de datos durante la misma. Ni siquiera es necesario esperar a que la transacción inicie para abortarla.

+ +

Los tres modos de transacción son: readwrite, readonly, y versionchange. La única manera de crear y borrar almacenes es usar una transacción versionchange. Para aprender más sobre los tipos de transacción, vea al artículo de referencia de IndexedDB.

+ +

Debido a que todo sucede dentro de una transacción, este es un concepto muy importante. Para aprender más sobre las transacciones, especialmente sobre como se relacionan con el versionado, vea IDBTransaction, que también cuenta con documentación de referencia. Para la documentación sobre la API asíncrona, vea IDBTransactionSync.

+
+
solicitud
+
La operación por medio de la cual se lee o se escribe en una base de datos. Toda solicitud representa una y solo una operación de lectura o escritura.
+
índice
+
+

Un almacén especializado para buscar registros en otro almacén, llamado almacén de objetos referenciado. El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado. Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado. Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.

+ +

Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la llave.

+ +

Para aprender más sobre el uso de los índices, vea Usando IndexedDB. Para documentación de referencia, vea IDBKeyRange.

+
+
+ +

Llave y valor

+ +
+
llave
+
+

Es uno de los atributos del objeto a partir del cual los demás objetos son organizados y obtenidos desde el almacén de objetos. El almacén puede derivar una llave desde uno de tres orígenes: un generador de llaves, una ruta de llave, y un valor indicado de forma explícita. La llave debe ser de un tipo de datos que tenga un número creciente en relación con los objetos almacenados previamente. Cada registro en un almacén de datos debe tener una llave única en el almacén, de manera que no se pueden tener varios objetos con la misma llave en un almacén de objetos dado.

+ + +

Una llave puede ser de uno de los siguientes tipos: String, Date, float, y Array. Para los arreglos, la llave puede tener un rango desde un valor vacío hasta infinito, y puede incluirse un arreglo dentro de otro. No se requiere usar solo cadenas o enteros para las llaves {{ fx_minversion_inline("11") }}.

+ +

Como alternativa, se pueden realizar búsquedas de objetos usando un índice.

+
+
generador de llaves
+
Es un mecanismo para producir nuevas llaves en una secuencia ordenada. Si un almacén de objetos no tiene un generador de llaves, entonces la aplicación debe proveer llaves para los registros que se almacenen. Los generadores no son compartidos entre almacenes. Esto es un detalle de implementación de los navegadores, porque en desarrollo web, realmente no se crea o se accede a un generador de llaves.
+
llaves en línea
+
Es una llave que se almacena como parte del valor almacenado. La manera como se determina cuál es la llave es utilizando una  ruta de llave. Una llave en línea puede obtenerse con un generador. Después de que la llave ha sido generada, esta puede almacenarse en el valor usando la ruta del atributo o puede ser usada directamente como llave.
+
llave fuera de línea
+
Una llave que se almacena separada del valor.
+
ruta de llave
+
Define de dónde se debe extraer la llave desde un valor en el almacén o en un índice. Una ruta de llave válida puede incluir alguno de los siguientes: una cadena vacía, un identificador de JavaScript, o múltiples identificadores de JavaScript separados con puntos. No puede incluir espacios.
+
valor
+
+

Cada registro tiene un valor, el cual puede ser cualquier cosa que pueda ser expresada en JavaScript, incluyendo: booleanos, números, cadenas, fechas, objetos, arreglos, expresiones regulares, undefined, y null.

+ +

Cuando un objeto o un arreglo es almacenado, las propiedades y valores en ese objeto o arreglo pueden ser cualquier cosa que sea un valor válido.

+ +

Se pueden almacenar Blobs y archivos. cf. especificación {{ fx_minversion_inline("11") }}.

+
+
+ +

Rango y ámbito

+ +
+
ámbito
+
El conjunto de almacenes de objetos e índices en los que una transacción aplica. Los ámbitos de varias transacciones de solo lectura pueden solaparse y ejecutarse al mismo tiempo. En cambio, los ámbitos de transacciones de escritura no pueden solaparse. Aún así se pueden crear varias transacciones con el mismo ámbito al mismo tiempo, pero éstas serán manejadas por una cola y ejecutadas una detrás de otra.
+
cursor
+
Un mecanismo para iterar a través de múltiples registros con un rango de llaves. El cursor tiene un orígen que indica que índice o almacén de datos está iterando. El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro. Para obtener documentación de referencia sobre cursores, vea IDBCursor o IDBCursorSync.
+
rango de llaves
+
+

Un intervalo continuo sobre algún tipo de datos utilizado para las llaves. Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves. Los rangos pueden limitarse o filtrarse con umbrales inferiores y superiores. Por ejemplo, se puede iterar sobre todos los valores de una llave desde x hasta y.

+ +

Para documentación de referencia sobre los rangos de llaves, vea IDBKeyRange.

+
+
+ +

Limitaciones

+ +

IndexedDB está diseñado para cubrir la mayoría de los casos en los que se necesita almacenamiento del lado del cliente. Sin embargo, no están contemplados en su diseño unos pocos casos como los siguientes:

+ + + +

Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:

+ + + +

Las circunstancias exactas y capacidades de los navegadores cambian con el tiempo, pero la filosofía de los navegadores es, en general, hacer lo posible por conservar los datos.

+ +
+

Advertencia: Al momento, debido a errores o a propósito, es imposible abrir una base de datos IndexedDB desde un Web App. Esto requiere mayor investigación para documentarlo.

+
+ +

Próximo paso

+ +

Ok, ahora con estos conceptos generales bajo nuestros cinturones, podemos seguir a cosas más concretas. Para un tutorial sobre como utilizar la API, vea Usando IndexedDB.

+ +

Vea también

+ +

Especificación

+ + + +

Referencia

+ + + +

Tutoriales

+ + + +

Artículo relacionado

+ + diff --git a/files/es/web/api/indexeddb_api/index.html b/files/es/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..6ac53d75fe --- /dev/null +++ b/files/es/web/api/indexeddb_api/index.html @@ -0,0 +1,144 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +translation_of: Web/API/IndexedDB_API +--- +

{{ SeeCompatTable() }}

+ +

IndexedDB es una API de bajo nivel que ofrece almacenamiento en el cliente de cantidades significativas de datos estructurados, incluyendo archivos y blobs. Para búsquedas de alto rendimiento en esos datos usa índices. Mientras DOM Storage es útil para el almacenamiento de pequeñas cantidades de datos, no es útil para almacenar grandes cantidades de datos estructurados. IndexedDB proporciona una solución.

+ +

Esta página es básicamente el punto de entrada para la descripción técnica de los objetos de la API. Si necesita algo elemental, debería consultar ;Conceptos básicos acerca de IndexedDB. Para más detalles, vea Usando IndexedDB.

+ +

IndexedDB provee APIs separados para un acceso síncrono o asíncrono. El API síncrono está destinado a ser usado únicamente dentro de Web Workers, pero no será implementado aún por cualquier navegador. El API asíncrono trabaja con o sin Web Workers.

+ +

API Asíncrono

+ +

Los métodos del API Asíncrono, retornan sin bloquear el hilo de llamada. Para obtener un acceso asíncrono a la base de datos, use open() en el atributo indexedDB de un objeto window. Este método retorna un objeto IDBRequest (IDBOpenDBRequest); operaciones asíncronas se comunicarán con la aplicación que llama, disparando eventos en los objetos IDBRequest.

+ +
+

Nota: El objeto indexedDB se prefija en las versiones antiguas de los navegadores (propiedad mozIndexedDB para Gecko < 16, webkitIndexedDB en Chrome, y msIndexedDB en IE 10).

+
+ + + +

Una versión anterior de la especificación también define estas -ahora removidas- interfaces. Éstas son documentadas todavía, en caso de que necesite actualizar código escrito previamente:

+ + + +

Hay también una versión sincrónica de la API. La API síncrona no ha sido implementada en cualquier navegador. Está destinada a ser usada con WebWorkers.

+ +

Límites de almacenamiento

+ +

No existe un límite de tamaño para un elemento simple de la base de datos. Sin embargo, puede haber un límite en el tamaño de cada base de datos IndexedDB. Este límite (y la forma en que la interfaz de usuario la hace valer) puede variar de una navegador a otro:

+ + + +

Ejemplo

+ +

Un claro ejemplo para lo que IndexedDB puede ser utilizado en la web, es el ejemplo de Marco Castelluccio, ganador del DevDerby IndexedDB Mozilla. La demostración ganadora fue eLibri, una biblioteca y una aplicación de lectura de libros electrónicos.

+ +

Compatibilidad de los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
API asíncrono +

24.0
+ 11.0 {{ property_prefix("webkit") }}

+ 		+

{{ CompatGeckoDesktop("16.0") }}
+ {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}

+ 		10 {{ property_prefix("ms") }}{{ CompatNo() }}{{ CompatNo() }}
API síncrono
+ (usado por WebWorkers)		{{ CompatNo() }}{{ CompatNo() }}
+ Vea {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
API síncrono{{ CompatNo() }}{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Para otra matriz de compatibilidad, vea también: Cuándo puedo usar IndexedDB

+ +

También existe la posibilidad de usar IndexedDB en navegadores que soportan WebSQL por el uso de IndexedDB Polyfill.

+ +

Ver también

+ + diff --git a/files/es/web/api/indexeddb_api/usando_indexeddb/index.html b/files/es/web/api/indexeddb_api/usando_indexeddb/index.html new file mode 100644 index 0000000000..ea9d2d879c --- /dev/null +++ b/files/es/web/api/indexeddb_api/usando_indexeddb/index.html @@ -0,0 +1,1308 @@ +--- +title: Usando IndexedDB +slug: Web/API/IndexedDB_API/Usando_IndexedDB +tags: + - API + - Almacenamiento + - Avanzado + - Base de datos + - Guía + - IndexedDB + - Tutorial + - jsstore +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +
+

IndexedDB es una manera de almacenar datos dentro del navegador del usuario. Debido a que permite la creación de aplicaciones con habilidades de consulta enriquecidas, con independencia de la disponibilidad de la red, sus aplicaciones pueden trabajar tanto en línea como fuera de línea.

+
+ +

Acerca de este documento

+ +

Este tutorial es una guía sobre el uso de la API asíncrona de IndexedDB. Si no está familiarizado con IndexedDB, por favor consulte primero Conceptos Básicos Acerca de IndexedDB.

+ +

Para la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus subpaginas, que documentan los tipos de objetos usados por IndexedDB, así como los métodos síncronos y asíncronos. 

+ +

Patrones Básicos

+ +

El patrón básico que indexedDB propone es:

+ +
    +
  1. Abrir una base de datos.
    2. +
  2. Crear un objeto de almacenamiento en la base de datos.
    3. +
  3. Iniciar una transacción y hacer una petición para hacer alguna operación de la base de datos, tal como añadir o recuperar datos.
    4. +
  4. +
    Espere a que se complete la operación por la escucha de la clase correcta de eventos DOM .
    +
    5. +
  5. +
    Hacer algo con el resultado (El cual puede ser encontrado en el objeto de la petición).
    +
    6. +
+ +

Con esos grandes rasgos en mente, seremos más concretos.

+ +

Creando y estructurando el almacenamiento

+ +

Como las especificaciones están todavía elaborandose, las implementaciones actuales de indexedDB dependen de los navegadores. Hasta que la especificación se haya consolidado, los proveedores de navegadores pueden tener diferentes implementaciones de los estandares de indexedDB. Una vez se alcance el consenso en el estandar, los proveedores implementarán la API sin prefijos. En algunas implementaciones ya fueron removidos los prefijos: Internet Explorer 10, Firefox 16, Chrome 24. Cuando utilizan un prefijo, los navegadores basados en gecko usan el prefijo moz , mientras que los navegadores basados en WebKit usan el prefijo webkit.

+ +

Usando una versión experimental de IndexedDB

+ +

En caso que usted quiera probar su código en navegadores que todavía usen un prefijo, puede usar el siguiente codigo:  

+ +
// En la siguiente línea, puede incluir prefijos de implementación que quiera probar.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// No use "var indexedDB = ..." Si no está en una función.
+// Por otra parte, puedes necesitar referencias a algun objeto window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla nunca ha prefijado estos objetos, por lo tanto no necesitamos window.mozIDB*)
+ +

Hay que tener cuidado con las implementaciones que usan un prefijo ya que puede ser inestables, incompletas, o usen una versión antigua de la especificación. En producción se recomienda usar el código sin prefijos. Es preferible no tener soporte para un navegador a decir que lo tiene y fallar en ello :

+ +
if (!window.indexedDB) {
+    window.alert("Su navegador no soporta una versión estable de indexedDB. Tal y como las características no serán validas");
+}
+
+ +

Abriendo una base de datos

+ +

Iniciamos todo el proceso así:

+ +
// dejamos abierta nuestra base de datos
+var request = window.indexedDB.open("MyTestDatabase", 3);
+
+ +

¿Lo has visto? Abrir una base de datos es igual que cualquier otra operación — solo tienes que "solicitarla" (request).

+ +

La solicitud de apertura no abre la base de datos o inicia la transacción de inmediato. La llamada a la función open() retornan unos objetos IDBOpenDBRequest, cuyo resultado, correcto o erróneo, se maneja en un evento.  Alguna otra función asincrónica en indexedDB hace lo mismo - Devolver un objeto IDBRequest que disparará un evento con el resultado o el error. El resultado para la función de abrir es una instancia de un IDBDatabase.

+ +

El segundo parámetro para el método open es la versión de la base de datos. La versión de la base de datos determina el esquema - El almacen de objectos en la base de datos y su estructura. Si la base de datos no existe, es creada y se dispara un evento onupgradeneeded de inmediato, permitiéndote proveer una actualización de la estructura e índices en la función que capture dicho evento. Se verá más adelante en  Actualizando la versión de la base de datos. 

+ +
+

Importante: El número de versión es un unsigned long. Por lo tanto significa que puede ser un entero muy grande. También significa que si usas un flotante será convertido en un entero más cercano y la transacción puede no ser iniciada, el evento upgradeneeded no se desencadenará. Por ejemplo no use 2.4 como un número de versión ya que será igual que la 2:

+ +
var request = indexedDB.open("MyTestDatabase", 2.4); // Esto no se hace, la versión será redondeada a 2
+
+ +

Generando manipuladores

+ +

La primera cosa que usted querrá hacer con la totalidad de las peticiones que usted genera es agregar controladores de éxito y de error:

+ +
request.onerror = function(event) {
+  // Hacer algo con request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Hacer algo con request.result!
+};
+ +

¿Cuál de las dos funciones, onSuccess () o onerror (), se vuelve a llamar? Si todo tiene éxito, un evento de éxito (es decir, un evento DOM cuya propiedad tipo se establece en el "éxito") se dispara con la solicitud como su objetivo. Una vez que se dispara, la función onSuccess () a petición se activa con el evento de éxito como argumento. De lo contrario, si había algún problema, un evento de error (es decir, un evento DOM cuyo tipo de propiedad se establece en "error") se dispara a petición. Esto desencadena la función onerror () con el evento de error como argumento.

+ +

La API IndexedDB está diseñada para minimizar la necesidad de control de errores, por lo que no es probable que veamos muchos eventos de error (al menos, no una vez que estás acostumbrado a la API). En el caso de la apertura de una base de datos, sin embargo, hay algunas condiciones comunes que generan eventos de error. El problema más común se produce cuando el usuario ha decidido no dar, a su aplicación web, el permiso para crear una base de datos. Uno de los principales objetivos de diseño de IndexedDB es permitir que grandes cantidades de datos se almacenen para su uso sin conexión a internet. (Para obtener más información sobre la cantidad de almacenamiento que puede tener para cada navegador, consulte Límites de almacenamiento.)  

+ +

Obviamente, los navegadores no permitirán que alguna red de publicidad o sitio web malicioso pueda contaminar su ordenador, por ello los navegadores utilizan un diálogo para indicar al usuario la primera vez que cualquier aplicación web determinada intente abrir una IndexedDB para el almacenamiento. El usuario puede optar por permitir o denegar el acceso. Además, el almacenamiento IndexedDB en los modos de privacidad navegadores sólo dura en memoria hasta que la sesión de incógnito haya sido cerrada (modo de navegación privada para el modo de Firefox e Incognito para Chrome, pero en Firefox no está implementado a partir de noviembre 2015 por lo que no puede utilizar IndexedDB en Firefox navegación privada en absoluto).

+ +

Ahora, asumiendo que el usuario acepta su solicitud para crear una base de datos, y que ha recibido un evento de éxito para activar la devolución de llamada de éxito; ¿Que sigue? La solicitud aquí se generó con una llamada a indexedDB.open (), por lo request.result es una instancia de IDBDatabase, y que sin duda quieren ahorrar para más adelante. Su código podría ser algo como esto:

+ +
var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Why didn't you allow my web app to use IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+
+ +

Manejando errores

+ +

Como se mencionó anteriormente, los eventos de error de burbujas. Eventos de error se dirigen a la solicitud que generó el error, entonces el evento se propaga a la operación, y finalmente con el objeto de base de datos. Si desea evitar la adición de controladores de errores a cada solicitud, en su lugar puede añadir un solo controlador de errores en el objeto de base de datos, así:

+ +
db.onerror = function(event) {
+  // Generic error handler for all errors targeted at this database's
+  // requests!
+  alert("Database error: " + event.target.errorCode);
+};
+
+ +

Uno de los errores más comunes posibles al abrir una base de datos es VER_ERR. Indica que la versión de la base de datos almacenada en el disco es mayor que la versión que está intentando abrir. Este es un caso de error que siempre debe ser manejado por el gestor de errores.

+ +

Creación o actualización de la versión de la base de datos

+ +

Cuando se crea una nueva base de datos o se aumenta el número de versión de una base de datos existente (mediante la especificación de un número de versión más alto de lo que hizo antes, en {{anch ("Cómo abrir una base de datos")}}), el evento onupgradeneeded se activará y un objeto IDBVersionChangeEvent será pasado a cualquier controlador de eventos onversionchange establecido en request.result (es decir, db en el ejemplo). En el controlador para el evento upgradeneeded, se debe crear los almacenes de objetos necesarios para esta versión de la base de datos:

+ +
// Este evento solamente está implementado en navegadores recientes
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Crea un almacén de objetos (objectStore) para esta base de datos
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};
+ +

En este caso, la base de datos ya tendrá los almacenes de objetos de la versión anterior de la base de datos, por lo que no tiene que crear estos almacenes de objetos de nuevo. Sólo es necesario crear nuevos almacenes de objetos, o eliminar las tiendas de objetos de la versión anterior que ya no son necesarios. Si necesita cambiar un almacén de objetos existentes (por ejemplo, para cambiar la ruta de acceso clave keyPath), entonces se debe eliminar el antiguo almacén de objetos y crear de nuevo con las nuevas opciones. (Tenga en cuenta que esto borrará la información en el almacén de objetos Si usted necesita guardar esa información, usted debe leerlo y guardarlo en otro lugar antes de actualizar la base de datos.)

+ +

Tratar de crear un almacén de objetos con un nombre que ya existe (o tratando de eliminar un almacén de objetos con un nombre que no existe) lanzará un error.

+ +

Si el evento onupgradeneeded retorna éxito, entonces se activará el manejador onsuccess de la solicitud de base de datos abierta.

+ +

Blink / Webkit soportan la versión actual de la especificación, tal como fue liberado en Chrome 23+ y Opera 17+ ; IE10+ también lo soporta. Implementaciones mas viejas o distintas no implementan la versión actual de la especificación, y por lo tanto no son compatibles todavía con el indexedDB.open (nombre, versión).onupgradeneeded . Para obtener más información sobre cómo actualizar la versión de la base de datos en Webkit/Blink mas viejos, consulte el artículo de referencia IDBDatabase.

+ +

Estructuración de la base de datos

+ +

Ahora para estructurar la base de datos. IndexedDB usa almacenes de datos (object stores) en lugar de tablas, y una base de datos puede contener cualquier número de almacenes. Cuando un valor es almacenado, se le asocia con una clave. Existen diversas maneras en que una clave pude ser indicada dependiendo de si el almacén usa una ruta de clave o generador.

+ +

La siguiente table muetra las distintas formas en que las claves pueden ser indicadas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ruta de clave(keyPath)Generador de clave (autoIncrement)Descripción
NoNoEste almacén puede contener cualquier tipo de valor, incluso valores primitivos como números y cadenas. Se debe indicar un argumento de clave distinto cada vez que se agregue un nuevo valor.
SiNoEste almacén de objetos solo puede contener objetos de JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de clave.
NoSiEste objeto puede contener cualquier tipo de valor. La clave es generada automáticamente, o se puede indicar un argumento de clave distinto si se quiere usar una clave específica.
SiSi +

Este almacén de objetos solo puede contener objetos de JavaScript. Usualmente una clave es generada y dicho valor es almacenado en el objeto en una propiedad con el mismo nombre que la ruta de clave. Sin embargo, si dicha propiedad ya existe en el objeto, el valor de esa propuiedad es usado como clave en lugar de generar una nueva.

+
+ +

También se puede crear índices en cualquer almacén de objetos, siempre y cuando el almacén contenga objets, y no primitivos. Un índice permite buscar valores contenidos en el almacén usando el valor de una propiedad del objeto almacenado, en lugar de la clave del mismo.

+ +

Adicionalmente, los índices tienen la habilidad para hacer cumplir restricciones simples en los datos almacendos. Al indicar la bandera unique al crear el índice, el índice asegurará que no se puedan almacenar dos objetos que tengan el mismo valor para la clave del índice. Así, por ejemplo si se tiene un almacén de objetos que contiene un set de personas, y se desea asegurar que no existan dos personas con el mismo email, se puede usar un índice con la bandera unique activada para forzar esto.

+ +

Esto puede sonar confuso, pero un ejemplo simple debe ilustrar el concepto. Primero, definiremos alguna información de clientes para usar en nuestro ejemplo:

+ +
// Así se ve nuestra información de clientes.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+
+ +

Ahora, creemos una IndexedDB para almacenar los datos:

+ +
const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Manejar errores.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Se crea un almacén para contener la información de nuestros cliente
+  // Se usará "ssn" como clave ya que es garantizado que es única
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Se crea un índice para buscar clientes por nombre. Se podrían tener duplicados
+  // por lo que no se puede usar un índice único.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Se crea un índice para buscar clientespor email. Se quiere asegurar que
+  // no puedan haberdos clientes con el mismo email, asi que se usa un índice único.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Se usa transaction.oncomplete para asegurarse que la creación del almacén
+  // haya finalizado antes de añadir los datos en el.
+  objectStore.transaction.oncomplete = function(event) {
+    // Guarda los datos en el almacén recién creado.
+    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
+    for (var i in customerData) {
+      customerObjectStore.add(customerData[i]);
+    }
+  }
+};
+
+ +

Como se indicó previamente, onupgradeneeded es el único lugar donde se puede alterar la estructura de la base de datos. En el, se puede crear y borrar almacenes de objetos y construir y remover índices.

+ +
Los almacenes de datos son creados con una llamada a  createObjectStore(). El método toma como parámetros el nombre del almacén y un objeto.  A pesar de que el segundo parámetro es opcional, es muy importante, porque permite definir propiedades opcionales importantes y refinar el tipo de almacén que se desea crear. En este caso, se pregunta por un almacén llamado "customers" y se define la clave, que es la propiedad que indica que un objeto en el almacén es único. La propiedad en este ejemplo es "ssn" (Social Security Number) ya que los números de seguridad social está garantizado que sea único. "ssn" debe estar presente en cada objeto que se guarda al almacén.
+ +

También se solicitó crear un índice llamado "name" que se fija en la propiedad name de los objetos almacenados. Así como con createObjectStore(), createIndex() toma un objeto opcional options que refina el tipo de índice que se desea crear. Agregar objetos que no tengan una propiedad name funcionará, pero los objetos no aparecerán en el índice "name"

+ +
Ahora se pueden obtener los clientes almacenados usando su ssn directamente del almacen, o usando su nombre a través del índice. Para aprender como hacer esto, vea la sección El uso de un índice
+ +

El uso de un generador de claves

+ +

Indicar la bandera autoIncrement  cuando se crea el almacén habilitará el generador de claves para dicho almacén. Por defecto esta bandera no está marcada.

+ +

Con el generador de claves, la clave será generada automáticamente a medida que se agreguen valores al almacén. El número actual de un generador de claves siempre se establece en 1 cuando se creal el almacén por primera vez. Básicamente la nueva clave autogenerada es incrementada en 1 basada en la llave anterior. El numero actual para un generador de claves nunca disminuye, salvo como resultado de operaciones de base de datos  que sean revertidos, por ejemplo, cuando la transacción de base de datos es abortada. Por lo tanto borrar un registro o incluso borrar todos los registros de un almacén nunca afecta al generador de claves

+ +

Se puede crear otro almacén de objetos con generador de claves como se muestra abajo:

+ +
// Abrir la indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+
+    var db = event.target.result;
+
+    // Create another object store called "names" with the autoIncrement flag set as true.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Because the "names" object store has the key generator, the key for the name value is generated automatically.
+    // The added records would be like:
+    // key : 1 => value : "Bill"
+    // key : 2 => value : "Donna"
+    for (var i in customerData) {
+        objStore.add(customerData[i].name);
+    }
+}
+ +

Para más detalles acerca del generador de claves, por favor ver "W3C Key Generators".

+ +

Añadir, recuperación y eliminación de datos

+ +

Antes que haga algo con su nueva base de datos , necesita comenzar una transacción. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Once you are inside the transaction, you can access the object stores that hold your data and make your requests. Next, you need to decide if you're going to make changes to the database or if you just need to read from it. Transactions have three available modes: readonly, readwrite, and versionchange.

+ +

To change the "schema" or structure of the database—which involves creating or deleting object stores or indexes—the transaction must be in versionchange mode. This transaction is opened by calling the {{domxref("IDBFactory.open")}} method with a version specified. (In WebKit browsers, which have not implemented the latest specifcation, the {{domxref("IDBFactory.open")}} method takes only one parameter, the name of the database; then you must call {{domxref("IDBVersionChangeRequest.setVersion")}} to establish the versionchange transaction.)

+ +

To read the records of an existing object store, the transaction can either be in readonly or readwrite mode. To make changes to an existing object store, the transaction must be in readwrite mode. You open such transactions with {{domxref("IDBDatabase.transaction")}}. The method accepts two parameters: the storeNames (the scope, defined as an array of object stores that you want to access) and the mode (readonly or readwrite) for the transaction. The method returns a transaction object containing the {{domxref("IDBIndex.objectStore")}} method, which you can use to access your object store. By default, where no mode is specified, transactions open in readonly mode.

+ +

You can speed up data access by using the right scope and mode in the transaction. Here are a couple of tips:

+ + + +

Agregar datos a la base de datos

+ +

If you've just created a database, then you probably want to write to it. Here's what that looks like:

+ +
var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
+ +

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

+ +

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

+ +

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by first calling preventDefault() on the error event then doing something else, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine-grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aid your sanity.

+ +

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

+ +
// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}
+ +

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, you can use the put() function, as shown below in the {{ anch("Updating an entry in the database") }} section.

+ +

Extracción de datos de la base de datos

+ +

Removing data is very similar:

+ +
var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};
+ +

Obtener datos de la base de datos

+ +

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

+ +
var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};
+ +

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

+ +
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};
+ +

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property.

+ +
+

Note: You can speed up data access by limiting the scope and mode in the transaction. Here are a couple of tips:

+ + +
+ +

Actualización de una entrada en la base de datos

+ +

Now we've retrieved some data, updating it and inserting it back into the IndexedDB is pretty simple. Let's update the previous example somewhat:

+ +
var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Get the old value that we want to update
+  var data = request.result;
+
+  // update the value(s) in the object that you want to change
+  data.age = 42;
+
+  // Put this updated object back into the database.
+  var requestUpdate = objectStore.put(data);
+   requestUpdate.onerror = function(event) {
+     // Do something with the error
+   };
+   requestUpdate.onsuccess = function(event) {
+     // Success - the data is updated!
+   };
+};
+ +

So here we're creating an objectStore and requesting a customer record out of it, identified by its ssn value (444-44-4444). We then put the result of that request in a variable (data), update the age property of this object, then create a second request (requestUpdate) to put the customer record back into the objectStore, overwriting the previous value.

+ +
+

Note that in this case we've had to specify a readwrite transaction because we want to write to the database, not just read out of it.

+
+ +

El uso de un cursor

+ +

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

+ +
var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};
+ +

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

+ +

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

+ +
var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};
+ +
+

Note: Mozilla has also implemented getAll() to handle this case (and getAllKeys(), which is currently hidden behind the dom.indexedDB.experimental preference in about:config). these aren't part of the IndexedDB standard, so may disappear in the future. We've included them because we think they're useful. The following code does precisely the same thing as above:

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};
+ +

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll() for example, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

+
+ +

El uso de un índice

+ +

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, and outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

+ +
var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};
+ +

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

+ +

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

+ +
// Using a normal cursor to grab whole customer record objects
+index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+// Using a key cursor to grab customer record object keys
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Especificación de la gama y la dirección de los cursores

+ +

If you would like to limit the range of values you see in a cursor, you can use an IDBKeyRange object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one that has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value(s)) or "open" (i.e., the key range does not include the given value(s)). Here's how it works:

+ +
// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+// To use one of the key ranges, pass it in as the first argument of openCursor()/openKeyCursor()
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};
+ +

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function as the second argument:

+ +
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

If you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument:

+ +
objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

+ +
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Please see "IDBCursor Constants" for the valid direction arguments.

+ +

Cambios Versión mientras que una aplicación web está abierto en otra pestaña

+ +

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an onblocked event is fired until tey are closed or reloaded). Here's how it works:

+ +
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user closes the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+
+ +

Seguridad

+ +

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

+ +

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security and privacy measure and can be considered analogous the blocking of third-party cookies. For more details, see {{ bug(595307) }}.

+ +

Warning About Browser Shutdown

+ +

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted — they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

+ +

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction. 

+ +

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

+ +

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.

+ +

Full IndexedDB example

+ +

HTML Content

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+
+ +

 

+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid uselessly reloading it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Resetting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin as the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Next step

+ +

If you want to start tinkering with the API, jump in to the reference documentation and check out the different methods.

+ +

See also

+ +

Reference

+ + + +

Tutorials

+ + + +

Related articles

+ + + +

Firefox

+ + diff --git a/files/es/web/api/intersection_observer_api/index.html b/files/es/web/api/intersection_observer_api/index.html new file mode 100644 index 0000000000..d96bb02280 --- /dev/null +++ b/files/es/web/api/intersection_observer_api/index.html @@ -0,0 +1,638 @@ +--- +title: Intersection Observer API +slug: Web/API/Intersection_Observer_API +translation_of: Web/API/Intersection_Observer_API +--- +

{{DefaultAPISidebar("Intersection Observer API")}}

+ +
+ +

La API Observador de Intersección provee una vía asíncrona para observar cambios en la intersección de un elemento con un elemento ancestro o con el {{Glossary("viewport")}} del documento de nivel superior.

+ +

Históricamente, detectar la visibilidad de un elemento, o la visibilidad relativa de dos elementos, uno respecto del otro, ha sido una tarea difícil para la cual las soluciones no han sido muy fiables y propensas a causar que el navegador y los sitios a los que el usuario accede lleguen a ser lentos. A medida que la web ha madurado, la necesidad para este tipo de información ha ido en aumento. La información sobre intersección es necesaria por muchas razones, tales como:

+ + + +

Implementar la detección de intersecciones en el pasado implicaba manejadores de eventos y bucles llamando a métodos como {{domxref("Element.getBoundingClientRect()")}} para reunir la información necesaria para cada elemento afectado. Dado que todo este código corre sobre el hilo principal, incluso uno de estos puede causar problemas de rendimiento. Cuando un sitio es cargado con estos tests, las cosas pueden ponerse muy feas.

+ +

Considere una página web que usa scroll infinito. Usa una librería de terceros para manejar los anuncios situados periódicamente en la página, que tiene gráficos animados aquí y allá, y usa una librería personalizada que muestra cajas de notificación y similares. Cada uno de estos tiene sus propias rutinas de detección de intersecciones, todas corriendo en el hilo principal. El autor del sitio web puede no darse cuenta de que esto está pasando, ya que están usando dos librerías de las que quizás conocen muy poco acerca de su funcionamiento interno. A medida que el usuario desplaza la página, estas rutinas de detección de intersecciones están disparando código constantemente durante el scroll, lo que resulta en una experiencia que deja al usuario frustrado con el navegador, el sitio web y su ordenador.

+ +

El API Intersection Observer deja al código registrar una función callback que se ejecuta si un elemento que se desea monitorizar entra o sale de otro elemento (o del {{Glossary("viewport")}}), o cuando la cantidad por la que ambos elementos se intersecan cambia en una cantidad requerida. De esta manera, los sitios no necesitan hacer nada sobre el hilo principal para mirar este tipo de intersección entre elementos, y el navegador está libre para optimizar la gestión de intersecciones como le parezca conveniente.

+ +

Una cosa que el API Intersection Observer no puede decirle es: el número exacto de pixels que se solapan o específicamente cuales son; sin embargo, cubre el caso de uso mucho más común de "Si se intersecan por algún lugar alrededor del N%, necesito hacer algo."

+ +

Intersection observer conceptos y uso

+ +

La API Intersection Observer le permite configurar una función callback que es llamada cuando alguna de las siguientes circunstancias ocurren:

+ + + +

Típicamente, usted querrá observar los cambios en las intersecciones con respecto al ancestro scrollable más cercano al elemento, o, si el elemento no desciende de un ancestro scrollable, al viewport.
+ Para observar la intersección relativa al elemento root, especifique null;

+ +

Tanto si está usted usando el viewport o algún otro elemento como root, el API funciona de la misma manera, ejecutando una función callback que usted le proporciona cuando la visibilidad del elemento target cambia al cruzar en la cantidad de intersección deseada con el elemento root.

+ +

El grado de intersección entre el elemento target y su elemento root es el intersection ratio. Esto es una representación del porcentaje del elemento target que es visible, indicado como un valor entre 0.0 y 1.0.

+ +

Creando un intersection observer

+ +

Cree el intersection observer llamando a su constructor y pasándole una función callback para que se ejecute cuando se cruce un umbral (threshold) en una u otra dirección:

+ +
let options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+let observer = new IntersectionObserver(callback, options);
+ +

Un umbral de 1.0 significa que cuando el 100% del elemento target está visible dentro del elemento especificado por la opción root, la función callback es invocada.

+ +

Opciones de Intersection observer

+ +

El objeto options pasado al constructor {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} le deja controlar las circunstancias bajo las cuales la función callback es invocada. Tiene los siguientes campos:

+ +
+
root
+
El elemento que es usado como viewport para comprobar la visibilidad de elemento target. Debe ser ancestro de target. Por defecto es el viewport del navegador si no se especifica o si es null.
+
rootMargin  
+
Margen alrededor del elemeto root. Puede tener valores similares a los de CSS {{cssxref("margin")}} property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). Los valores pueden ser porcentajes. Este conjunto de valores sirve para aumentar o encoger cada lado del cuadro delimitador del elemento root antes de calcular las intersecciones. Por defecto son todos cero.
+
threshold
+
Es un número o un array de números que indican a que porcentaje de visibilidad del elemento target, la función callback del observer debería ser ejecutada. Si usted quiere que se detecte cuando la visibilidad pasa la marca del 50%, debería usar un valor de 0.5. Si quiere ejecutar la función callback cada vez que la visibilidad pase otro 25%, usted debería especificar el array [0, 0.25, 0.5, 0.75, 1]. El valor por defecto es 0 (lo que significa que tan pronto como un píxel sea visible, la función callback será ejecutada). Un valor de 1.0 significa que el umbral no se considera pasado hasta que todos los pixels son visibles.
+
+ +

Determinando un elemento para ser observado

+ +

Una vez usted ha creado el observer, necesita darle un elemento target para observar:

+ +
var target = document.querySelector('#listItem');
+observer.observe(target);
+
+// el callback que indicamos al observador será ejecutado ahora por primera vez
+// espera hasta que le asignemos un target a nuestro observador (aún si el target no está actualmente visible)
+
+ +

Cuando el elemento target encuentra un threshold especificado por el IntersectionObserver, la función callback es invocada. La función callback recibe una lista de objetos {{domxref("IntersectionObserverEntry")}} y el observer:

+ +
var callback = function(entries, observer) {
+  entries.forEach(entry => {
+    // Cada entry describe un cambio en la intersección para
+    // un elemento observado
+    //   entry.boundingClientRect
+    //   entry.intersectionRatio
+    //   entry.intersectionRect
+    //   entry.isIntersecting
+    //   entry.rootBounds
+    //   entry.target
+    //   entry.time
+  });
+};
+
+ +

Asegúrese de que su función callback se ejecute sobre el hilo principal. Debería operar tan rápidamente como sea posible; si alguna cosa necesita  tiempo extra para ser realizada, use {{domxref("Window.requestIdleCallback()")}}.

+ +

También, note que si especifica la opción root, el elemento target debe ser un descendiente del elemento root.

+ +

Cómo se calcula la intersección

+ +

Todas las áreas consideradas por la API de Intersection Observer son rectángulos; los elementos que su forma es irregular se considera que están ocupando el rectángulo más pequeño que encierra todas las partes del elemento. De forma similar, si la porción visible de un elemento no es un rectángulo, entonces el rectángulo de intersección del elemento se interpreta como el rectángulo más pequeño que contiene todas las partes visibles del elemento.

+ +

Es útil entender un poco sobre cómo las diferentes propiedades proporcionadas por {{domxref("IntersectionObserverEntry")}} describe una intersección.

+ +

La intersección entre el elemento root y su margen

+ +

Antes de poder realizar un seguimiento de la intersección de un elemento en un contenedor, necesitamos saber qué cuál es contendor. Este contenedor se le conoce como intersection root, o root element. Este puede ser un elemento del documento, que es ascendiente del elemento observado, o null, que usará el viewport del documento como contenedor.

+ +

El rectángulo usado como los límites de la intersección del intersection root pueden ser ajustados configurando la opción root margin, rootMargin, cuando creamos el {{domxref("IntersectionObserver")}}. Los valores en rootMargin define los espacios añadidos a cada lado del cuadro delimitador que sirve de contenedor, creando los límites definitivos del contenedor, o intersection root (los cuáles están explicados en {{domxref("IntersectionObserverEntry.rootBounds")}} cuando la función callback es ejecutada).

+ +

Umbrales

+ +

En lugar de reportar cada mínimo cambio indicando cómo de visible es el elemento que observamos, la Intersection Observer API usa umbrales. Cuando creamos un observable, puedes proporcionar uno o más valores númericos representando, en porcentaje, cuán visible es el elemento observado. Entonces, la API reporta sólo los cambios de visibilidad que cruza este umbral.

+ +

Por ejemplo, si te gustaría ser informado cada vez que la visibilidad del elemento pasa, hacia delante o hacía atrás, una marca de un 25%, entonces puedes especificar el array [0, 0.25, 0.5, 0.75, 1] como una lista de umbrales a la hora de crear el observable. Puedes saber incluso en qué dirección la visibilidad ha cambiado (esto es, saber si el elemento ha pasado a ser más o menos visible) comprobando el valor de la propiedad {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} disponible en el {{domxref("IntersectionObserverEntry")}} que tienes disponible en la función callback cada vez que la visibilidad cambia. Si isIntersecting es true, el elemento se ha vuelto al menos tan visibile como el umbral que pasó. Si es false, el elemento entonces ha dejado de ser tan visible como el umbral que sobrepasó.

+ +

Para entender cómo funciona el concepto de umbral (threshold), pruebe a hacer scroll en el siguiente ejemplo. Cada caja coloreada muestra dentro de ella el porcentaje que tiene visible de cada una de las cuadro esquinas, de forma que podrá ver cómo cambian los porcentajes conforme va haciendo scroll. Cada caja tiene diferentes valores configurado de umbrales.

+ + + + + +

{{EmbedLiveSample("threshold-example", 500, 500)}}

+ +

Acotamiento y el rectángulo de intersección

+ +

El navegador computa el rectángulo de intersección final de la siguiente forma; la API hace todo esto por usted, pero puede ser útil entender estos pasos para comprender mejor cuando ocurrirán exactamente las intersecciones.

+ +
    +
  1. El rectangulo delimitador del elemento target (el rectangulo mas pequeño, que encierra por completo los componentes que conforman el elemento) es obtenido llamando {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} en el target. Este es el rectangulo de intersección mas grande que puede ser. Los pasos restantes removeran las porciones que no intersectan.
    2. +
  2. Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the {{cssxref("overflow")}} property. Setting overflow to anything but visible causes clipping to occur.
    3. +
  3. If one of the containing elements is the root of a nested browsing context (such as the document contained in an {{HTMLElement("iframe")}}, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an <iframe> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.
    4. +
  4. When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.
    5. +
  5. The resulting rectangle is then updated by intersecting it with the root intersection rectangle.
    6. +
  6. This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.
    7. +
+ +

Callbacks de cambio de intersección

+ +

Cuando la cantidad del elemento target que es visible dentro del elemento root cruza uno de los umbrales de visibilidad, el callback del objeto {{domxref("IntersectionObserver")}} es ejecutado. El callback recibe como input un array de todos los objetos {{domxref("IntersectionObserverEntry")}}, uno por cada umbral que haya sido cruzado, y una referencia al objeto IntersectionObserver mismo.

+ +

Cada entrada en la lista de  umbrales es un objeto {{domxref("IntersectionObserverEntry")}} que describe un umbral que ha sido cruzado; esto es, cada entrada describe qué porción de un elemento dado se está intersectando con el elemento root, sea que el elemento se considere en intersección o no, y la dirección en la cual ocurrió la transición.

+ +

The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%. For a threshold value of 0.0 (default) the callback is called approximately upon transition of the boolean value of {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}}. The snippet thus first checks that the transition is a positive one, then determines whether {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is above 75%, in which case it increments the counter.

+ +
intersectionCallback(entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      let elem = entry.target;
+
+      if (entry.intersectionRatio >= 0.75) {
+        intersectionCounter++;
+      }
+    }
+  });
+}
+
+ +

Interfaces

+ +
+
{{domxref("IntersectionObserver")}}
+
The primary interface for the Intersection Observer API. Provides methods for creating and managing an observer which can watch any number of target elements for the same intersection configuration. Each observer can asynchronously observe changes in the intersection between one or more target elements and a shared ancestor element or with their top-level {{domxref("Document")}}'s {{Glossary('viewport')}}. The ancestor or viewport is referred to as the root.
+
{{domxref("IntersectionObserverEntry")}}
+
Describes the intersection between the target element and its root container at a specific moment of transition. Objects of this type can only be obtained in two ways: as an input to your IntersectionObserver callback, or by calling {{domxref("IntersectionObserver.takeRecords()")}}.
+
+ +

Un ejemplo sencillo

+ +

Este ejemplo causa que el elemento que queremos observar cambia de color y transparencia conforme se va haciendo más o menos visible. En la página Timing element visibility with the Intersection Observer API, puedes encontrar un ejemplo más extenso que muestra cómo calcular cuanto tiempo que una serie de elementos, como anuncios, son visibles para el usuario y reaccionar a esa información guardando estadísticas.

+ +

HTML

+ +

El HTML para este ejemplo es muy simple, con un elemento primario que será la caja que querremos observar (con la creativa ID de "box") y algo de contenido para dentro de la caja.

+ +
<div id="box">
+  <div class="vertical">
+    Welcome to <strong>The Box!</strong>
+  </div>
+</div>
+ +

CSS

+ +

El CSS del ejemplo no es muy importante para el propósito de este ejemplo: pinta el elemento y establece que los atributos {{cssxref("background-color")}} y {{cssxref("border")}} puedan participar en las CSS transitions, los cuáles usaremos para afectar los cambios al elemento conforme este es más o menos visible.

+ +
#box {
+  background-color: rgba(40, 40, 190, 255);
+  border: 4px solid rgb(20, 20, 120);
+  transition: background-color 1s, border 1s;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.vertical {
+  color: white;
+  font: 32px "Arial";
+}
+
+.extra {
+  width: 350px;
+  height: 350px;
+  margin-top: 10px;
+  border: 4px solid rgb(20, 20, 120);
+  text-align: center;
+  padding: 20px;
+}
+ +

JavaScript

+ +

Finalmente, vamos a mirar el código JavaScript que usa la API Intersection Observer API para hacer que las cosas ocurran.

+ +

Preparación

+ +

Primero, necesitamos preparar algunas variables e instalar el observador.

+ +
var numSteps = 20.0;
+
+var boxElement;
+var prevRatio = 0.0;
+var increasingColor = "rgba(40, 40, 190, ratio)";
+var decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// Set things up.
+
+window.addEventListener("load", function(event) {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);
+ +

Las constantes y variables que establecimos aquí son:

+ +
+
numSteps
+
A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.
+
prevRatio
+
This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.
+
increasingColor
+
A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.
+
decreasingColor
+
Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.
+
+ +

We call {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} to start listening for the {{event("load")}} event; once the page has finished loading, we get a reference to the element with the ID "box" using {{domxref("Document.querySelector", "querySelector()")}}, then call the createObserver() method we'll create in a moment to handle building and installing the intersection observer.

+ +

Creating the intersection observer

+ +

The createObserver() method is called once page load is complete to handle actually creating the new {{domxref("IntersectionObserver")}} and starting the process of observing the target element.

+ +
function createObserver() {
+  var observer;
+
+  var options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}
+ +

This begins by setting up an options object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so root is null. We need no margin, so the margin offset, rootMargin, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.

+ +

The list of visibility ratio thresholds, threshold, is constructed by the function buildThresholdList(). The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.

+ +

Once options is ready, we create the new observer, calling the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor, specifying a function to be called when intersection crosses one of our thresholds, handleIntersect(), and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.

+ +

We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling observer.observe() for each of those elements, if we wanted to do so.

+ +

Building the array of threshold ratios

+ +

The buildThresholdList() function, which builds the list of thresholds, looks like this:

+ +
function buildThresholdList() {
+  var thresholds = [];
+
+  for (var i=1.0; i<=numSteps; i++) {
+    var ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}
+ +

This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value i/numSteps onto the thresholds array for each integer i between 1 and numSteps. It also pushes 0 to include that value. The result, given the default value of numSteps (20), is the following list of thresholds:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Ratio#Ratio
10.05110.55
20.1120.6
30.15130.65
40.2140.7
50.25150.75
60.3160.8
70.35170.85
80.4180.9
90.45190.95
100.5201.0
+ +

We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.

+ +

Handling intersection changes

+ +

When the browser detects that the target element (in our case, the one with the ID "box") has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, handleIntersect():

+ +
function handleIntersect(entries, observer) {
+  entries.forEach(function(entry) {
+    if (entry.intersectionRatio > prevRatio) {
+      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+    } else {
+      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+    }
+
+    prevRatio = entry.intersectionRatio;
+  });
+}
+ +

For each {{domxref("IntersectionObserverEntry")}} in the list entries, we look to see if the entry's {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is going up; if it is, we set the target's {{cssxref("background-color")}} to the string in increasingColor (remember, it's "rgba(40, 40, 190, ratio)"), replaces the word "ratio" with the entry's intersectionRatio. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.

+ +

Similarly, if the intersectionRatio is going up, we use the string decreasingColor and replace the word "ratio" in that with the intersectionRatio before setting the target element's background-color.

+ +

Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable prevRatio.

+ +

Resultado

+ +

Abajo se encuentra el contenido resultante. Desplace ésta página hacia arriba y abajo y note como la apariencia de la caja cambia mientras lo hace.

+ +

{{EmbedLiveSample('A_simple_example', 400, 400)}}

+ +

Hay un ejemplo aún más extensivo en Cronometrando la visibilidad de un elemento con la API Intersection Observer.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}}
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(51)}}15{{CompatGeckoDesktop(55)}}[1][2]{{CompatNo}}{{CompatOpera(38)}}{{WebKitBug(159475)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(51)}}{{CompatChrome(51)}}{{CompatGeckoMobile(55)}}[1][2]{{CompatNo}}{{CompatNo}}{{CompatOperaMobile(38)}}{{WebKitBug(159475)}}
+
+ +

[1] This feature has been implemented since Gecko 53.0 {{geckoRelease("53.0")}} behind the preference dom.IntersectionObserver.enabled, which was false by default. Enabled by default beginning in Firefox 55. See {{bug(1243846)}}.

+ +

[2] Firefox doesn't currently take the {{cssxref("clip-path")}} of ancestor elements into account when computing the visibility of an element within its root. See {{bug(1319140)}} for the status of this issue.

+ +

Ver también

+ + diff --git a/files/es/web/api/keyboardevent/getmodifierstate/index.html b/files/es/web/api/keyboardevent/getmodifierstate/index.html new file mode 100644 index 0000000000..b44ecc6da3 --- /dev/null +++ b/files/es/web/api/keyboardevent/getmodifierstate/index.html @@ -0,0 +1,253 @@ +--- +title: KeyboardEvent.getModifierState() +slug: Web/API/KeyboardEvent/getModifierState +tags: + - API + - DOM + - KeyboardEvent + - Referencia + - getModifierState + - metodo +translation_of: Web/API/KeyboardEvent/getModifierState +--- +

{{APIRef("DOM Events")}}

+ +

El método KeyboardEvent.getModifierState() retorna true respecto al estado actual de la tecla modificadora especificada si la misma está presionada o bloqueada, en caso contrario devuelve false.

+ +

Sintaxis

+ +
var active = event.getModifierState(keyArg);
+ +

Retorna

+ +

A {{jsxref("Boolean")}}

+ +

Parámetros

+ +
+
keyArg
+
El valor de la tecla modificadora. El valor debe ser uno de los valores {{domxref("KeyboardEvent.key")}} que representan las teclas modificadoras, o el string "Accel" {{deprecated_inline}}, el cual es case-sensitive.
+
+ +

Teclas modificadoras en Internet Explorer

+ +

IE9 usa "Scroll" para "ScrollLock" y "Win" para "OS".

+ +

Teclas modificadoras en Gecko

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
When getModifierState() returns true on Gecko?
 WindowsLinux (GTK)MacAndroid 2.3Android 3.0 or latter
"Alt"Either Alt key or AltGr key pressedAlt key pressed⌥ Option key pressedAlt key or option key pressed
"AltGraph" +

Both Alt and Ctrl keys are pressed, or AltGr key is pressed

+ 		Level 3 Shift key (or Level 5 Shift key {{gecko_minversion_inline("20.0")}}) pressed⌥ Option key pressedNot supported
"CapsLock"During LED for ⇪ Caps Lock turned onNot supportedWhile CapsLock is locked {{gecko_minversion_inline("29.0")}}
"Control"Either Ctrl key or AltGr key pressedCtrl key pressedcontrol key pressedmenu key pressed.Ctrl key, control key or menu key pressed.
"Fn"Not supportedFunction key is pressed, but we're not sure what key makes the modifier state active. Fn key on Mac keyboard doesn't cause this active. {{gecko_minversion_inline("29.0")}}
"FnLock"Not supported
"Hyper"Not supported
"Meta"Not supportedMeta key pressed {{gecko_minversion_inline("17.0")}}⌘ Command key pressedNot supported⊞ Windows Logo key or command key pressed
"NumLock"During LED for Num Lock turned onA key on numpad pressedNot supportedWhile NumLock is locked {{gecko_minversion_inline("29.0")}}
"OS"⊞ Windows Logo key pressedSuper key or Hyper key pressed (typically, mapped to ⊞ Windows Logo key)Not supported
"ScrollLock"During LED for Scroll Lock turned onDuring LED for Scroll Lock turned on, but typically this isn't supported by platformNot supportedWhile ScrollLock is locked {{gecko_minversion_inline("29.0")}}
"Shift"⇧ Shift key pressed
"Super"Not supported
"Symbol"Not supported
"SymbolLock"Not supported
+ + + +

 El modificador virtual "Accel"

+ +
Note: The "Accel" virtual modifier has been effectively deprecated in current drafts of the DOM3 Events specification.
+ +

getModifierState() also accepts a deprecated virtual modifier named "Accel". event.getModifierState("Accel") returns true when at least one of {{domxref("KeyboardEvent.ctrlKey")}} or {{domxref("KeyboardEvent.metaKey")}} is true.

+ +

In old implementations and outdated specifications, it returned true when a modifier which is the typical modifier key for the shortcut key is pressed. For example, on Windows, pressing Ctrl key may make it return true. However, on Mac, pressing ⌘ Command key may make it return true. Note that which modifier key makes it return true depends on platforms, browsers, and user settings. For example, Firefox users can customize this with a pref, "ui.key.accelKey".

+ +

Ejemplo

+ +
// Ignore if following modifier is active.
+if (event.getModifierState("Fn") ||
+    event.getModifierState("Hyper") ||
+    event.getModifierState("OS") ||
+    event.getModifierState("Super") ||
+    event.getModifierState("Win") /* hack for IE */) {
+  return;
+}
+
+// Also ignore if two or more modifiers except Shift are active.
+if (event.getModifierState("Control") +
+    event.getModifierState("Alt") +
+    event.getModifierState("Meta") > 1) {
+  return;
+}
+
+// Handle shortcut key with standard modifier
+if (event.getModifierState("Accel")) {
+  switch (event.key.toLowerCase()) {
+    case "c":
+      if (event.getModifierState("Shift")) {
+        // Handle Accel + Shift + C
+        event.preventDefault(); // consume the key event
+      }
+      break;
+    case "k":
+      if (!event.getModifierState("Shift")) {
+        // Handle Accel + K
+        event.preventDefault(); // consume the key event
+      }
+      break;
+  }
+  return;
+}
+
+// Do somethig different for arrow keys if ScrollLock is locked.
+if ((event.getModifierState("ScrollLock") ||
+       event.getModifierState("Scroll") /* hack for IE */) &&
+    !event.getModifierState("Control") &&
+    !event.getModifierState("Alt") &&
+    !event.getModifierState("Meta")) {
+  switch (event.key) {
+    case "ArrowDown":
+    case "Down": // hack for IE and old Gecko
+      event.preventDefault(); // consume the key event
+      break;
+    case "ArrowLeft":
+    case "Left": // hack for IE and old Gecko
+      // Do something different if ScrollLock is locked.
+      event.preventDefault(); // consume the key event
+      break;
+    case "ArrowRight":
+    case "Right": // hack for IE and old Gecko
+      // Do something different if ScrollLock is locked.
+      event.preventDefault(); // consume the key event
+      break;
+    case "ArrowUp":
+    case "Up": // hack for IE and old Gecko
+      // Do something different if ScrollLock is locked.
+      event.preventDefault(); // consume the key event
+      break;
+  }
+}
+
+ +
+

Although, this example uses .getModifierState() with "Alt", "Control", "Meta" and "Shift", perhaps it's better for you to use altKey, ctrlKey, metaKey and shiftKey because they are shorter and may be faster.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName('DOM3 Events', '#widl-KeyboardEvent-getModifierState', 'getModifierState()')}}{{Spec2('DOM3 Events')}}Initial definition (Modifier Keys spec)
+ +

Compatibilidad con Browsers

+ + + +

{{Compat("api.KeyboardEvent.getModifierState")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/keyboardevent/index.html b/files/es/web/api/keyboardevent/index.html new file mode 100644 index 0000000000..bcb27d00b6 --- /dev/null +++ b/files/es/web/api/keyboardevent/index.html @@ -0,0 +1,441 @@ +--- +title: KeyboardEvent +slug: Web/API/KeyboardEvent +tags: + - API +translation_of: Web/API/KeyboardEvent +--- +

{{APIRef("DOM Events")}}

+ +

Los objetos KeyboardEvent describen una interacción del usuario con el teclado. Cada evento describe una tecla; el tipo de evento(keydown, keypress, o keyup) identifica el tipo de acción realizada.

+ +
Nota: El KeyboardEvent solo indica qué está pasando en una tecla. Cuando necesite manejar la entrada de texto, use el evento input de HTML5 en su lugar. Por ejemplo, si el usuario introduce texto desde un sistema de tipo manuscrito como una tableta, los eventos para teclas no podrán ser lanzados.
+ +

Constructor

+ +
+
{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}
+
Crea un objeto KeyboardEvent.
+
+ +

Métodos

+ +

Esta interfaz también hereda métodos de sus padres, {{domxref("UIEvent")}} and {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.getModifierState()")}}
+
Devuelve un {{jsxref("Boolean")}} indicando si una tecla modificadora, como Alt, Shift, Ctrl, o Meta, fue pulsada cuando el evento fue creado.
+
{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}
+
Inicializa un objeto KeyboardEvent. Este método solo ha sido implementado por Gecko (otros usados {{domxref("KeyboardEvent.initKeyboardEvent()")}}) y nunca más será usado. El modo estándar moderno es usar el constructor {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
+
{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}
+
Inicializa un objeto KeyboardEvent. Este método nunca fue implementado por Gecko (quien usa {{domxref("KeyboardEvent.initKeyEvent()")}}) y no debe ser utilizado más. El modo estándar moderno es usar el constructor {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
+
+ +

Propiedades

+ +

Esta interfaz también hereda propiedades de sus padres {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
+
Devuelve un {{jsxref("Boolean")}} que será true si la tecla Alt ( Option or ⌥ on OS X) fue activada cuando el evento fue generado.
+
{{domxref("KeyboardEvent.char")}} {{Non-standard_inline()}}{{Deprecated_inline}}{{Readonlyinline}}
+
Devuelve un {{domxref("DOMString")}} representando el valor del carácter de la tecla. Si la tecla corresponde con un carácter imprimible, este valor es una cadena Unicode no vacía que contiene este carácter. Si la tecla no tiene una representación imprimible, esta es una cadena vacía.
+
+
Nota: Si la tecla es usada como una macro que inserta múltiples caracteres, If the key is used as a macro that inserts multiple characters, el valor de este atributo es la cadena completa, no solo el primer carácter.
+ +
Advertencia: Esta propiedad ha sido eliminada de los eventos del DOM de nivel 3. Esta es únicamente soportada en IE.
+
+
{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
+
Returns an unsigned long representing the Unicode reference number of the key; this attribute is used only by the keypress event. For keys whose char attribute contains multiple characters, this is the Unicode value of the first character in that attribute. In Firefox 26 this returns codes for printable characters. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
+
{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
+
Returns a {{domxref("DOMString")}} with the code value of the key represented by the event.
+
{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
+
Returns a {{jsxref("Boolean")}} that is true if the Ctrl key was active when the key event was generated.
+
{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
+
Returns a {{jsxref("Boolean")}} that is true if the event is fired between after compositionstart and before compositionend.
+
{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+
Returns a {{domxref("DOMString")}} representing the key value of the key represented by the event.
+
{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline()}}{{Readonlyinline}}
+
Returns an unsigned long representing a system and implementation dependent numerical code identifying the unmodified value of the pressed key. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
+
{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
+
Returns a {{domxref("DOMString")}} representing a locale string indicating the locale the keyboard is configured for. This may be the empty string if the browser or device doesn't know the keyboard's locale. +
Note: This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.
+
+
{{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
+
Returns an unsigned long representing the location of the key on the keyboard or other input device.
+
{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
+
Returns a {{jsxref("Boolean")}} that is true if the Meta (or Command on OS X) key was active when the key event was generated.
+
{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
+
Returns a {{jsxref("Boolean")}} that is true if the key is being held down such that it is automatically repeating.
+
{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
+
Returns a {{jsxref("Boolean")}} that is true if the Shift key was active when the key event was generated.
+
{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}
+
Returns an unsigned long representing a system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keyCode. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
+
+ +

Notes

+ +

There are keydown, keypress, and keyup events. For most keys, Gecko dispatches a sequence of key events like this:

+ +
    +
  1. When the key is first depressed, the keydown event is sent.
    2. +
  2. If the key is not a modifier key, the keypress event is sent.
    3. +
  3. When the user releases the key, the keyup event is sent.
    4. +
+ +

Special cases

+ +

Certain keys toggle the state of an LED indicator, such as Caps Lock, Num Lock, and Scroll Lock. On Windows and Linux, these keys dispatch only the keydown and keyup events. Note that on Linux, Firefox 12 and earlier also dispatched the keypress event for these keys.

+ +

On Mac, however, Caps Lock dispatches only the keydown event due to a platform event model limitation. Num Lock had been supported on old MacBook (2007 model and older) but Mac hasn't supported Num Lock feature even on external keyboards in these days. On the old MacBook which has Num Lock key, Num Lock doesn't cause any key events. And Gecko supports Scroll Lock key if an external keyboard which has F14 is connected. However, it generates keypress event. This inconsistent behavior is a bug; see {{bug(602812)}}.

+ +

Auto-repeat handling

+ +

When a key is pressed and held down, it begins to auto-repeat. This results in a sequence of events similar to the following being dispatched:

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keydown
    4. +
  4. keypress
    5. +
  5. <<repeating until the user releases the key>>
    6. +
  6. keyup
    7. +
+ +

This is what the DOM Level 3 specification says should happen. There are some caveats, however, as described below.

+ +

Auto-repeat on some GTK environments such as Ubuntu 9.4

+ +

In some GTK-based environments, auto-repeat dispatches a native key-up event automatically during auto-repeat, and there's no way for Gecko to know the difference between a repeated series of keypresses and an auto-repeat. On those platforms, then, an auto-repeat key will generate the following sequence of events:

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keyup
    4. +
  4. keydown
    5. +
  5. keypress
    6. +
  6. keyup
    7. +
  7. <<repeating until the user releases the key>>
    8. +
  8. keyup
    9. +
+ +

In these environments, unfortunately, there's no way for web content to tell the difference between auto-repeating keys and keys that are just being pressed repeatedly.

+ +

Auto-repeat handling prior to Gecko 4.0

+ +

Before Gecko 4.0 {{geckoRelease('4.0')}}, keyboard handling was less consistent across platforms.

+ +
+
Windows
+
Auto-repeat behavior is the same as in Gecko 4.0 and later.
+
Mac
+
After the initial keydown event, only keypress events are sent until the keyup event occurs; the inter-spaced keydown events are not sent.
+
Linux
+
The event behavior depends on the specific platform. It will either behave like Windows or Mac depending on what the native event model does.
+
+ +

Example

+ +
<!DOCTYPE html>
+<html>
+<head>
+<script>
+var metaChar = false;
+var exampleKey = 16;
+
+function keyEvent(event) {
+  var key = event.keyCode || event.which;
+  var keychar = String.fromCharCode(key);
+  if (key == exampleKey) {
+    metaChar = true;
+  }
+  if (key != exampleKey) {
+    if (metaChar) {
+      alert("Combination of metaKey + " + keychar);
+      metaChar = false;
+    } else {
+      alert("Key pressed " + key);
+    }
+  }
+}
+
+function metaKeyUp (event) {
+  var key = event.keyCode || event.which;
+
+  if (key == exampleKey) {
+    metaChar = false;
+  }
+}
+</script>
+</head>
+
+<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
+</body>
+</html>
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#interface-KeyboardEvent', 'KeyboardEvent')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

The KeyboardEvent interface specification went through numerous draft versions, first under DOM Events Level 2 where it was dropped as no consensus arose, then under DOM Events Level 3. This led to the implementation of non-standard initialization methods, the early DOM Events Level 2 version, {{domxref("KeyboardEvent.initKeyEvent()")}} by Gecko browsers and the early DOM Events Level 3 version, {{domxref("KeyboardEvent.initKeyboardEvent()")}} by others. Both have been superseded by the modern usage of a constructor: {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
constructor{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("31.0") }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
.char{{ CompatNo() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
.charCode{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
.codeSee Browser compatibility of {{domxref("KeyboardEvent.code")}}.
.isComposing{{ CompatNo() }}{{ CompatGeckoDesktop("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
.keySee Browser compatibility of {{domxref("KeyboardEvent.key")}}.
.keyCode{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
.locale{{ CompatNo() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
.location{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("15.0") }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
.repeat{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("28.0") }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
.which{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
.getModifierState()See Browser compatibility of {{domxref("KeyboardEvent.getModifierState")}}
.initKeyboardEvent(){{ CompatVersionUnknown() }} *1{{ CompatNo() }} *2{{ CompatIE("9.0") }} *3{{ CompatUnknown() }}{{ CompatVersionUnknown() }} *1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
constructor{{ CompatUnknown() }}{{ CompatGeckoMobile("31.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.char{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.charCode{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.codeSee Browser compatibility of {{domxref("KeyboardEvent.code")}}.
.isComposing{{ CompatNo() }}{{ CompatGeckoMobile("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
.keySee Browser compatibility table of {{domxref("KeyboardEvent.key")}}.
.keyCode{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.locale{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.location{{ CompatUnknown() }}{{ CompatGeckoMobile("15.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.repeat{{ CompatUnknown() }}{{ CompatGeckoMobile("28.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.which{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.getModifierState()See Browser compatibility of {{domxref("KeyboardEvent.getModifierState")}}
.initKeyboardEvent(){{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +


+ *1 The arguments of initKeyboardEvent() of WebKit and Blink's are different from the definition in DOM Level 3 Events. The method is: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg,  in views::AbstractView viewArg, in DOMString keyIndentifierArg, in unsigned long locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)

+ +

*2 Gecko won't support initKeyboardEvent() because supporting it completely breaks feature detection of web applications. See {{Bug(999645)}}.

+ +

*3 The argument of initKeyboardEvent() of IE is different from the definition in DOM Level 3 Events. The method is: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in unsigned long locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg). See document of initKeyboardEvent() in MSDN.

diff --git a/files/es/web/api/keyboardevent/key/index.html b/files/es/web/api/keyboardevent/key/index.html new file mode 100644 index 0000000000..ed765b38b3 --- /dev/null +++ b/files/es/web/api/keyboardevent/key/index.html @@ -0,0 +1,212 @@ +--- +title: KeyboardEvent.key +slug: Web/API/KeyboardEvent/key +translation_of: Web/API/KeyboardEvent/key +--- +

{{APIRef("DOM Events")}}

+ +

La propiedad de solo lectura KeyboardEvent.key retorna el valor de la tecla presionada por el usuario while taking into considerations the state of modifier keys such as the shiftKey as well as the keyboard locale/layout. Its value is determined as follows:

+ +
+

See a full list of key values.

+
+ + + +

KeyboardEvent Sequence

+ +

KeyboardEvents are fired in a pre-determined sequence and understanding this will go a long way into understanding the key property value for a particular KeyboardEvent. For a given key press, the sequence of KeyboardEvents fired is as follows assuming that {{domxref("Event.preventDefault")}} is not called:

+ +
    +
  1. A {{event("keydown")}} event is first fired. If the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the {{domxref("KeyboardEvent.repeat")}} read only property  is set to true.
    2. +
  2. If the key produces a character key that would result in a character being inserted into possibly an {{HTMLElement("input")}}, {{HTMLElement("textarea")}} or an element with {{domxref("HTMLElement.contentEditable")}} set to true, the {{event("beforeinput")}} and {{event("input")}} event types are fired in that order. Note that some other implementations may fire {{event("keypress")}} event if supported. The events will be fired repeatedly while the key is held down.
    3. +
  3. A {{event("keyup")}} event is fired once the key is released. This completes the process.
    4. +
+ +

In sequence 1 & 3, the KeyboardEvent.key attribute is defined and is set appropriately to a value according to the rules defined ealier.

+ +

KeyboardEvent Sequence Sample

+ +

Consider the event sequence generated when we interact with the ShiftKey and the legend key 2 using a U.S keyboard layout and a UK keyboard layout.

+ +

Try experimenting using the following two test cases:

+ +
    +
  1. Press and hold the shift key, then press key 2 and release it. Next, release the shift key.
    2. +
  2. Press and hold the shift key, then press and hold key 2. Release the shift key. Finally, release key 2.
    3. +
+ +

HTML

+ +
<div class="fx">
+  <div>
+    <textarea rows="5" name="test-target" id="test-target"></textarea>
+    <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
+  </div>
+  <div class="flex">
+    <div id="console-log"></div>
+  </div>
+</div>
+
+ +

CSS

+ +
.fx {
+  -webkit-display: flex;
+  display: flex;
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+.fx > div {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.fx > div:first-child {
+   width: 30%;
+}
+
+.flex {
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+#test-target {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+ +

JavaScript

+ +
let textarea = document.getElementById('test-target'),
+consoleLog = document.getElementById('console-log'),
+btnClearConsole = document.getElementById('btn-clear-console');
+
+function logMessage(message) {
+  let p = document.createElement('p');
+  p.appendChild(document.createTextNode(message));
+  consoleLog.appendChild(p);
+}
+
+textarea.addEventListener('keydown', (e) => {
+  if (!e.repeat)
+    logMessage(`first keydown event. key property value is "${e.key}"`);
+  else
+    logMessage(`keydown event repeats. key property value is "${e.key}"`);
+});
+
+textarea.addEventListener('beforeinput', (e) => {
+  logMessage(`beforeinput event. you are about inputing "${e.data}"`);
+});
+
+textarea.addEventListener('input', (e) => {
+  logMessage(`input event. you have just inputed "${e.data}"`);
+});
+
+textarea.addEventListener('keyup', (e) => {
+  logMessage(`keyup event. key property value is "${e.key}"`);
+});
+
+btnClearConsole.addEventListener('click', (e) => {
+  let child = consoleLog.firstChild;
+  while (child) {
+   consoleLog.removeChild(child);
+   child = consoleLog.firstChild;
+  }
+});
+ +

Result

+ +

{{EmbedLiveSample('KeyboardEvent_Sequence_Sample')}}

+ +

Case 1

+ +

When the shift key is pressed, a {{event("keydown")}} event is first fired, and the key property value is set to the string "Shift". As we keep holding this key, the {{event("keydown")}} event does not continue to fire repeatedly because it does not produce a character key.

+ +

When key 2 is pressed, another {{event("keydown")}} event is fired for this new key press, and the key property value for the event is set to the string "@" for the U.S keyboard type and """ for the UK keyboard type, because of the active modifier shift key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced.

+ +

As we release the key 2, a {{event("keyup")}} event is fired and the key property will maintain the string values "@" and """ for the different keyboard layouts respectively.

+ +

As we finally release the shift key, another {{event("keyup")}} event is fired for it, and the key attribute value remains "Shift".

+ +

Case 2

+ +

When the shift key is pressed, a {{event("keydown")}} event is first fired, and the key property value is set to be the string "Shift". As we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key.

+ +

When key 2 is pressed, another {{event("keydown")}} event is fired for this new key press, and the key property value for the event is set to be the string "@" for the U.S keyboard type and """ for the UK keyboard type, because of the active modifier shift key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced. As we keep holding the key, the {{event("keydown")}} event continues to fire repeatedly and the {{domxref("KeyboardEvent.repeat")}}  property is set to true. The {{event("beforeinput")}} and {{event("input")}} events are fired repeatedly as well.

+ +

As we release the shift key, a {{event("keyup")}} event is fired for it, and the key attribute value remains "Shift". At this point, notice that the key property value for the repeating keydown event of the key 2 key press is now "2" because the modifier shift key is no longer active. The same goes for the {{domxref("InputEvent.data")}} property of the {{event("beforeinput")}} and {{event("input")}} events.

+ +

As we finally release the key 2, a {{event("keyup")}} event is fired but the key property will be set to the string value "2" for both keyboard layouts because the modifier shift key is no longer active.

+ +

Example

+ +

This example uses {{domxref("EventTarget.addEventListener()")}} to listen for {{event("keydown")}} events. When they occur,  the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).

+ +
window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Do nothing if the event was already processed
+  }
+
+  switch (event.key) {
+    case "Down": // IE specific value
+    case "ArrowDown":
+      // Do something for "down arrow" key press.
+      break;
+    case "Up": // IE specific value
+    case "ArrowUp":
+      // Do something for "up arrow" key press.
+      break;
+    case "Left": // IE specific value
+    case "ArrowLeft":
+      // Do something for "left arrow" key press.
+      break;
+    case "Right": // IE specific value
+    case "ArrowRight":
+      // Do something for "right arrow" key press.
+      break;
+    case "Enter":
+      // Do something for "enter" or "return" key press.
+      break;
+    case "Escape":
+      // Do something for "esc" key press.
+      break;
+    default:
+      return; // Quit when this doesn't handle the key event.
+  }
+
+  // Cancel the default action to avoid it being handled twice
+  event.preventDefault();
+}, true);
+
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}{{Spec2('DOM3 Events')}}Initial definition, included key values.
+ +

Browser compatibility

+ + + +

{{Compat("api.KeyboardEvent.key")}}

diff --git a/files/es/web/api/keyboardevent/metakey/index.html b/files/es/web/api/keyboardevent/metakey/index.html new file mode 100644 index 0000000000..7a83c5c0b2 --- /dev/null +++ b/files/es/web/api/keyboardevent/metakey/index.html @@ -0,0 +1,131 @@ +--- +title: KeyboardEvent.metaKey +slug: Web/API/KeyboardEvent/metaKey +tags: + - Evento + - Referencia +translation_of: Web/API/KeyboardEvent/metaKey +--- +

{{APIRef("DOM Events")}}

+ +

La propiedad KeyboardEvent.metaKey  es de solo lectura y regresa un valor {{jsxref("Boolean")}} que indica si la tecla Meta estaba presionada (true) o no (false) cuando el evento ocurrio.

+ +
+

Nota: En teclados Macintosh es la tecla comando (⌘). En teclados Windows la tecla es lla tecla window (⊞).

+
+ +

Syntax

+ +
var metaKeyPressed = instanceOfKeyboardEvent.metaKey
+
+ +

Valor de retorno

+ +

{{jsxref("Boolean")}}

+ +

Ejemplo

+ +
 function goInput(e) {
+ // Revisa si estaba presionada la tecla meta y
+   if (e.metaKey) {
+        // realiza esto en caso de cierto
+     superSizeOutput(e);
+   } else {
+         //Realiz esto en caso de falso
+     doOutput(e);
+   }
+ }
+
+ +

metaKey

+ +

Contenido HTML

+ +
<div id="example" onmousedown="ismetaKey(event);">¡Presiona la tecla meta y dame click!<div>
+
+ +

Contenido Javascript

+ +
function ismetaKey(e){
+ var el=document.getElementById("example");//Toma el control del div example
+ var mK=e.metaKey;//Obtiene el valor de metaKey y lo almacena
+ el.innerHTML="¡Presiona la tecla meta y dame click!</br>metaKey:"+mK;//Muestra el valor de metaKey
+}
+
+ +

 

+ +

{{ EmbedLiveSample('metaKey') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónStatusComentario
{{SpecName('DOM3 Events','#widl-KeyboardEvent-metaKey','KeyboardEvent.metaKey')}}{{Spec2('DOM3 Events')}}Definición inicial
+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/keyboardevent/which/index.html b/files/es/web/api/keyboardevent/which/index.html new file mode 100644 index 0000000000..11e1e3e48e --- /dev/null +++ b/files/es/web/api/keyboardevent/which/index.html @@ -0,0 +1,62 @@ +--- +title: event.which +slug: Web/API/KeyboardEvent/which +tags: + - DOM + - events + - metodo + - which +translation_of: Web/API/KeyboardEvent/which +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve el keyCode de la tecla presionada, o el codigo del caracter (charCode) de la tecla alfanumerica presionada.

+

Sintaxis

+
var keyResult = event.which;
+
+

keyResult contiene el codigo numerico para una tecla en particular, dependiendo si la tecla presionada es alfanumerica o no-alfanumerica. Por favor mire charCode y keyCode para mas informacion.

+

Ejemplo

+
<html>
+<head>
+<title>charCode/keyCode/which example</title>
+
+<script type="text/javascript">
+
+function showKeyPress(evt)
+{
+alert("onkeypress handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+      + "charCode property: " + evt.charCode + "\n"
+      + "Character Key Pressed: "
+      + String.fromCharCode(evt.charCode) + "\n"
+     );
+}
+
+
+function keyDown(evt)
+{
+alert("onkeydown handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+     );
+}
+
+
+</script>
+</head>
+
+<body
+ onkeypress="showKeyPress(event);"
+ onkeydown="keyDown(event);"
+>
+
+<p>Por favor presione cualquier tecla.</p>
+
+</body>
+</html>
+
+
+ Nota: El codigo de arriba falla en Firefox 9 debido al bug 696020.
+

Especificacion

+

No es parte de ninguna especificacion.

diff --git a/files/es/web/api/location/index.html b/files/es/web/api/location/index.html new file mode 100644 index 0000000000..9276724542 --- /dev/null +++ b/files/es/web/api/location/index.html @@ -0,0 +1,212 @@ +--- +title: Location +slug: Web/API/Location +tags: + - API + - HTML DOM + - Interface + - Location + - Referencia +translation_of: Web/API/Location +--- +

{{APIRef("HTML DOM")}}

+ +

La interface Location representa la ubicación (URL) del objeto al que esta vinculado. Los cambios hechos en ella son reflejados en el objeto al cual está relacionado. Ambas interfaces, {{domxref("Document")}} y {{domxref("Window")}} tienen una interface Location asignada, accessible desde {{domxref("Document.location")}} y {{domxref("Window.location")}} respectivamente.

+ +

Propiedades

+ +

La interface Location no hereda ninguna propiedad, pero las implementa desde {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.href")}}
+
Es un {{domxref("DOMString")}} que contiene la URL completa. Si es cambiada, el documento asociado navegará a la nueva pagina. Puede ser cambiada desde un origen diferente que el asociado al documento.
+
{{domxref("Location.protocol")}}
+
Es un {{domxref("DOMString")}} que contiene el esquema del protocolo de la URL, incluyendo el ':' final.
+
{{domxref("Location.host")}}
+
Es un {{domxref("DOMString")}} que contiene el host, el cual esta compuesta por: hostname,  ':', y el port de la URL.
+
{{domxref("Location.hostname")}}
+
Es un {{domxref("DOMString")}} que contiene el dominio de la URL.
+
{{domxref("Location.port")}}
+
Es un {{domxref("DOMString")}} que contiene el numero del puerto de la URL.
+
{{domxref("Location.pathname")}}
+
Es un {{domxref("DOMString")}} que contiene el '/' inicial, seguido por la ruta de la URL.
+
{{domxref("Location.search")}}
+
Es un {{domxref("DOMString")}} que contiene un '?' seguido por los parametros o el "querystring" de la URL. Navegadores modernos proveen URLSearchParams y URL.searchParams para hacer mas facil de obtener los parametros desde el querystring.
+
{{domxref("Location.hash")}}
+
Es un {{domxref("DOMString")}} que contiene un '#' seguido por el fragmento identificador de la URL.
+
{{domxref("Location.username")}}
+
Es un {{domxref("DOMString")}} que contiene el username (usuario) especificado antes del dominio.
+
{{domxref("Location.password")}}
+
Es un {{domxref("DOMString")}} que contiene el password (contraseña) especificado antes del dominio.
+
{{domxref("Location.origin")}} {{readOnlyInline}}
+
Es un {{domxref("DOMString")}} que contiene la forma canonica del origin (origen) de la URL.
+
+ +

Metodos

+ +

La interface Location no hereda ningun metodo, pero los implementa desde {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.assign()")}}
+
Carga el recurso en la URL proporcionada en el parámetro.
+
{{domxref("Location.reload()")}}
+
Recarga el recurso desde la URL actual. Si unico y opcional parametro es {{domxref("Boolean")}}, el cual, cuando es true, hace que la pagina siempre sea recargada desde el servidor. Si es false o no es especificado, el navegador puede recargar la pagina desde su cache.
+
{{domxref("Location.replace()")}}
+
Reemplaza el recurso actual por el recibido como URL. La diferencia con el metodo assign() es que luego de usar replace() la pagina actual no va a ser guardada en la sesión {{domxref("History")}}, esto significa que el usuario no podrá usar el boton Atras para navegar a esta.
+
{{domxref("Location.toString()")}}
+
Retorna un {{domxref("DOMString")}} que contiene la URL completa. Es un sinonimo de {{domxref("URLUtils.href")}}, aunque este no puede ser utilizado para modificar el valor.
+
+ +

Ejemplo

+ +
// Crear un elemento <a> y usar la propiedad href para el proposito de este ejemplo.
+// Una alternativa mas correcta es navegar a la URL y usar document.location o window.location
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org:8080
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // 8080
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML5 W3C')}}Definicion inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
origin en Windows.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin en todos los objetos location (pero en Workes, usa {{domxref("WorkerLocation")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
origin en Windows.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin en todos los objetos location (pero en Workers, usa {{domxref("WorkerLocation")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username y password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vea también

+ + diff --git a/files/es/web/api/location/origin/index.html b/files/es/web/api/location/origin/index.html new file mode 100644 index 0000000000..4e019a68f0 --- /dev/null +++ b/files/es/web/api/location/origin/index.html @@ -0,0 +1,56 @@ +--- +title: 'Location: origin' +slug: Web/API/Location/origin +tags: + - API + - Location + - Propiedad + - Referencia + - Ubicación +translation_of: Web/API/Location/origin +--- +

{{APIRef("Location")}}

+ +

La propiedad de sólo-lectura origin de la interfaz {{domxref("Location")}} es una {{domxref("USVString")}} que contiene la serialización Unicode del origen de la URL que representa; que es:

+ + + +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
string = object.origin;
+
+ +

Ejemplos

+ +
// En esta página, devuelve el origen
+var result = window.location.origin; // Devuelve:'https://developer.mozilla.org'
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#dom-location-origin', 'origin')}}{{Spec2('HTML WHATWG')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.Location.origin")}}

diff --git a/files/es/web/api/location/reload/index.html b/files/es/web/api/location/reload/index.html new file mode 100644 index 0000000000..2c7cedccab --- /dev/null +++ b/files/es/web/api/location/reload/index.html @@ -0,0 +1,75 @@ +--- +title: 'Location: reload()' +slug: Web/API/Location/reload +tags: + - API + - HTML + - HTML DOM + - Location + - Method + - Referencia + - metodo +translation_of: Web/API/Location/reload +--- +
{{ APIRef("HTML DOM") }}
+ +

El metodo location.reload() carga de nuevo la URL actual, como lo hace el boton de Refresh de los navegadores.

+ +

La recarga puede estar bloqueada y arrojar un SECURITY_ERROR {{domxref("DOMException")}} . Esto sucede si el {{Glossary("origin")}} de la llamada location.reload() difiere del origen de la página que posee el objeto { {domxref("Location")}}. Consulta Same-origin policy para mayor información.

+ +

Syntax

+ +
location.reload();
+
+ +

Ejemplo

+ +

HTML

+ +
<button id="reload">Click para recargar</button>
+
+ +

JavaScript

+ +
const reload = document.getElementById('reload');
+
+reload.addEventListener('click', _ => { // el _ es para indicar la ausencia de parametros
+    location.reload();
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.Location.reload")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/mediadevices/getusermedia/index.html b/files/es/web/api/mediadevices/getusermedia/index.html new file mode 100644 index 0000000000..1466aecd36 --- /dev/null +++ b/files/es/web/api/mediadevices/getusermedia/index.html @@ -0,0 +1,300 @@ +--- +title: MediaDevices.getUserMedia() +slug: Web/API/MediaDevices/getUserMedia +translation_of: Web/API/MediaDevices/getUserMedia +--- +
{{APIRef("WebRTC")}}{{SeeCompatTable}}
+ +

El método MediaDevices.getUserMedia() solicita al usuario permisos para usar un dispositivo de entrada de vídeo y/o uno de audio como una cámara o compartir la pantalla y/o micrófono. Si el usuario proporciona los permisos, entonces le retornará un {{domxref("Promise")}} que es resuelto por el resultado del objeto MediaStream. Si el usuario niega el permiso, o si el recurso multimedia no es válido, entonces el promise es rechazado con PermissionDeniedError o NotFoundError respectivamente. Nótese que es posible que el promise retornado no sea ni resuelto ni rechazado, ya que no se requiere que el usuario tome una decisión.

+ +

Sintaxis

+ +
var gumPromise = MediaDevices.getUserMedia(constraints);
+ +

Generalmente, accederás al objeto singleton {{domxref("MediaDevices")}} usando {{domxref("navigator.mediaDevices")}}, de esta forma:

+ +
navigator.mediaDevices.getUserMedia(myConstraints).then(function(mediaStream) {
+  /* usar el flujo de datos */
+}).catch(function(err) {
+  /* manejar el error */
+});
+ +

Parámetros

+ +
+
constraints
+
+

Es un objeto {{domxref("MediaStreamConstraints")}} que especifica los tipos de recursos a solicitar, junto con cualquier requerimiento para cada tipo.

+ +

El parámetro constraints es un objeto MediaStreamConstaints con dos miembros: video y audio, que describen los tipos de recurso solicitados. Debe especificarse uno o ambos. Si el navegador no puede encontrar todas las pistas de recursos con los tipos especificados que reúnan las restricciones dadas, entonces el promise retornado es rechazado con NotFoundError.

+ +

Lo siguiente realiza la petición de tanto audio como vídeo sin requerimientos específicos:

+ + 
{ audio: true, video: true }
+ +

Mientras que la información acerca de las cámaras y micrófonos de los usuarios se encuentran inaccesibles por razones de privacidad, una aplicación puede solicitar la cámara y las capacidades del micrófono que este requiera, usando restricciones adicionales. El siguiente código es para mosrtar una resolución de una cámara de 1280x720.

+ + 
{
+  audio: true,
+  video: { width: 1280, height: 720 }
+}
+ +

El navegador tratará de respetar esto, pero puede devolver otras resoluciones si una coincidencia exacta no está disponible o si el usuario la reemplaza.

+ +

Para conseguir otras resoluciones, puede utilizar las propiedaes min, max, or exact (también conocido como min == max). El siguiente ejemplo le muestra cómo solicitar una resolución mínima de 1280x720.

+ + 
{
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}
+ +

Si no existe una cámara con una resolución mínima para trabajar, entonces la promesa devuelta será rechazada con NotFoundError, y no se le pedirá al usuario.

+ +

La razón de esto es debido a que las propiedades min, max, y exact son inherentemente obligatorias, mientras que los valores planos y una propiedad llamada ideal no lo son. He aquí un ejemplo más completo:

+ + 
{
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}
+ +

Un valor perteneciente a la propiedad ideal, cuando es usada, tiene gravedad, lo que significa que el navegador tratará de encontrar la configuración (una cámara, si tienes más de una), con la distancia de aptitud más pequeña (fitness distance) de los valores ideales dados.

+ +

Los valores planos son inherentemente ideales, lo que significa que de los ejemplos mostrados anteriormente, podrían haberse escrito de la siguiente manera:

+ + 
{
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}
+ +

No todas las restricciones son números. Por ejemplo, en dispositivos móviles, los siguientes preferirán la cámara frontal (si está disponible) sobre la posterior:

+ + 
{ audio: true, video: { facingMode: "user" } }
+ +

Para solicitar la cámara frontal, use:

+ + 
{ audio: true, video: { facingMode: { exact: "environment" } } }
+
+
+ +

Valor de retorno

+ +

Un {{jsxref("Promise")}} que resuelve a un objeto {{domxref("MediaStream")}}.

+ +

Errores

+ +

Los rechazos de la promesa devuelta se realizan con un objeto {{domxref ("MediaStreamError")}} que está modelado en {{domxref ("DOMException")}}. Los errores más relevantes son:

+ +
+
SecurityError
+
Permiso para usar un dispositivo fue denegado por el usuario o por el sistema.
+
NotFoundError
+
No se encontraron pistas multimedia del tipo especificado que satisfagan las restricciones especificadas.
+
+ +

Ejemplos

+ +

Usando la Promesa (Promise)

+ +

Este ejemplo asigna el objeto {{domxref("MediaStream")}} al elemento apropiado.

+ +
var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+
+p.then(function(mediaStream) {
+  var video = document.querySelector('video');
+  video.src = window.URL.createObjectURL(mediaStream);
+  video.onloadedmetadata = function(e) {
+    // Do something with the video here.
+  };
+});
+
+p.catch(function(err) { console.log(err.name); }); // always check for errors at the end.
+ +

Ancho y alto

+ +

He aquí un ejemplo del uso de mediaDevices.getUserMedia(), incluyendo un polyfill para hacer frente a los navegadores más antiguos.

+ +
var promisifiedOldGUM = function(constraints, successCallback, errorCallback) {
+
+  // First get ahold of getUserMedia, if present
+  var getUserMedia = (navigator.getUserMedia ||
+      navigator.webkitGetUserMedia ||
+      navigator.mozGetUserMedia);
+
+  // Some browsers just don't implement it - return a rejected promise with an error
+  // to keep a consistent interface
+  if(!getUserMedia) {
+    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+  }
+
+  // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+  return new Promise(function(successCallback, errorCallback) {
+    getUserMedia.call(navigator, constraints, successCallback, errorCallback);
+  });
+
+}
+
+// Older browsers might not implement mediaDevices at all, so we set an empty object first
+if(navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Some browsers partially implement mediaDevices. We can't just assign an object
+// with getUserMedia as it would overwrite existing properties.
+// Here, we will just add the getUserMedia property if it's missing.
+if(navigator.mediaDevices.getUserMedia === undefined) {
+  navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
+}
+
+
+// Prefer camera resolution nearest to 1280x720.
+var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var video = document.querySelector('video');
+  video.src = window.URL.createObjectURL(stream);
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+
+ +

Cuadros por segundo

+ +

Pocos frame-rates ó cuadros por segundo pueden ser deseables  en algunos casos, como transmisiones  WebRTC con restricciones de ancho de banda.

+ +
var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+
+ +

Camara frontal y camara trasera

+ +

En telefonos moviles.

+ +
var front = false;
+document.getElementById('flip-button').onclick = function() { front = !front; };
+
+var constraints = { video: { facingMode: (front? "user" : "environment") } };
+
+ +

Permisos

+ +

Para usar getUserMedia() en una app instalable (por ejemplo, una Firefox OS app), necesitas especificar uno o ambos de los siguientes campos dentro de tu archivo manifest:

+ +
"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}
+ +

Ver permission: audio-capture y  permission: video-capture para más información.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}{{Spec2('Media Capture')}}Initial definition
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Stream API{{CompatVersionUnknown}}[1][3]
+ 47		36[2]{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android 
Stream API{{CompatNo}}{{CompatNo}}36[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Viejas versiones de Chrome y Opera implementan navigator.webkitGetUserMedia, la versión prefijada {{domxref("navigator.getUserMedia")}} del metodo.

+ +

En Chrome, esta promise-based interfaz esta unicamente disponible mediante el adapter.js polyfill, o usando la bandera chrome://flags/#enable-experimental-web-platform-features.

+ +

Chrome usa una sintaxis de restricciones desactualizada, pero la sintaxis descrita aquí esta disponible mediante el  adapter.js polyfill.

+ +

[2] Viejas versiones de  Firefox implementan navigator.mozGetUserMedia, la versión prefijada  {{domxref("navigator.getUserMedia")}} del método.

+ +

Esta promise-based interfaz y  la sintaxis de restricciones descrita aquí esta disponible  en Firefox 38. Versiones anteriores (32-37) usaban una sitaxis de restriciones desactualizada, pero la sintaxis descrita aquí, tanto como la promise-based interfaz, esta disponible mediante adapter.js polyfill.

+ +

Opera usa una sintaxis de restricciones desactualizada, pero la sintaxis descrita aquí esta disponible mediante adapter.js polyfill.

+ +

[3] Chrome lanza un  error si la página que sirve el script es cargada desde un origen inseguro (i.e. HTTP).

+ +

Ver También

+ + diff --git a/files/es/web/api/mediadevices/index.html b/files/es/web/api/mediadevices/index.html new file mode 100644 index 0000000000..9c02a60cea --- /dev/null +++ b/files/es/web/api/mediadevices/index.html @@ -0,0 +1,172 @@ +--- +title: MediaDevices +slug: Web/API/MediaDevices +tags: + - API + - Experimental + - Interface + - Media + - MediaDevices + - NeedsTranslation + - TopicStub +translation_of: Web/API/MediaDevices +--- +
{{APIRef("WebRTC")}}{{SeeCompatTable}}
+ +

The MediaDevices interface provides access to connected media input devices like cameras and microphones, as well as screensharing.

+ +

Properties

+ +

None.

+ +

Methods

+ +
+
{{ domxref("MediaDevices.getUserMedia()") }}
+
With the user's permission through a prompt, turns on a camera or screensharing and/or a microphone on the system and provides a {{domxref("MediaStream")}} containing a video track and/or an audio track with the input.
+
{{ domxref("MediaDevices.enumerateDevices()") }}
+
Obtains an array of information about the media input and output devices available on the system.
+
+ +

Example

+ +
'use strict';
+
+// Put variables in global scope to make them available to the browser console.
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Got stream with constraints:', constraints);
+  console.log('Using video device: ' + videoTracks[0].label);
+  stream.onended = function() {
+    console.log('Stream ended');
+  };
+  window.stream = stream; // make variable available to browser console
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
+        constraints.video.width.exact + ' px is not supported by your device.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('Permissions have not been granted to use your camera and ' +
+      'microphone, you need to allow the page access to your devices in ' +
+      'order for the demo to work.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '<p>' + msg + '</p>';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}{{Spec2('Media Capture')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop("36.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
enumerateDevices(){{CompatChrome(45.0)}}[1]{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("36.0")}}2.2{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
enumerateDevices(){{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Behind a flag.

+ +

See also

+ + diff --git a/files/es/web/api/mediaquerylist/addlistener/index.html b/files/es/web/api/mediaquerylist/addlistener/index.html new file mode 100644 index 0000000000..e52d1b8b33 --- /dev/null +++ b/files/es/web/api/mediaquerylist/addlistener/index.html @@ -0,0 +1,148 @@ +--- +title: MediaQueryList.addListener() +slug: Web/API/MediaQueryList/addListener +translation_of: Web/API/MediaQueryList/addListener +--- +
{{APIRef("CSSOM View")}}
+ +
El método addListener() de la interfaz {{domxref ("MediaQueryList")}} añade un escucha al MediaQueryListener que ejecutará una función de devolución de llamada personalizada en respuesta al cambio de estado de consulta de medios.
+ 
+ +
+

Esto es básicamente un alias para {{domxref("EventTarget.addEventListener()")}}, para propósitos de compatibilidad con versiones anteriores: en los navegadores antiguos se puede usar addEventListener.

+
+ +

Sintaxis

+ +
MediaQueryList.addListener(func)
+ +

Parametros

+ +
+
func
+
A function or function reference representing the callback function you want to run when the media query status changes. In the original implementation, the callback was a non-standard {{domxref("MediaQueryListListener")}} object. In the new implementation the standard event mechanism is used, the callback is a standard function, and the event object is a {{domxref("MediaQueryListEvent")}}, which inherits from {{domxref("Event")}}.
+
+ +

Return value

+ +

Void.

+ +

Examples

+ +
var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* the viewport is 600 pixels wide or less */
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* the viewport is more than than 600 pixels wide */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSSOM View", "#dom-mediaquerylist-addlistener", "addListener")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}1012.15
New version spec update{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
New version spec update{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/mediaquerylist/index.html b/files/es/web/api/mediaquerylist/index.html new file mode 100644 index 0000000000..a13b29cdbb --- /dev/null +++ b/files/es/web/api/mediaquerylist/index.html @@ -0,0 +1,178 @@ +--- +title: MediaQueryList +slug: Web/API/MediaQueryList +tags: + - API + - CSSOM Vista + - CompatibilidadDeNavegadores + - Interface + - MediaQueryList + - Refetencia +translation_of: Web/API/MediaQueryList +--- +
{{APIRef("CSSOM View")}}{{SeeCompatTable}}
+ +

Un objeto MediaQueryList almacena información en un media query aplicada a un documento y se encarga de enviar notificaciones a los oyentes cuando cambia el estado de consulta de medios (es decir, cuando la prueba de consulta de medios comienza o deja de evaluarse a true).

+ +

Esto hace posible observar un documento para detectar cuando sus consultas de medios cambian, en lugar de sondear los valores periódicamente y le permite programar cambios en un documento basado en el estado de consulta de medios.

+ +

Propiedades

+ +

La nueva versión de la interfaz de MediaQueryList hereda las propiedades de su interfaz principal, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaQueryList.matches")}} {{readonlyInline}}
+
 Un {{domxref("Boolean")}} que devuelve  true si el
+  {{domxref("document")}} actualmente coincide con la lista de consultas de medios, o false si no.
+
{{domxref("MediaQueryList.media")}} {{readonlyInline}}
+
 Un {{domxref("DOMString")}} representa una consulta de medios serializada.
+
+ +

Controladores de eventos

+ +
+
{{domxref("MediaQueryList.onchange")}}
+
Una propiedad de controlador de eventos que representa una función que se invoca cuando se desencadena el evento {{event("change")}}, es decir, cuando cambia el estado del soporte de consulta de medios. El objeto de evento es una instancia {{domxref("MediaQueryListEvent")}}, que se reconoce como una instancia de MediaListQuery en navegadores antiguos, para propósitos de compatibilidad con versiones anteriores.
+
+ +

Métodos

+ +

La nueva versión de la interfaz de MediaQueryList hereda métodos de su interfaz principal, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaQueryList.addListener()")}}
+
 Agrega un escucha al MediaQueryListener que ejecutará una función de devolución de llamada personalizada en respuesta al cambio de estado de consulta de medios. Esto es básicamente un alias para {{domxref("EventTarget.addEventListener()")}}, para propósitos de compatibilidad con versiones anteriores. 
+
{{domxref("MediaQueryList.removeListener()")}}
+
 Elimina un escucha de MediaQueryListener. Esto es básicamente un alias para {{domxref ("EventTarget.removeEventListener ()")}}, para propósitos de compatibilidad con versiones anteriores.
+
+ +
+
+ +

Ejemplos

+ +

Este ejemplo sencillo crea una MediaQueryList y, a continuación, establece un detector para detectar cuándo cambia el estado de la consulta de medios, ejecutando una función personalizada cuando cambia la apariencia de la página.

+ +
var para = document.querySelector('p');
+
+var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* el ventana tiene 600 píxeles de ancho o menos*/
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* la ventana tiene más de 600 píxeles de ancho */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);
+ +
+

Nota: Puedes encontrar este ejemplo en GitHub (ver el codigo fuente, y también verlo en ejecución).

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}1012.15
New version spec update{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
New version spec update{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/mediaquerylist/matches/index.html b/files/es/web/api/mediaquerylist/matches/index.html new file mode 100644 index 0000000000..c31f6fa707 --- /dev/null +++ b/files/es/web/api/mediaquerylist/matches/index.html @@ -0,0 +1,108 @@ +--- +title: MediaQueryList.matches +slug: Web/API/MediaQueryList/matches +translation_of: Web/API/MediaQueryList/matches +--- +
{{APIRef("CSSOM View")}}
+ +

La propiedad matches de sólo lectura de la interfaz {{domxref ("MediaQueryList")}} es {{domxref ("Boolean")}} que devuelve true si el {{domxref ("document")}} coincide actualmente con el medio lista de consultas, o false si no.

+ +

Sintaxis

+ +
var matches = MediaQueryList.matches;
+ +

Value

+ +

A {{domxref("Boolean")}}; returns true if the {{domxref("document")}} currently matches the media query list, false if not.

+ +

Examples

+ +
var mql = window.matchMedia('(max-width: 600px)');
+
+if(mql.matches) {
+  // media query test returning true
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSSOM View", "#dom-mediaquerylist-matches", "matches")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}1012.15
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/mediaquerylist/removelistener/index.html b/files/es/web/api/mediaquerylist/removelistener/index.html new file mode 100644 index 0000000000..2689dde854 --- /dev/null +++ b/files/es/web/api/mediaquerylist/removelistener/index.html @@ -0,0 +1,149 @@ +--- +title: MediaQueryList.removeListener() +slug: Web/API/MediaQueryList/removeListener +translation_of: Web/API/MediaQueryList/removeListener +--- +
{{APIRef("CSSOM View")}}
+ +

El método removeListener() de la interfaz {{domxref ("MediaQueryList")}} elimina un escucha de MediaQueryListener.

+ +

Esto es básicamente un alias para {{domxref("EventTarget.removeEventListener()")}}, para propósitos de compatibilidad con versiones anteriores: en los navegadores antiguos puede usar removeEventListener().

+ +

Sintaxis

+ +
MediaQueryList.removeListener(func)
+ +

Parametros

+ +
+
func
+
Una función o referencia de función que representa la función de devolución de llamada que desea eliminar. En la implementación original, la devolución de llamada era un objeto {{domxref ("MediaQueryListListener")}} no estándar. En la nueva implementación se utiliza el mecanismo de eventos estándar y la devolución de llamada es una función estándar.
+
+ +

Return value

+ +

Void.

+ +

Ejemplos

+ +
var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* the viewport is 600 pixels wide or less */
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* the viewport is more than than 600 pixels wide */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);
+
+// Later on, when it is no longer needed
+mql.removeListener(screenTest);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName("CSSOM View", "#dom-mediaquerylist-removelistener", "removeListener")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}1012.15
New version spec update{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
New version spec update{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/mediasource/index.html b/files/es/web/api/mediasource/index.html new file mode 100644 index 0000000000..2f5ff914c9 --- /dev/null +++ b/files/es/web/api/mediasource/index.html @@ -0,0 +1,182 @@ +--- +title: MediaSource +slug: Web/API/MediaSource +translation_of: Web/API/MediaSource +--- +

{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}

+ +

El MediaSource interfaz representa un recurso de media en datos por un {{domxref("HTMLMediaElement")}} objeto. Un MediaSource objeto puede ser atribuido a un {{domxref("HTMLMediaElement")}} para ser reproducido por el usuario.

+ +

Constructor

+ +
+
{{domxref("MediaSource.MediaSource", "MediaSource()")}}
+
construye y retorna un MediaSource objeto sin asociar un recurso con buffers.
+
+ +

Propiedades

+ +

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

+ +
+
{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}
+
Returns a {{domxref("SourceBufferList")}} object containing the list of {{domxref("SourceBuffer")}} objects associated with this MediaSource.
+
{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}
+
Returns a {{domxref("SourceBufferList")}} object containing a subset of the {{domxref("SourceBuffer")}} objects contained within {{domxref("SourceBuffers")}} — the list of objects providing the selected video track,  enabled audio tracks, and shown/hidden text tracks.
+
{{domxref("MediaSource.readyState")}} {{readonlyInline}}
+
Returns an enum representing the state of the current MediaSource, whether it is not currently attached to a media element (closed), attached and ready to receive {{domxref("SourceBuffer")}} objects (open), or attached but the stream has been ended via {{domxref("MediaSource.endOfStream()")}} (ended.)
+
{{domxref("MediaSource.duration")}}
+
Gets and sets the duration of the current media being presented.
+
+ +
+
+ +
+
+ +

Methods

+ +

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

+ +
+
{{domxref("MediaSource.addSourceBuffer()")}}
+
Creates a new {{domxref("SourceBuffer")}} of the given MIME type and adds it to the MediaSource's {{domxref("SourceBuffers")}} list.
+
{{domxref("MediaSource.removeSourceBuffer()")}}
+
Removes the given {{domxref("SourceBuffer")}} from the {{domxref("SourceBuffers")}} list associated with this MediaSource object.
+
{{domxref("MediaSource.endOfStream()")}}
+
Signals the end of the stream.
+
+

Static methods

+
+
{{domxref("MediaSource.isTypeSupported()")}}
+
Returns a {{domxref("Boolean")}} value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create {{domxref("SourceBuffer")}} objects for that MIME type.
+
+ +

Examples

+ +

The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here (you can also download the source for further investigation.)

+ +
var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource;
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+};
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{CompatGeckoDesktop("25.0")}}[1]
+ {{CompatGeckoDesktop("42.0")}}		11[2]158
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4.4 +

{{CompatNo}}

+ 		{{CompatNo}}1130{{CompatNo}}
+
+ +

[1] Available after switching the about:config preference media.mediasource.enabled to true. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.

+ +

[2] Only works on Windows 8+.

+ +

See also

+ + diff --git a/files/es/web/api/mediastreamaudiosourcenode/index.html b/files/es/web/api/mediastreamaudiosourcenode/index.html new file mode 100644 index 0000000000..7e620ac305 --- /dev/null +++ b/files/es/web/api/mediastreamaudiosourcenode/index.html @@ -0,0 +1,129 @@ +--- +title: MediaStreamAudioSourceNode +slug: Web/API/MediaStreamAudioSourceNode +tags: + - API + - MediaStreamAudioSourceNode + - Web Audio API +translation_of: Web/API/MediaStreamAudioSourceNode +--- +

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

+ +
+

La interfaz MediaStreamAudioSourceNode representa una fuente de audio compuesta por un WebRTC {{domxref("MediaStream")}} (tal como una cámara web o un micrófono.) Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.

+
+ +

El MediaElementSourceNode no tiene entradas y una y sólo una salida, y es creado usando el método {{domxref("AudioContext.createMediaStreamSource")}}.

+ +

La cantidad de canales en la salida es igual al número de canales en  {{domxref("AudioMediaStreamTrack")}}. Si no existe un flujo de media válido, entonces el número de canales de salida será un canal silencioso.

+ +
+

Nota: MediaStreamAudioSourceNode selecciona la pista de audio automáticamente, y puede que no siempre sea predecible. Usted debería considerar seriamente usar el {{domxref("MediaStreamTrackAudioSourceNode")}} en su lugar, que se crea especificando la pista exacta que desea utilizar.

+
+ + + + + + + + + + + + + + + + +
Número de entradas0
Número de salidas1
Cantidad de canalesdefinido por {{domxref("AudioMediaStreamTrack")}} pasado al método  {{domxref("AudioContext.createMediaStreamSource")}} que lo creó.
+ +

Propiedades

+ +

Heredadas de su padre, {{domxref("AudioNode")}}.

+ +

Métodos

+ +

Heredadas de su padre, {{domxref("AudioNode")}}.

+ +

Ejemplo

+ +

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

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Audio API', '#the-mediastreamaudiosourcenode-interface', 'MediaStreamAudioSourceNode')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico14 {{property_prefix("webkit")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísiticaAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}28 {{property_prefix("webkit")}}{{CompatGeckoMobile("25")}}1.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/mediastreamtrack/index.html b/files/es/web/api/mediastreamtrack/index.html new file mode 100644 index 0000000000..3bc2159332 --- /dev/null +++ b/files/es/web/api/mediastreamtrack/index.html @@ -0,0 +1,181 @@ +--- +title: MediaStreamTrack +slug: Web/API/MediaStreamTrack +translation_of: Web/API/MediaStreamTrack +--- +
{{APIRef("WebRTC")}}
+ +

Sumario

+ +

La interfaz MediaStream  representa un flujo de contenido de los medios. Un flujo consiste en gran cantidad de  tracks, como pistas de audio o video.

+ +

Propiedades

+ +
+
{{domxref("MediaStreamTrack.enabled")}}
+
Es un valor Booleano con un valor de  true si la pista está habilitada, que se permite para renderizar el fujo fuente del medio; o false si está desactivado, ue no está rederizando el flujo de la fuente de medios que el silencio y la oscuridad. Si la pista se ha desconectado, este valor puede ser cambiado, pero no tiene más efecto.
+
{{domxref("MediaStreamTrack.id")}} {{readonlyInline}}
+
Retorna un {{domxref("DOMString")}} que contiene un identificador único (GUID) para la pista; que es generado por le navegador.
+
{{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}
+
Retorna un {{domxref("DOMString")}} se establece en "audio" si la pista es un audio y para "video", si es una pista de video. Este no cambia si la pista se disociada de su fuente.
+
{{domxref("MediaStreamTrack.label")}} {{readonlyInline}}
+
Retorna un {{domxref("DOMString")}} que contiene una etiqueta agente-asignado por el usuario que identifica la fuente de la pista, como en  "internal microphone".  La cadena puede dejarse vacío y está vacía, siempre y cuando ninguna fuente haya sido conectada. Cuando la pista está disociada de la fuente, la etiqueta no cambia.
+
{{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}
+
Retorna un valor booleano con un valor de true si la pista esta silenciada, de lo contrario false.
+
{{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}
+
Retona un valor Booleano con un valor de true  si la pista es de solo lectura ( una fuente de archivo de vídeo o una cámara que los ajustes no puedan ser modificados), de lo contrario false.
+
{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}
+
Retorna un valor enumerado dando el estado de la pista. Este toma uno de los siguientes valores: +
    +
  • "live" el cual indica  que una entrada es conectada y hace de esta el mejor esfuerzo en proveer datos en tiempo real. En este caso, la salida de datos puede ser cambiada a on u off usando el atributo MediaStreamTrack.enabled.
    • +
  • "ended" este indica que la entrada no esta obteniendo algun dato mas y negará proporcionar nuevos datos.
    • +
+
+
{{domxref("MediaStreamTrack.remote")}} {{readonlyInline}}
+
retorna un booleano con un valor de verdadero si la pista es originada por  {{domxref("RTCPeerConnection")}}, falso a cualquier otro.
+
+ +

Disparador de eventos

+ +
+
{{domxref("MediaStreamTrack.onstarted")}}
+
Es un contenedor {{domxref("EventHandler")}} de la acción a realizar cuando el evento {{event("started")}} es disparado sobre el objeto,  que es cuando un objeto {{domxref("MediaStreamTrack")}} es añadido.
+
{{domxref("MediaStreamTrack.onmute")}}
+
Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un evento {{event("mute")}} es disparado sobre el objeto, que es cuando la transmición es terminada.
+
{{domxref("MediaStreamTrack.onunmute")}}
+
Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un evento  {{event("unmute")}} es disparado sobre el objeto, que es cuando un objeto  {{domxref("MediaStreamTrack")}} es removido por este.
+
{{domxref("MediaStreamTrack.onoverconstrained")}}
+
Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un objeto {{event("overconstrained")}} es disparado sobre el objeto, que es cuando un objeto  {{domxref("MediaStreamTrack")}}  es removido por este.
+
{{domxref("MediaStreamTrack.oneended")}}
+
Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un evento {{event("ended_(MediaStream)", "ended")}} es disparado sobre el objeto, que es cuando un objeto  {{domxref("MediaStreamTrack")}} es removido por este.
+
+ +

Métodos

+ +
+
{{domxref("MediaStreamTrack.getConstraints()")}}
+
 
+
{{domxref("MediaStreamTrack.applyConstraints()")}}
+
 
+
{{domxref("MediaStreamTrack.getSettings()")}}
+
 
+
{{domxref("MediaStreamTrack.getCapabilities()")}}
+
 
+
{{domxref("MediaStreamTrack.clone()")}}
+
 
+
{{domxref("MediaStreamTrack.stop()")}}
+
Detiene la reproducción del origen asociado a la pista, pero el origen y la pista son desasociados. El estado de la pista es un conjunto de ended.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}{{Spec2('Media Capture')}}Initial definition
+ +

Compatibilidad de los navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
stop(){{CompatUnknown}}{{CompatGeckoDesktop(34)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
muted, onmuted, onunmuted, readonly, readyState, remote, onstarted, onended, onoverconstrained, appendConstraint(), applyConstraints(), constraints(), getConstraints(){{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+ + + + + + +
stop()
+ 		{{CompatUnknown}}{{CompatGeckoDesktop(34)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
muted, onmuted, onunmuted, readonly, readyState, remote, onstarted, onended, onoverconstrained, appendConstraint(), applyConstraints(), constraints(), getConstraints(){{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Ver támbien

+ + diff --git a/files/es/web/api/messageevent/index.html b/files/es/web/api/messageevent/index.html new file mode 100644 index 0000000000..1d1e898be5 --- /dev/null +++ b/files/es/web/api/messageevent/index.html @@ -0,0 +1,195 @@ +--- +title: MessageEvent +slug: Web/API/MessageEvent +translation_of: Web/API/MessageEvent +--- +
{{APIRef("HTML DOM")}}
+ +

La interface MessageEvent representa un mensaje recibido por un objeto de destino.

+ +

Este es usado  para representar mensajes en : 

+ + + +

La acción desencadenada por este evento es definida en una función establecida como el controlador de eventos para el evento pertinente {{event("message")}} ( es decir :  Usando un manejador de onmessage  como se lista arriba).

+ +

{{AvailableInWorkers}}

+ +

Constructor

+ +
+
{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
+
Crear un nuevo MessageEvent.
+
+ +

Propiedades

+ +

Esta interface tambien herada propiedadesde desde su padre {{domxref("Evento")}}.

+ +
+
{{domxref("MessageEvent.data")}} {{readonlyInline}}
+
La información enviada por el emisor del mensaje.
+
{{domxref("MessageEvent.origin")}} {{readonlyInline}}
+
{{domxref("USVString")}} es una representacion del origen del emisor del mensaje. 
+
{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
+
{{domxref("DOMString")}} es una representación de una ID unico para el evento.
+
{{domxref("MessageEvent.source")}} {{readonlyInline}}
+
El MessageEventSource (El cual puede ser un {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} object) es ima representación del mensaje emitido.
+
{{domxref("MessageEvent.ports")}} {{readonlyInline}}
+
Un  array de objetos {{domxref("MessagePort")}} representa los puertos asociados al canal, el mensaje se esta enviado a traves de (donde sea apropiado,  por ejemplo, en mensajes de canal o al enviar un mensaje a un trabajador compartido).
+
+ +

Metodos

+ +

Esta interface tambien herada propiedadesde desde su padre, {{domxref("Evento")}}.

+ +
+
{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}
+
Inicializar un vento de mensaje. No use esto mas — en vez de eso use el constructor {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} .
+
+ +

Ejemplos

+ +

En nuestro Ejemplo basico de trabajador compartido(Ejecutar trabajador compartdo ), Tenemos dos paginas HTML, cada una de las cuales usa algo de JavaScript para mejorar un calculo simple. Los diferentes scripts estan usando el mismo archivo de trabajo para mejorar el calculo — Ambos pueden accederlo,  Incluso si sus paginas esta corriendo n diferentes ventanas. 

+ +

The following code snippet shows creation of a SharedWorker object using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. Both scripts contain this:

+ +
var myWorker = new SharedWorker('worker.js');
+
+ +

Both scripts then access the worker through a {{domxref("MessagePort")}} object created using the {{domxref("SharedWorker.port")}} property. If the onmessage event is attached using addEventListener, the port is manually started using its start() method:

+ +
myWorker.port.start();
+ +

When the port is started, both scripts post messages to the worker and handle messages sent from it using port.postMessage() and port.onmessage, respectively:

+ +
first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

Inside the worker we use the {{domxref("SharedWorkerGlobalScope.onconnect")}} handler to connect to the same port discussed above. The ports associated with that worker are accessible in the {{event("connect")}} event's ports property — we then use {{domxref("MessagePort")}} start() method to start the port, and the onmessage handler to deal with messages sent from the main threads.

+ +
onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9{{CompatUnknown}}{{CompatSafari('10.0+')}}
origin as {{domxref("USVString")}} and source as MessageEventSource{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.0+
origin as {{domxref("USVString")}} and source as MessageEventSource{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("55.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver tambien

+ + diff --git a/files/es/web/api/mimetype/index.html b/files/es/web/api/mimetype/index.html new file mode 100644 index 0000000000..0594c0c5eb --- /dev/null +++ b/files/es/web/api/mimetype/index.html @@ -0,0 +1,97 @@ +--- +title: MimeType +slug: Web/API/MimeType +tags: + - API + - Interface + - Plugins + - Referencia +translation_of: Web/API/MimeType +--- +

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

+ +

La interfaz MimeType provee información acerca de un tipo MIME asociado con un plugin en particular. {{domxref("NavigatorPlugins.mimeTypes")}} retorna un arreglo de estos objetos.

+ +

Propiedades

+ +
+
{{domxref("MimeType.type")}}
+
Retorna el tipo MIME del plugin asociado.
+
{{domxref("MimeType.description")}}
+
Retorna la descripción del plugin asociado o un string vacío en caso de no haberla.
+
{{domxref("MimeType.suffixes")}}
+
Un string que contiene las extensiones de archivo válidas para los datos mostrados por el plugin, o un string vacío si una extensión de archivo no es válida para el módulo en particular. Por ejemplo, un módulo de decriptación de contenido del navegador podría aparecer en la lista de plugins, pero soportar más extensiones de archivo de las que se pueden anticipar. Por lo tanto, podría retornar un string vacío.
+
{{domxref("MimeType.enabledPlugin")}}
+
Retorna una instancia de {{domxref("Plugin")}} que contiene la información acerca del plugin en sí mismo.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG','#mimetype','MimeType')}}{{Spec2('HTML WHATWG')}}Definición Inicial.
+ +

Compatibilidad de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/mouseevent/index.html b/files/es/web/api/mouseevent/index.html new file mode 100644 index 0000000000..74aabe922e --- /dev/null +++ b/files/es/web/api/mouseevent/index.html @@ -0,0 +1,298 @@ +--- +title: MouseEvent +slug: Web/API/MouseEvent +tags: + - API +translation_of: Web/API/MouseEvent +--- +

{{APIRef("DOM Events")}}

+ +

The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.

+ +

MouseEvent derives from {{domxref("UIEvent")}}, which in turn derives from {{domxref("Event")}}. Though the {{domxref("MouseEvent.initMouseEvent()")}} method is kept for backward compatibility, creating of a MouseEvent object should be done using the {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} constructor.

+ +

Several more specific events derivate from MouseEvent: {{domxref("WheelEvent")}} and {{domxref("DragEvent")}}.

+ +

Constructor

+ +
+
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}
+
Creates a MouseEvent object.
+
+ +

Properties

+ +

This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.altKey")}} {{readonlyinline}}
+
Returns true if the alt key was down when the mouse event was fired.
+
{{domxref("MouseEvent.button")}} {{readonlyinline}}
+
The button number that was pressed when the mouse event was fired. 
+
{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}
+
+

The buttons being pressed when the mouse event was fired

+
+
{{domxref("MouseEvent.clientX")}} {{readonlyinline}}
+
The X coordinate of the mouse pointer in local (DOM content) coordinates.
+
{{domxref("MouseEvent.clientY")}} {{readonlyinline}}
+
The Y coordinate of the mouse pointer in local (DOM content) coordinates.
+
{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}
+
Returns true if the control key was down when the mouse event was fired.
+
{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}
+
Returns true if the meta key was down when the mouse event was fired.
+
{{domxref("MouseEvent.movementX")}} {{readonlyinline}}
+
The X coordinate of the mouse pointer relative to the position of the last {{event("mousemove")}} event.
+
{{domxref("MouseEvent.movementY")}} {{readonlyinline}}
+
The Y coordinate of the mouse pointer relative to the position of the last {{event("mousemove")}} event.
+
{{domxref("MouseEvent.region")}} {{readonlyinline}}
+
Returns the id of the hit region affected by the event. If no hit region is affected, null is returned.
+
{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}
+
+

The secondary target for the event, if there is one.

+
+
{{domxref("MouseEvent.screenX")}} {{readonlyinline}}
+
The X coordinate of the mouse pointer in global (screen) coordinates.
+
{{domxref("MouseEvent.screenY")}} {{readonlyinline}}
+
The Y coordinate of the mouse pointer in global (screen) coordinates.
+
{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}
+
Returns true if the shift key was down when the mouse event was fired.
+
{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}
+
The button being pressed when the mouse event was fired.
+
{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}
+
The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
+
{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}
+
+

The type of device that generated the event (one of the MOZ_SOURCE_* constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). The possible values are:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Constant nameValueDesription
MouseEvent.MOZ_SOURCE_UNKNOWN0The input device is unknown.
MouseEvent.MOZ_SOURCE_MOUSE1The event was generated by a mouse (or mouse-like device).
MouseEvent.MOZ_SOURCE_PEN2The event was generated by a pen on a tablet.
MouseEvent.MOZ_SOURCE_ERASER3The event was generated by an eraser on a tablet.
MouseEvent.MOZ_SOURCE_CURSOR4The event was generated by a cursor.
MouseEvent.MOZ_SOURCE_TOUCH5The event was generated on a touch interface.
MouseEvent.MOZ_SOURCE_KEYBOARD6The event was generated by a keyboard.
+
+
+ +

Methods

+ +

This interface also inherits methods of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.getModifierState()")}}
+
Returns the current state of the specified modifier key. See the {{domxref("KeyboardEvent.getModifierState")}}() for details.
+
{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}
+
Initializes the value of a MouseEvent created. If the event has already being dispatched, this method does nothing.
+
+ +

Example

+ +

This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. 

+ +
function simulateClick() {
+  var evt = new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);
+ +
<p><label><input type="checkbox" id="checkbox"> Checked</label>
+<p><button id="button">Click me</button>
+ +

Click on the button to see how the sample works:

+ +

{{ EmbedLiveSample('Example', '', '', '') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}{{Spec2('HTML WHATWG')}}From {{SpecName('DOM3 Events')}}, added the region property.
{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}{{Spec2('Pointer Lock')}}From {{SpecName('DOM3 Events')}}, added movementX and movementY properties.
{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}{{Spec2('DOM3 Events')}}From {{SpecName('DOM2 Events')}}, added the MouseEvent() constructor, the getModifierState() method and the buttons property.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{domxref("MouseEvent.movementX","movementX")}}
+ {{domxref("MouseEvent.movementY","movementY")}}		{{CompatVersionUnknown()}} {{property_prefix("moz")}}{{CompatVersionUnknown()}} {{property_prefix("webkit")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{ domxref("MouseEvent.buttons", "buttons") }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{ domxref("MouseEvent.which", "which") }}1.01.09.05.01.0
{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}{{CompatGeckoDesktop(15)}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}{{CompatGeckoDesktop(11)}}{{CompatVersionUnknown()}}{{ CompatUnknown() }}{{CompatVersionUnknown()}}{{ CompatUnknown() }}
{{domxref("MouseEvent.region")}}{{CompatGeckoDesktop(32)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/es/web/api/mouseevent/initmouseevent/index.html b/files/es/web/api/mouseevent/initmouseevent/index.html new file mode 100644 index 0000000000..0e5a795b27 --- /dev/null +++ b/files/es/web/api/mouseevent/initmouseevent/index.html @@ -0,0 +1,60 @@ +--- +title: event.initMouseEvent +slug: Web/API/MouseEvent/initMouseEvent +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/MouseEvent/initMouseEvent +--- +

{{ApiRef("DOM Events")}}{{deprecated_header}}

+ +
+

No utilize este método porque está obsoleto.

+ +

Usa constructores de eventos específicos, como {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}. La página Creando y disparando eventos da más información sobre cómo usarlos.

+
+ +

Resumen

+ +

Asigna el valor inicial de un evento de ratón una vez creado (normalmente usando el método document.createEvent).

+ +

Sintaxis

+ +
event.initMouseEvent(type,canBubble,cancelable,view,detail,screenX,screenY,clientX,clientY,ctrlKey,altKey,shiftKey,metaKey,button,relatedTarget);
+
+ +
+
type
+
la cadena del type. Los tipos posibles para un evento de ratón incluyen: click, mousedown, mouseup, mouseover, mousemove, mouseout.
+
canBubble
+
si el elemento puede ser recurrente. Pone el valor de event.bubbles.
+
cancelable
+
si la acción inicial del evento puede o no ser cancelada. Pone el valor de event.cancelable.
+
view
+
el valor AbstractView del evento. Aquí debes pasar el objeto window. Pone el valor de event.view.
+
detail
+
el contador de clic del evento. Pone el valor de event.detail.
+
screenX
+
la coordenada x en pantalla donde ha ocurrido el evento. Pone el valor de event.screenX.
+
screenY
+
la coordenada y en pantalla donde ha ocurrido el evento. Pone el valor de event.screenY.
+
clientX
+
la coordenada client x donde ha ocurrido el evento. Pone el valor de event.clientX.
+
clientY
+
la coordenada client y donde ha ocurrido el evento. Pone el valor de event.clientY.
+
ctrlKey
+
si se ha pulsado o no la tecla Control mientras ha ocurrido el evento. Pone el valor de event.ctrlKey.
+
altKey
+
si se ha pulsado o no la tecla Alt mientras ha ocurrido el evento. Pone el valor de event.altKey.
+
shiftKey
+
si se ha pulsado o no la tecla Mayúsculas mientras ha ocurrido el evento. Pone el valor de event.shiftKey.
+
metaKey
+
si se ha pulsado o no una meta tecla mientras ha ocurrido el evento. Pone el valor de event.metaKey.
+
button
+
el ratón del evento event.button.
+
relatedTarget
+
el destino del evento related EventTarget. Sólo se usa con algún tipo de evento (ejemplo: mouseover y mouseout). En otros casos, devuelve null.
+
+ +

Especificación

+ +

DOM Level 2 Events: initMouseEvent

diff --git a/files/es/web/api/mouseevent/shiftkey/index.html b/files/es/web/api/mouseevent/shiftkey/index.html new file mode 100644 index 0000000000..7f2fc25d61 --- /dev/null +++ b/files/es/web/api/mouseevent/shiftkey/index.html @@ -0,0 +1,126 @@ +--- +title: MouseEvent.shiftKey +slug: Web/API/MouseEvent/shiftKey +translation_of: Web/API/MouseEvent/shiftKey +--- +

{{APIRef("DOM Events")}}

+ +

El evento de MouseEvent.shiftKey es una propiedad de solo lectura que indica si la tecla de shift se presionó (true) o no (false).

+ +

Sintaxis

+ +
var shiftKeyPressed = instanceOfMouseEvent.shiftKey
+
+ +

Valor que retorna

+ +

Un valor booleano

+ +

Ejemplo

+ +
<html>
+<head>
+<title>Ejemplo de shiftKey</title>
+
+<script type="text/javascript">
+
+function showChar(e){
+  alert(
+    "Tecla presionada: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "SHIFT presionada: " + e.shiftKey + "\n"
+    + "ALT presionado: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="showChar(event);">
+<p>Presione cualquier tecla, con o sin la tecla SHIFT.<br />
+También puede utilizar SHIFT junto a la tecla ALT.</p>
+</body>
+</html>
+
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM3 Events','#widl-MouseEvent-shiftKey','MouseEvent.shiftKey')}}{{Spec2('DOM3 Events')}}Sin cambios desde {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.shiftKey')}}{{Spec2('DOM2 Events')}}Primera definición.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver más

+ + diff --git a/files/es/web/api/mozsocial/closepanel/index.html b/files/es/web/api/mozsocial/closepanel/index.html new file mode 100644 index 0000000000..1b2305967f --- /dev/null +++ b/files/es/web/api/mozsocial/closepanel/index.html @@ -0,0 +1,19 @@ +--- +title: MozSocial.closePanel +slug: Web/API/MozSocial/closePanel +tags: + - Social +translation_of: Archive/Social_API/MozSocial/closePanel +--- +

{{ ApiRef() }}

+

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

Resumen

+

Cierra el panel social que está actualmente abierto en el panel del proveedor de servicios sociales de nivel superior.

+

Sintaxis

+
MozSocial.closePanel();
+
+

Parametros

+

Ninguno.

+

Especificación

+

No es parte de ninguna especificación.

diff --git a/files/es/web/api/mozsocial/getattention/index.html b/files/es/web/api/mozsocial/getattention/index.html new file mode 100644 index 0000000000..e362749b56 --- /dev/null +++ b/files/es/web/api/mozsocial/getattention/index.html @@ -0,0 +1,19 @@ +--- +title: MozSocial.getAttention +slug: Web/API/MozSocial/getAttention +tags: + - Social +translation_of: Archive/Social_API/MozSocial/getAttention +--- +

{{ ApiRef() }}

+

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

Resumen

+

Ejecuta algunas acciones, posiblemente específicas de la plataforma, diseñadas para obtener la atención del usuario. Esto puede involucrar la reproducción de un efecto de sonido, parpadeo en la pantalla, o mostrando alguna otra forma de efecto.

+

Sintaxis

+
MozSocial.getAttention();
+
+

Parámetros

+

Ninguno.

+

Especificación

+

No es parte de ninguna especificación.

diff --git a/files/es/web/api/mozsocial/getworker/index.html b/files/es/web/api/mozsocial/getworker/index.html new file mode 100644 index 0000000000..e32cc7b240 --- /dev/null +++ b/files/es/web/api/mozsocial/getworker/index.html @@ -0,0 +1,19 @@ +--- +title: MozSocial.getWorker +slug: Web/API/MozSocial/getWorker +translation_of: Archive/Social_API/MozSocial/getWorker +--- +

{{ ApiRef() }}

+

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

Resumen

+

Devuelve una referencia al  worker del servicio de contenidos de redes sociales. Una vez obtenido, puedes llamar a su método postMessage() para comunicarte con él. Puedes usar uno de los  mensajes estándares para redes sociales, o mensajes específicos de ese servicio.

+

Sintaxis

+
var socialWorker = MozSocial.getWorker();
+
+

Parámetros

+

Ninguno.

+

Valor devuelto

+

Una referencia al worker del servicio.

+

Especificación

+

No forma parte de ninguna especificación.

diff --git a/files/es/web/api/mozsocial/index.html b/files/es/web/api/mozsocial/index.html new file mode 100644 index 0000000000..a2f559a9df --- /dev/null +++ b/files/es/web/api/mozsocial/index.html @@ -0,0 +1,44 @@ +--- +title: MozSocial +slug: Web/API/MozSocial +tags: + - API +translation_of: Archive/Social_API/MozSocial +--- +
{{ ApiRef("Social API") }} {{non-standard_header}}{{fx_minversion_header("17.0")}}
+ +

The MozSocial object, returned by the navigator.mozSocial property, is available within the social media provider's panel to provide functionality it may need.

+ +
+

Note: Although Mozilla hopes to submit this API for standardization eventually, it has not yet done so.

+
+ +

Properties

+ +
+
{{domxref("MozSocial.isVisible")}}
+
Returns a Boolean value; the result is true if the content is visible, otherwise it's false.
+
+ +

Methods

+ +
+
{{domxref("MozSocial.closePanel()")}}
+
Closes the currently open flyout panel.
+
{{domxref("MozSocial.getAttention()")}}
+
Performs some action designed to get the user's attention; the exact behavior may vary from platform to platform. This might display a visual effect, play an audible notification, flash the screen, or use some other technique.
+
{{domxref("MozSocial.getWorker()")}}
+
Returns a reference to the service worker; once content has this reference, it can call worker.port.postMessage() method to communicate with the service.
+
{{domxref("MozSocial.openChatWindow()")}}
+
Opens a chat window that is anchored to the bottom of the browser window. Each chat window is expected to be a singular chat, but functionality may vary by provider.
+
{{domxref("MozSocial.openPanel()")}}
+
Opens a flyout panel attached to the sidebar at a given vertical offset. This might be, for example, used to display the actual conversation corresponding to a notification in the sidebar.
+
{{domxref("MozSocial.share()")}}
+
Initiates a share action via the SocialAPI Share panel.  One argument is passed, an object containing "url", "title", "description", "source" and "image".
+
+ +

See also

+ + diff --git a/files/es/web/api/mozsocial/isvisible/index.html b/files/es/web/api/mozsocial/isvisible/index.html new file mode 100644 index 0000000000..7bc90e47da --- /dev/null +++ b/files/es/web/api/mozsocial/isvisible/index.html @@ -0,0 +1,22 @@ +--- +title: MozSocial.isVisible +slug: Web/API/MozSocial/isVisible +tags: + - Social +translation_of: Archive/Social_API/MozSocial/isVisible +--- +

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

{{ ApiRef() }}

+

Resumen

+

Indica si la barra lateral del contenido del proveedor de social media está o no visible actualmente.

+

Sintaxis

+
var visible = navigator.MozSocial.isVisible
+
+

Al retornar, visible es true si la barra lateral es visible actualmente; de otro modo es false.

+

Especificación

+

No es parte de ninguna especificación.

+

Ver también

+ diff --git a/files/es/web/api/mozsocial/openchatwindow/index.html b/files/es/web/api/mozsocial/openchatwindow/index.html new file mode 100644 index 0000000000..26f6b97643 --- /dev/null +++ b/files/es/web/api/mozsocial/openchatwindow/index.html @@ -0,0 +1,26 @@ +--- +title: MozSocial.openChatWindow +slug: Web/API/MozSocial/openChatWindow +translation_of: Archive/Social_API/MozSocial/openChatWindow +--- +

{{ ApiRef() }}

+

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

Resumen

+

Abre una ventana de chat, anclada en la parte inferior de la ventana del navegador. Cada ventana de chat suele ser un one-on-one chat, pero esta funcionalidad puede variar dependiendo del proveedor.

+

Sintaxis

+
MozSocial.openChatWindow(toUrl, callback);
+
+

Parametros

+
+
+ toUrl
+
+ URL a la que se abre la conexión de chat.
+
+ callback
+
+ Un objeto para recibir notificaciones de devolución de llamada en la conexión. La devolución de llamada recibe como entrada una referencia a la ventana de chat. Vease Implementing chat functionality para más detalles.
+
+

Especificaciones

+

No es parte de ninguna especificación.

diff --git a/files/es/web/api/mozsocial/openpanel/index.html b/files/es/web/api/mozsocial/openpanel/index.html new file mode 100644 index 0000000000..9ea96cd5bd --- /dev/null +++ b/files/es/web/api/mozsocial/openpanel/index.html @@ -0,0 +1,30 @@ +--- +title: MozSocial.openPanel +slug: Web/API/MozSocial/openPanel +translation_of: Archive/Social_API/MozSocial/openPanel +--- +

{{ ApiRef() }}

+

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

Resumen

+

Abre un panel desplegable sujeto a la barra lateral del proveedor de medios sociales con una distancia vertical dada.

+

Sintaxis

+
MozSocial.openPanel(toUrl, offset, callback);
+
+

Parámetros

+
+
+ toUrl
+
+ La URL al contenido a presentar en el panel.
+
+ offset
+
+ La distancia vertical, en pixeles, a la cual posicionar el panel desplegable.
+
+ callback
+
+ Un objeto para recibir notificaciones devueltas por la conexión. La llamada de vuelta recibe como entrada una referencia al panel desplegable. <<<OCUPA ENLACE A DETALLES>>>
+
+

Especificación

+

No es parte de ninguna especificación.

diff --git a/files/es/web/api/mutationobserver/index.html b/files/es/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..f0fe2a4b01 --- /dev/null +++ b/files/es/web/api/mutationobserver/index.html @@ -0,0 +1,330 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM")}}

+ +

MutationObserver establece un mecanismo para reaccionar ante cambios en el DOM. Ha sido diseñado como un sustituto de los Mutation Events definidos en las especificaciones de DOM3 Events.

+ +

Constructor

+ +

MutationObserver()

+ +

Constructor para la instaciación de nuevos DOM mutation observers.

+ +
MutationObserver(
+  function callback
+);
+
+ +
Parámetros
+ +
+
callback
+
La función que será llamada en cada mutación del DOM. El observer llamará a esta función con dos argumentos. El primero es un array de objetos, cada uno del tipo MutationRecord. El segundo es la propia instancia del MutationObserver.
+
+ +

Métodos

+ + + + + + + + + + + + + +
void observe( {{domxref("Node")}} target, MutationObserverInit options );
void disconnect();
Array takeRecords();
+ +

observe()

+ +

Registra la instancia del MutationObserver  para recibir notificaciones de las mutaciones del DOM sobre el nodo especificado.

+ +
void observe(
+  {{domxref("Node")}} target,
+  MutationObserverInit options
+);
+
+ +
Parámetros
+ +
+
target
+
El {{domxref("Node")}} sobre el que observar las mutaciones del DOM.
+
options
+
Un objeto MutationObserverInit, que especifica que mutaciones del DOM deben ser informadas.
+
+ +
NOTA: Añadir un observador a un elemento es igual que addEventListener, si usted observa el elemento múltiples veces no hace ninguna diferencia. Si se observa dos veces un elemento, el observe callback no se ejecutará dos veces, ni tampoco tendrá que ejecutar disconnect() dos veces. En otras palabras, una vez el elemento es observado, observarlo de nuevo con la misma instancia del observador no hará nada. Sin embargo, si el callback es diferente por supuesto se le añadirá otro observador.
+ +

disconnect()

+ +

Evita que la instancia de MutationObserver continue recibiendo notificaciones de modificaciones del DOM. Hasta que el método observe() sea usado de nuevo, la función callback no será invocada.

+ +
void disconnect();
+
+ +

takeRecords()

+ +

Vacía la cola de registros de la instancia de MutationObserver devolviendo su contenido.

+ +
Array takeRecords();
+
+ +
Return value
+ +

Returns an Array of MutationRecords.

+ +

MutationObserverInit

+ +

MutationObserverInit es un objeto para el que se pueden especificar las siguientes propiedades:

+ +
NOTA: Como mínimo las propiedades childList, attributes, o characterData deben ser true. En caso contrario, se producirá un error "An invalid or illegal string was specified"
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadDescripción
childList +

Establecer a true si la adición y/o eliminación de elementos hijo del nodo (incluso los nodos text) han se ser observados.

+
attributes +

Establecer a true si los cambios en los atributos deben ser observados

+
characterData +

Establecer a true si los cambios en los datos deben ser observados

+
subtree +

Establecer a true si los cambios tambien deben ser observados en los descendientes.

+
attributeOldValue +

Establecer a true si attributes es true y el valor anterior al cambio debe ser guardado.

+
characterDataOldValue +

Establecer a true si characterData vale true y el dato anterior al cambio de be ser guardado.

+
attributeFilter +

Asigne un array de nombres de atributos locales (sin su espacio de nombres) si no necesita observar los cambios en todos los atributos

+
+ +

MutationRecord

+ +

MutationRecord es el objeto que será pasado a la funcion "callback" del observador. Tiene las siguientes propiedades:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
typeString +

Devuelve:

+ +
    +
  • attributes si el cambio fué en un atributo
    • +
  • characterData si se produjo en un nodo.
    • +
  • childList si se produjo en los nodos del árbol.
    • +
+ +
+
+
target{{domxref("Node")}} +

Devuelve el nodo afectado por el cambio, dependiendo del type:

+ +
    +
  • Para attributes, el elemento cuyos atributos han cambiado.
    • +
  • Para characterData, el nodo CharacterData.
    • +
  • Para childList, El nodo padre cuyos hijos han cambiado.
    • +
+
addedNodes{{domxref("NodeList")}} +

Devuelve los nodos añadidos. Si no tiene nodos añadidos devuelve un NodeList vacio.

+
removedNodes{{domxref("NodeList")}} +

Devuelve los nodos eliminados. Si no tiene nodos eliminados devuelve un NodeList vacio.

+
previousSibling{{domxref("Node")}} +

Devuelve el nodo hermano anterior añadido o eliminado, o el valor null.

+
nextSibling{{domxref("Node")}} +

Devuelve el siguiente nodo hermano añadido o eliminado, o el valor null.

+
attributeNameString +

Devuelve el nombre local del atributo cambiado, o el valor null.

+
attributeNamespaceString +

Devuelve espacio de nombres (namespace) del atributo cambiado, o el valor null.

+
oldValueString +

El valor devuelto depende del type:

+ +
    +
  • Para attributes,el valor anterior del atributo.
    • +
  • Para characterData,los datos antes del cambio
    • +
  • Para childList,devuelve null.
    • +
+
+ +

Ejemplo de uso

+ +

El siguiente ejemplo fué tomado de: this blog post.

+ +
// selecciona el nodo target
+var target = document.querySelector('#some-id');
+
+// Crea una instancia de observer
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// Configura el observer:
+var config = { attributes: true, childList: true, characterData: true };
+
+// pasa al observer el nodo y la configuracion
+observer.observe(target, config);
+
+// Posteriormente, puede detener la observacion
+observer.disconnect();
+
+ +

Lectura adicional

+ + + +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support18 {{ property_prefix("-webkit") }}
+ 26		{{ CompatGeckoDesktop(14) }}11156.0 {{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE  (Windows Phone) Opera MobileSafari Mobile
Basic support{{ CompatUnknown() }}18 {{ property_prefix("-webkit") }}
+ 26		{{ CompatGeckoMobile(14) }}11 (8.1)15 +

6 {{ property_prefix("-webkit")}}

+ +

7

+
+
+ +

 

diff --git a/files/es/web/api/mutationobserver/mutationobserver/index.html b/files/es/web/api/mutationobserver/mutationobserver/index.html new file mode 100644 index 0000000000..faf72f1db3 --- /dev/null +++ b/files/es/web/api/mutationobserver/mutationobserver/index.html @@ -0,0 +1,98 @@ +--- +title: MutationObserver.MutationObserver() +slug: Web/API/MutationObserver/MutationObserver +translation_of: Web/API/MutationObserver/MutationObserver +--- +
{{APIRef("DOM WHATWG")}}
+ +

El constructor DOM MutationObserver() — parte del interface {{domxref("MutationObserver")}} — crea y devuelve un nuevo objeto observer que llamará a la función especificada (callback), cuando tengan lugar cambios sobre el DOM. Estos observadores no se inician inmediatamente; en primer lugar debemos llamar al método {{domxref("MutationObserver.observe", "observe()")}} para establecer qué parte del DOM observar y que tipo de cambios comunicar.

+ +

Sintaxis

+ +
var observer = new MutationObserver(callback);
+ +

Parámetros

+ +
+
callback
+
La función que será llamada con cada cambio en el DOM, determinado por el nodo, subárbol y opciones. Esta función toma dos parámetros de entrada: un array de objetos {{domxref("MutationRecord")}}, con los cambios producidos, y el MutationObserver que llamó a la función. Para mas detalles vea {{anch("Example", "example")}}
+
 
+
+ +

Valor devuelto

+ +

Un nuevo objeto {{domxref("MutationObserver")}}, configurado para llamar a una determinada función cuando se producca un cambio en el DOM.

+ +

Ejemplo

+ +

Este ejemplo crea un nuevo MutationObserver configurado para observar a un nodo y a sus hijos (subárbol), cuando se añadan o eliminen elementos al mismo; tambien observa cualquier cambio en los atributos de los elementos del árbol.

+ +

La función callback

+ +
function callback(mutationList, observer) {
+  mutationList.forEach((mutation) => {
+    switch(mutation.type) {
+      case 'childList':
+        /* Uno o mas hijos han sido añadidos y/o eliminados del árbol;
+           vea mutation.addedNodes y mutation.removedNodes */
+        break;
+      case 'attributes':
+        /* El valor de un atributo en mutation.target ha cambiado;
+           El nombre del atributo esta en mutation.attributeName y
+           su valor anterior en mutation.oldValue */
+        break;
+    }
+  });
+}
+
+ +

La función callback() es llamada cuando el observer detecta cambios que coinciden con la configuración de consulta especificada cuando llamamos a {{domxref("MutationObserver.observe", "observe()")}} para que inicie la observación.

+ +

El tipo de cambio que se produjo (tanto en la lista de hijos como en los atributos) es detectado observando la propiedad {{domxref("MutationRecord.type", "mutation.type")}}

+ +

Crear e iniciar un  "observer"

+ +

Este código establece el proceso de observación

+ +
var targetNode = document.querySelector("#someElement");
+var observerOptions = {
+  childList: true,
+  attributes: true,
+  subtree: true //Omita o ponga false si no quiere controlar los cambios en los hijos
+}
+
+var observer = new MutationObserver(callback);
+observer.observe(targetNode, observerOptions);
+ +

El subárbol deseado se localiza buscando un elemento cuyo ID es "someElement". Un conjunto de opciones para el "observer" es establecido en el registro observerOptions. En él, especificamos los valores true tanto para childList como attributes, para obtener la información deseada.

+ +

Posteriormente instanciamos el objeto observer, especificando la función callback(), e iniciamos la observación de los nodos del DOM llamando al método observe(), pasandole el nodo y las opciones.

+ +

Desde este momento y hasta que se llame al método {{domxref("MutationObserver.disconnect", "disconnect()")}}, la funcion callback() será llamada cada vez que un elemento sea añadido o eliminado del árbol del DOM, cuya raiz es  targetNode, o uno de sus atributos sea cambiado.

+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-mutationobserver-mutationobserver', 'MutationObserver()')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilidad

+ + + +

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

diff --git a/files/es/web/api/mutationobserver/observe/index.html b/files/es/web/api/mutationobserver/observe/index.html new file mode 100644 index 0000000000..607af27cd0 --- /dev/null +++ b/files/es/web/api/mutationobserver/observe/index.html @@ -0,0 +1,95 @@ +--- +title: MutationObserver.observe() +slug: Web/API/MutationObserver/observe +translation_of: Web/API/MutationObserver/observe +--- +
{{APIRef("DOM WHATWG")}}
+ +

El método {{domxref("MutationObserver")}} observe() configura la funcion MutationObserver para que inicie la recepción de cambios en el DOM que coincidan con las opciones dadas.

+ +

Según la configuración, el observador verá un solo {{domxref("Node")}} del árbol del DOM, o ese nodo y alguno o todos los nodos descendientes.

+ +

Para detener al MutationObserver (de modo que la funcion no sea llamada), llame al método {{domxref("MutationObserver.disconnect()")}}.

+ + + +

Sintaxis

+ +
mutationObserver.observe(target[, options])
+
+ +

Parámetros

+ +
+
target
+
 Un {{domxref("Node")}} del DOM (que puede ser un {{domxref("Element")}}) perteneciente al  árbol DOM, o la raiz de un subárbol de nodos, donde observar cambios.
+
options {{optional_inline}}
+
Un objeto {{domxref("MutationObserverInit")}} opcional, que decribe qué cambios en el DOM deben ser enviados a la función callback del observador.
+
+ +

Valor devuelto

+ +

undefined.

+ +

Excepciones

+ +
+
TypeError
+
llamado en cualquiera de las siguientes circunstancias
+
+
    +
  • Las opciones han sido configuradas de tal modo que no existe nada que monitorizar (por ejemplo, si {{domxref("MutationObserverInit.childList")}}, {{domxref("MutationObserverInit.attributes")}}, y {{domxref("MutationObserverInit.characterData")}} son false)
    • +
  • La opcion attributes es  false (indicando que los cambios en los atributos no son monitorizados) y attributeOldValue es true y/o attributeFilter está presente.
    • +
  • Las opciones {{domxref("MutaitonObserverInit.characterDataOldValue", "characterDataOldValue")}} son true pero {{domxref("MutationObserverInit.characterData")}} es false (indicando que los cambios en los caracteres no se guardan).
    • +
+
+
+ +

Notas de uso

+ +

Reutilizar MutationObservers

+ +

Puede llamar varias veces al método observe() del mismo objeto MutationObserver  para ver los cambios en diferentes partes del árbol del DOM y/o diferentes tipos de cambios. Sin embargo ha de tener en cuenta:

+ + + +

La observación sigue a los nodos cuando se desconecta

+ +

Los observadores de cambios tienen como objetivo permitirle ver un conjunto de nodos a lo largo del tiempo, incluso si la conexion entre estos nodos desaparece. Si esta observando un subárbol de nodos, y una parte del subárbol es desconectado y llevado a otra parte del DOM, continuará viendo ese mismo segmento de nodos, recibiendo las mismas llamadas a la función que antes de ser desconectado.

+ +

En otras palabras, hasta que se le haya notificado que los nodos se están separando de su subárbol monitoreado, recibirá notificaciones de los cambios en ese subárbol y sus nodos. Esto evita que pierda los cambios producidos despues de que la conexion se corte y antes de que tenga la oportunidad de especificar un nuevo monitoreo sobre los cambios en el nodo o subárbol movido.

+ +

De manera que en teoria si mantiene la pista de los objetos {{domxref("MutationRecord")}} que describen los cambios, podrá "deshacer" los mismos, devolviendo el DOM a su estado inicial.

+ +

Ejemplo

+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-mutationobserver-observe', 'MutationObserver.observe()')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilidad

+ + + +

{{Compat("api.MutationObserver.observe")}}

diff --git a/files/es/web/api/navigator/donottrack/index.html b/files/es/web/api/navigator/donottrack/index.html new file mode 100644 index 0000000000..fbc7c54b32 --- /dev/null +++ b/files/es/web/api/navigator/donottrack/index.html @@ -0,0 +1,111 @@ +--- +title: Navigator.doNotTrack +slug: Web/API/Navigator/doNotTrack +tags: + - API + - DOM + - Experimental + - Propiedad + - Referencia +translation_of: Web/API/Navigator/doNotTrack +--- +
{{ApiRef("HTML DOM")}}{{SeeCompatTable}}
+ +

Devuelve los ajustes de do-not-track del usuario. Esto es "1" si el usuario ha solicitado no ser rastreado por sitios web, contenidos, o anuncios.

+ +

Sintaxis

+ +
dnt = navigator.doNotTrack;
+
+ +

El valor refleja el de la cabecera do-not-track, ej. valores de {"1", "0", "unspecified" }. Nota: Antes de Gecko 32, Gecko empleaba los valores { "yes", "no", "unspecified"} (bug 887703).

+ +

Ejemplo

+ +
console.log(navigator.doNotTrack);
+// imprime "1" si DNT está habilitado; "0" si el usuario ha aceptado el rastreo; en caso contrario es "unspecified"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Tracking", "#widl-Navigator-doNotTrack", "Navigator.doNotTrack")}}{{Spec2("Tracking")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico23{{CompatGeckoDesktop("9.0")}}[1]9[2]
+ 11[3]		125.1[4]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}[1]{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Antes de Gecko 32 Firefox reporta navigator.doNotTrack con valores de yes y no en lugar de 1 y 0.

+ +

[2] Internet Explorer 9 y 10 utilizan un prefijo, ej. navigator.msDoNotTrack.

+ +

[3] Internet Explorer 11 y Edge utilizan window.doNotTrack en lugar de navigator.doNotTrack.

+ +

[4] Safari 7.1.3+ utiliza window.doNotTrack en lugar de navigator.doNotTrack.

+ +

Vea también

+ + diff --git a/files/es/web/api/navigator/getusermedia/index.html b/files/es/web/api/navigator/getusermedia/index.html new file mode 100644 index 0000000000..e3fd046743 --- /dev/null +++ b/files/es/web/api/navigator/getusermedia/index.html @@ -0,0 +1,184 @@ +--- +title: Navigator.getUserMedia +slug: Web/API/Navigator/getUserMedia +translation_of: Web/API/Navigator/getUserMedia +--- +

Pide al usuario permiso para usar un dispositivo multimedia como una cámara o micrófono. Si el usuario concede este permiso, el successCallback es invocado en la aplicación llamada con un objeto LocalMediaStream como argumento.

+ +

Sintaxis

+ +
navigator.getUserMedia ( constraints, successCallback, errorCallback );
+ +

Ejemplo

+ +

Aquí  hay un ejemplo usando getUserMedia() con los prefijos del navegador.

+ +
navigator.getMedia = ( navigator.getUserMedia ||
+                       navigator.webkitGetUserMedia ||
+                       navigator.mozGetUserMedia);
+
+navigator.getMedia (
+
+   // Restricciones (contraints) *Requerido
+   {
+      video: true,
+      audio: true
+   },
+
+   // Funcion de finalizacion (Succes-Callback) *Requerido
+   function(localMediaStream) {
+      var video = document.querySelector('video');
+      video.src = window.URL.createObjectURL(localMediaStream);
+      video.onloadedmetadata = function(e) {
+         // Haz algo con el video aquí.
+      };
+   },
+
+   // errorCallback *Opcional
+   function(err) {
+    console.log("Ocurrió el siguiente error: " + err);
+   }
+
+);
+ +

Parámetros

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Parámetro +

Requerido/Opcional

+ 		Descripción
constraintsRequeridoEl tipo de multimedia que soporta el objeto LocalMediaStream devuelto en el successCallback.
successCallback RequeridoLa función a invocar cuando se pasa el objeto LocalMediaStream.
errorCallbackOpcionalLa función que se invoca en la aplicación si falla la llamada.
+ +

constraints

+ +

El parámetro constraints es un objeto MediaStreamConstraints con dos miembros booleanos: video y audio. Estos describen el los tipos de multimedia soportados por el objeto LocalMediaStream. Uno o ambos deben ser especificados para validar el argumento del parametro constraint. Si un constraint especificado no es soportado por el navegador, getUserMedia llama a la función errorCallback con el error NOT_SUPPORTED_ERROR. Si el navegador no puede encontrar ninguna fuente multimedia con el tipo especificado, getUserMedia llama a la función errorCallback con el error MANDATORY_UNSATISFIED_ERR.

+ +

Si el valor o el miembro no es especificado en el objeto, el valor del miembro por defecto será falso. El siguiente ejemplo muestra como definir el constraints para audio y video:

+ +
{ video: true, audio: true }
+ +

successCallback

+ +

La función getUserMedia llamará a la función especificada en el successCallback con el objeto LocalMediaStream que contenga la secuencia multimedia. Puedes asignar el objeto al elemento apropiado y trabajar con él, como se muestra en el siguiente ejemplo:

+ +
function(localMediaStream) {
+   var video = document.querySelector('video');
+   video.src = window.URL.createObjectURL(localMediaStream);
+   video.onloadedmetadata = function(e) {
+      // Haz algo aquí con el video.
+   };
+},
+ +

errorCallback

+ +

La función getUserMedia llama a la función indicada en el errorCallback con un código como argumento. Los códigos de error se describen a continuación:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Error Descripción 
PERMISSION_DENIED El usuario denegó el permiso para usar el dispositivo multimadia requerido para esta operación. 
NOT_SUPPORTED_ERROR Un constraint especificado no es soportado por el navegador.
MANDATORY_UNSATISFIED_ERROR No se encontraron fuentes multimedia del tipo especificado en el constraints.
NO_DEVICES_FOUNDNo se encontró ninguna webcam instalada.
+ +

Compatibilidad con los navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Stream API 21{{property_prefix("webkit")}} 20{{property_prefix("moz")}} {{CompatNo}} 12{{CompatUnknown}} 
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Stream API {{CompatNo}} {{CompatNo}}{{CompatUnknown}} 12{{CompatNo}} 
+
+ +

Actualmente el uso de WebRTC para acceder a la cámara esta soportado en Chrome, Opera y Firefox 20.

+ +

Vease también

+ + diff --git a/files/es/web/api/navigator/id/index.html b/files/es/web/api/navigator/id/index.html new file mode 100644 index 0000000000..707d9a6255 --- /dev/null +++ b/files/es/web/api/navigator/id/index.html @@ -0,0 +1,16 @@ +--- +title: navigator.id +slug: Web/API/Navigator/id +translation_of: Archive/Navigator-id +--- +
{{ ApiRef("Persona") }}
+ +

Summary

+ +

The BrowserID protocol defines a new id property on the {{ domxref ("window.navigator")}} object, through which it exposes the BrowserID API, that is the {{domxref("IdentityManager")}} intreface. This API has gone through several significant revisions. Each generation is listed separately below.

+ +

Syntax

+ +
var id = navigator.id
+ +

 

diff --git a/files/es/web/api/navigator/index.html b/files/es/web/api/navigator/index.html new file mode 100644 index 0000000000..6c38d2ca6b --- /dev/null +++ b/files/es/web/api/navigator/index.html @@ -0,0 +1,141 @@ +--- +title: Navigator +slug: Web/API/Navigator +tags: + - API + - HTML-DOM +translation_of: Web/API/Navigator +--- +

{{Apiref}}

+ +

La interfaz Navigator representa el estado y la identidad del user agent. Es completamente consultable y es posible registrar scripts para que ejecuten diversas actividades.

+ +

Un objeto Navigator puede ser obtenido usando la propiedad de sólo lectura {{domxref("Window.navigator")}}.

+ +

Propiedades

+ +

No hereda ninguna propiedad, pero implementa las definidas en {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorCookies")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}, y {{domxref("NavigatorUserMedia")}}.

+ +

Estándar

+ +
+
{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un arreglo que contiene cada objeto {{domxref("VRDisplay")}} que está siendo presentado en el momento ({{domxref("VRDisplay.ispresenting")}} es true).
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve el nombre código interno del navegador actual. No confie en que esta propiedad devuelva siempre el valor correcto.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("DOMString")}} con el nombre oficial del navegador. No confie en que esta propiedad devuelva siempre el valor correcto. 
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve la versión del navegador como un {{domxref("DOMString")}}. No confie en que esta propiedad devuelva siempre el valor correcto.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Devuelve un objeto de tipo {{domxref("BatteryManager")}} que puede utilizar para obtener la información del estado de carga de la batería.
+
{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Provee un objeto {{domxref("NetworkInformation")}} con la información sobre la conexión a la red de un dispositivo.
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Devuelve un objeto {{domxref("Geolocation")}} que permite el acceso a la ubicación del dispositivo.
+
{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}
+
Devuelve el número de núcleos de procesador lógicos disponibles.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un valor {{domxref("Boolean")}} que indica si el navegador tiene o no habilitado Java.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Devuelve un valor {{domxref("DOMString")}} que representa el idioma elegido por el usuario, generalmente el idioma de la interfaz del navegador. Si no se puede identificar el idioma, devuelve un valor null.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Devuelve un arreglo de {{domxref("DOMString")}} que representan los idiomas conocidos por el usuario, en orden de preferencia.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Devieñve im {{domxref("MimeTypeArray")}} que enlista los tipos MIME soportados por el navegador.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Devuelve un valor {{domxref("Boolean")}} que indica si el navegador está trabajando en línea.
+
{{domxref("Navigator.oscpu")}}
+
Devuelve una cadena de texto que representa al sistema operativo actual.
+
{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}
+
;
+
Devuelve un objeto {{domxref("Permissions")}} que puede ser usado para consultar y actualizar estatus de permisos de las APIs, acorde a la API Permissions.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve una cadena de texto que representa la plataforma del navegador. No confíe en que esta función devuelva un valor significativo.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("PluginArray")}} que enlista los plugins instalados en el navegador.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Siempre devuelve 'Gecko', en cualquier navegador. Esta propiedad es mantenido únicamente por razones de compatibilidad.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Devuelve la cadena de agente usuario del navegador actual.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Devuelve un objeto {{domxref("ServiceWorkerContainer")}}, el cual provee acceso a registro, eliminación, actualización y comunicación con los objetos {{domxref("ServiceWorker")}} para documentos asociados.
+
+ +

No Estándar

+ +
+

Dispositivos con Firefox OS añaden más propiedades no estándares. Puede consultarlas en el artículo de extensiones de Navigator de Firefox OS.

+
+ +
+
{{domxref("Navigator.buildID")}} {{non-standard_inline}}
+
Devuelve el identificador de la compilación del navegador(p.ej., "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Devuelve un booleano que indica si el navegador tiene activadas las cookies.
+
{{domxref("Navigator.credentials")}} {{non-standard_inline}}
+
Devuelve la interfaz {{domxref("CredentialsContainer")}}, la cual expone métodos para solicitar credenciales y notificar al agente usuario cuando ocurran eventos de interés, como inicios o cierres de sesión.
+
{{domxref("Navigator.doNotTrack")}} {{non-standard_inline}}
+
Reporta el valor de la preferencia do-not-track. Cuando su valor es positivo ("yes", "1"), el sitio o aplicación web no debe rastrear al usuario.
+
{{domxref("Navigator.id")}} {{non-standard_inline}}
+
Devuelve el objeto {{domxref("window.navigator.id", "id")}}, el cual se puede usar para añadir soporte a BrowserID en el sitio web.
+
{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}
+
Devuelve una referencia a la interfaz {{domxref("MediaDevices")}}.
+
{{domxref("Navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("Navigator.webkitNotification")}}
+
Devuelve un objeto {{domxref("navigator.mozNotification", "notification")}} que puede ser usado para enviar notificaciones al usuario desde la aplicación web.
+
{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}
+
El objeto devuelto por la propiedad navigator.mozSocial, está disponible en el panel de proveedor de medios sociales para proporcionar funcionalidad la que se necesite.
+
{{domxref("Navigator.presentation")}} {{non-standard_inline}}
+
Devuelve una referencia a la API {{domxref("Presentation")}}.
+
{{domxref("Navigator.productSub")}} {{non-standard_inline}}
+
Devuelve el número de compilación del navegador actual (p.ej., "20060909").
+
{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}
+
Devuelve una cadena de texto vacía. En Netscape 4.7x, devuelve "US & CA domestic policy" o "Export policy".
+
{{domxref("Navigator.standalone")}} {{non-standard_inline}}
+
Devuelve un booleano que indica si el navegador está ejecutándose en modo standalone. Disponible sólo para Safari de iOS de Apple.
+
{{domxref("Navigator.vendor")}} {{non-standard_inline}}
+
Devuelve el nombre del fabricante del navegador actual (p.ej., "Netscape6").
+
{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}
+
Devuelve la versión de fabricante (p.ej. "6.1").
+
{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}
+
Devuelve un objeto PointerLock para la API Mouse Lock.
+
+ +

Métodos

+ +

No hereda ninguna propiedad, pero implementa las definidas en {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, y {{domxref("NavigatorStorageUtils")}}.

+ +

Estándar

+ +
+
{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}
+
Devuelve una promesa que se resuelve en un arreglo de objetos {{domxref("VRDisplay")}} que representan cualquier dispositivo VR conectado a la computadora que esté disponible.
+
{{domxref("Navigator.getUserMedia", "NavigatorUserMedia.getUserMedia()")}}
+
Después de solicitar permiso al usuario, devuelve el stream de audio o video asociado a la cámara o micrófono de la computadora local.
+
{{domxref("Navigator.registerContentHandler()")}}
+
Permite a los web sites registrarse como posibles controladores de un tipo MIME determinado.
+
{{domxref("Navigator.registerProtocolHandler()")}}
+
Permite a los sitios webs registrarse como posibles controladores de un protocolo determinado.
+
{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}
+
Devuelve un objeto {{jsxref("Promise")}} para un objeto MediaKeySystemAccess.
+
{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}
+
Usado para transferir, de forma asíncrona, conjuntos pequeños de datos HTTP del agente usuario al servidor.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Devuelve false. Las funciones taint/untaint de JavaScript fueron desaprobadas en JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Causa vibración en el dispositivo que la soporta. No hace nada si el soporte para vibración no está disponible.
+
+ +

No Estándar

+ +
+

Dispositivos con Firefox OS añaden más métodos no estándares. Puede consultarlas en el artículo de extensiones de Navigator de Firefox OS.

+
+ +
+
{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}
+
Permite al código verificar si el documento en una URI determinada está disponible sin usar la red.
+
{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}
+
Permite pagos dentro de la aplicación.
+
diff --git a/files/es/web/api/navigator/mozsocial/index.html b/files/es/web/api/navigator/mozsocial/index.html new file mode 100644 index 0000000000..cf5dd808f8 --- /dev/null +++ b/files/es/web/api/navigator/mozsocial/index.html @@ -0,0 +1,48 @@ +--- +title: navigator.mozSocial +slug: Web/API/Navigator/mozSocial +translation_of: Archive/mozSocial +--- +

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

{{ ApiRef() }}

+

El objeto MozSocial , regresado por la propiedad navigator.mozSocial , esta disponible dentro del tablero del proveedor de medios de comunicación para proporcionar la funcionalidad que pueda necesitar.

+
+

Nota: Aunque mozilla espera enviar eventualmente este API para su  estandarización, aun no se ha hecho.

+
+

Atributos

+
+
+ {{domxref("MozSocial.isVisible")}}
+
+ Regresa un valor Booleano; el resultado es true si el contenido es visible, de otra manera es false.
+
+

Métodos

+
+
+ {{domxref("MozSocial.closePanel()")}}
+
+ Cierra el tablero flotante abierto actualmente.
+
+ {{domxref("MozSocial.getAttention()")}}
+
+ Realiza algunas acciones diseñadas para obtener la atención del usuario; el mismo comportamiento puede variar de plataforma a plataforma. Esto puede mostrar un efecto visual, reproducir una notificación audible, parpadear la pantalla, o utilizar alguna otra técnica.
+
+ {{ domxref("MozSocial.getWorker()") }}
+
+ Regresa una referencia al trabajador de servicios; una vez el  contenido tiene esta referencia, puede llamar a su método postMessage() para comunicarse con el servicio.
+
+ {{domxref("MozSocial.openChatWindow()")}}
+
+ Abre una ventana de chat que es anclada al pie de la ventana del navegador. Se espera que cada ventana de chat sea un chat singular, pero su funcionalidad va a variar dependiento del proveedor.
+
+ {{domxref("MozSocial.openPanel()")}}
+
+ Abre un tablero flotante adjunto a la barra lateral en una vertical dada para compensar. Esto puede ser, por ejemplo, utilizado para mostrar la conversación actual correspondiente a una notificación en la barra lateral.
+
+  
+
+ Vease Tambien
+
+ Social API
+
diff --git a/files/es/web/api/navigator/registerprotocolhandler/index.html b/files/es/web/api/navigator/registerprotocolhandler/index.html new file mode 100644 index 0000000000..a2a57f7ae3 --- /dev/null +++ b/files/es/web/api/navigator/registerprotocolhandler/index.html @@ -0,0 +1,33 @@ +--- +title: window.navigator.registerProtocolHandler +slug: Web/API/Navigator/registerProtocolHandler +tags: + - Firefox 3 + - Referencia_DOM_de_Gecko +translation_of: Web/API/Navigator/registerProtocolHandler +--- +

 

+

{{ ApiRef() }} {{ Fx_minversion_header(3) }}

+

Resumen

+

Permite que las páginas web se registren por si mismas como posibles manejadores para protocolos concretos.

+

Sintaxis

+
window.navigator.registerProtocolHandler(protocol,uri,title);
+
+ +

Ejemplo

+
navigator.registerProtocolHandler("mailto",
+                                 "https://mail.google.com/mail?view=cm&tf=0&to=%s",
+                                 "Google Mail");
+
+

Esto crea un nuevo manejador que permite a los enlaces de tipo "mailto:" dirigir al usuario a Google Mail, insertando la dirección de correo especificada en el enlace, en la URL.

+

Especificación

+

Especificado en el documento del WHATWG: Web Applications 1.0 working draft.

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "fr": "fr/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler", "pl": "pl/DOM/window.navigator.registerProtocolHandler" } ) }}

diff --git a/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html new file mode 100644 index 0000000000..2f72c52dc9 --- /dev/null +++ b/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html @@ -0,0 +1,132 @@ +--- +title: Controladores de protocolos basados en web +slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +tags: + - Avanzado + - Controladores de Protocolos Basados en Web + - HTML5 +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- +
{{Fx_minversion_header(3)}}
+ +

Antecedentes

+ +

Es bastante común encontrar enlaces de páginas web a recursos que no usan protocolos http. Un ejemplo es el protocolo mailto::

+ +
+
<a href="mailto:webmaster@example.com">Web Master</a>
+
+ +

Los autores de la Web pueden usar un enlace mailto: cuando quieren proporcionar una forma conveniente para que los usuarios envién un correo electrónico, directamente desde la página web. Cuando el enlace está activo, el navegador debería lanzar la aplicación de escritorio predeterminada para gestionar correos electrónicos. Se puede pensar en esto como un controlador de protocolos basados en escritorio.

+ +

Los controladores de protocolos basados en web permiten a las aplicaciones basadas en web participar en el proceso también. Esto es cada vez más importante a medida que más tipos de aplicaciones migren a la web. De hecho, hay muchas aplicaciones basadas en web que gestionan correo electrónicos podrían procesar un enlace mailto.

+ +

Registro

+ +

Configurar una aplicación web como un controlador de protocolo no es un proceso difícil. Básicamente la aplicación web usa registerProtocolHandler() para registrarse a sí mismo con el navegador como un controlador potencial para un protocolo dado. Por ejemplo:

+ +
navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+ +

En donde los parámetros son:

+ + + +

Cuando un navegador ejecuta este código, se le mostrará un mensaje al usuario, pidiendo permiso para permitir a la aplicación web registrase como controlador para el protocolo. Firefox muestra un mensaje en el área de la barra de notificaciones:

+ +

+ +
Nota: La plantila de la URL proporcionada al registrar debe ser del mismo dominio que el de la página que intenta realizar el registro o el registro fallará. Por ejemplo, http://example.com/homepage.html puede registrar un controlador de protocolo para http://example.com/handle_mailto/%s, pero no para http://example.org/handle_mailto/%s.
+ +

Al registrar el mismo controlador de protocolo más de una vez aparecerá una notifiación diferente, indicando que el controlador del protocolo ya ha está registrado. Por lo tanto, es una buena idea cuidar el registro del controlador de protocolo con una verificación para saber si ya está registrado, como con el siguiente ejemplo.

+ +

Ejemplo

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+  <title>Ejemplo de Controlador de Protocolo Web - Registro</title>
+  <script type="text/javascript">
+    navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+  </script>
+</head>
+<body>
+  <h1>Ejemplo de Controlador de Protocolo Web</h1>
+  <p>Esta página web instalará un controlador de protocolo web para el protocolo <code>burger:</code>.</p>
+</body>
+</html>
+
+ +

Activando

+ +

Ahora, cada vez que el usuario active un enlace que usa el protocolo registrado, el navegador enrutará la acción a la URL suministrada cuando la aplicación web se haya registrado. Firefox, de manera predeterminada, alertará al usaurio antes de controlar la acción.

+ +

Ejemplo

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+  <title>Ejemplo de Controlador de Protocolo Web - Prueba</title>
+</head>
+<body>
+  <p>Oye ¿Has visto <a href="burger:cheeseburger">esto</a> antes?</p>
+</body>
+</html>
+
+ +

Controlando

+ +

La siguiente fase es controlar la acción. El navgador extrae el href desde el enlace activado, lo combina con la plantilla de la URL suministrada durante el registro del controlador y realzia una petición HTTP GET sobre la URL. Luego, usando los ejemplos anteriores, el navegador realizará una petición GET sobre esta URL:

+ +
http://www.google.co.uk/?uri=burger:cheeseburger
+
+ +

El código del lado del servidor puede extraer los parámetros de la cadena de petición y realizar la acción deseada.

+ +
Nota: Al código del lado del servidor se le pasa todo el contenido del href.  Esto significa que el código del lado del servidor tendrá que analizar el protocolo desde los datos.
+ +

Example

+ +
<?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Ejemplo de Controlador de Protocolo Web</title>
+</head>
+<body>
+  <h1>Ejemplo de Controlador de Protocolo Web - Controlador</h1>
+  <p>Esta página es llamada al controlar una acción del protocolo <code>burger:</code>. Datos enviados:</p>
+  <textarea>
+<?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?>
+  </textarea>
+</body>
+</html>
+
+ +

Referencias

+ + + +

Véase también

+ + diff --git a/files/es/web/api/navigator/vibrate/index.html b/files/es/web/api/navigator/vibrate/index.html new file mode 100644 index 0000000000..39969f4cfc --- /dev/null +++ b/files/es/web/api/navigator/vibrate/index.html @@ -0,0 +1,82 @@ +--- +title: window.navigator.vibrate +slug: Web/API/Navigator/vibrate +translation_of: Web/API/Navigator/vibrate +--- +
+ {{ApiRef}}{{SeeCompatTable}}
+

Resumen

+

Ejecuta la vibración por hardware en el dispositivo, si existe dicho hardware. Si el dispositivo no soporta vibración, este método no tendrá efecto. Si un patrón de vibración ya estaba en progreso cuando este método es ejecutado, el patrón anterior se detiene y en su lugar se iniciará el último patrón ejecutado.

+

Sintaxis

+
window.navigator.vibrate(pattern);
+
+ +
+
+ pattern
+
+ Proporciona un patrón de intervalos de vibraciones y pausas. Cada valor indica el número de milisegundos que durará la vibración y la pausa, respectivamente. Se puede porporcionar un valor único (en cuyo caso la vibración se ejecutará una vez, con la duración especificada en milisegundos) o un arreglo de valores (array) para alternar vibraciones y pausas. Ver Vibration API para más detalles.
+
+

Si se especifica el valor 0, un array vacío o un array que contenga todos los valores en 0, se cancelarán todos los patrones de vibración que se estén ejecutando.

+

Excepciones

+

Podrá producirse una excepción si el patrón de vibración especificado es demasiado largo o si cualquiera de sus elementos son demasiado grandes.

+

Compatibilidad con navegadores

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}} +

11.0 {{property_prefix("moz")}}

+

16 (no prefix)

+ 		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}}11.0 {{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+

Especificación

+ +

Véase también

+ diff --git a/files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html b/files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html new file mode 100644 index 0000000000..ed2116fa94 --- /dev/null +++ b/files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html @@ -0,0 +1,69 @@ +--- +title: navigator.hardwareConcurrency +slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency +translation_of: Web/API/NavigatorConcurrentHardware/hardwareConcurrency +--- +

{{APIRef("HTML DOM")}}

+ +

{{AvailableInWorkers}}

+ +

La propiedad navigator.hardwareConcurrency  es de solo lectura navigator.hardwareConcurrency devuelve el número de procesadores lógicos disponibles para ejecutar subprocesos en la computadora del usuario.

+ +

Sintaxi

+ +
logicalProcessors = window.navigator.hardwareConcurrency
+
+ +

Valor

+ +

{{jsxref("Number")}} indica el número de núcleos de procesadores lógicos.

+ +

Las computadoras modernas tienen múltiples núcleos de procesadores físicos en su CPU (dos o cuatro núcleos son típicos), pero cada núcleo físico también puede ejecutar más de un subproceso a la vez utilizando técnicas avanzadas de programación. Por lo tanto, una CPU de cuatro núcleos puede ofrecer ocho núcleos de procesador lógico, por ejemplo. El número de núcleos de procesador lógico se puede utilizar para medir el número de subprocesos que se pueden ejecutar de manera efectiva a la vez sin que tengan que cambiar de contexto.

+ +

 Sin embargo, el navegador puede optar por informar un número menor de núcleos lógicos para representar con mayor precisión el número de {{domxref("Worker")}}s que pueden ejecutarse a la vez, así que no trate esto como una medida absoluta del número de núcleos en el sistema del usuario .

+ +

Ejemplos

+ +

En este ejemplo, se crea un {{domxref ("Worker")}} para cada procesador lógico informado por el navegador y se crea un registro que incluye una referencia al nuevo worker, así como un valor booleano que indica si nosotros ' estoy usando ese worker todavía; Estos objetos, a su vez, se almacenan en una matriz para su uso posterior. Esto crea un grupo de workers que podemos usar para procesar solicitudes más adelante.

+ +
let workerList = [];
+
+for (let i = 0; i < window.navigator.hardwareConcurrency; i++) {
+  let newWorker = {
+    worker: new Worker('cpuworker.js'),
+    inUse: false
+  };
+  workerList.push(newWorker);
+}
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-navigator-hardwareconcurrency', 'navigator.hardwareConcurrency')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.NavigatorConcurrentHardware.hardwareConcurrency")}}

+
+ +

See also

+ + diff --git a/files/es/web/api/navigatorconcurrenthardware/index.html b/files/es/web/api/navigatorconcurrenthardware/index.html new file mode 100644 index 0000000000..d7cee835c0 --- /dev/null +++ b/files/es/web/api/navigatorconcurrenthardware/index.html @@ -0,0 +1,71 @@ +--- +title: NavigatorConcurrentHardware +slug: Web/API/NavigatorConcurrentHardware +tags: + - API + - Concurrency + - HTML DOM + - Interface + - Navigator + - NavigatorCPU + - NavigatorConcurrentHardware + - NeedsBrowserCompatibility + - NeedsTranslation + - Reference + - Threading + - Threads + - TopicStub + - WorkerNavigator + - Workers +translation_of: Web/API/NavigatorConcurrentHardware +--- +

{{APIRef("HTML DOM")}}

+ +

The NavigatorConcurrentHardware {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} interface features which allow Web content to determine how many logical processors the user has available, in order to let content and Web apps optimize their operations to best take advantage of the user's CPU.

+ +

{{AvailableInWorkers}}

+ +

The number of logical processor cores is a way to measure the number of threads which can effectively be run at once without them having to share CPUs. Modern computers have multiple physical cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may return 8. The browser may, however, choose to reduce the number in order to represent more accurately the number of {{domxref("Worker")}}s that can run at once

+ +

Properties

+ +
+
{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readonlyinline}}
+
Returns the number of logical processors which may be available to the user agent. This value is always at least 1, and will be 1 if the actual number of logical processors can't be determined.
+
+ +

Methods

+ +

The NavigatorConcurrentHardware mixin has no methods.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatorconcurrenthardware', 'NavigatorConcurrentHardware')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/navigatorgeolocation/geolocation/index.html b/files/es/web/api/navigatorgeolocation/geolocation/index.html new file mode 100644 index 0000000000..94c22ef6b0 --- /dev/null +++ b/files/es/web/api/navigatorgeolocation/geolocation/index.html @@ -0,0 +1,106 @@ +--- +title: window.navigator.geolocation +slug: Web/API/NavigatorGeolocation/geolocation +translation_of: Web/API/Navigator/geolocation +--- +

{{APIRef("Geolocation API")}}
+ La propiedad de sólo lectura Navigator.geolocation devuelve un objeto Geolocation que proporciona acceso web a la ubicación de un dispositivo. Esto permite ofrecer al sitio web o aplicación resultados personalizados basados en la ubicación del usuario.

+ +
+

Nota: Por motivos de seguridad, cuando una página web trata de acceder a la información de ubicación, se solicita permiso al usuario. Cada navegador tiene sus propias reglas sobre cómo y cuándo obtener dicho permiso.

+
+ +

Sintaxis

+ +
geo = navigator.geolocation
+
+ +

Métodos

+ +
+
{{domxref("geolocation.getCurrentPosition", "geolocation.getCurrentPosition()")}}
+
Utilizado para obtener la posición actual.
+
{{domxref("geolocation.watchPosition", "geolocation.watchPosition()")}}
+
Utilizado para asignar un manejador para dar seguimiento a cualquier cambio de ubicación.
+
{{domxref("geolocation.clearWatch", "geolocation.clearWatch()")}}
+
Utilizado para eliminar un manejador asignado a los cambios de ubicación.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico2.150{{CompatGeckoMobile("4")}}1010.603.2
+
+ +

Ver también

+ + diff --git a/files/es/web/api/navigatorgeolocation/index.html b/files/es/web/api/navigatorgeolocation/index.html new file mode 100644 index 0000000000..f9e540d902 --- /dev/null +++ b/files/es/web/api/navigatorgeolocation/index.html @@ -0,0 +1,106 @@ +--- +title: NavigatorGeolocation +slug: Web/API/NavigatorGeolocation +tags: + - API +translation_of: Web/API/Geolocation +--- +

{{APIRef("Geolocation API")}}

+ +

NavigatorGeolocation  contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.

+ +

There is no object of type NavigatorGeolocation, but some interfaces, like {{domxref("Navigator")}} implements it.

+ +

Properties

+ +

The NavigatorGeolocation interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
+
+ +

Methods

+ +

The NavigatorGeolocation interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}{{Spec2('Geolocation')}}Initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removed in 15.0
+ Reintroduced in 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

See also

+ + + +

 

diff --git a/files/es/web/api/navigatorlanguage/index.html b/files/es/web/api/navigatorlanguage/index.html new file mode 100644 index 0000000000..7d6b0751e7 --- /dev/null +++ b/files/es/web/api/navigatorlanguage/index.html @@ -0,0 +1,148 @@ +--- +title: NavigatorLanguage +slug: Web/API/NavigatorLanguage +tags: + - API + - HTML-DOM + - NeedsTranslation + - No Interface + - Reference + - TopicStub +translation_of: Web/API/NavigatorLanguage +--- +

{{APIRef("HTML DOM")}}

+ +

NavigatorLanguage contains methods and properties related to the language of the navigator.

+ +

There is no object of type NavigatorLanguage, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.

+ +

Properties

+ +

The NavigatorLanguage interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
+ +

Methods

+ +

The NavigatorLanguage interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}{{Spec2('HTML WHATWG')}}Since the {{SpecName('HTML5 W3C')}} snapshot, the languages property has been added.
{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}{{Spec2('HTML5 W3C')}}Initial specification; snapshot of  an early version{{SpecName('HTML WHATWG')}}.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
languages37{{CompatGeckoDesktop("32")}}{{CompatNo}}24{{CompatNo}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
languages{{CompatUnknown}}{{CompatUnknown}} {{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/es/web/api/navigatorlanguage/language/index.html b/files/es/web/api/navigatorlanguage/language/index.html new file mode 100644 index 0000000000..a8c388b631 --- /dev/null +++ b/files/es/web/api/navigatorlanguage/language/index.html @@ -0,0 +1,133 @@ +--- +title: NavigatorLanguage.language +slug: Web/API/NavigatorLanguage/language +tags: + - API + - Gecko + - Idioma + - Lenguaje + - NavigatorLanguage + - Propiedad + - Referencia + - Referencia DOM de Gecko + - Solo lectura +translation_of: Web/API/NavigatorLanguage/language +--- +
{{APIRef("HTML DOM")}}
+ +

La propiedad de solo lectura NavigatorLanguage.language devuelve un string representando el lenguaje predefinido del usuario, generalmente es el lenguaje configurado para la interfaz del navegador.

+ +

Sintaxis

+ +
lang = globalObj.navigator.language
+
+ +

Valores

+ +

Un string que representa el código del lenguaje standard como se define en la BCP 47. Ejemplos de códigos válidos de lenguaje incluyen: "en", "en-US", "fr", "es-ES", etc.

+ +

Ejemplo

+ +
if (window.navigator.language != "en") {
+  doLangSelect(window.navigator.language);
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML5.1', '#dom-navigator-language', 'NavigatorLanguage.language') }}{{ Spec2('HTML5.1') }}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop("1.0")}}[2]
+ {{CompatGeckoDesktop("5.0")}}[3]		11.0[4]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
sobre {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatNo}}[4]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
sobre {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Devuelve el lenguaje configurado para la interfaz del navegador, no el valor de la Accept-Language HTTP header.

+ +

[2] Antes de Gecko 2.0 {{geckoRelease("2.0")}}, el valor de esta propiedad fue también parte de la cadena de user agent, como se informa en {{domxref("window.navigator.userAgent", "navigator.userAgent")}}.

+ +

[3] A partir de  Gecko 5.0 {{geckoRelease("5.0")}}, el valor de esta propiedad está basada en el valor de la Accept-Language HTTP header.

+ +

[4] Otras propiedades disponibles (no estandarizadas) son: userLanguage y browserLanguage.

+ +

Ver también

+ + diff --git a/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html b/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html new file mode 100644 index 0000000000..d4f8a77824 --- /dev/null +++ b/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html @@ -0,0 +1,91 @@ +--- +title: Eventos online y offline +slug: Web/API/NavigatorOnLine/Eventos_online_y_offline +tags: + - AJAX + - DOM + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +

{{ Fx_minversion_header(3) }} +Firefox 3 implementa eventos Online/Offline de la especificacióbn WHATWG Web Applications 1.0. +

+

Descripción

+

Para poder construir una aplicación web offline-funcional, necesitas conocer cuándo está tu aplicación realmente offline. Además, también necesitas conocer cuándo vuelve la aplicación al estado 'online' nuevamente. A efectos prácticos, los requisitos son los siguientes: +

+
  1. Necesitas conocer cuándo el usuario vuelve a estar online, para que puedas re-sincronizar con el servidor. +
  2. Necesitas conocer cuándo el usuario está offline, para así estar seguro de poner en cola las peticiones al servidor para más tarde. +
+

Es este proceso el que los eventos online/offline ayudan a trivializar. +

Tu aplicación web quizás necesite establecer que ciertos documentos se mantengan en la caché de recursos offline. Para hacerlo, incluye elementos LINK en tu sección HEAD de la siguiente manera: +

+
<link rel="offline-resource" href="mi_recurso>
+
+

Cuando Firefox 3 o superiores procesan el HTML, esto causará que el recurso referenciado se mantenga en caché para su uso offline en un recurso especial de la caché. +

+

API

+ +

navigator.onLine es una propiedad que mantiene un valor true/false (true para online, false para offline). Esta propiedad se actualiza siempre que el usuario cambia hacia "Modo sin conexión" seleccionando el menú correspondiente (Archivo -> Trabajar sin conexión en Firefox). +

Además, esta propiedad se debería actualizar siempre que el navegador no sea capaz de conectarse a la red. De acuerdo con la especificación: +

+
+El atributo navigator.onLine debe devolver false si el agente de usuario no contactará con la red cuando el usuario siga los enlaces o cuando un script solicite una página remota (o sepa que intentarlo fallaría)... +
+

Firefox 2 actualiza esta propiedad cuando cambia desde/hacia el modo offline del navegador, y cuando pierde/recupera la conectividad de la red en Windows y Linux. +

Esta propiedad existía en versiones más antiguas de Firefox e Internet Explorer (la especificación surgió a partir estas implementaciones previas), así que puedes comenzar a usarla inmediatamente. La detección automática del estado de la red se implementó en Firefox 2. +

+

eventos "online" y "offline"

+

Firefox 3 introduce dos nuevos eventos: "online" y "offline". Estos dos eventos son iniciados en el <body> de cada página cuando el usuario cambia de modo online a offline. Además, los eventos emergen desde document.body a document, terminando en window. Ambos eventos son no-cancelables (no se puede evitar que el usuario pase a modo online u offline). +

Puedes registrar listeners para estos eventos de varias maneras habituales: +

+ +

Ejemplo:

+

Hay una prueba sencilla que puedes ejecutar para verificar que los eventos están funcionando. +

+

+
 <!doctype html>
+ <html>
+ <head>
+   <script>
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   </script>
+   <style>...</style>
+ </head>
+ <body onload="loaded()">
+   <div id="status"><p id="state"></p></div>
+   <div id="log"></div>
+ </body>
+ </html>
+
+

Referencias

+ +


+

+
+
+{{ languages( { "en": "en/Online_and_offline_events", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }} diff --git a/files/es/web/api/navigatoronline/index.html b/files/es/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..7aa4d6c0e1 --- /dev/null +++ b/files/es/web/api/navigatoronline/index.html @@ -0,0 +1,133 @@ +--- +title: NavigatorOnLine +slug: Web/API/NavigatorOnLine +tags: + - API + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorOnLine +--- +

{{APIRef("HTML DOM")}}

+ +

The NavigatorOnLine interface contains methods and properties related to the connectivity status of the browser.

+ +

There is no object of type NavigatorOnLine, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.

+ +

Properties

+ +

The NavigatorOnLine interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
+ +

Methods

+ +

The NavigatorOnLine interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML WHATWG')}}No change from the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/navigatoronline/online/index.html b/files/es/web/api/navigatoronline/online/index.html new file mode 100644 index 0000000000..cc74bdbb8b --- /dev/null +++ b/files/es/web/api/navigatoronline/online/index.html @@ -0,0 +1,166 @@ +--- +title: Navigator.onLine +slug: Web/API/NavigatorOnLine/onLine +translation_of: Web/API/NavigatorOnLine/onLine +--- +
{{ApiRef("HTML DOM")}}
+ +

Retorna el estado en línea del navegador. La propiedad retorna un valor booleano,  true significa en línea y false significa desconectado. La propiedad envía actualizaciones siempre que el navegador tenga la capacidad de conectarse a los cambios de red. La actualización se produce cuando un usuario sigue un enlace o cuando un script pide una pagina remota. Por ejemplo, la propiedad debe retornar false cuando los usuarios hacen clic en un enlace poco después de perder la conexión a internet.

+ +

Los navegadores implementan esta propiedad de forma diferente.

+ +

En Chrome y Safari, si el navegador no puede conectarse a la red de area local (LAN) o al router, está desconectado; todas las otras condiciones retornan true. Así que puedes suponer que el navegador esta desconectado cuando retorna un valor false, no puedes suponer que un valor true signifique que el navegador puede acceder a internet. Podrías estar recibiendo falsos positivos, como en los casos en el que el ordenador este ejecutando un software de virtualización que tiene los adaptadores ethernet virtuales siempre "conectados". Por lo tanto, si tu quieres determinar el estado en linea de el navegador, tu debes desarrollar medios adicionales para comprobarlo. Para más información, consulte el artículo HTML5 Rocks article, Working Off the Grid.

+ +

En Firefox e Internet Explorer, cambiando el navegador al modo desconectado envía un valor false. Hasta Firefox 41, todas las demás condiciones retornaban un valor true; desde Firefox 41, en OS X y Windows, el valor sigue la actual conectividad de red.

+ +

Puedes ver los cambios en el estado de red escuchando los eventos window.ononline y window.onoffline.

+ +

Sintaxis

+ +
online = window.navigator.onLine;
+
+ +

Valor

+ +

online es booleano true o false.

+ +

Ejemplo

+ +

Ver ejemplo en linea.

+ +

Para comprobar que estas es linea, consulte window.navigator.onLine, como en el siguiente ejemplo: 

+ +
if (navigator.onLine) {
+  console.log('online');
+} else {
+  console.log('offline');
+}
+ +

Si el navegador no soporta navigator.onLine el ejemplo anterior siempre devolvera false/undefined.

+ +

Para ver los cambios en el estado de la red, use addEventListener para escuchar los eventos window.ononline y window.onoffline, como en el siguiente ejemplo:

+ +
window.addEventListener('offline', function(e) { console.log('offline'); });
+
+window.addEventListener('online', function(e) { console.log('online'); });
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "browsers.html#navigator.online", "navigator.onLine")}}{{Spec2("HTML WHATWG")}}Initial definition
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9.1)}}[2]
+ {{CompatGeckoDesktop(2.0)}}[4]		8[3]{{CompatNo}}[2]5.0.4
on {{domxref("WorkerNavigator")}}Yes{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileBlackBerry
Basic support2.2[5]{{CompatVersionUnknown}}{{CompatGeckoMobile(1.9.1)}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} +

7
+ 10

+
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Earlier versions of Chrome incorrectly return true when a tab is first opened, but it starts reporting the correct connectivity status after the first network event. Windows: 11, Mac: 14, Chrome OS: 13, Linux: Always returns true. For history, see crbug.com/7469.

+ +

[2] Since Firefox 4, and Opera 11.10, the browser returns true when "Work Offline" mode is disabled and false when it is enabled, regardless of actual connectivity.

+ +

[3] in Internet Explorer 8 "online" and "offline" events are raised on the document.body; under IE 9 they are raised on both document.body and window.

+ +

[4] Since Firefox 41, on OS X and Windows, the returned values follow the actual network connectivity, unless "Work offline" mode is selected (where it will always return false).

+ +

[5] Faulty in a WebView component, see Issue bug 16760.

+ +

Notas

+ +

See Online/Offline Events‎ for a more detailed description of this property as well as new offline-related features introduced in Firefox 3.

+ +

Véase también

+ + diff --git a/files/es/web/api/network_information_api/index.html b/files/es/web/api/network_information_api/index.html new file mode 100644 index 0000000000..07b3d3e3a7 --- /dev/null +++ b/files/es/web/api/network_information_api/index.html @@ -0,0 +1,93 @@ +--- +title: Network Information API +slug: Web/API/Network_Information_API +tags: + - API + - Experimental + - JSAPI Reference + - Referencia +translation_of: Web/API/Network_Information_API +--- +

{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}

+ +

La Network Information (Información de red) API provee información sobre el sistema de conexión en términos genéricos de tipos de conexión (ej., 'wifi', 'cellular', etc.). Esta puede ser usada para elegir contenido en alta definición o contenido  baja definición basándose en la conexión del usuario. Toda la API consiste en la adición de la {{domxref("NetworkInformation")}} interfaz y una única propiedad para la {{domxref("Navigator")}} interfaz: {{domxref("Navigator.connection")}}.

+ +

{{AvailableInWorkers}}

+ +

Examples

+ +

Detectar cambios de conexiónThis example watches for changes to the user's connection.

+ +
var conexion = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+var tipo = connection.effectiveType;
+
+function updateConnectionStatus() {
+  console.log("Connection type changed from " + tipo + " to " + conexion.effectiveType);
+  tipo = conexion.effectiveType;
+}
+
+conexion.addEventListener('change', updateConnectionStatus);
+
+ +

Precargar recursos grandes

+ +

El objeto de conexión es muy útil por ir decidiendo entre precargar recursos que ocupan mucho ancho de banda o memoria. Este ejemplo puede ser llamado justo después de que la página cargue para verificar el tipo de conexión donde precargar un video tal vez no sea lo deseado.Si se detecta la conexión de un celular, entonces el preloadVideo flag está seteado en false. Para simplificación y claridad, este ejemplo sólo testea un tipo de conexión. Una real-word usa case probablemente una declaración de switch o otro método para verificar todos los posibles valores de {{domxref("NetworkInformation.type")}}. 
+
+ en caso usaría una declaración de switch o algún otro método para verificar todos los valores posibles de
+ use case would likely use a switch statement or some other method to check all of the possible values of {{domxref("NetworkInformation.type")}}. Independientemente del valor de tipo, puede obtener una estimación de la velocidad de conexión a través de la propiedad {{domxref("NetworkInformation.effectiveType")}}.

+ +
let precargarVideo = true;
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+if (connection) {
+  if (connection.effectiveType === 'slow-2g') {
+    precargarVideo = false;
+  }
+}
+ +

Interfaces

+ +
+
{{domxref("NetworkInformation")}}
+
Provee información sobre la conexión de un dispositivo si está usándose para cominicarse con la red y proveer un tipo de scripts para ser notificado si el tipo de conexión cambia. La intefaz de NetworkInformation no puede ser inicializada. En lugar de esto, se accede a través de la interfaz {{domxref("Navigator")}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecifiaciónEstadoComentario
{{SpecName('Network Information', '', 'Network Information API')}}{{Spec2('Network Information')}}Initial specification
+ +

Compatibilidad en Navegadores

+ +

NetworkInformation

+ + + +

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

+ + + + + +

{{Compat("api.Navigator.connection")}}

+ +

Véase también

+ + diff --git a/files/es/web/api/node/appendchild/index.html b/files/es/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..a72eb7d6c3 --- /dev/null +++ b/files/es/web/api/node/appendchild/index.html @@ -0,0 +1,113 @@ +--- +title: Nodo appendChild +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Node + - Referencia + - metodo +translation_of: Web/API/Node/appendChild +--- +
{{APIRef("DOM")}}
+ +

Agrega un nuevo nodo al final de la lista de un elemento hijo de un elemento padre especificado.

+ +

Si el hijo(Child) es una referencia(hace referencia) hacia un nodo existente en el documento actual, este es quitado del padre actual para ser puesto en el nodo padre nuevo. La clave está en si el (Child) es una referencia a un nodo existente en el documento.

+ +
+

Nueva API disponible 
+ El método {{domxref("ParentNode.append()")}} soporta varios argumentos y cadenas para adjuntar.

+
+ +

Sintaxis

+ +
element.appendChild(aChild);
+ +

Parámetros

+ +
+
aChild
+
El nodo a adjuntar al nodo padre proporcionado (normalmente un elemento).
+
+ +

Valor de retorno

+ +

El valor devuelto es el hijo adjunto excepto cuando el hijo proporcionado es un {{domxref("DocumentFragment")}}, en cuyo caso el {{domxref("DocumentFragment")}} vacío es devuelto.

+ +

Notas

+ +

El encadenamiento podría no funcionar como se espera debido a que appendChild() devuelve un elemento hijo:

+ +
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+ +

Establece aBlock como <b></b> sólo, que no es probablemente lo que quieras.

+ +

Si el child hace una referencia a un nodo existente en el documento, el método appendChild se mueve de su posición actual a su nueva posición (ej. no existen requerimientos para eliminar el nodo desde su nodo padre antes de añadirlo a cualquier otro nodo).

+ +

Ésto significa también que el nodo no puede estar en dos puntos del documento de manera simultánea. Así que si el nodo ya contiene un padre, primero es eliminado, y después se añade a la nueva posición.

+ +

Se puede usar {{domxref("Node.cloneNode")}} para hacer una copia del nodo antes de añadirlo debajo de su nuevo elemento padre. (Nota: las copias echas con cloneNode no serán guardadas automáticamente en sincronía.)

+ +

Éste método no es permitido para mover nodos entre distintos documentos. Si se quiere añadir un nodo desde un documento diferente (por ejemplo para mostrar los resultados de una petición AJAX) se debe usar primero:
+ {{domxref("document.importNode")}}.

+ +

appendChild() Es uno de los métodos fundamentales de la programación web usando el DOM. El método appendChild() inserta un nuevo nodo dentro de la estructura DOM de un documento, y es la segunda parte del proceso central uno-dos, crear-y-añadir para construir páginas web a base de programación.

+ +

Ejemplo

+ +
// Crea un nuevo elemento párrafo, y lo agrega al final del cuerpo del documento
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecifaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}Sin cambio desde {{SpecName("DOM3 Core")}}.
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}Sin cambio desde {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}Sin cambio desde {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/node/childnodes/index.html b/files/es/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..567cd9fd08 --- /dev/null +++ b/files/es/web/api/node/childnodes/index.html @@ -0,0 +1,103 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +tags: + - API + - DOM + - Propiedad + - Referencia + - Referência DOM +translation_of: Web/API/Node/childNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de solo lectura Node.childNodes  devuelve una colección de hijos {{domxref("Node","nodes")}} del elemento dado donde el primer nodo hijo es asignado un índice 0.

+ +

Sintaxis

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

Ejemplos

+ +

Uso simple

+ +
// parg is an object reference to a <p> element
+
+// First check that the element has child nodes
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i < children.length; i++) {
+    // do something with each child as children[i]
+    // NOTE: List is live, adding or removing children will change the list
+  }
+}
+ +

Eliminar todos los hijos de un nodo

+ +
// This is one way to remove all children from a node
+// box is an object reference to an element
+
+while (box.firstChild) {
+    //The list is LIVE so it will re-index each call
+    box.removeChild(box.firstChild);
+}
+ +

Notas

+ +

Los items en una colección de nodos son objetos y no cadenas de caracteres. Para obtener los datos de los objetos del nodo, use sus propiedades (ej. elementNodeReference.childNodes[1].nodeName para obtener el nombre, etc.).

+ +

El objeto document contiene 2 hijos: la declaración del Doctype y el elemento raíz, generalmente referido como  documentElement. (En documentos (X)HTML  es el elemento HTML)

+ +

childNodes incluye todos los nodos hijos, incluidos los nodos no elementos, como nodos de tipo textos y comentarios. Para obtener una colección de solo elementos, use {{domxref("ParentNode.children")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}{{Spec2('DOM WHATWG')}}Sin cambios
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM3 Core')}}Sin cambios
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM2 Core')}}Sin cambios
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

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

+ +

Vea también

+ + diff --git a/files/es/web/api/node/clonenode/index.html b/files/es/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..0fb78af5dd --- /dev/null +++ b/files/es/web/api/node/clonenode/index.html @@ -0,0 +1,91 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +tags: + - API + - DOM + - Referencia + - Referência DOM + - metodo +translation_of: Web/API/Node/cloneNode +--- +
{{APIRef("DOM")}}
+ +

El método Node.cloneNode() devuelve un duplicado del nodo en el que este método fue llamado.

+ +

Sintaxis

+ +
var dupNode = node.cloneNode(deep);
+
+ +
+
node
+
El nodo que se desea clonar.
+
dupNode
+
El nuevo nodo que será un clon de node
+
deep {{optional_inline}}
+
true si los hijos del nodo también deben ser clonados, o false para clonar únicamente al nodo.
+
+ +
+

Nota: En la especificación DOM4 (como se implementó en Gecko 13.0 {{geckoRelease(13)}}), deep es un argumento opcional. Si éste se omite, el método actua como si el valor se estableciera en true, estableciendo el uso de la clonación profunda como el comportamiento por defecto. Para crear un clon superficial, deep debe establecerse en false.

+ +

Este comportamiento ha sido modificado en la última especificación, si es omitido, el método se comportará como si deep fuera false. Aunque sigue siendo opcional, usted siempre debería proporcionar el argumento deep tanto para la compatibilidad con las nuevas y anteriores especificaciones. Con Gecko 28.0 {{geckoRelease(28)}}),  la consola advierte a los desarrolladores a no omitir el argumento. Desde Gecko 29.0 {{geckoRelease(29)}}),  una copia superficial, es el comportamiento por defecto en lugar de una copia profunda.

+
+ +

Ejemplo

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

Notas

+ +

Al clonar un nodo se copian todos sus atributos y valores, incluyendo escuchadores intrínsecos (en–línea). No copia los escuchadores de evento añadidos utilizando addEventListener() o aquellos asignados a las propiedades de un elemento. (ej. node.onclick = fn). Además, para un elemento <canvas>, la imagen pintada no se copia.

+ +

El nodo duplicado devuelto por cloneNode() no formará parte del documento hasta que sea añadido a otro nodo que sea parte del documento utilizando {{domxref("Node.appendChild()")}} o un método similar. Tampoco tiene padre hasta que sea añadido a otro nodo.

+ +

Si deep se establece a false, los elementos hijos no se clonan. Tampoco se clona ningún texto que contenga el nodo, ya que está contenido en uno o más nodos {{domxref("Text")}}.

+ +

Si deep se evalúa a true, el subárbol completo (incluyendo texto que pueda estar en nodos {{domxref("Text")}} hijos) también se copian. En los nodos vacíos (por ejemplo, los elementos {{HTMLElement("img")}} y {{HTMLElement("input")}}) no importa si deep es true o false.

+ +
Advertencia: cloneNode() puede conducir a elementos con ID's duplicados en el documento.
+ +

Si el nodo original tiene un ID el elemento clonado se ubicará en el mismo documento, el ID del clon debería ser modificado para ser único. Los atributos name pueden necesitar ser modificados también, dependiendo de si se esperan nombres duplicados.

+ +

Para clonar un nodo con el fin de agregarlo a un domento distinto, utiliza {{domxref("Document.importNode()")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}{{Spec2("DOM3 Core")}} 
{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}{{Spec2("DOM2 Core")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +
+

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

+
diff --git a/files/es/web/api/node/contains/index.html b/files/es/web/api/node/contains/index.html new file mode 100644 index 0000000000..be0f8848d9 --- /dev/null +++ b/files/es/web/api/node/contains/index.html @@ -0,0 +1,56 @@ +--- +title: Node.contains() +slug: Web/API/Node/contains +tags: + - API + - DOM + - Nodo + - metodo +translation_of: Web/API/Node/contains +--- +
{{APIRef("DOM")}}
+ +

El método Node.contains() devuelve un valor {{jsxref("Boolean")}} indicando si un nodo es descendiente de un nodo dado o no, por ejemplo, el propio nodo, uno de sus hijos directos (({{domxref("Node.childNodes", "childNodes")}})), uno de los hijos directos de su nodo hijo, etc.

+ +

Sintaxis

+ +
node.contains( otroNodo )
+
+ +

Ejemplo

+ +

Esta función verifica si un un elemento esté en el cuerpo de la página. Como contains es inclusivo y determinar si el cuerpo se contiene a sí mismo no es la intención de  isInPage este caso explícitamente devuelve false.

+ +
function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}{{Spec2("DOM WHATWG")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/node/elementopadre/index.html b/files/es/web/api/node/elementopadre/index.html new file mode 100644 index 0000000000..2a2e947a8d --- /dev/null +++ b/files/es/web/api/node/elementopadre/index.html @@ -0,0 +1,46 @@ +--- +title: Node.parentElement +slug: Web/API/Node/elementoPadre +tags: + - API + - DOM + - NecesitaCompatiblidadNavegador + - Nodo + - Propiedad +translation_of: Web/API/Node/parentElement +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de sólo lectura de Nodo.parentElement devuelve el nodo padre del DOM {{domxref("Element")}}, o null, si el nodo no tiene padre o si el padre no es un {{domxref("Element")}} DOM .

+ +

Sintaxis

+ +
elementoPadre = node.parentElement
+ +

El elementoPadre es el padre del nodo actual. Esto es siempre un objecto {{domxref("Element")}} DOM, o null.

+ +

Ejemplo

+ +
if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}
+ +

Compatibilidad en navegadores

+ +

En algunos navegadores, la propiedad elementoPadre es solo definida en nodos que ellos mismos son {{domxref("Element")}}. En particular, esto no está definido en nodos de texto.

+ +

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

+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/node/haschildnodes/index.html b/files/es/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..b5b3bc58b2 --- /dev/null +++ b/files/es/web/api/node/haschildnodes/index.html @@ -0,0 +1,73 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +tags: + - API + - DOM + - Nodo + - metodo +translation_of: Web/API/Node/hasChildNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

El método Node.hasChildNodes() devuelve un valor Boolean indicando si el {{domxref("Node")}} (nodo) actual tiene nodos hijos o no.

+ +

Sintaxis

+ +
resultado = node.hasChildNodes();
+ +
+
resultado
+
almacena el valor devuelto true o false.
+
+ +

Ejemplos

+ +

El siguiente ejemplo elimina el primer nodo dentro del elemento con id "foo" si foo tiene nodos hijos.

+ +
var foo = document.getElementById("foo");
+if (foo.hasChildNodes()) {
+    // do something with 'foo.childNodes'
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasChildNodes = prototype.hasChildNodes || function() {
+        return !!this.firstChild;
+    }
+})(Node.prototype);
+
+ +

Resumen

+ +

Hay varias maneras de determinar si el nodo tiene nodos hijos.

+ + + +

Especificación

+ + + +

Compatibilidad con navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/node/index.html b/files/es/web/api/node/index.html new file mode 100644 index 0000000000..6511274333 --- /dev/null +++ b/files/es/web/api/node/index.html @@ -0,0 +1,371 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Interfaz + - Nodo + - Referencia +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}}
+ +

Node es una interfaz en la cuál un número de objetos de tipo DOM API heredan. Esta interfaz permite que esos objetos sean tratados similarmente.

+ +

Las siguientes interfaces todas heredan de los metodos y propiedades de Node: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (heredan el {{domxref("Text")}}, el {{domxref("Comment")}}, y {{domxref("CDATASection")}}), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

+ +

Estas interfaces pueden retornar null en casos particulares donde los métodos y las propiedades no son relevantes. Pueden retornar una excepción - por ejemplo cuando se agregan hijos a un tipo de node del cuál no puede existir hijos.

+ +

Propiedades

+ +

herendan propiedades de sus padres {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
Retorna un {{domxref("DOMString")}} representando la base de la URL. El concepto de la base de la URL cambia de un lenguaje a otro;  en HTML, le corresponde al protocolo, el nombre del dominio y la estructura del directorio, eso es todo hasta el último '/'.
+
{{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.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.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. 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") }}
+ Though recent specifications require localName to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
The namespace URI of this node, or null if it is no namespace. 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") }}
+ Though recent specifications require namespaceURI to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{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 name 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")}}
+
Is a {{domxref("DOMString")}} representing the value of an object. For most Node type, this returns null and any set operation is ignored. For nodes of type TEXT_NODE ({{domxref("Text")}} objects), COMMENT_NODE ({{domxref("Comment")}} objects), and PROCESSING_INSTRUCTION_NODE ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, 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.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+ Though recent specifications require prefix to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{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")}}
+
Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.
+
+ +

Methods

+ +

Inherits methods from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.appendChild()")}}
+
Insert a {{domxref("Node")}} as the last child node of this element.
+
{{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()")}}
+
 
+
{{domxref("Node.contains()")}}
+
 
+
{{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 {{domxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{domxref("Node.hasChildNodes()")}}
+
Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.
+
{{domxref("Node.insertBefore()")}}
+
Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.
+
{{domxref("Node.isDefaultNamespace()")}}
+
 
+
{{domxref("Node.isEqualNode()")}}
+
 
+
{{domxref("Node.isSameNode()")}} {{obsolete_inline}}
+
 
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Returns a 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.lookupPrefix()")}}
+
 
+
{{domxref("Node.lookupNamespaceURI()")}}
+
 
+
{{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.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.
+
 
+
+ +

Examples

+ +

Browse all child nodes

+ +

The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).

+ +
function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}
+ +

Syntax

+ +
DOMComb(parentNode, callbackFunction);
+ +

Description

+ +

Recursively cycle all child nodes of parentNode and parentNode itself and execute the callbackFunction upon them as this objects.

+ +

Parameters

+ +
+
parentNode
+
The parent node (Node Object).
+
callbackFunction
+
The callback function (Function).
+
+ +

Sample usage

+ +

The following example send to the console.log the text content of the body:

+ +
function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};
+ +

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

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(), isSameNode(), 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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.
+ Removed in {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
getUserData(), setUserData() and hasAttributes() {{deprecated_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Removed in {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSameNode() {{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.
+ Removed in {{CompatGeckoDesktop("10.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSupported() {{obsolete_inline}}{{CompatUnknown}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Removed in {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
attributes{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.
+ Removed in {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Webkit and Blink incorrectly do not make Node inherit from {{domxref("EventTarget")}}.

diff --git a/files/es/web/api/node/insertarantes/index.html b/files/es/web/api/node/insertarantes/index.html new file mode 100644 index 0000000000..102d4dfbdd --- /dev/null +++ b/files/es/web/api/node/insertarantes/index.html @@ -0,0 +1,172 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertarAntes +tags: + - API + - DOM + - Nodo + - Referencia + - metodo +translation_of: Web/API/Node/insertBefore +--- +
{{APIRef("DOM")}}
+ +

El método Node.insertBefore() inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Si el nodo hijo es una referencia a un nodo ya existente en el documento, insertBefore() lo mueve de la posición actual a la nueva posición (no hay necesidad de eliminar el nodo de su nodo padre antes de agregarlo al algún nodo nuevo).

+ +

Esto significa que el nodo no puede estar en dos puntos del documento al simultáneamente. Por lo que si el nodo ya tiene un padre, primero se elimina el nodo, y luego se inserta en la nueva posición. {{domxref("Node.cloneNode()")}} puede utilizarse para hacer una copia de un nodo antes de insertarlo en un nuevo padre. Ten en cuenta que las copias hechas con cloneNode() no se mantendrán sincronizadas automáticamente.

+ +

Si el nodo de referencia es null, el nodo indicado se añadirá al final de la lista de hijos del nodo padre especificado.

+ +

Si el hijo proporcionado es un {{domxref("DocumentFragment")}}, el contenido completo del DocumentFragment se moverá a la lista de hijos del nodo padre indicado.

+ +

Sintaxis

+ +
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
+
+ + + +

Si referenceNode es null, el newNode se insertará al final de la lista de nodos hijos.

+ +
+

referenceNode no es un parámetro opcional -- debes pasar explícitamente un Node o null. No proporcionándolo o pasando valores no válidos podría provocar un comportamiento distinto en diferentes versiones de navegadores.

+
+ +

Valor devuelto

+ +

El valor devuelto es el hijo añadido excepto cuando newNode es un {{domxref("DocumentFragment")}}, en cuyo caso se devuelve un {{domxref("DocumentFragment")}}.

+ +

Ejemplo

+ +

Ejemplo 1

+ +
<div id="parentElement">
+   <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Crear el nodo a insertar
+var newNode = document.createElement("span");
+
+// Obtener una referencia al nodo padre
+var parentDiv = document.getElementById("childElement").parentNode;
+
+// Comienzo del test [ 1 ] : Existe un childElement --> Todo funciona correctamente
+var sp2 = document.getElementById("childElement");
+parentDiv.insertBefore(newNode, sp2);
+// Fin del test [ 1 ]
+
+// Comienzo del test [ 2 ] : childElement no es del tipo undefined
+var sp2 = undefined; // No existe un nodo con id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
+// Fin del test [ 2 ]
+
+// Comienzo del test [ 3 ] : childElement es de Tipo "undefined" ( string )
+var sp2 = "undefined"; // No existe un nodo con id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Genera "Type Error: Invalid Argument"
+// Fin del test [ 3 ]
+</script>
+
+ +

Ejemplo 2

+ +
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Crea un nuevo, elemento <span>
+var sp1 = document.createElement("span");
+
+// Obtener una referencia al elemento, antes de donde queremos insertar el elemento
+var sp2 = document.getElementById("childElement");
+// Obtener una referencia al nodo padre
+var parentDiv = sp2.parentNode;
+
+// Inserta un nuevo elemento en el DOM antes de sp2
+parentDiv.insertBefore(sp1, sp2);
+</script>
+
+ +

No existe el método insertAfter().  Puede ser emulado mediante la combinación del método con {{domxref("Node.nextSibling()")}}.

+ +

En el ejemplo anterior, sp1 podría insertarse después de sp2 usando:

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+ +

Si sp2 no tiene ningún hermano depués de él, entonces debe ser el último hijo — sp2.nextSibling devuelve null, y sp1 se inserta al final de la lista de nodos hijos (inmediatamente después de sp2).

+ +

Ejemplo 3

+ +

Inserta un elemento antes del primer elemento hijo, utilizando la propiedad firstChild.

+ +
// Obtener una referencia al elemento en el que se quiere insertar un nuevo nodo
+var parentElement = document.getElementById('parentElement');
+// Obtener una referencia al primer hijo
+var theFirstChild = parentElement.firstChild;
+
+// Crear un nuevo elemento
+var newElement = document.createElement("div");
+
+// Insertar el nuevo elemento antes que el primer hijo
+parentElement.insertBefore(newElement, theFirstChild);
+
+ +

Cuando el elemento no tiene ub primer hijo, entonces firstChild es null. Aun así, el elemento se añade al padre después del último hijo. Puesto que el elemento padre no tenía primer hijo, tampoco tiene último hijo. Por tanto, el nuevo elemento es el único elemento después de ser insertado.

+ +

Compatibilidad en navegadores

+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}Corrige errores en el algoritmo de inserción
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}Describe el algoritmo con mayor detalle
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}Sin cambios notables
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}Sin cambios notables
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}Introducido
+ +

Ver también

+ + diff --git a/files/es/web/api/node/issamenode/index.html b/files/es/web/api/node/issamenode/index.html new file mode 100644 index 0000000000..205b6fd222 --- /dev/null +++ b/files/es/web/api/node/issamenode/index.html @@ -0,0 +1,110 @@ +--- +title: Node.isSameNode() +slug: Web/API/Node/isSameNode +translation_of: Web/API/Node/isSameNode +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +

Node.isSameNode() comprueba si dos nodos son iguales, es decir si hacen referencia al mismo objecto.

+ +
+

Warning: This method is no longer implemented in recent browsers.

+ +
// Instead of using
+node1.isSameNode(node2)
+
+// use
+node1 === node2 // or
+node1 == node2
+
+ +

Sintaxis

+ +
var isSameNode = node.isSameNode(other);
+
+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Eliminado de la especificación.
{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}{{Spec2('DOM3 Core')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}} {{CompatGeckoDesktop("10.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}
+ {{CompatNo}} {{CompatGeckoMobile("10.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/api/node/lastchild/index.html b/files/es/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..0228c3264c --- /dev/null +++ b/files/es/web/api/node/lastchild/index.html @@ -0,0 +1,65 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +tags: + - API + - DOM + - NecesitaCompatibilidadNavegador + - Propiedad + - Referencia +translation_of: Web/API/Node/lastChild +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura Node.lastChild devuelve el último hijo del nodo. Si su padre es un elemento, entonces el hijo es generalmente un nodo de element, nodo de texto o un nodo de comentario. Devuelve null si no hay elementos hijos.

+ +

Sintaxis

+ +
var nodoHijo= nodo.lastChild;
+
+ +

Ejemplo

+ +
var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}{{Spec2('DOM WHATWG')}}Sin cambio
{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM3 Core')}}Sin cambio
{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM2 Core')}}Sin cambio
{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad en navegador

+ + + +

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

diff --git a/files/es/web/api/node/namespaceuri/index.html b/files/es/web/api/node/namespaceuri/index.html new file mode 100644 index 0000000000..f24b54d713 --- /dev/null +++ b/files/es/web/api/node/namespaceuri/index.html @@ -0,0 +1,145 @@ +--- +title: Node.namespaceURI +slug: Web/API/Node/namespaceURI +tags: + - API + - DOM + - NecesitaCompatilibidadNavegador + - Propiedad + - Referencia + - obsoleta +translation_of: Web/API/Node/namespaceURI +--- +
{{APIRef("DOM")}}{{obsolete_header}}
+ +

La propiedad de solo lectura Nodo.namespaceURI devuelve la URI del nodo, o null en caso de que el nodo no tenga espacio de nombres. Cuando el nodo es un documento, este devuelve el espacio de nombres del XML para el documento actual.

+ +
+

En DOM4 esta API fué movida desde Node a las interficies {{domxref("Element")}} y {{domxref("Attr")}}.

+
+ +

Sintaxis

+ +
namespace = node.namespaceURI
+ +

Ejemplo

+ +

En este fragmento, un nodo esá siendo examinado por su {{domxref("Node.localName")}} y namespaceURI. Si el namespaceURI devuelve el nombre de espaciosXUL y el localName devuelve "browser", entonces el nodo es entendido  a ser un XUL <browser/>.

+ +
if (node.localName == "browser" &&
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // Este es un navegador XUL
+}
+ +

Notas

+ +

Este no es un valor calculado que es el resultado de una búsqueda del espacio de nombres basada en la examinación de las declaraciones de un espacio de nombres en el ámbito. El espacio de nombres URI de un nodo es congelado ene l momento de su creación.

+ +

En Firefox 3.5 y anteriores, el espacio de nombres URI para los elementos HTML en los Documents HTML es null. En versiones psoteriores, en conformidad con HTML5, es https://www.w3.org/1999/xhtml como en XHTML. {{gecko_minversion_inline("1.9.2")}}

+ +

Para nodos de cualquier {{domxref("Node.nodeType")}} distintos de ELEMENT_NODE y ATTRIBUTE_NODE el valor de namespaceURI es siempre null.

+ +

Puedes crear un elemento con un namespaceURI concreto creando un método DOM de nivel 2 {{domxref("Document.createElementNS")}} y atributos con el método {{domxref("Element.setAttributeNS")}}.

+ +

Para la especificación Namespaces in XML, un atributo no hereda su espacio de nombres del elemento al que está sujeto. Si un atributo no es dado de manera explícita como espacio de nombres, entonces no los tiene.

+ +

El DOM no controla ni impone la validación del espacio de nombres. Depende de la aplicación DOM de hacer cualquier tipo de validación necesaria. Destacar también que el prefijo de espacio de nombre, una vez es asociado a un nodo enparticular, no puede ser modificado.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}{{Spec2("DOM3 Core")}}Specifies the behavior when it's set to null.
{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}{{Spec2("DOM2 Core")}} 
{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}
+ {{CompatNo}}46.0[1]		{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]
+ {{CompatNo}} {{CompatGeckoDesktop("48.0")}}[1]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]
+ {{CompatNo}} {{CompatGeckoMobile("48.0")}}[1]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API fue movida a las APIs {{domxref("Element")}} y {{domxref("Attr")}} de acuerdo con el standard de DOM4.

+ +

[2] Antes de Gecko 5.0 {{geckoRelease("5.0")}}, esta propiedad era de lectura-escritura; empezando con Gecko 5.0  es sólo lectura, siguiendo la especificación.

+ +

Ver también

+ + diff --git a/files/es/web/api/node/nextsibling/index.html b/files/es/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..188357f9c6 --- /dev/null +++ b/files/es/web/api/node/nextsibling/index.html @@ -0,0 +1,87 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +tags: + - API + - DOM + - Gecko + - Nodo + - Propiedad +translation_of: Web/API/Node/nextSibling +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura Node.nextSibling devuelve el siguiente nodo con respecto al indicado en la lista de nodos ({{domxref("Node.childNodes","childNodes")}}) a la que este pertenece o null si el nodo especificado es el último en dicha lista.

+ +

Sintaxis

+ +
siguienteNodo = node.nextSibling
+
+ +

Notas

+ +
+ +

Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. + Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a + whitespace text node rather than the actual element the author intended to get.

+ +

See Whitespace in the DOM and + W3C DOM 3 FAQ: Why are some Text nodes empty? + for more information.

+ +

{{domxref("Element.nextElementSibling")}} debe ser utilizado para obtener el siguiente elemento ignorando cualquier nodo en blanco.

+
+ +

Ejemplo

+ +
<div id="div-01">Este es el div-01</div>
+<div id="div-02">Este es el div-02</div>
+
+<script type="text/javascript">
+var el = document.getElementById('div-01').nextSibling,
+    i = 1;
+
+console.log('Hermanos de div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+</script>
+
+/**************************************************
+  Lo siguiente se escribe en la consola cuando carga:
+
+      Nodos hermanos del div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+
+ +

En el ejemplo anterior, se puede observar que los nodos #text se insertan en el DOM, donde se produce un espacio en blanco en el marcado entre las etiquetas (es decir, después de la etiqueta de cierre de un elemento y antes de la etiqueta de apertura del siguiente). No se crea ningún espacio en blanco entre los elementos insertados por la sentencia document.write.

+ +

La posible inclusión de los nodos de texto en el DOM se debe permitir cuando se atraviese el DOM utilizando nextSibling. Vea los recursos en la sección Notas.

+ +

Especificación

+ + + +

Compatibilidad en navegadores

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/node/nodename/index.html b/files/es/web/api/node/nodename/index.html new file mode 100644 index 0000000000..5865b21e21 --- /dev/null +++ b/files/es/web/api/node/nodename/index.html @@ -0,0 +1,107 @@ +--- +title: element.nodeName +slug: Web/API/Node/nodeName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Node/nodeName +--- +
{{APIRef("DOM")}}
+ +

Resumen

+ +

Devuelve el nombre del nodo actual, en forma de cadena.

+ +

Sintaxis

+ +
varstr =node.nodeName;
+
+ +

str es una variable de cadena en la que se almacena el nombre del elemento actual.

+ +

nodeName es un atributo de solo-lectura.

+ +

Notas

+ +

Aquí tenemos el valor devuelto por varios tipos de nodo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterfaznodeName
Attrigual que Attr.name
CDATASection"#cdata-section"
Comment"#comment"
Document"#document"
DocumentFragment"#document-fragment"
DocumentTypeigual que DocumentType.name
Elementigual que Element.tagName
Entitynombre de entity
EntityReferencenombre de la identidad de referencia
Notationnombre de la notación
ProcessingInstructionigual que ProcessingInstruction.target
Text"#text"
+ +

Ejemplo

+ +

Dado el siguiente código:

+ +
<div id="d1">hola mundo</div>
+<input type="text" id="t"/>
+
+ +

y el siguiente script:

+ +
var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+text_field.value = div1.nodeName;
+
+ +

En XHTML (o alguna otra forma de XML) el valor de text_field será "div". Sin embargo, en HTML, el valor de text_field sería "DIV".

+ +

Ten en cuenta que podríamos haber usado la propiedad tagName en su lugar, ya que nodeName tiene el mismo valor que tagName para un elemento. Presta atención, sin embargo, a que nodeName devolverá #text para los nodos de texto, mientras que tagName devolverá undefined.

+ +

Especificaciones

+ +

DOM Level 2 Core: Node.nodeName

+ +

DOM Level 3 Core: Node.nodeName

diff --git a/files/es/web/api/node/nodetype/index.html b/files/es/web/api/node/nodetype/index.html new file mode 100644 index 0000000000..1a1f28ac39 --- /dev/null +++ b/files/es/web/api/node/nodetype/index.html @@ -0,0 +1,95 @@ +--- +title: Node.nodeType +slug: Web/API/Node/nodeType +translation_of: Web/API/Node/nodeType +--- +
+
{{APIRef("DOM")}}
+ +
La propiedad de solo lectura Node.nodeType retornará un valor positivo entero representando el tipo de nodo.
+ +
 
+
+ +

Sintaxis

+ +
var type = node.nodeType;
+
+ +

la variable type será un entero positivo con alguno de los siguientes valores:

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

Ejemplo

+ +

Este es un ejemplo que verifica si el primer nodo dentro de un elemento tipo documento (document) es un comentario nodo, y si no lo es, muestra un mensaje.

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

Especificación

+ + diff --git a/files/es/web/api/node/nodevalue/index.html b/files/es/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..418cecdb77 --- /dev/null +++ b/files/es/web/api/node/nodevalue/index.html @@ -0,0 +1,86 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +translation_of: Web/API/Node/nodeValue +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad Nodo.nodeValue devuelve o actualiza el valor del nodo actual.

+ +

Sintaxis

+ +
valor= nodo.nodeValue;
+
+ +

valor es una cadena contenedora del valor del nodo actual, si es que tiene alguno.

+ +

Notas

+ +

Para el nodo en si, nodeValue devuelve null. Para texto, comentarios, y nodos CDATA, nodeValue devuelve el contenido de dicho nodo. Para nodos atributos, el valor del atributo es devuelto.

+ +

La siguiente table muestra los distintos valores retornados por los diferentes elementos.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalor del atributo
CDATASectioncontenido de la sección CDATA
CommentContenido del comentario
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionTodo el contexto excluyendo el objetivo
TextContenido del nodo de texto
+ +

Cuando nodeValue es definido como null, actualizarlo no tiene efecto.

+ +

Especificación

+ + diff --git a/files/es/web/api/node/nodoprincipal/index.html b/files/es/web/api/node/nodoprincipal/index.html new file mode 100644 index 0000000000..55f02037bb --- /dev/null +++ b/files/es/web/api/node/nodoprincipal/index.html @@ -0,0 +1,33 @@ +--- +title: Nodo.nodoPrincipal +slug: Web/API/Node/nodoPrincipal +tags: + - API + - DOM + - Gecko + - Propiedad +translation_of: Web/API/Node +--- +
+
{{APIRef("DOM")}}
+{{Non-standard_header}} + +

La propiedad de solo loctura de Nodo.nodePrincipal devuelve el objeto {{Interface("nsIPrincipal")}} representando el contexto de seguridad del nodo actual.

+ +

{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}

+ +

Sintaxis

+ +
principalObj = element.nodePrincipal
+
+ +

Notas

+ +

Esta propiedad es de solo lectura; Si intentamos editarla nos lanzará una excepción. Además, esta propiedad tan solo debería ser accesible desde código privilegiado

+ +

Especificación

+ +

No hay especificaciones.

+
+ +

 

diff --git a/files/es/web/api/node/ownerdocument/index.html b/files/es/web/api/node/ownerdocument/index.html new file mode 100644 index 0000000000..b1213ac818 --- /dev/null +++ b/files/es/web/api/node/ownerdocument/index.html @@ -0,0 +1,118 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - API + - DOM + - Nodo + - Propiedad + - Referencia +translation_of: Web/API/Node/ownerDocument +--- +
{{APIRef("DOM")}}
+ +

La propiedad de lectura ownerDocument de la interfaz {{domxref("Node")}} devuelve el objeto Document de más alto nivel/jerarquia para ese nodo.

+ +

Sintaxis

+ +
var document = element.ownerDocument;
+
+ +

Resultado

+ +

document es el objeto {{domxref("Document")}} de más alto nivel, con el que todos los nodos descendientes se crean. Si la propiedad se usa en un nodo que el mismo es un Document, el resultado es null.

+ +

Ejemplo

+ +
// dado un nodo "p",  coge el hijo que tenga la más alta jerarquia
+// del objeto Document
+
+var d = p.ownerDocument;
+var html = d.documentElement;
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}{{Spec2("DOM4")}}
{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}{{Spec2("DOM3 Core")}}No change
{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

Compatibilidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]6.0[2]{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Starting in Gecko 9.0 {{geckoRelease("9.0")}}, the ownerDocument of doctype nodes (that is, nodes for which {{domxref("Node.nodeType")}} is Node.DOCUMENT_TYPE_NODE or 10) is no longer null. Instead, the ownerDocument is the document on which document.implementation.createDocumentType() was called.

+ +

[2] http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx

diff --git a/files/es/web/api/node/parentnode/index.html b/files/es/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..62bf77c4ff --- /dev/null +++ b/files/es/web/api/node/parentnode/index.html @@ -0,0 +1,105 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +translation_of: Web/API/Node/parentNode +--- +
+
{{APIRef("DOM")}}
+ +
 
+
+ +

La propiedad de sólo lectura node.parentNode devuelve el padre del nodo especificado en el árbol.

+ +

Sintaxis

+ +
parentNode = node.parentNode
+ +

parentNode es el padre del nodo actual. El padre de un elemento es un nodo del tipo Element, un nodo Document, o un nodo DocumentFragment.

+ +

Ejemplo

+ +
if (node.parentNode) {
+  // Borra un nodo del árbol a no ser que
+  // esté ya en el árbol
+  node.parentNode.removeChild(node);
+}
+ +

Notas

+ +

Los nodos del tipo Document y DocumentFragment nunca van a tener un elemento padre, parentNode devolverá siempre null.

+ +

También devuelve null si el nodo acaba de ser creado y no está atado/incorporado al árbol.

+ +

Compatiblidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}0.2{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/node/previoussibling/index.html b/files/es/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..e537d09a23 --- /dev/null +++ b/files/es/web/api/node/previoussibling/index.html @@ -0,0 +1,63 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +tags: + - API + - DOM + - Gecko + - Propiedad +translation_of: Web/API/Node/previousSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de sólo-lectura Node.previousSibling devuelve el nodo inmediatamente anterior al especificado en la lista de nodos {{domxref("Node.childNodes", "childNodes")}} de su padre, o null si el nodo especificado es el primero en dicha lista.

+ +

Sintaxis

+ +
nodoAnterior = nodo.previousSibling;
+
+ +

Ejemplo

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

Notas

+ + +

Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. + Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a + whitespace text node rather than the actual element the author intended to get.

+ +

See Whitespace in the DOM and + W3C DOM 3 FAQ: Why are some Text nodes empty? + for more information.

+ +

Para navegar en el sentido opuesto de la lista de nodos hijos se utiliza Node.nextSibling.

+ +

Especificación

+ + + +

Compatibilidad con navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/node/removechild/index.html b/files/es/web/api/node/removechild/index.html new file mode 100644 index 0000000000..423d482bb6 --- /dev/null +++ b/files/es/web/api/node/removechild/index.html @@ -0,0 +1,94 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +translation_of: Web/API/Node/removeChild +--- +
+
{{APIRef ( "DOM")}}
+ +

El método Node.removeChild() elimina un nodo hijo del DOM y puede devolver el nodo eliminado.

+ +

Sintaxis

+ +
+
var antiguoHijo = elemento.removeChild(child);
+O
+elemento.removeChild(child);
+
+
+ + + +

El hijo(child) eliminado aún existe en memoria pero ya no es parte del DOM. Con la primera forma de sintaxis mostrada, se puede reutilizar el nodo eliminado más tarde en el código, por medio de la referencia al objeto antiguoHijo. Sin embargo, en la segunda forma, la referencia a antiguoHijo se pierde, y suponiendo que el código no mantenga una referencia a ese objeto en alguna otra parte, inmediatamente será inutilizable e irrecuperable y será eliminada automáticamente de memoria después de poco tiempo.

+ +

Si hijo(child) no es en realidad hijo del nodo elemento, el método lanza una excepción. Esto también sucederá si child es en realidad hijo de elemento al momento de llamar al método, pero fue eliminado por un controlador(manejador) de eventos(event handler) invocado en el curso de tratar de eliminar el elemento. (e.g. blur).

+ +

Por lo tanto el método removeChild(child) lanza una excepción de 2 casos diferentes: 

+ +

1.      Si child es un hijo del elemento y por lo tanto existe en el DOM, pero se retiró el método lanza la siguiente excepción:

+ +

​​Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

+ +

2.      Si child no existe en el DOM de la página, el método emite la siguiente excepción:
+
+ Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

+ +

Ejemplos

+ +
<!--Ejemplo 1 HTML-->
+<div id="top" align="center"> </div>
+ +
<!--Javascript-->
+// El método lanza la excepción correspondiente al (caso 2)
+var top = document.getElementById("top");
+var nested = document.getElementById("nested");
+var garbage = top.removeChild(nested);
+ +
<!--Ejemplo 2 HTML-->
+<div id="top">
+   <div id="anidados"></div> 
+</div>
+ +
<!--Javascript-->
+// Eliminando un elemento específico cuando se conoce su nodo padre
+var d = document.getElementById("top");
+var d_nested = document.getElementById("anidados");
+var throwawayNode = d.removeChild(d_nested);
+ +
<!--Javascript-->
+// Eliminando un elemento específico utilizando la propiedad parentNode, que siempre hace referencia al nodo padre de un nodo (nodoHijo.parentNode.).
+nodo var = document.getElementById("anidados");
+if (node.parentNode) {
+  node.parentNode.removeChild(nodo);
+}
+ +
<!--Javascript-->
+// Eliminando todos los hijos de un elemento
+elemento var = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+ +

Notas:

+ +

removeChild() se debe invocar sobre el nodo padre del nodo que se va a eliminar.

+ +

Especificación

+ + + +

Vea también

+ + diff --git a/files/es/web/api/node/replacechild/index.html b/files/es/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..e93f025bd9 --- /dev/null +++ b/files/es/web/api/node/replacechild/index.html @@ -0,0 +1,73 @@ +--- +title: Node.replaceChild() +slug: Web/API/Node/replaceChild +tags: + - API + - DOM + - Nodo + - Referencia + - metodo +translation_of: Web/API/Node/replaceChild +--- +
+
{{APIRef("DOM")}}
+
+ +

El método Node.replaceChild() reemplaza un nodo hijo del elemento especificado por otro.

+ +

Sintáxis

+ +
replacedNode = parentNode.replaceChild(newChild, oldChild);
+
+ + + +

Ejemplo

+ +
// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// crear un nodo con un elemento vacío
+// sin ID, atributos, ni contenido
+var sp1 = document.createElement("span");
+
+// darle un atributo id llamado 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// crear algún contenido para el nuevo elemento
+var sp1_content = document.createTextNode("Nuevo elemento span para reemplazo.");
+
+// aplicar dicho contenido al nuevo elemento
+sp1.appendChild(sp1_content);
+
+// construir una referencia al nodo existente que va a ser reemplazado
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// reemplazar el nodo sp2 existente con el nuevo elemento span sp1
+parentDiv.replaceChild(sp1, sp2);
+
+// resultado:
+// <div>
+//   <span id="newSpan">Nuevo elemento span para reemplazo.</span>
+// </div>
+
+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/node/textcontent/index.html b/files/es/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..46586e89d5 --- /dev/null +++ b/files/es/web/api/node/textcontent/index.html @@ -0,0 +1,98 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

La propiedad textContent de la interfaz {{domxref("Node")}} representa el contenido de texto de un nodo y sus dencendientes.

+ +
+

Nota: textContent y {{domxref("HTMLElement.innerText")}} son confundidos con facilidad, pero ambos son diferentes en varias formas importantes.

+
+ +

Sintaxis

+ +
var text = Node.textContent;
+Node.textContent = string;
+
+ +

Valor devuelto

+ +

Una cadena de texto o null

+ +

Descripción

+ +

Al obtener esta propiedad:

+ + + +

Estableciendo textContent en un nodo elimina todos sus hijos y los reemplaza con un solo nodo de texto con el valor dado.

+ +

Diferencias con innerText

+ +

Internet Explorer introdujo elemento.innerText. La intención es muy parecida, con un par de diferencias:

+ + + +

Diferencias con innerHTML

+ +

innerHTML retorna el HTML como su nombre indica. Con bastante frecuencia, para leer o escribir texto en un elemento, la gente usa innerHTML. textContent debería usarse en su lugar. Ya que el texto no es procesado es más probable que tenga mejor rendimiento. Además, esto evita un vector de ataques XSS.

+ +

Ejemplo

+ +
// Dado el siguiente fragmento HTML:
+//   <div id="divA">Esto <span>es</span>un texto</div>
+
+// Lee el contenido textual:
+var text = document.getElementById("divA").textContent;
+// |text| contiene la cadena "Esto es un texto".
+
+// Escribe el contenido textual:
+document.getElementById("divA").textContent = "Esto es un nuevo texto";
+// El HTML "divA" ahora contiene una nueva cadena:
+//   <div id="divA">Esto es un nuevo texto</div>
+
+ +

Compatibilidad con navegadores

+ + + +

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

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Sin cambios desde DOM 4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Introducido
+ +

 

diff --git a/files/es/web/api/nodelist/foreach/index.html b/files/es/web/api/nodelist/foreach/index.html new file mode 100644 index 0000000000..4cb55533e1 --- /dev/null +++ b/files/es/web/api/nodelist/foreach/index.html @@ -0,0 +1,132 @@ +--- +title: NodeList.prototype.forEach() +slug: Web/API/NodeList/forEach +tags: + - DOM + - Iterable + - Métodos + - NodeList + - Referencia + - Web +translation_of: Web/API/NodeList/forEach +--- +

{{APIRef("DOM")}}

+ +

El métodoforEach() de la interfase{{domxref("NodeList")}} llama a la función callback proporcionada como parámetro una vez para cadapar de valores en la lista, en el orden en que se insertaron.

+ +

Syntax

+ +
nodeList.forEach(callback[, thisArg]);
+
+ +

Parámetros

+ +
+
callback
+
Función a ser ejecutada paracada elemento, tomando eventualmente 3 argumentos: +
+
currentValue
+
El valor que esta siendo procesado en la lista de nodos.
+
currentIndex
+
El índice del elemento que esta siendo procesado en la lista de nodos.
+
listObj
+
El objeto NodeList al que se está aplicando el métodoforEach().
+
+
+
thisArg {{Optional_inline}}
+
Valor a ser usado como {{jsxref("this")}} al ejecutarcallback.
+
+ +

Valor Retornado

+ +

{{jsxref('undefined')}}.

+ +

Excepciones

+ +

Ninguna.

+ +

Ejemplo

+ +
var nodo = document.createElement("div");
+var infante1 = document.createElement("p");
+var infante2 = document.createTextNode("hey");
+var infante3 = document.createElement("span");
+
+nodo.appendChild(infante1);
+nodo.appendChild(infante2);
+nodo.appendChild(infante3);
+
+var list = nodo.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'miEsteArg'
+);
+ +

resulta en:

+ +
[object HTMLParagraphElement], 0, miEsteArg
+[object Text], 1, miEsteArg
+[object HTMLSpanElement], 2, miEsteArg
+ +

Polyfill

+ +

Este {{Glossary("Polyfill","polyfill")}} le da compatibilidad a todos los navegadores que soportan 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);
+       }
+    };
+}
+ +

ó

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}
+ +

El comportamiento ateriror esta implementado en muchos navegadores. NodeList.prototype.forEach (Chrome, Firefox for example).

+ +

Especificaciones

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + +
StatusComentarios
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }}DefineNodeList como<Nodo>iterable
{{SpecName("WebIDL", "#es-forEach", "forEach")}}{{Spec2("WebIDL")}}DefineforEachen declaracionesiterables
+ +

Compatibilidad en Navegadores

+ + + +

{{Compat("api.NodeList.forEach")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/nodelist/index.html b/files/es/web/api/nodelist/index.html new file mode 100644 index 0000000000..444a6cbb07 --- /dev/null +++ b/files/es/web/api/nodelist/index.html @@ -0,0 +1,123 @@ +--- +title: NodeList +slug: Web/API/NodeList +tags: + - API + - DOM + - Interfaz + - NodeList +translation_of: Web/API/NodeList +--- +
{{APIRef("DOM")}}
+ +

Los objetos NodeList son colecciones de nodos como los devueltos por propiedades como {{domxref ("Node.childNodes")}} y el método {{domxref ("document.querySelectorAll ()")}}..

+ +
+

Aunque NodeList no es un Array, es posible iterar sobre él utilizando forEach(). También puede convertirse a un Array usando Array.from.

+ +

Sin embargo, algunos navegadores antiguos no han implementado NodeList.forEach() ni Array.from(). Pero esas limitaciones pueden eludirse utilizando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (más en este documento).

+
+ +

En algunos casos, NodeList es una colección en vivo, lo que significa que los cambios en el DOM se reflejan en la colección. Por ejemplo, {{domxref ("Node.childNodes")}} está en vivo:

+ +
var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // asumamos "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // debería imprimir "3"
+
+ +

En otros casos, NodeList es una colección estática, lo que significa que cualquier cambio posterior en el DOM no afecta el contenido de la colección. {{domxref ("document.querySelectorAll ()")}} devuelve un NodeList estático.

+ +

Es bueno tener en cuenta esta distinción cuando elige cómo iterar sobre los elementos en NodeList, y cómo guarda en caché la longitud de la lista en particular.

+ +

Propiedades

+ +
+
{{domxref("NodeList.length")}}
+
El número de nodos en la NodeList.
+
+ +

Métodos

+ +
+
{{domxref("NodeList.item()")}}
+
+ +
+
Devuelve un elemento en la lista por su índice, o null si el índice está fuera de límites; se puede utilizar como una alternativa para acceder simplemente a nodeList[idx] (que en cambio devuelve indefinido cuando idx está fuera de límites).
+
{{domxref("NodeList.entries()")}}
+
Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite pasar por todos los pares clave / valor contenidos en este objeto.
+
{{domxref("NodeList.forEach()")}}
+
Ejecuta una función proporcionada una vez por elemento NodeList.
+
{{domxref("NodeList.keys()")}}
+
Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite pasar por todas las claves de los pares clave / valor contenidos en este objeto.
+
{{domxref("NodeList.values()")}}
+
Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite recorrer todos los valores de los pares clave / valor contenidos en este objeto.
+
+ +

Ejemplo

+ +

Es posible iterar sobre los items en un NodeList usando:

+ +
for (var i = 0; i < myNodeList.length; i++) {
+  var item = myNodeList[i];  // No es necesario llamar a myNodeList.item(i) en JavaScript
+}
+
+ +

No se sienta tentado a for...in or for each...in para enumerar los elementos en la lista, ya que eso también enumerará la longitud y las propiedades del elemento de NodeList y causará errores si su secuencia de comandos asume que solo tiene que tratar con objetos {{domxref ("element")}}. Además, for..in no garantiza visitar las propiedades en ningún orden en particular.

+ +

Los bucles for...of harán un bucle sobre los objetos NodeList correctamente:

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}
+
+ +

Los navegadores recientes también son compatibles con los métodos de iteración, {{domxref("NodeList.forEach()", "forEach()")}}, así como {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, y {{domxref("NodeList.keys()", "keys()")}}

+ +

También hay una forma compatible con Internet Explorer de usar {{jsxref ("Array.forEach ()", "Array.prototype.forEach")}} para la iteración.

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{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') }}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

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

diff --git a/files/es/web/api/nondocumenttypechildnode/index.html b/files/es/web/api/nondocumenttypechildnode/index.html new file mode 100644 index 0000000000..20f5c6ea40 --- /dev/null +++ b/files/es/web/api/nondocumenttypechildnode/index.html @@ -0,0 +1,132 @@ +--- +title: NonDocumentTypeChildNode +slug: Web/API/NonDocumentTypeChildNode +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/NonDocumentTypeChildNode +--- +
{{APIRef("DOM")}}
+ +

The NonDocumentTypeChildNode interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent, but not suitable for {{domxref("DocumentType")}}.

+ +

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

+ +

Properties

+ +

There is no inherited property.

+ +
+
{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}
+
Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or null if there is no {{domxref("Element")}} in the list prior to this node.
+
{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}
+
Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or null if there is no {{domxref("Element")}} in the list following this node.
+
+ +

Methods

+ +

There is neither inherited, nor specific method.

+ +

Specifications

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

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Support (on {{domxref("CharacterData")}})1.0{{CompatGeckoDesktop("25.0")}} [1]9.010.04.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoDesktop("1.9.1")}}{{ CompatVersionUnknown() }}10.0{{ CompatVersionUnknown() }}
Support (on {{domxref("CharacterData")}}){{ CompatVersionUnknown() }}{{CompatGeckoDesktop("25.0")}}{{ CompatVersionUnknown() }}10.0{{ CompatVersionUnknown() }}
+
+ +

[1] Firefox 25 also added the two properties defined here on {{domxref("DocumentType")}}, this was removed in Firefox 28 due to compatibility problems, and led to the creation of this new pure interface.

+ +

See also

+ + diff --git a/files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html b/files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html new file mode 100644 index 0000000000..68395bc2b3 --- /dev/null +++ b/files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html @@ -0,0 +1,113 @@ +--- +title: NonDocumentTypeChildNode.nextElementSibling +slug: Web/API/NonDocumentTypeChildNode/nextElementSibling +tags: + - API + - DOM + - NonDocumentTypeChildNode + - Propiedad +translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura NonDocumentTypeChildNode.nextElementSibling devuelve el elemento inmediatamente posterior al especificado, dentro de la lista de elementos hijos de su padre, o bien null si el elemento especificado es el último en dicha lista.

+ +

Sintaxis

+ +
var nextNode = elementNodeReference.nextElementSibling;
+ +

Ejemplo

+ +
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+  var el = document.getElementById('div-01').nextElementSibling;
+  console.log('Siblings of div-01:');
+  while (el) {
+    console.log(el.nodeName);
+    el = el.nextElementSibling;
+  }
+</script>
+
+ +

Este ejemplo muestra en la consola lo siguiente cuando se carga:

+ +
Siblings of div-01:
+DIV
+SCRIPT
+ +

Polyfill para Internet Explorer 8

+ +

Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente fragmento de código puede utilizarse para añadir el soporte a IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("nextElementSibling" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+        get: function(){
+            var e = this.nextSibling;
+            while(e && 1 !== e.nodeType)
+                e = e.nextSibling;
+            return e;
+        }
+    });
+}
+ +

Polyfill para Internet Explorer 9+ y Safari

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('nextElementSibling')) {
+      return;
+    }
+    Object.defineProperty(item, 'nextElementSibling', {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        var el = this;
+        while (el = el.nextSibling) {
+          if (el.nodeType === 1) {
+              return el;
+          }
+        }
+        return null;
+      },
+      set: undefined
+    });
+  });
+})([Element.prototype, CharacterData.prototype]);
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-nextelementsibling', 'ChildNodenextElementSibling')}}{{Spec2('DOM WHATWG')}}Se dividió la interfaz ElementTraversal en {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, y {{domxref("NonDocumentTypeChildNode")}}. Este método queda ahora definido en la primera.
+ Los interfaces {{domxref("Element")}} y {{domxref("CharacterData")}} implementaron la nueva interfaz.
{{SpecName('Element Traversal', '#attribute-nextElementSibling', 'ElementTraversal.nextElementSibling')}}{{Spec2('Element Traversal')}}Añadió su definición inicial a la interfaz pura ElementTraversal y su uso en {{domxref("Element")}}.
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.NonDocumentTypeChildNode.nextElementSibling")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html b/files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html new file mode 100644 index 0000000000..13867e8fe4 --- /dev/null +++ b/files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html @@ -0,0 +1,160 @@ +--- +title: NonDocumentTypeChildNode.previousElementSibling +slug: Web/API/NonDocumentTypeChildNode/previousElementSibling +translation_of: Web/API/NonDocumentTypeChildNode/previousElementSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de sólo lectura NonDocumentTypeChildNode.previousElementSibling retorna el {{domxref("Element")}} predecesor inmediato al especificado dentro de la lista de hijos de su padre, o bien null si el elemento especificado es el primero de dicha lista.

+ +

Sintaxis

+ +
prevNode = elementNodeReference.previousElementSibling;
+
+ +

Ejemplo

+ +
<div id="div-01">Aquí está div-01</div>
+<div id="div-02">Aquí está div-02</div>
+<li>Esto es un elemento de lista</li>
+<li>Esto es otro elemento de lista</li>
+<div id="div-03">Aquí esta div-03</div>
+
+<script>
+  var el = document.getElementById('div-03').previousElementSibling;
+  document.write('<p>Hermanos de div-03</p><ol>');
+  while (el) {
+    document.write('<li>' + el.nodeName + '</li>');
+    el = el.previousElementSibling;
+  }
+  document.write('</ol>');
+</script>
+
+ +

Este ejemplo muestra lo siguiente en la página cuando carga:

+ +
Hermanos de div-03
+
+   1. LI
+   2. LI
+   3. DIV
+   4. DIV
+
+ +

Polyfill para Internet Explorer 8

+ +

Esta propiedad no está soportada con anterioridad a IE9, así que puede utilizarse el siguiente fragmento para añadri el soporte a IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("previousElementSibling" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "previousElementSibling", {
+        get: function(){
+            var e = this.previousSibling;
+            while(e && 1 !== e.nodeType)
+                e = e.previousSibling;
+            return e;
+        }
+    });
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', 'NonDocumentTypeChildNode.previousElementSibling')}}{{Spec2('DOM WHATWG')}}Dividió el interfaz ElementTraversal en {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, y {{domxref("NonDocumentTypeChildNode")}}. Este método queda ahora definida en el primero.
+ Los interfaces {{domxref("Element")}} y {{domxref("CharacterData")}} implementaron la nueva interfaz.
{{SpecName('Element Traversal', '#attribute-previousElementSibling', 'ElementTraversal.previousElementSibling')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal y lo usa en {{domxref("Element")}}.
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})4{{CompatGeckoDesktop("1.9.1")}}99.84
Soporte en {{domxref("CharacterData")}}29.0{{CompatGeckoDesktop("25")}} [1]{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}9.8{{CompatVersionUnknown}}
Soporte en {{domxref("CharacterData")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

[1] Firefox 25 también añadía esta propiedad a {{domxref("DocumentType")}}, y fue eliminada en Firefox 28 debido a problemas de compatibildad.

+ +

Ver también

+ + diff --git a/files/es/web/api/notification/body/index.html b/files/es/web/api/notification/body/index.html new file mode 100644 index 0000000000..46c3209386 --- /dev/null +++ b/files/es/web/api/notification/body/index.html @@ -0,0 +1,63 @@ +--- +title: Notification.body +slug: Web/API/notification/body +tags: + - API + - API Notificaciones + - Javascript Notificador + - Notificaciones +translation_of: Web/API/Notification/body +--- +

{{APIRef("Web Notifications")}}

+ +

{{ SeeCompatTable() }}

+ +

Resumen 

+ +

El body es la  propiedad que representa el contenido  de la notificacion.

+ +

Los valores por esta propiedad son enviandos durante la  instanciación de {{domxref("Notification")}}  definiendo la propiedad body en el objeto de las opciones pasa al {{domxref("Notification")}} constructor.

+ +

Sintaxis

+ +
var body = instanceOfNotification.body;
+
+ +

Tipo

+ +

String.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Initial specification.
   
+ + + +

{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/notification/dir/index.html b/files/es/web/api/notification/dir/index.html new file mode 100644 index 0000000000..35f58dfca7 --- /dev/null +++ b/files/es/web/api/notification/dir/index.html @@ -0,0 +1,59 @@ +--- +title: Notification.dir +slug: Web/API/notification/dir +translation_of: Web/API/Notification/dir +--- +

{{APIRef("Web Notifications")}}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad dir indica la direccion para el lenguaje a usar dentro de la notificación.

+ +

El valor por esta propiedad es envianda durante la instanciancion de {{domxref("Notification")}} mediante la definición de la propiedad dir el objeto de las opciones pasa al {{domxref ("Notificación")}} constructor.

+ +

Sintaxis

+ +
var direction = instanceOfNotification.dir;
+
+ +

Tipo

+ +

String representa la actual direccion. puede ser:  

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionEstadoComentarios
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Initial specification.
+ + + +

{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

+ +

Ver tambien

+ + diff --git a/files/es/web/api/notification/icon/index.html b/files/es/web/api/notification/icon/index.html new file mode 100644 index 0000000000..deb7c0606e --- /dev/null +++ b/files/es/web/api/notification/icon/index.html @@ -0,0 +1,58 @@ +--- +title: Notification.icon +slug: Web/API/notification/icon +translation_of: Web/API/Notification/icon +--- +

{{APIRef("Web Notifications")}}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad icon indica la URL del icono a usar dentro de la notificacion.

+ +

El valor para esta propiedad es enviada durante la instanciacion {{domxref("Notification")}}  definiendo la propiedad icon el objeto pasa al  {{domxref("Notification")}} constructor.

+ +

Sintaxis

+ +
var icon = instanceOfNotification.icon;
+
+ +

Tipo

+ +

String que representa una URL válida.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Initial specification.
   
+ + + +

{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/notification/index.html b/files/es/web/api/notification/index.html new file mode 100644 index 0000000000..a673bc5739 --- /dev/null +++ b/files/es/web/api/notification/index.html @@ -0,0 +1,430 @@ +--- +title: Notification +slug: Web/API/notification +translation_of: Web/API/Notification +--- +
{{APIRef("Web Notifications")}}
+ +
+ +

La interfaz Notification de la Notifications API se usa para configurar y mostrar notificaciones de escritorio al usuario. La apariencia y las funcionalidad especificas de esta notificacion varia a traves de las distintas plataformas, pero generalmente esta plataformas proveen un camino para proveer informacion al usuario de manera asincronica.

+ +

{{AvailableInWorkers}}

+ +

Constructor

+ +
+
{{domxref("Notification.Notification", "Notification()")}}
+
Crea una nueva instancia del objecto Notification.
+
+ +

Propiedades

+ +

Propiedades Estáticas

+ +

Estas propiedades solo estan disponibles en el objecto Notification en sí mismo.

+ + + +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
Una cadena que representa el permiso actual para mostrar notificaciones. Los valores posibles son:
+
+ + + + + +
+
+ +

Propiedades de Instancia

+ +

Estas propiedades solo están disponibles en instancias del objecto Notification.

+ +
+
{{domxref("Notification.actions")}} {{readonlyinline}}
+
Arreglo de acciones de la notificación, como se especifica en el parámetro de opciones del constructor.
+
{{domxref("Notification.badge")}} {{readonlyinline}}
+
URL de la imagen usada para representar la notificación cuando no hay espacio suficiente para mostrarla.
+
+ +
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
El título de la notificación como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
La dirección del texto de la notificación como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
El código del lenguaje de la notificación como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
The body string de la notificación como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
El ID de la notificación (si hay) como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
La URL de la imagen usada como ícono de la notificación como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.image")}} {{readonlyinline}}
+
URL de una imagen para mostrar como parte de la notificación, al igual que se especifica en el parámetro de opciones del constructor.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Retorna un clon estructurado de los datos de la notificación.
+
{{domxref("Notification.requireInteraction")}} {{readonlyinline}}
+
Un {{jsxref("Boolean")}} indicando en dispositivos pantallas lo suficientemente grandes, una notificación debería permanecer activa hasta que el usuario haga click o la descarte.
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
Especifica si la notificación debería ser silenciada, por ejemplo sin generar sonidos o vibraciones, independientemente de la configuración del dispositivo.
+
{{domxref("Notification.timestamp")}} {{readonlyinline}}
+
Especifica el tiempo en la cual una notificación fué creada o aplicable (pasado, presente o futuro).
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Especifica un patrón de vibración para dispositivos que disponen de hardware para emitirlo. 
+
+ +

Propiedades no soportadas

+ +

Las siguientes propiedades están listadas en las especificaciones más actualizadas, pero aún no están soportadas por los navegadores. Es aconsejable verificarlas regularmente para ver si el estado de ellas ha sido actualizado, y háganos saber si encuentra información desactualizada.

+ +
+
{{domxref("Notification.noscreen")}} {{readonlyinline}}
+
Specifies whether the notification firing should enable the device's screen or not.
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
Especifica si se debe notificar al usuario después de que una notificación nueva reemplace a una anterior.
+
{{domxref("Notification.sound")}} {{readonlyinline}}
+
Especifica un recurso de sonido para reproducir cuando se activa la notificación, en lugar del sonido de notificación del sistema predeterminado.
+
{{domxref("Notification.sticky")}} {{readonlyinline}}
+
+
Especifica si la notificación debe ser 'fija', es decir, no fácilmente eliminable por el usuario.
+
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
+
Especifica un patrón de vibración para los dispositivos con hardware de vibraciones para emitir.
+
+
+ +

Manejador de Eventos(Event Handler)

+ +
+
{{domxref("Notification.onclick")}}
+
Un manejador para el {{event("click")}} event. Sera inicializado cada vez que el usuario de click en la notificacion.
+
{{domxref("Notification.onerror")}}
+
A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.
+
+ +

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

+ Estos métodos están disponibles solo en el objeto de Notificación en sí.
+
+
{{domxref("Notification.requestPermission()")}}
+
Solicita permiso del usuario para mostrar notificaciones.
+
+

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

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{property_prefix("webkit")}}[1]
+ 22		4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}256[3]
icon5{{property_prefix("webkit")}}[1]
+ 22		4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}25{{CompatNo}}
Available in workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatChrome(43.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
noscreen, sticky{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
renotify{{CompatChrome(50.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatUnknown}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
icon{{CompatUnknown}}{{CompatVersionUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
silent{{CompatNo}}{{CompatChrome(43.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
noscreen, sticky{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
renotify{{CompatNo}}{{CompatChrome(50.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[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

+ Using the Notifications API
+
diff --git a/files/es/web/api/notification/onclick/index.html b/files/es/web/api/notification/onclick/index.html new file mode 100644 index 0000000000..211947a1b8 --- /dev/null +++ b/files/es/web/api/notification/onclick/index.html @@ -0,0 +1,61 @@ +--- +title: Notification.onclick +slug: Web/API/notification/onclick +tags: + - API + - DOM + - Notifications + - Propiedad + - Referencia + - onclick +translation_of: Web/API/Notification/onclick +--- +

{{APIRef("Web Notifications")}}

+ +

La propiedad onclick de la interfaz {{domxref("Notification")}} especifica un event listener para recibir eventos {{event("click")}}. Estos eventos ocurren cuando el usuario hace un click sobre el {{domxref("Notification")}} mostrado.

+ +

Sintaxis

+ +
Notification.onclick = function(event) { ... };
+
+ +

El comportamiento por defecto es mover el foco al viewport del sitio de contexto de dicha notificación. Si no deseas este comportamiento, puedes llamar preventDefault() en el objeto del evento.

+ +

Ejemplos

+ +

En el siguiente ejemplo, utilizamos un manejador onclick para abrir un sitio web en una nueva pestaña (especificado con la inclusión del parámetro '_blank') una vez que la notifación es cliqueada.

+ +
notification.onclick = function(event) {
+  event.preventDefault(); // Previene al buscador de mover el foco a la pestaña del Notification
+  window.open('http://www.mozilla.org', '_blank');
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications','#dom-notification-onclick','onclick')}}{{Spec2('Web Notifications')}}Living standard.
+ +

Compatibilidad de navegadores

+ +

{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

+ +

Mira también

+ + diff --git a/files/es/web/api/notification/permission/index.html b/files/es/web/api/notification/permission/index.html new file mode 100644 index 0000000000..d528e2f9e0 --- /dev/null +++ b/files/es/web/api/notification/permission/index.html @@ -0,0 +1,191 @@ +--- +title: Notification.permission +slug: Web/API/notification/permission +translation_of: Web/API/Notification/permission +--- +

{{APIRef("Web Notifications")}}

+ +

La propiedad permission es una propiedad de sólo lectura de la interfaz {{domxref("Notification")}}. Esta propiedad indica el permiso concedido por el usuario para mostrar notificaciones.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
var permission = Notification.permission;
+ +

Valor

+ +

Una {{domxref("DOMString")}} que representa el permiso actual. El valor puede ser:

+ + + +

Ejemplos

+ +

Podríamos usar el próximo fragmento para:

+ +
    +
  1. Comprobar si las notificaciones están soportadas
    2. +
  2. Comprobar si el permiso ha sido concedido para el origen actual +
      +
    1. Si ha sido concedido, lanzar la notificación
      2. +
    2. Si no ha sido concedido, pedir el permiso
      3. +
    3. Si se concede, lanzar la notificación
      4. +
    +
    3. +
+ +
function notifyMe() {
+  // Comprobamos si el navegador soporta las notificaciones
+  if (!("Notification" in window)) {
+    console.log("Este navegador no es compatible con las notificaciones de escritorio");
+  }
+
+  // Comprobamos si los permisos han sido concedidos anteriormente
+  else if (Notification.permission === "granted") {
+    // Si es correcto, lanzamos una notificación
+    var notification = new Notification("Hola!");
+  }
+
+  // Si no, pedimos permiso para la notificación
+  else if (Notification.permission !== 'denied' || Notification.permission === "default") {
+    Notification.requestPermission(function (permission) {
+      // Si el usuario nos lo concede, creamos la notificación
+      if (permission === "granted") {
+        var notification = new Notification("Hola!");
+      }
+    });
+  }
+
+  // Por último, si el usuario ha denegado el permiso, y quieres ser respetuoso, no hay necesidad de molestarlo.
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Web Notifications","#dom-notification-permission","permission")}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5 {{ property_prefix("webkit") }} (see notes)
+ 22		{{CompatVersionUnknown}}4.0 {{ property_prefix("moz") }} (see notes)
+ 22		{{ CompatNo() }}256 (see notes)
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte básico{{ CompatUnknown() }} +

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}4.0 {{ property_prefix("moz") }} (see notes)
+ 22		1.0.1 {{ property_prefix("moz") }} (see notes)
+ 1.2		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }} +

{{CompatVersionUnknown}}

+
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Notas de Firefox OS

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}

+ +

Notas de Chrome

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}

+ +

Notas de Safari

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/notification/requestpermission/index.html b/files/es/web/api/notification/requestpermission/index.html new file mode 100644 index 0000000000..6c4b8080b3 --- /dev/null +++ b/files/es/web/api/notification/requestpermission/index.html @@ -0,0 +1,143 @@ +--- +title: Notification.requestPermission() +slug: Web/API/notification/requestPermission +translation_of: Web/API/Notification/requestPermission +--- +

{{APIRef("Web Notifications")}}

+ +

El método requestPermission() de la interfaz {{domxref("Notification")}} realiza una petición de permiso al usuario para que en ese dominio web se puedan mostrar notificaciones. 

+ +

Sintaxis

+ +

La ultima especificación ha actualizado este método a una sintaxis basada en Promise:

+ +
Notification.requestPermission().then(function(permission) { ... });
+ +

Anteriormente, la sintaxis se basaba en una simple retrollamada (callback); esta especificación ahora está obsoleta.

+ +
Notification.requestPermission(callback);
+ +

Parámetros

+ +
+
callback {{optional_inline}} {{deprecated_inline("gecko46")}}
+
Una retrollamada (callback) opcional que es ejecutado con el valor del permiso elegido por el usuario. Obsoleto y reemplazado por el valor de retorno de Promise.
+
+ +

Retorno

+ +

Devuleve un Promise que se transforma a DOMString con el permiso escogido por el usuario. Los valores posibles para este son granted, denied, ó default.

+ +

Ejemplo

+ +

El siguiente fragmento realiza la petición de permiso al usuario, después registra un resultado diferente dependiendo de la elección del usuario.

+ +
Notification.requestPermission(function(result) {
+  if (result === 'denied') {
+    console.log('Permission wasn\'t granted. Allow a retry.');
+    return;
+  } else if (result === 'default') {
+    console.log('The permission request was dismissed.');
+    return;
+  }
+  // Hacer algo con el permiso concedido.
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidad con los buscadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5 {{ property_prefix("webkit") }} (ver notas)
+ 22		4.0 {{ property_prefix("moz") }} (ver notas)
+ 22		{{ CompatNo() }}256 (ver notas)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte básico{{ CompatUnknown() }} +

{{CompatVersionUnknown}}

+ 		4.0 {{ property_prefix("moz") }} (ver notas)
+ 22		1.0.1 {{ property_prefix("moz") }} (ver notas)
+ 1.2		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }} +

{{CompatVersionUnknown}}

+
+
+ +

Notas de Firefox OS

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}

+ +

Notas de Chrome

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}

+ +

Notas de Safari

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/notifications_api/index.html b/files/es/web/api/notifications_api/index.html new file mode 100644 index 0000000000..596064172e --- /dev/null +++ b/files/es/web/api/notifications_api/index.html @@ -0,0 +1,198 @@ +--- +title: Notifications API +slug: Web/API/Notifications_API +tags: + - Landing + - NeedsTranslation + - Notifications + - TopicStub + - permission + - system +translation_of: Web/API/Notifications_API +--- +

{{DefaultAPISidebar("Web Notifications")}}

+ +

The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems, across different platforms.

+ +

Concepts and usage

+ +

On supported platforms, showing a system notification generally involves two things. First, the user needs to grant the current origin permission to display system notifications, which is generally done when the app or site initialises, using the {{domxref("Notification.requestPermission()")}} method. This will spawn a request dialog, along the following lines:

+ +

+ +

From here the user can choose to allow notifications from this origin, block notifications from this origin, or not choose at this point. Once a choice has been made, the setting will generally persist for the current session. 

+ +
+

Note: As of Firefox 44, the permissions for Notifications and Push have been merged. If permission is granted for notifications, push will also be enabled.

+
+ +

Next, a new notification is created using the {{domxref("Notification.Notification","Notification()")}} constructor. This must be passed a title argument, and can optionally be passed an options object to specify options, such as text direction, body text, icon to display, notification sound to play, and more.

+ +

{{AvailableInWorkers}}

+ +

In addition, the Notifications API spec specifies a number of additions to the ServiceWorker API, to allow service workers to fire notifications.

+ +
+

Note: To find out more about using notifications in your own app, read Using the Notifications API.

+
+ +

Notifications interfaces

+ +
+
{{domxref("Notification")}}
+
Defines a notification object.
+
+ +

Service worker additions

+ +
+
{{domxref("ServiceWorkerRegistration")}}
+
Includes the {{domxref("ServiceWorkerRegistration.showNotification()")}} and {{domxref("ServiceWorkerRegistration.getNotifications()")}} method, for controlling the display of notifications.
+
{{domxref("ServiceWorkerGlobalScope")}}
+
Includes the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} handler, for firing custom functions when a notification is clicked.
+
{{domxref("NotificationEvent")}}
+
A specific type of event object, based on {{domxref("ExtendableEvent")}}, which represents a notification that has fired.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{property_prefix("webkit")}}[1]
+ 22		{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		{{CompatNo}}256[3]
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Service worker additions +

{{CompatChrome(42.0)}}

+ 		{{CompatGeckoDesktop("42.0")}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		{{CompatGeckoMobile(2.0)}}{{property_prefix("moz")}}[2]
+ {{CompatGeckoMobile(22.0)}}		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41.0)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Service worker additions{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(42.0)}}[4]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
+
+ +

[1] Prior to 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. Prior to Chrome 32, {{domxref("Notification.permission")}} was not supported.

+ +

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification was done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification() method. In addition, 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.)

+ +

[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).

+ +

[4] Firefox 42 has shipped with web notifications from Service Workers disabled.

+ +

Firefox OS permissions

+ +

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": {}
+}
+ +

See also

+ + diff --git a/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html b/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html new file mode 100644 index 0000000000..8220534f63 --- /dev/null +++ b/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html @@ -0,0 +1,294 @@ +--- +title: Usando la API de Notificaciones +slug: Web/API/Notifications_API/Usando_la_API_de_Notificaciones +tags: + - API + - Notificaciones + - Tutorial +translation_of: Web/API/Notifications_API/Using_the_Notifications_API +--- +

{{APIRef("Web Notifications")}}

+ +

La API de Notificaciones permite a una página web enviar notificaciones que se mostrarán fuera de la web al nivel del sistema. Esto permite a las aplicaciones web enviar información al usuario aunque estas estén de fondo.

+ +

{{AvailableInWorkers}}

+ +

Para comenzar, tenemos que saber qué son las notificaciones y cómo se muestran. En la imagen de abajo se puede ver un ejemplo de notificaciones en android.

+ +

+ +

El sistema de notificaciones variará según el navegador y la plataforma en la que estemos, pero esto no va a suponer ningún problema. La API de notificaciones está escrita de manera que sea compatible con la gran mayoría de sistemas.

+ +

Ejemplos

+ +
+
+

Un ejemplo claro de uso de notificaciones web puede ser un mail basado en web o una aplicación IRC que nos notificará cada vez que nos llegue un nuevo mensaje, aunque estemos fuera de la aplicación. Un ejemplo de esto lo podemos ver en Slack.

+ +

Hemos escrito un par de ejemplos del mundo real para dar una idea más clara de cómo podemos usar las notificaciones web:

+ +
    +
  • Lista de pendientes: Esto es una app sencilla que almacena las tareas pendientes localmente usando IndexedDB y avisa al usuario cuándo hay que realizar las tareas mediante notificaciones. Descarga el código, o echa un vistazo al ejemplo en tiempo real.
    • +
  • Emogotchi: Una parodia absurda de Tamagotchi, en la que tienes que mantener a tu Emo miserable o perderás el juego. Esto usa las notificaciones del sistema para indicarte cómo lo estás haciendo y para quejarse de ti, TODO EL RATO. Descarga el código de Emogotchi, o echa un vistazo a la versión en tiempo real.
    • +
+
+ +
+

.

+
+
+ +

Pidiendo permiso

+ +

Antes de que una app pueda lanzar una notificación, el usuario tiene que darle permiso para ello. Esto es un requisito común cuando una API intenta interactuar con algo fuera de una página web — al menos una vez, el usuario tendrá que permitir a la aplicación mostrar notificaciones, de esta forma, el usuario decide qué aplicaciones le pueden mostrar notificaciones y cuáles no.

+ +

Comprobando el permiso actual

+ +

Puedes comprobar si ya tienes permiso comprobando la propiedad {{domxref("Notification.permission")}} de solo lectura. Esta puede tener uno de los siguientes valores:

+ +
+
default
+
No se le ha pedido permiso al usuario aún, por lo que la app no tiene permisos.
+
granted
+
El usuario ha permitido las notificaciones de la app.
+
denied
+
El usuario ha denegado las notificaciones de la app.
+
+ +

Obteniendo permiso

+ +

Si la aplicación aún no tiene permiso para mostrar notificaciones, tendremos que hacer uso de {{domxref("Notification.requestPermission()")}} para pedir permiso al usuario. En su manera más simple, tal y como se usa en la Demo de Emogotchi (código fuente), solo tenemos que incluir lo siguiente:

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

Esto usa la versión promise del método, que está soportada en las versiones recientes (p.ej. Firefox 47). Si quieres soportar versiones más antiguas tendrás que usar la versión de callback, que es la siguiente:

+ +
Notification.requestPermission();
+ +

La versión de callback acepta de forma opcional una función callback que será ejecutada cuando el usuario responda a si quiere notificaciones o no (tal y como se ve en el segundo else ... if abajo). Por lo general, pedirás permiso para mostrar notificaciones una vez que hayas inicializado la app, y antes de lanzar una notificación. Si quieres ser muy cuidadoso puedes usar lo siguiente (ver To-do List Notifications):

+ +
function notifyMe() {
+  // Comprobamos si el navegador soporta las notificaciones
+  if (!("Notification" in window)) {
+    alert("Este navegador no soporta las notificaciones del sistema");
+  }
+
+  // Comprobamos si ya nos habían dado permiso
+  else if (Notification.permission === "granted") {
+    // Si esta correcto lanzamos la notificación
+    var notification = new Notification("Holiwis :D");
+  }
+
+  // Si no, tendremos que pedir permiso al usuario
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // Si el usuario acepta, lanzamos la notificación
+      if (permission === "granted") {
+        var notification = new Notification("Gracias majo!");
+      }
+    });
+  }
+
+  // Finalmente, si el usuario te ha denegado el permiso y
+  // quieres ser respetuoso no hay necesidad molestar más.
+}
+ +
+

Nota: Antes de la versión 37, Chrome no te deja llamar a {{domxref("Notification.requestPermission()")}} en manejador de eventos load (ver problema 274284).

+
+ +

Permisos en Firefox OS manifest

+ +

Ten en cuenta que mientras la API de Notificaciones no esté {{Glossary("privileged")}} o {{Glossary("certified")}}, deberías seguir inculyendo una entrada en tu archivo manifest.webapp cuando vayas a usarlo en una app en Firefox OS:

+ +
"permissions": {
+  "desktop-notification": {
+    "description": "Needed for creating system notifications."
+  }
+},
+"messages": [{"notification": "path/to/your/index.html"}]
+
+
+ +
+

Nota: Cuándo una aplicación es instalada, no deberías de necesitar {{anch("Getting permission","explicitly request permission")}}, pero vas a seguir necesitando los permisos y las entradas de texto de arriba para poder lanzar las notificaciones.

+
+ +

Creando una notificación

+ +

Crear una notificación es fácil, simplemente usa el constructor {{domxref("Notification")}}. Este constructor espera un título que mostrar en la notificación y otras opciones para mejorar la notificación, como un {{domxref("Notification.icon","icon")}} o un texto {{domxref("Notification.body","body")}}.

+ +

Por ejemplo, en el Ejemplo de Emogotchi tenemos dos funciones que pueden ser llamadas cuando hay que lanzar una notificación; el uso de una u otra depende de si queremos establecer el contenido de la notificación, o si queremos una notificación con contenido aleatorio:

+ +
function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+  setTimeout(n.close.bind(n), 5000);
+}
+
+function randomNotification() {
+  var randomQuote = quoteChooser();
+  var options = {
+      body: randomQuote,
+      icon: 'img/sad_head.png',
+  }
+
+  var n = new Notification('Emogotchi says',options);
+  setTimeout(n.close.bind(n), 5000);
+}
+ +

Cerrando las notificaciones

+ +

Firefox y Safari cierran las notificaciones automáticamente tras cierto tiempo (unos 4 segundos). Esto también puede suceder a nivel de sistema operativo (en Windows duran 7 segundos por defecto). En cambio, en algunos navegadores no se cierran automáticamente, como en Chrome, por ejemplo. Para asegurarnos de que las notificaciones se cierran en todos los navegadores, al final de las funciones de arriba, llamamos a la función {domxref("Notification.close")}}  dentro de {{domxref("WindowTimers.setTimeout","setTimeout()")}} para cerrar la notificación tras 5 segundos. Date cuenta también del uso que hacemos de bind() para asegurarnos de que la función close() está asociada a la notificación.

+ +
setTimeout(n.close.bind(n), 5000);
+
+ +
+

Nota: Cuándo recibes un evento "close", no hay ninguna garantía de que haya sido el usuario quién ha cerrado la notificación. Esto coincide con la especificación que dice: "Cuando una notificación es cerrada, sea por la misma plataforma o por el usuario, se deben lanzar los pasos de cierre para la misma".

+
+ +

Eventos de Notificación

+ +

Las especificaciones de la API de notificaciones listan cuatro eventos que pueden ser lanzados en la instancia {{domxref("Notification")}}:

+ +
+
{{event("click")}}
+
Lanzado cuando el usuario hace click en la notificación.
+
{{event("error")}}
+
Lanzado cuando algo falla en la notificación; habitualmente es porque la notificación no se ha podido mostrar por algún motivo.
+
+ +

Estos eventos se pueden monitorizar usando los manejadores {{domxref("Notification.onclick","onclick")}} y {{domxref("Notification.onerror","onerror")}}. Como {{domxref("Notification")}} también hereda de {{domxref("EventTarget")}}, es posible usar el método {{domxref("EventTarget.addEventListener","addEventListener()")}} en ella.

+ +

También hay otros dos eventos que estaban listados en la especificación, pero que han sido eliminados recientemente. Estos puede que sigan funcionando en los navegadores por ahora, pero deberían tratarse como obsoletos y evitar su uso:

+ +
+
{{event("close")}}
+
Lanzado cuándo la notificación se cierra.
+
{{event("show")}}
+
Lanzado cuándo la notificación se muestra al usuario.
+
+ +

Reemplazando notificaciones existentes

+ +

Normalmente los usuario no quieren recibir muchas notificaciones en poco tiempo — por ejemplo, una aplicación de mensajería que te notifica cada mensaje que te llegue, y te llegan un montón. Para evitar el spam de notificaciones, se puede modificar la cola de notificaciones, reemplazando una o varias notificaciones pendientes, por una nueva notificación.

+ +

Para hacer esto, se puede añadir una etiqueta a cualquier nueva notificación. Si ya hay una notificación con la misma etiqueta y aún no se ha mostrado, la nueva reemplazará a la anterior. Si la notificación con la misma etiqueta ya ha sido mostrada, se cerrará la anterior y se mostrará la nueva.

+ +

Ejemplo de etiquta

+ +

Teniendo el siguiente código HTML:

+ +
<button>Notifícame!</button>
+ +

Es posible controlar múltiples notificaciones de la siguiente forma:

+ +
window.addEventListener('load', function () {
+  // Primero, comprobamos si tenemos permiso para lanzar notificaciones
+  // Si no lo tenemos, lo pedimos
+  if (window.Notification && Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si el usuario ha dado permiso
+    // le intentamos enviar 10 notificaciones
+    if (window.Notification && Notification.permission === "granted") {
+      var i = 0;
+      // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
+      var interval = window.setInterval(function () {
+        // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9"
+        var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
+    }
+
+    // Si el usuario no ha dicho si quiere notificaciones
+    // Nota: en Chrome no estamos seguros de si la propiedad permission
+    // esta asignada, por lo que es inseguro comprobar el valor "default".
+    else if (window.Notification && Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        // Si el usuario acepta
+        if (status === "granted") {
+          var i = 0;
+          // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
+          var interval = window.setInterval(function () {
+          // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9" var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
+        }
+
+        // Otherwise, we can fallback to a regular modal alert
+        else {
+          alert("Hi!");
+        }
+      });
+    }
+
+    // If the user refuses to get notified
+    else {
+      // We can fallback to a regular modal alert
+      alert("Hi!");
+    }
+  });
+});
+ +

Comprueba el ejemplo en directo abajo:

+ +

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

+ +

Receiving notification of clicks on app notifications

+ +

When a user clicks on a notification generated by an app, you will be notified of this event in two different ways, depending on the circumstance:

+ +
    +
  1. A click event if your app has not closed or been put in the background between the time you create the notification and the time the user clicks on it.
    2. +
  2. A system message otherwise.
    3. +
+ +

See this code snippet for an example of how to deal with this.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidad de navegadores

+ +

{{page("/en-US/Web/API/Notification","Browser compatibility")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/parentnode/append/index.html b/files/es/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..3899492a80 --- /dev/null +++ b/files/es/web/api/parentnode/append/index.html @@ -0,0 +1,134 @@ +--- +title: ParentNode.append() +slug: Web/API/ParentNode/append +translation_of: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}}
+ +

El método ParentNode.append() inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de ParentNode. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.

+ +

Diferencias con {{domxref("Node.appendChild()")}}:

+ + + +

Sintaxis

+ +
[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+
+ +

Parameters

+ +
+
nodes
+
Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.
+
+ +

Exceptions

+ + + +

Examples

+ +

Appending an element

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

Appending text

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+
+console.log(parent.textContent); // "Some text"
+ +

Appending an element and text

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.append() is unscopable

+ +

The append() method is not scoped into the with statement. See {{jsxref("Symbol.unscopables")}} for more information.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

Polyfill

+ +

You can polyfill the append() method in Internet Explorer 9 and higher with the following code:

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.ParentNode.append")}}

+ +

See also

+ + diff --git a/files/es/web/api/parentnode/childelementcount/index.html b/files/es/web/api/parentnode/childelementcount/index.html new file mode 100644 index 0000000000..3e8c834262 --- /dev/null +++ b/files/es/web/api/parentnode/childelementcount/index.html @@ -0,0 +1,126 @@ +--- +title: ParentNode.childElementCount +slug: Web/API/ParentNode/childElementCount +tags: + - API + - ChildNode + - DOM + - ParentNode + - childElement + - children +translation_of: Web/API/ParentNode/childElementCount +--- +
+

{{ APIRef("DOM") }}

+
+ +

La propiedad de sólo lectura ParentNode.childElementCount devuelve un número del tipo unsigned long que representa la cantidad de elementos hijo que penden del elemento padre (ParentNode).

+ +
+

Esta propiedad fue inicialmente definida en la interfaz pura {{domxref("ElementTraversal")}}. Como esta interfaz contenía dos conjuntos distintos de propiedades: una apuntaba al {{domxref("Node")}} con hijos y otra a los hijos, fueron trasladados a dos interfaces puras separadas: {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, childElementCount se mudó a {{domxref("ParentNode")}}. Este es un cambio bastante técnico que no debería afectar a la compatibilidad.

+
+ +

Sintaxis

+ +
var elCount = elementNodeReference.childElementCount;
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspacificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}Dividida la interfaz ElementTraversal en {{domxref("ChildNode")}} y ParentNode. Este método está ahora definido en la segunda.
+ Se implementaron las nuevas interfaces en {{domxref("Document")}} y {{domxref("DocumentFragment")}}.
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}}Añadida su definición inicial a la interfaz pura ElementTraversal y se emplea en {{domxref("Element")}}.
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (para {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
Soporta {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (para {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporta {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

[1] Internet Explorer 6, 7 y 8 lo soportan, pero cuenta los nodos {{domxref("Comment")}} de forma incorrecta.

+ +

Véase también

+ + diff --git a/files/es/web/api/parentnode/children/index.html b/files/es/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..8a9071830c --- /dev/null +++ b/files/es/web/api/parentnode/children/index.html @@ -0,0 +1,157 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - DOM + - ParentNode + - Propiedad +translation_of: Web/API/ParentNode/children +--- +

{{ APIRef("DOM") }}

+ +

Node.children es una propiedad de sólo lectura que retorna una {{domxref("HTMLCollection")}} "viva" de los elementos hijos de un Node.

+ +

Sintaxis

+ +
var children = node.children;
+ +

children es una {{ domxref("HTMLCollection") }}, que es una colección ordenada de los elementos DOM que son hijos de node. Si no hay elementos hijos, entonces children no contendrá elementos y su longitud ( length )  será 0.

+ +

Ejemplo

+ +
var foo = document.getElementById('foo');
+for (var i = 0; i < foo.children.length; i++) {
+    console.log(foo.children[i].tagName);
+}
+
+ +

Polyfill

+ +
// Sobrescribe el prototipo 'children' nativo.
+// Añade soporte para Document y DocumentFragment en IE9 y Safari.
+// Devuelve un array en lugar de 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);
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Definición Inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]38.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatNo}}16.0{{CompatNo}}
Soporte en {{domxref("SVGElement")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte básico {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

[1] Internet Explorer 6, 7 y 8 lo soportan, pero incluyen nodos {{domxref("Comment")}} de manera errónea.

+ +

Ver también

+ + diff --git a/files/es/web/api/parentnode/firstelementchild/index.html b/files/es/web/api/parentnode/firstelementchild/index.html new file mode 100644 index 0000000000..a9993d8ccf --- /dev/null +++ b/files/es/web/api/parentnode/firstelementchild/index.html @@ -0,0 +1,143 @@ +--- +title: ParentNode.firstElementChild +slug: Web/API/ParentNode/firstElementChild +translation_of: Web/API/ParentNode/firstElementChild +--- +

{{ APIRef("DOM") }}

+ +

La propiedad de sólo lectura ParentNode.firstElementChild retorna el primer hijo del objeto {{domxref("Element")}}, o bien null si no existen elementos hijos.

+ +
+

Esta propiedada fue definida inicialmente en el interfaz puro {{domxref("ElementTraversal")}}. Como este interfaz contenía dos juegos distintos de propiedades, uno orientado a {{domxref("Node")}} que tenía hijos, y otro a aquellos que eran hijos, se trasladaron a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, firstElementChild fue movido a {{domxref("ParentNode")}}. Es un cambio de carácter estrictamente técnico que no debería afectar a la compatibilidad.

+
+ +

Sintaxis

+ +
var childNode = elementNodeReference.firstElementChild;
+
+ +

Ejemplo

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

En este ejemlpo, la alerta muestra 'span', que es el nombre de la etiqueta del primer nodo hijo dele elemento párrafo.

+ +

Polyfill para Internet Explorer 8

+ +

Esta propiedad no está soportada con anterioridad a  IE9, así que el siguiente fragmento puede ser usado para añadir el soporte a IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("firstElementChild" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "firstElementChild", {
+        get: function(){
+            for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i)
+                if(n = nodes[i], 1 === n.nodeType) return n;
+            return null;
+        }
+    });
+}
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Dividido el interfaz ElementTraversal en {{domxref("ChildNode")}} y ParentNode. Este método queda definido ahora en el segundo.
+ Los {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal y lo usa en {{domxref("Element")}}.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/parentnode/index.html b/files/es/web/api/parentnode/index.html new file mode 100644 index 0000000000..53af6c3203 --- /dev/null +++ b/files/es/web/api/parentnode/index.html @@ -0,0 +1,151 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API DOM Tab + - NeedsTranslation + - TopicStub +translation_of: Web/API/ParentNode +--- +

{{ APIRef("DOM") }}

+ +

The ParentNode interface contains methods that are particular to {{domxref("Node")}} objects that can have children.

+ +

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

+ +

 

+ +

Properties

+ +
+
{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}
+
Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this ParentNode.
+
{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}
+
Returns the {{domxref("Element")}} that is the first child of this ParentNode, or null if there is none.
+
{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}
+
Returns the {{domxref("Element")}} that is the last child of this ParentNode, or null if there is none.
+
{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}
+
Returns an unsigned long giving the amount of children that the object has.
+
+ +

Methods

+ +

There is no inherited or specific and implemented methods.

+ +

Specification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. The firstElementChild, lastElementChild, and childElementCount properties are now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
+ Added the children property.
+ Added the append() and prepend() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
append() and prepend() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
append() and prepend() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.

+ +

See also

+ + diff --git a/files/es/web/api/parentnode/lastelementchild/index.html b/files/es/web/api/parentnode/lastelementchild/index.html new file mode 100644 index 0000000000..c644b90db8 --- /dev/null +++ b/files/es/web/api/parentnode/lastelementchild/index.html @@ -0,0 +1,146 @@ +--- +title: ParentNode.lastElementChild +slug: Web/API/ParentNode/lastElementChild +translation_of: Web/API/ParentNode/lastElementChild +--- +

{{ APIRef("DOM") }}

+ +

La propiedad de sólo lectura ParentNode.lastElementChild retorna el último hijo del objeto {{domxref("Element")}} o bien null si no hay elementos hijos.

+ +
+

Esta propiedad fue inicialmente definida en el interfaz puro {{domxref("ElementTraversal")}}. Dado que este interfaz contenía dos juegos distintos de propiedades, uno dirigido al nodo {{domxref("Node")}} que tiene hijos, y otro a aquellos que son hijos, se han trasladado a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, lastElementChild fue movido a {{domxref("ParentNode")}}. Este es un cambio de carácter técnico que no debería afectar a la compatibilidad.

+
+ +

Sintaxis

+ +
var childNode = elementNodeReference.lastElementChild;
+ +

Ejemplo

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

En este ejemplo, la alerta muestra "B", que es el nombre de etiqueta del último nodo hijo del elemento párrafo ("P").

+ +

Polyfill para Internet Explorer 8

+ +

Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente códigopuede ser usado para añadir el soporte a IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("lastElementChild" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "lastElementChild", {
+        get: function(){
+            for(var nodes = this.children, n, i = nodes.length - 1; i >= 0; --i)
+                if(n = nodes[i], 1 === n.nodeType) return n;
+            return null;
+        }
+    });
+}
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}{{Spec2('DOM WHATWG')}}Dividido el interfaz ElementTraversal en {{domxref("ChildNode")}} y ParentNode. Este método queda ahora definido en el segundo.
+ {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.
{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal  y lo usa en {{domxref("Element")}}.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/payment_request_api/index.html b/files/es/web/api/payment_request_api/index.html new file mode 100644 index 0000000000..376a9899c2 --- /dev/null +++ b/files/es/web/api/payment_request_api/index.html @@ -0,0 +1,136 @@ +--- +title: API de Solicitud de Pago +slug: Web/API/Payment_Request_API +tags: + - API + - API de Solicitud de Pago + - Comercio + - Contexto seguro + - Intermediário + - Pago + - Referencia + - Solicitud de Pago + - Tarjeta de Crédito +translation_of: Web/API/Payment_Request_API +--- +
{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}
+ +

El API de solicitud de pago provee una experiencia consistente tanto para comerciantes, como para usuarios. No es una nueva forma de pagar; más bien, es una manera para que los usuarios puedan seleccionar su forma de pago preferida para pagar por cosas, y que esa información esté disponible para el comerciante.

+ +

Solicitud de pago conceptos y uso

+ +

Muchos problemas relacionados con el abandono de carros de compras en línea pueden deberse a los formularios de pago, los cuales pueden ser complicados y consumir demasiado tiempo para llenarse y a veces requieren muchos pasos para completarse. El API de Petición de Pago intenta reducir el número de pasos necesarios para completar un pago en línea, potencialmente haciendo a un lado los formularios de pago. Hace el proceso de pago mucho más fácil recordando los datos del usuario, los cuales son entregados al comerciante ojalá sin requerid un formulario HTML.

+ +

Ventajas de usar la API de Solicitud de Pago con "basic-card" (pagos basados en cartas):

+ + + +

Para solicitar un pago, a página web crea un objeto {{domxref("PaymentRequest")}} en respuesta a una acción del usuario que inicia el pago, como hacer click en un botón "Comprar". El PaymentRequest permite a la página web intercambiar información agente de usuario (user agent) mientras que el usuario provee los datos para completar la transacción.

+ +

Puedes encontrar una guía completa en Usando la API de Solicitud de Pago.

+ +
+

Nota: La API solo está disponibledentro de elementos {{htmlelement("iframe")}} cross-origin si tienen el atributo {{htmlattrxref("allowpaymentrequest","iframe")}}.

+
+ +

Interfaces

+ +
+
{{domxref('PaymentAddress')}}
+
Un objeto que contiene la dirección; usada para facturación y despacho, por ejemplo.
+
{{domxref('PaymentRequest')}}
+
Un objeto que provee la API para crear y administrar la interfaz de pago del {{Glossary("user agent", "user agent's")}}.
+
{{domxref('PaymentRequestEvent')}}
+
Un evento entregado a un manejador de pagos cuando un {{domxref("PaymentRequest")}} es realizado.
+
{{domxref('PaymentRequestUpdateEvent')}}
+
Permite que la página web actualice los detalles de la solicitud de pago en respuesta a una acción del usuario.
+
{{domxref('PaymentMethodChangeEvent')}}
+
Representa al usuario cambiando el instrumento de pago (por ejemplo, cambiando de una tarjeta de crédito a una tarjeta de débito).
+
{{domxref('PaymentResponse')}}
+
Objeto devuelto después de que el usuario selecciona un método de pago y aprueba una solicitud de pago.
+
{{domxref('MerchantValidationEvent')}}
+
Representa el navegador que requiere que el comerciante (sitio web) se valide a sí mismo como autorizado para usar un manejador de pagos en particular (por ejemplo, registrado como autorizado para usar Apple Pay).
+
+ +
+
+ +

Diccionarios

+ +
+
{{domxref("AddressErrors")}}
+
Un diccionario que contiene cadenas que proporcionan explicaciones descriptivas de cualquier error en cualquier entrada de {{domxref ("PaymentAddress")}} que tenga errores.
+
{{domxref("PayerErrors")}}
+
Un diccionario que contiene cadenas que proporcionan explicaciones descriptivas de cualquier error relacionado con los atributos de correo electrónico, teléfono y nombre de {{domxref ("PaymentResponse")}}.
+
{{domxref("PaymentDetailsUpdate")}}
+
Un objeto que describe los cambios que deben realizarse en los detalles del pago en caso de que el servidor necesite actualizar la información después de la instanciación de la interfaz de pago, pero antes de que el usuario comience a interactuar con ella.
+
+ +

Diccionarios relacionados para la especificación Basic Card

+ +
+
{{domxref("BasicCardChangeDetails")}}
+
Un objeto que proporciona información de dirección redactada que se proporciona como {{domxref ("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} en el evento {{event ("paymentmethodchange")}} enviado al {{domxref ("PaymentRequest" )}} cuando el usuario cambia la información de pago.
+
{{domxref("BasicCardErrors")}}
+
Un objeto que proporciona mensajes de error asociados con los campos del objeto {{domxref ("BasicCardResponse")}} que no son válidos. Esto se usa como el valor de la propiedad {{domxref ("PaymentValidationErrors.paymentMethod", "paymentMethod")}} en el objeto {{domxref ("PaymentValidationErrors")}} enviado al {{domxref ("PaymentRequest")}} cuando ocurre un error.
+
{{domxref('BasicCardRequest')}}
+
Define una estructura de objeto para contener detalles de la solicitud de pago, como el tipo de tarjeta.
+
{{domxref('BasicCardResponse')}}
+
Define una estructura de objeto para los detalles de la respuesta de pago, como el número o la fecha de vencimiento de la tarjeta utilizada para realizar el pago y la dirección de facturación.
+
+ +

Specificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaciónEstatusComentario
{{SpecName('Payment')}}{{Spec2('Payment')}}Definición inicial.
{{SpecName('Basic Card Payment')}}{{Spec2('Basic Card Payment')}}Define {{domxref ("BasicCardRequest")}} y {{domxref ("BasicCardResponse")}}, entre otras cosas necesarias para manejar el pago con tarjeta de crédito
{{SpecName('Payment Method Identifiers')}}{{Spec2('Payment Method Identifiers')}}Define los identificadores de los métodos de pago y cómo se validan y, en su caso, se acuñan y se registran formalmente en el W3C.
+ +

Compatibilidad del navegador

+ +
+

Interfaz PaymentRequest

+ +
+ + +

{{Compat("api.PaymentRequest", 0)}}

+
+
+ +

Ver también

+ + diff --git a/files/es/web/api/performance/clearmarks/index.html b/files/es/web/api/performance/clearmarks/index.html new file mode 100644 index 0000000000..dca7aa8ac1 --- /dev/null +++ b/files/es/web/api/performance/clearmarks/index.html @@ -0,0 +1,95 @@ +--- +title: performance.clearMarks() +slug: Web/API/Performance/clearMarks +tags: + - API + - Referencia + - Rendimiento Web + - metodo +translation_of: Web/API/Performance/clearMarks +--- +
{{APIRef("User Timing API")}}
+ +

El método clearMarks() elimina la marca llamada del búfer de rendimiento de entrada del navegador. Si el método es llamado sin argumentos, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "mark" serán eliminados del búfer de rendimiento de entrada.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
performance.clearMarks();
+performance.clearMarks(name);
+
+ +

Argumentos

+ +
+
nombre {{optional_inline}}
+
Un {{domxref("DOMString")}} representando el nombre de la marca de tiempo. Si este argumento es omitido, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "mark" serán eliminados.
+
+ +

Valor de retorno

+ +
+
vacío
+
+
+ +

Ejemplo

+ +

El siguiente ejemplo muestra ambos usos del método clearMarks().

+ +
// Create a small helper to show how many PerformanceMark entries there are.
+function logMarkCount() {
+  console.log(
+    "Found this many entries: " + performance.getEntriesByType("mark").length
+  );
+}
+
+// Create a bunch of marks.
+performance.mark("squirrel");
+performance.mark("squirrel");
+performance.mark("monkey");
+performance.mark("monkey");
+performance.mark("dog");
+performance.mark("dog");
+
+logMarkCount() // "Found this many entries: 6"
+
+// Delete just the "squirrel" PerformanceMark entries.
+performance.clearMarks('squirrel');
+logMarkCount() // "Found this many entries: 4"
+
+// Delete all of the PerformanceMark entries.
+performance.clearMarks();
+logMarkCount() // "Found this many entries: 0"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('User Timing Level 2', '#dom-performance-clearmarks', 'clearMarks()')}}{{Spec2('User Timing Level 2')}}Se clarifica clearMarks().
{{SpecName('User Timing', '#dom-performance-clearmarks', 'clearMarks()')}}{{Spec2('User Timing')}}Definición básica.
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.clearMarks")}}

+
diff --git a/files/es/web/api/performance/clearmeasures/index.html b/files/es/web/api/performance/clearmeasures/index.html new file mode 100644 index 0000000000..63fa0dd936 --- /dev/null +++ b/files/es/web/api/performance/clearmeasures/index.html @@ -0,0 +1,96 @@ +--- +title: performance.clearMeasures() +slug: Web/API/Performance/clearMeasures +tags: + - API + - Referencia + - Rendimiento Web + - metodo +translation_of: Web/API/Performance/clearMeasures +--- +
{{APIRef("User Timing API")}}
+ +

El método clearMeasures() elimina la medida llamada del búfer de rendimiento de entrada, si el método es llamado sin argumentos, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "measure" serán eliminados del búfer de rendimiento de entrada.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
performance.clearMeasures();
+performance.clearMeasures(name);
+
+ +

Argumentos

+ +
+
nombre {{optional_inline}}
+
Un {{domxref("DOMString")}} representando el nombre de la marca de tiempo. Si el argumento se omite, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "measure" serán eliminados.
+
+ +

Valor de retorno

+ +
+
vacío
+
+
+ +

Ejemplo

+ +

En el siguiente ejemplo se muestran los dos usos del método clearMeasures() .

+ +
// Create a small helper to show how many PerformanceMeasure entries there are.
+function logMeasureCount() {
+  console.log(
+    "Found this many entries: " + performance.getEntriesByType("measure").length
+  );
+}
+
+// Create a bunch of measures.
+performance.measure("from navigation");
+performance.mark("a");
+performance.measure("from mark a", "a");
+performance.measure("from navigation");
+performance.measure("from mark a", "a");
+performance.mark("b");
+performance.measure("between a and b", "a", "b");
+
+logMeasureCount() // "Found this many entries: 5"
+
+// Delete just the "from navigation" PerformanceMeasure entries.
+performance.clearMeasures("from navigation");
+logMeasureCount() // "Found this many entries: 3"
+
+// Delete all of the PerformanceMeasure entries.
+performance.clearMeasures();
+logMeasureCount() // "Found this many entries: 0"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('User Timing Level 2', '#dom-performance-clearmeasures', 'clearMeasures()')}}{{Spec2('User Timing Level 2')}}Se clarifica clearMeasures().
{{SpecName('User Timing', '#dom-performance-clearmeasures', 'clearMeasures()')}}{{Spec2('User Timing')}}Definición básica.
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.clearMeasures")}}

+
diff --git a/files/es/web/api/performance/index.html b/files/es/web/api/performance/index.html new file mode 100644 index 0000000000..00d3cbfe16 --- /dev/null +++ b/files/es/web/api/performance/index.html @@ -0,0 +1,142 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Interfaz + - Referencia + - Rendimiento + - Rendimiento Web + - Tiempo de navegación +translation_of: Web/API/Performance +--- +
{{APIRef("High Resolution Time")}}
+ +

La interfaz Performance representa información relacionada con el tiempo de rendimiento para la página dada.

+ +

Un objeto de este tipo puede ser obtenido por el llamado de el atributo de solo lectura {{domxref("Window.performance")}}.

+ +
+

Nota:  Esta interfaz y sus miembros están disponibles en Web Workers, exceptuando en los mencionados abajo. También, tenga en cuenta que las marcas y medidas de rendimiento son por contexto. Si crea una marca en el hilo principal (u otro worker), no puedes verlo en un hilo de un worker, y vice versa.

+
+ +

Propiedades

+ +

La interfaz Performance no hereda ninguna propiedad.

+ +
+
{{domxref("Performance.navigation")}} {{readonlyInline}} {{deprecated_inline}}
+
Un objeto del legado {{domxref("PerformanceNavigation")}} que provee contexto útil acerca de operaciones, incluidas en los tiempos listados en timing, incluyendo si la página fue cargada o refrescada, cuántas redirecciones ocurrieron, entre otros. No disponible en workers
+
{{domxref("Performance.timing")}} {{readonlyInline}} {{deprecated_inline}}
+
Un objeto del legado {domxref("PerformanceTiming")}} que contiene información relacionada con la latencia.
+
{{domxref("Performance.memory")}} {{readonlyInline}} {{Non-standard_inline}}
+
Una no standarizada extensión añadida a Chrome, esta propiedad provee un objeto con información básica de uso de memoria. No deberías usar esta no estandarizada API.
+
{{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}
+
Retorna una marca de tiempo de alta precisión de la hora de inicio de la medida de rendimiento.
+
+ +

Métodos

+ +

La interfaz Performance no hereda ningún método.

+ +
+
{{domxref("Performance.clearMarks()")}}
+
Elimina la marca dada del búfer de entrada de rendimiento del navegador.
+
{{domxref("Performance.clearMeasures()")}}
+
Elimina las medida dadas del búfer de entrada del navegador.
+
{{domxref("Performance.clearResourceTimings()")}}
+
Elimina todas las {domxref("PerformanceEntry","performance entries")}} con una {{domxref("PerformanceEntry.entryType","entryType")}} de "resource" del búfer de datos de rendimiento del navegador.
+
{{domxref("Performance.getEntries()")}}
+
Devuelve una lista de objetos {{domxref("PerformanceEntry")}} basados en el filtro dado.
+
{{domxref("Performance.getEntriesByName()")}}
+
Devuelve una lista de objetos {{domxref("PerformanceEntry")}} basados en el nombre dado y el tipo de entrada.
+
{{domxref("Performance.getEntriesByType()")}}
+
Devuelve una lista de objetos {{domxref("PerformanceEntry")}} de el tipo de entrada dado.
+
{{domxref("Performance.mark()")}}
+
Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} en el  búfer de entrada de rendimiento del navegador.
+
{{domxref("Performance.measure()")}}
+
Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nombrado en el  búfer de entrada de rendimiento del navegador entre dos especificadas marcas (conocidas como la marca de inicio y la marca final, respectivamente).
+
{{domxref("Performance.now()")}}
+
Retorna un {{domxref("DOMHighResTimeStamp")}} representando el número de milisegundos transcurridos desde un instante de referencia.
+
{{domxref("Performance.setResourceTimingBufferSize()")}}
+
Define el tamaño del búfer de temporización de recursos de "resource"  a los objetos {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}}.
+
{{domxref("Performance.toJSON()")}}
+
Es un jsonizador que retorna un objeto json que respresenta el objecto Performance.
+
+ +

Eventos

+ +

Escucha a estos eventos que están usando addEventListener() o por asignación de un escuchador de eventos a la propiedad oneventname de esta interfaz.

+ +
+
{{DOMxRef("Performance.resourcetimingbufferfull_event", "resourcetimingbufferfull")}}
+
Disparado cuando "resource timing buffer" está lleno.
+ También disponible usando la propiedad {{DOMxRef("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}. 
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}{{Spec2('Highres Time Level 2')}}Se define el método toJson().
{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}{{Spec2('Highres Time')}}Se define el método now().
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}{{Spec2('Navigation Timing')}}Se definen las propiedades timing and navigation.
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Cambia la interfaz getEntries().
{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Se definen los métodos getEntries(), getEntriesByType() y getEntriesByName() .
{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('Resource Timing')}}Se definen los métdos clearResourceTimings() y setResourceTimingBufferSize() y la propiedad onresourcetimingbufferfull .
{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing Level 2')}}Se clarifican los métodos mark(), clearMark(), measure() y clearMeasure().
{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing')}}Se definen los métodos mark(), clearMark(), measure() y clearMeasure().
{{SpecName('Frame Timing', '#extensions-performance-interface','Performance extensions')}}{{Spec2('User Timing')}}Se definen los métodos clearFrameTimings(), setFrameTimingBufferSize(), y onframetimingbufferfull.
+ +

Compatibilidad de navegadores

+ +
+
+ + +

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

+
+
diff --git a/files/es/web/api/performance/memory/index.html b/files/es/web/api/performance/memory/index.html new file mode 100644 index 0000000000..91c3dd3e0b --- /dev/null +++ b/files/es/web/api/performance/memory/index.html @@ -0,0 +1,42 @@ +--- +title: Performance.memory +slug: Web/API/Performance/memory +translation_of: Web/API/Performance/memory +--- +

{{APIRef}}

+ +

Sintaxis

+ +
timingInfo = performance.memory
+ +

Atributos

+ +
+
jsHeapSizeLimit
+
El tamaño máximo del heap en bytes que está disponible para el contexto.
+
totalJSHeapSize
+
El total del heap asignado, en bytes. The total allocated heap size, in bytes.
+
+ +
+
usedJSHeapSize
+
El actualmente activo segmento de heap de JS, en bytes.
+
+ +

Especificaciones

+ +

Ninguna.

+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.memory")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/performance/navigation/index.html b/files/es/web/api/performance/navigation/index.html new file mode 100644 index 0000000000..62bef8feb5 --- /dev/null +++ b/files/es/web/api/performance/navigation/index.html @@ -0,0 +1,58 @@ +--- +title: Performance.navigation +slug: Web/API/Performance/navigation +tags: + - API + - Deprecado + - HTTP + - Legado + - Propiedad + - Rendimiento + - Solo lectura + - Tiempo de navegación +translation_of: Web/API/Performance/navigation +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Esta propiedad está deprecada en Navigation Timing Level 2 specification.

+
+ +

La propiedad de solo lectura Performance.navigation del legado devuelve un objeto {{domxref("PerformanceNavigation")}} representado el tipo de navegación que ocurre en el contexto de navegación dado, tales como el número de redirecciones necesarias para traer el recurso.

+ +

Esta propiedad no está disponible en workers.

+ +

Sintaxis

+ +
navObject = performance.navigation;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.navigation')}}{{Spec2('Navigation Timing')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.navigation")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/performance/now/index.html b/files/es/web/api/performance/now/index.html new file mode 100644 index 0000000000..64f73a4916 --- /dev/null +++ b/files/es/web/api/performance/now/index.html @@ -0,0 +1,166 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - Referencia + - Rendimiento + - Web Performance API + - metodo +translation_of: Web/API/Performance/now +--- +
{{APIRef("High Resolution Timing")}}
+ +

El método performance.now() devuelve un {{domxref("DOMHighResTimeStamp")}}, medido en milisegundos, con una precisión de cinco milésimas de segundo (5 microsegundos).

+ +

El valor devuelto representa el tiempo transcurrido desde el tiempo de origen (la propiedad {{domxref("PerformanceTiming.navigationStart")}}). En un web worker, el tiempo de origen es el momento en que se crea su contexto de ejecución (ej. hilo o proceso). En una ventana, es el momento en que el usuario navegó (o confirmó la navegación, si la confirmación fue necesaria) al documento actual. Tenga en cuenta los siguientes puntos:

+ + + +

Sintaxis

+ +
t = performance.now();
+ +

Ejemplo

+ +
var t0 = performance.now();
+hacerAlgo();
+var t1 = performance.now();
+console.log("La llamada a hacerAlgo tardó " + (t1 - t0) + " milisegundos.");
+
+ +

A diferencia de otros datos de tiempo disponibles en JavaScript (por ejemplo Date.now), las marcas de tiempo devueltas por Performance.now() no se limitan a resoluciones de un milisegundo. En su lugar, representan tiempos como números en punto flotante con hasta una precisión de microsegundos.

+ +

También a diferencia de Date.now(), los valores devueltos por Performance.now() siempre se incrementan a un ritmo constante, independientemente del sistema de reloj (que podría estar ajustado manualmente o manipulado por software como NTP). De todos modos, performance.timing.navigationStart + performance.now() será aproximadamente igual a Date.now().

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time Level 2')}}Definiciones más estrictas de interfaces y tipos.
{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("20.0")}} {{property_prefix("webkit")}}
+ {{CompatChrome("24.0")}} [1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}10.0{{CompatOpera("15.0")}}{{CompatSafari("8.0")}}
en Web workers{{CompatChrome("33")}}{{CompatUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
now() en un worker dedicado está ahora separado del contexto principal de now().{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("45.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome para Android
Soporte básico{{CompatAndroid("4.0")}}{{CompatChrome("25.0")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("15.0")}}10.0{{CompatNo}}9{{CompatChrome("25.0")}}
en Web workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
now() en un worker dedicado está ahora separado del contexto principal de now().{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("45.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Las versiones de Windows desde Chrome 20 al 33 devuelven performance.now() sólo con precisión de milisegundos.

+ +

Vea también

+ + diff --git a/files/es/web/api/performance/timeorigin/index.html b/files/es/web/api/performance/timeorigin/index.html new file mode 100644 index 0000000000..c8f6255687 --- /dev/null +++ b/files/es/web/api/performance/timeorigin/index.html @@ -0,0 +1,48 @@ +--- +title: Performance.timeOrigin +slug: Web/API/Performance/timeOrigin +tags: + - API + - Experimental + - Propiedad + - Referencia + - Rendimiento + - timeOrigin +translation_of: Web/API/Performance/timeOrigin +--- +

{{SeeCompatTable}}{{APIRef("High Resolution Time")}}

+ +

La propiedad de solo lectura timeOrigin de la inferfaz {{domxref("Performance")}} devuelve una marca de tiempo de alta precisión del inicio de medida de rendimiento.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
var timeOrigin = performance.timeOrigin
+ +

Valor

+ +

Una marca de tiempo de alta precisión.

+ +

Especificaciones

+ + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('Highres Time Level 2','#dom-performance-timeorigin','timeOrigin')}}{{Spec2('Highres Time Level 2')}}
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.timeOrigin")}}

+
diff --git a/files/es/web/api/performance/timing/index.html b/files/es/web/api/performance/timing/index.html new file mode 100644 index 0000000000..ef5e07387b --- /dev/null +++ b/files/es/web/api/performance/timing/index.html @@ -0,0 +1,57 @@ +--- +title: Performance.timing +slug: Web/API/Performance/timing +tags: + - API + - Deprecada + - Legado + - Propiedad + - Rendimiento + - Solo lectura + - Tiempo de navegación +translation_of: Web/API/Performance/timing +--- +

{{APIRef("Navigation Timing")}}{{deprecated_header}}

+ +
+

Esta propiedad está deprecada en Navigation Timing Level 2 specification. Por favor usa {{domxref("Performance.timeOrigin")}} en vez esta..

+
+ +

La propiedad de solo lecutra Performance.timing de legado devulve un objeto {{domxref("PerformanceTiming")}} que contienen información relacionada con el rendimiento en relación a la latencia.

+ +

Esta propiedad no está disponible en workers.

+ +

Sintaxis

+ +
var timingInfo = performance.timing;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.timing')}}{{Spec2('Navigation Timing')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.timing")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/performancenavigation/index.html b/files/es/web/api/performancenavigation/index.html new file mode 100644 index 0000000000..60ed7f1ce4 --- /dev/null +++ b/files/es/web/api/performancenavigation/index.html @@ -0,0 +1,87 @@ +--- +title: PerformanceNavigation +slug: Web/API/PerformanceNavigation +tags: + - API + - API de tiempo de navegación + - Compatibilidad + - Deprecada + - Interfaz + - Legado + - Referencia + - Rendimiento + - TIempo + - Tiempo de navegación +translation_of: Web/API/PerformanceNavigation +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Esta interfaz está deprecada en Navigation Timing Level 2 specification. Por favor usa la interfaz {{domxref("PerformanceNavigationTiming")}} en lugar de esta.

+
+ +

La interfaz de legado PerformanceNavigation representa información acerca de cómo la navegación en el documento actual fue hecha.

+ +

Un objeto de este tipo puede ser optenido con el llamado del atributo de solo lectura {{domxref("Performance.navigation")}}.

+ +

Propiedades

+ +

La interfaz PerformanceNavigation no hereda ninguna propiedad.

+ +
+
{{deprecated_inline}} {{domxref("PerformanceNavigation.type")}} {{readonlyInline}}
+
Un unsigned short el cual indica cómo la navegación en esta página fue hecha. Los valores posibles son:
+
+
+
TYPE_NAVIGATE (0)
+
La página fue accesada por un link, un marcador, un formulario enviado, o un script, o escribiendo la URL en la barra de direcciones.
+
TYPE_RELOAD (1)
+
La página fue accesada haciendo click al botón de Recargar o con el método {{domxref("Location.reload()")}}.
+
TYPE_BACK_FORWARD (2)
+
La página fue accesada por la navegación en el historial.
+
TYPE_RESERVED (255)
+
Cualquier otra forma.
+
+
+
{{deprecated_inline}} {{domxref("PerformanceNavigation.redirectCount")}} {{readonlyInline}}
+
Un unsigned short que representa el número de REDIRECTs hechos antes de llegar a la página.
+
+ +

Métodos

+ +

La interfaz Performance no hereda ningún método.

+ +
+
{{deprecated_inline}} {{domxref("PerformanceNavigation.toJSON()")}}
+
Es un jsonizer que retorna un objeto json que representa el objecto PerformanceNavigation.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Navigation Timing', '#sec-navigation-info-interface', 'PerformanceNavigation')}}{{Spec2('Navigation Timing')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/positionoptions/index.html b/files/es/web/api/positionoptions/index.html new file mode 100644 index 0000000000..349aba4631 --- /dev/null +++ b/files/es/web/api/positionoptions/index.html @@ -0,0 +1,109 @@ +--- +title: PositionOptions +slug: Web/API/PositionOptions +tags: + - Geolocalización + - Interfaz + - Referencia +translation_of: Web/API/PositionOptions +--- +

{{APIRef("Geolocation API")}}

+ +

La interfaz PositionOptions describe las opciones disponibles cuando invocamos el "backend" de geolocalización. El navegador no crea este objeto directamente: es el script que invoca quien lo crea y usa como un parámetro de {{domxref("Geolocation.getCurrentPosition()")}} y {{domxref("Geolocation.watchPosition()")}}.

+ +

Propiedades

+ +

La interfaz PositionOptions no hereda ninguna propiedad.

+ +
+
{{domxref("PositionOptions.enableHighAccuracy")}}
+
Es un {{domxref("Boolean")}} que indica que la aplicación quiere recibir los mejores resultados posibles. Si es true y si el dispositivo es capaz de proporcionar una posición más precisa, así lo hará. Ten en cuenta que esto puede resultar en tiempos de respuesta más lentos o en un incremento del uso de energía (con un chip GPS en un teléfono móvil por ejemplo). Por otro lado, si es false (el valor por defecto), el dispositivo tiene libertad para decidir ahorrar recursos respondiendo más rápido y/o usando menos energía.
+
{{domxref("PositionOptions.timeout")}}
+
Es un valor long positivo que representa el máximo período de tiempo (en millisegundos) que se le permite tomar al dispositivo para retornar a una posición. El valor por defecto es Infinity, y significa que getCurrentPosition() no retornará hasta que esté disponible la posición.
+
{{domxref("PositionOptions.maximumAge")}}
+
Es un valor long positivo que indica la edad máxima en milisegundos de una posible posición "cacheada" que es aceptable retornar. Si es 0, significa que el dispositivo no puede usar posiciones "cacheadas" y debe intentar conseguir la posición real actual. Si es Infinity el dispositivo debe retornar una posición previamente "cacheada" independientemente de su edad.
+
+ +

Métodos

+ +

La interfaz PositionOptions no implementa ni hereda ningún método.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}{{Spec2('Geolocation')}}Especificación inicial.
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removed in 15.0
+ Reintroduced in 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/push_api/index.html b/files/es/web/api/push_api/index.html new file mode 100644 index 0000000000..0379ef3ee2 --- /dev/null +++ b/files/es/web/api/push_api/index.html @@ -0,0 +1,175 @@ +--- +title: Push API +slug: Web/API/Push_API +tags: + - API + - Experimental + - Notificaciones + - Push + - Referencia +translation_of: Web/API/Push_API +--- +

{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}

+ +

La API Push otorga a las aplicaciones web la habilidad de recibir mensajes enviados a ellas desde un servidor, sin importar si la aplicación está o no en primer plano o cargada. Esto permite a los desarrolladores enviar notificaciones asíncronas y actualizaciones para los usuarios que las aceptan.

+ +
+

Nota: Esta documentación cubre la especificación del API Push de W3C; si estás buscando la documentación para el mecanismo push propio de Firefox OS, ve Simple Push.

+
+ +

Push conceptos y uso

+ +

Para que una aplicación recibá mensajes push, esta debe tener un service worker. Cuando el service worker esta activo, se puede suscribir usando {{domxref("PushManager.subscribe()")}}.

+ +

El resultado de {{domxref("PushSubscription")}} incluye toda la información que la aplicación necesita para enviar un mensaje push: un endpoint y la llave de cifrado necesaria para enviar los datos.

+ +

El service worker se iniciará cuando sea necesario manejar mensajes push entrantes, que se entregan al manejador de eventos. Esto permite a las aplicaciones reaccionar a los mensajes push recibidos, por ejemplo para mostrar una notiificación usando {{domxref("ServiceWorkerRegistration.showNotification()")}}.

+ +

Cada suscripción es unica para un service worker. El endpoint para la subscripción es una unica capability URL: el conocimiento del endpoint es todo lo se necesita para enviar un mensaje a tu aplicación. La URL del endpoint  por lo tanto necesita ser mantenida secreta, u otras aplicaciones podrían ser capases de enviar mensajes push a tu aplicación.

+ +

Activar un Service-Worker para entregar un mensaje push puede resultar en el incremento de uso de recursos, especialmente de la batería. Los diferentes navegadores disponen de diferentes esquemas para manejar esto - en la actualidad no existe un mecanismo estándar para ello. Firefox permite un numero limitado (det. cuota) de mensajes push para enviar a una aplicación, aunque los mensajes push que generan una notificación estan exentos de este límite. Este límite se actualiza cada vez que se visita el sitio web. En comparación, Chrome no aplica límites, pero requiere que todo mensaje push muestre una notificación.

+ +
+

Note:  Desde Gecko 44, la cuota permitida de Push-messages por aplicación no se ve incrementada cada vez que se emite una nueva notificación, cuando otra sigue visible, durante el periodo de 3 segundos. Esto ayuda al manejo de casos en los que se reciben rafagas de notificaciones y no todas ellas emiten una notificación visible. 

+
+ +
+

Nota: en Chrome las versiones anteriores a la 52, requieren la cnfiguración de un proyecto en Google Cloud Messaging para el envío de Push-Messages, así como el uso del numero de proyecto y la API key asociadas para el envío de notificaciones push. Tambien se requiere el detalle de algunos parametros especiales en el app manifest para el uso de este servicio.

+
+ +

Interfaces

+ +
+
{{domxref("PushEvent")}}
+
Represena una acción push enviada al alcance global (global scope) de un {{domxref("ServiceWorker")}}. Contiene información enviada desde una aplicación a {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Provides a way to receive notifications from third-party servers as well as request URLs for push notifications. This interface has replaced functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.
+
{{domxref("PushMessageData")}}
+
Provee acceso a los datos push enviados por el servidor e incluye metodos para manipular los datos recibidos.
+
{{domxref("PushSubscription")}}
+
Provee el URL endpoint para una suscripción y permite la desuscripción de un servicio push.
+
+ +

Service worker: Adiciones

+ +

Las siguientes adiciones al Service Worker API han sido especificadas en la Push API, para proveer un punto de entrada al uso de Push messages. Tambien monitorizan y responden a los cambios en los eventos Push y Subscription.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Devuelve una referencia a la interfaz {{domxref("PushManager")}} para el manejo de las suscripciones incluyendo: la suscripción, obteniendo una suscripción activa y accediendo al estado de permiso de push. Este es el punto de inicio para el uso de Push messaging.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
Manipulador de eventos activado, cada vez que ocurre un evento {{Event("push")}}; Eto es, cada vez que se recibe un push-message del servidor.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
Manipulador de eventos activado, cada vez que ocurre un evento {{Event("pushsubscriptionchange")}}; Por ejemplo, cuando una suscripción ha sido invalidada o esta apunto de serlo. (P.ej. cuando un push service determina un tiempo de expiración.)
+
+ +

Ejemplos

+ +

Mozilla's ServiceWorker Cookbook contiene varios ejemplos Push muy utiles

+ +

Specifications

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

Browser Compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1]{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.

+ +

[2]: Microsoft Edge status: Under Consideration; Roadmap Priority: Low

+ +

See also

+ + diff --git a/files/es/web/api/push_api/using_the_push_api/index.html b/files/es/web/api/push_api/using_the_push_api/index.html new file mode 100644 index 0000000000..0088b97dd7 --- /dev/null +++ b/files/es/web/api/push_api/using_the_push_api/index.html @@ -0,0 +1,432 @@ +--- +title: Usando la API Push +slug: Web/API/Push_API/Using_the_Push_API +translation_of: Web/API/Push_API +--- +

La W3C Push API offers some exciting new functionality for developers to use in web applications: this article provides an introduction to getting Push notifications setup and running, with a simple demo.

+ +

La habilidad de enviar mensajes o notificaciones de un servidor a un cliente en cualquier momento —si la aplicación está activa en su sitema o no—es algo que ha sido disfrutado por las plataformas nativas durante algún tiempo, y esta finalmente llega a la web! el soporte para muchos push está ahora disponible en Firefox 43+ y Chrome 42+ en escritorio, esperamos seguir pronto con las plataformas moviles. {{domxref("PushMessageData")}} actualmente solo es soportada experimentalmente en Firefox (44+), y la implementación está sujeta a cambios.

+ +
+

Note: Early versions of Firefox OS used a proprietary version of this API called Simple Push. This is being rendered obsolete by the Push API standard.

+
+ +

Demo: las bases de una simple app de servidor de chat

+ +

La demo que hemos creado proporciona los principios de una simple app de chat. Esta presenta un formulario para que ingreses un identificador de chat y un boton que al presionar se suscriba a los mensajes push.

+ +

En este punto, el nombre de los nuevos suscriptores aparecerá en la lista de suscriptores, junto con un campo de texto y un botón de envío para permitir al suscriptor enviar mensajes.

+ +

At this point, the new subscriber's name will appear in the subscriber's list, along with a text field and submit button to allow the subscriber to send messages.

+ +

+ +

Para correr la demo, siga las instrucciones de push-api-demo README. Tenga en cuenta que el componente server-side aún nesecita un poco de trabajo para que funcione en chrome y se ejecute de una manera más rezonable. Pero los aspectos de push pueden ser explicados a fondo; Nos sumergiremos en ella después de revisar las tecnologías en juego.

+ +

Visión de la tecnología

+ +

Esta sección proporciona un esquema de qué tecnologías están involucradas en este ejemplo.

+ +

Los mensajes web push hacen parte de la familia tecnológica service workers; en particular, se requiere que un service worker esté activo en la página para recibir mensajes push. el service worker recibe el mensaje push, y acontinuación depende de usted cómo notificar a la página. Usted puede:

+ +

Web Push messages are part of the service workers technology family; in particular, a service worker is required to be active on the page for it to receive push messages. The service worker receives the push message, and then it is up to you how to then notify the page. You can:

+ + + +

A menudo una combinación de los dos será necesario; La demo a continuación muestra un ejemplo de cada uno.

+ +
+

Nota: Usted necesita algún tipo de código que se ejecute en el servidor para manejar el cifrado de punto final/datos y enviar las solicitudes de notificaciones push. En nuestra demostración hemos creado un servidor  quick-and-dirty usando NodeJS.

+
+ +

El service worker también tiene que suscribirse al servicio de mensajería psuh. Cada sesión recibe su propio punto final único cuando se suscribe al servicio de mensajería. Este punto final es obtenido desde la propiedad  ({{domxref("PushSubscription.endpoint")}}) en el objeto de suscripción. Este punto final se puede enviar a su servidor y se utiliza para enviar un mensaje al service worker asctivo en esta sesión. Cada navegador tiene su propio servidor de mensajería push para manejar el envío del mensaje push.

+ +

Encryption

+ +
+

Note: For an interactive walkthrough, try JR Conlin's Web Push Data Encryption Test Page.

+
+ +

To send data via a push message, it needs to be encrypted. This requires a public key created using the {{domxref("PushSubscription.getKey()")}} method, which relies upon some complex encryption mechanisms that are run server-side; read Message Encryption for Web Push for more details. As time goes on, libraries will appear to handle key generation and encryption/decryption of push messages; for this demo we used Marco Castelluccio's NodeJS web-push library.

+ +
+

Note: There is also another library to handle the encryption with a Node and Python version available, see encrypted-content-encoding.

+
+ +

Push workflow summary

+ +

To summarize, here is what is needed to implement push messaging. You can find more details about specific parts of the demo code in subsequent sections.

+ +
    +
  1. Request permission for web notifications, or anything else you are using that requires permissions.
    2. +
  2. Register a service worker to control the page by calling {{domxref("ServiceWorkerContainer.register()")}}.
    3. +
  3. Subscribe to the push messaging service using {{domxref("PushManager.subscribe()")}}.
    4. +
  4. Retrieve the endpoint associated with the subscription and generate a client public key ({{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}. Note that getKey() is currently experimental and Firefox only.)
    5. +
  5. Send these details to the server so it can send push message when required. This demo uses {{domxref("XMLHttpRequest")}}, but you could use Fetch.
    6. +
  6. If you are using the Channel Messaging API to comunicate with the service worker, set up a new message channel ({{domxref("MessageChannel.MessageChannel()")}}) and send port2 over to the service worker by calling {{domxref("Worker.postMessage()")}} on the service worker, in order to open up the communication channel. You should also set up a listener to respond to messages sent back from the service worker.
    7. +
  7. On the server side, store the endpoint and any other required details so they are available when a push message needs to be sent to a push subscriber (we are using a simple text file, but you could use a database or whatever you like). In a production app, make sure you keep these details hidden, so malicious parties can't steal endpoints and spam subscribers with push messages.
    8. +
  8. To send a push message, you need to send an HTTP POST to the endpoint URL. The request must include a TTL header that limits how long the message should be queued if the user is not online. To include payload data in your request, you must encrypt it (which involves the client public key). In our demo, we are using the web-push module, which handles all the hard work for you.
    9. +
  9. Over in your service worker, set up a push event handler to respond to push messages being received. +
      +
    1. If you want to respond by sending a channel message back to the main context (see Step 6) you need to first get a reference to the port2 we sent over to the service worker context ({{domxref("MessagePort")}}). This is available on the {{domxref("MessageEvent")}} object passed to the onmessage handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Specifically, this is found in the ports property, index 0. Once this is done, you can send a message back to port1, using {{domxref("MessagePort.postMessage()")}}.
      2. +
    2. If you want to respond by firing a system notification, you can do this by calling {{domxref("ServiceWorkerRegistration.showNotification()")}}. Note that in our code we have run this inside an {{domxref("ExtendableEvent.waitUntil()")}} method — this extends the lifetime of the event until after the notification has been fired, so we can make sure everything has happened that we want to happen.
      3. +
    +
    10. +
+ +

Construyendo la demo

+ +

Vamos a ensayar el código para esta demo, podemos empezar a entender como trabaja todo esto.

+ + + +

No hay nada destacalbe sobre el HTML y el CSS para la demo; el HTML inicialmente contiene un simple formulario que permite introducir un udentificador para la sala de chat, un boton que al hacer click se suscribe a las notificaciones push, y dos listas con los suscriptores y los mensajes. Una vez suscrito, aparecerán controles adicionales para permitir al usuario actual escribir mensajes en el chat.

+ +

El CSS ha sido muy minimo para no desvirtuar la explicación de la funcionalidad Push Api.

+ + + +

El JavaScript es obviamente más sustancial. Echemos un vistazo al archivo JavaScript principal.

+ +

Variables y configuración inicial

+ +

Para iniciar, nosotros declaramos algunas variables a usar en nuestra app:

+ +
var isPushEnabled = false;
+var useNotifications = false;
+
+var subBtn = document.querySelector('.subscribe');
+var sendBtn;
+var sendInput;
+
+var controlsBlock = document.querySelector('.controls');
+var subscribersList = document.querySelector('.subscribers ul');
+var messagesList = document.querySelector('.messages ul');
+
+var nameForm = document.querySelector('#form');
+var nameInput = document.querySelector('#name-input');
+nameForm.onsubmit = function(e) {
+  e.preventDefault()
+};
+nameInput.value = 'Bob';
+ +

Primero, tenemos dos boleanos para hacer un seguimiento si se a suscrito a push, y si ha permitido las notificaciones.

+ +

A continuación, tomamos una referencia al suscrito/no-suscrito {{htmlelement("button")}}, y se declaran variables para almacenar referencias a nuestro mensaje enviado boton/entrada (sólo se crean cuando la suscripsión es correcta.)

+ +

Las siguientes variables toman referencia a los trés elementos principales {{htmlelement("div")}} en el diseño, por lo que podemos insertar elementos en ellos (por ejemplo cuando aparezca el botón envíar el mensaje de chat o el mensaje de chat aparezca en la lista de mensajes.)

+ +

Finalmente tomamos referencia a nuestro formulario de selección de nombre y el elemento {{htmlelement("input")}}, damos a la entrada un valor por defecto, y usamos preventDefault() para detener el envío del formulario cuando este es enviado pulsando return.

+ +

A continuación, pedimos permiso para enviar las notificaciones web, usando {{domxref("Notification.requestPermission","requestPermission()")}}:

+ +
Notification.requestPermission();
+ +

Ahora ejecutamos una sección de código cuando se dispara el onload, para empezar el proceso de inicialización de la app cuando se carga pro primera vez. En primer lugar añadimos un detector de eventos de clik al botón  Sucribirse/unsubscribe que ejecuta nuestra funcion unsubscribe() si actualmente estamos suscritos (isPushEnabled is true), y subscribe() de la otra manera:

+ +
window.addEventListener('load', function() {
+  subBtn.addEventListener('click', function() {
+    if (isPushEnabled) {
+      unsubscribe();
+    } else {
+      subscribe();
+    }
+  });
+ +

A continuación verificamos el service worked es soportado. Si es así, registramos un service worker usando {{domxref("ServiceWorkerContainer.register()")}}, y ejecutando nuestra función initialiseState(). Si no es así, entregamos un mensaje de error a la consola.

+ +
  // Check that service workers are supported, if so, progressively
+  // enhance and add push messaging support, otherwise continue without it.
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js').then(function(reg) {
+      if(reg.installing) {
+        console.log('Service worker installing');
+      } else if(reg.waiting) {
+        console.log('Service worker installed');
+      } else if(reg.active) {
+        console.log('Service worker active');
+      }
+
+      initialiseState(reg);
+    });
+  } else {
+    console.log('Service workers aren\'t supported in this browser.');
+  }
+});
+
+ +

La siguiente cosa en el código es la función initialiseState() — para el codigo completo comentado, mira en initialiseState() source on Github (no lo estamos repitiendo aquí por brevedad.)

+ +

initialiseState() primero comprueba si las notificaciones son soportadas en los service workers, entonces establece la variable  useNotifications a verdadero. A continuación comprueba si dichas notificaciones están permitidas por el usuario y si los mensajes push están soportados, y reacciona deacuerdo a cada uno.

+ +

Finalmente, se usa {{domxref("ServiceWorkerContainer.ready()")}} para esperar a que el service worker esté activo y listo para hacer las cosas. Una vez se revuelva el promise, recuperamos nuestra suscripsión para enviar los mensajes push usando la propiedad {{domxref("ServiceWorkerRegistration.pushManager")}}, que devuelve un objeto {{domxref("PushManager")}} cuando llamamos a {{domxref("PushManager.getSubscription()")}}. Una vez la segunda promesa interna se resuelva, habilitamos el botón subscribe/unsubscribe (subBtn.disabled = false;), y verificamos que tenemos un objeto suscripsión para trabajar.

+ +

Si lo hacemos, entonces ya estamos suscritos. Esto es posible cuando la app no está abierta en el navegador; el service worker aun puede ser activado en segundo plano. si estamos suscritos, actualizamos la UI para mostrar que estamos suscritos por la actualizacion del label en el botón, entonces establecemos isPushEnabled to true, toma el punto final de suscripsión desde {{domxref("PushSubscription.endpoint")}}, genera una public key usando {{domxref("PushSubscription.getKey()")}}, y ejecutando nuestra función updateStatus(), que como verá más adelante se comunica con el servidor.

+ +

Como un bonus añadido, configuramos un nuevo {{domxref("MessageChannel")}} usando el constructor {{domxref("MessageChannel.MessageChannel()")}}, toma una referencia al service worker activo usando {{domxref("ServiceworkerRegistration.active")}}, luego configure un canal entre el contexto principal del navegador y el contexto del service worker usando {{domxref("Worker.postMessage()")}}. El contexto del navegador recive mensajes en {{domxref("MessageChannel.port1")}}; Cuando esto suceda, ejecutamos la función handleChannelMessage() para decidir que hacer con esos datos (mirar la sección {{anch("Handling channel messages sent from the service worker")}} ).

+ +

Subscribing and unsubscribing

+ +

Ahora regresamos la atención a las funciones subscribe() y unsubscribe() usadas para subscribe/unsubscribe al servicion de notificaciones push.

+ +

In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our updateStatus() function along with the update type (subscribe) to send the necessary details to the server.

+ +

We also make the necessary updates to the app state (set isPushEnabled to true) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)

+ +

The unsubscribe() function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.

+ +

Appropriate error handling is also provided in both functions.  

+ +

We only show the subscribe() code below, for brevity; see the full subscribe/unsubscribe code on Github.

+ +
function subscribe() {
+  // Disable the button so it can't be changed while
+  // we process the permission request
+
+  subBtn.disabled = true;
+
+  navigator.serviceWorker.ready.then(function(reg) {
+    reg.pushManager.subscribe({userVisibleOnly: true})
+      .then(function(subscription) {
+        // The subscription was successful
+        isPushEnabled = true;
+        subBtn.textContent = 'Unsubscribe from Push Messaging';
+        subBtn.disabled = false;
+
+        // Update status to subscribe current user on server, and to let
+        // other users know this user has subscribed
+        var endpoint = subscription.endpoint;
+        var key = subscription.getKey('p256dh');
+        updateStatus(endpoint,key,'subscribe');
+      })
+      .catch(function(e) {
+        if (Notification.permission === 'denied') {
+          // The user denied the notification permission which
+          // means we failed to subscribe and the user will need
+          // to manually change the notification permission to
+          // subscribe to push messages
+          console.log('Permission for Notifications was denied');
+
+        } else {
+          // A problem occurred with the subscription, this can
+          // often be down to an issue or lack of the gcm_sender_id
+          // and / or gcm_user_visible_only
+          console.log('Unable to subscribe to push.', e);
+          subBtn.disabled = false;
+          subBtn.textContent = 'Subscribe to Push Messaging';
+        }
+      });
+  });
+}
+ +

Updating the status in the app and server

+ +

The next function in our main JavaScript is updateStatus(), which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.

+ +

The function does one of three different things, depending on the value of the statusType parameter passed into it:

+ + + +

Again, we have not included the entire function listing for brevity. Examine the full updateStatus() code on Github.

+ +

Handling channel messages sent from the service worker

+ +

As mentioned earlier, when a channel message is received from the service worker, our handleChannelMessage() function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:

+ +
channel.port1.onmessage = function(e) {
+  handleChannelMessage(e.data);
+}
+ +

This occurs when the service worker sends a channel message over.

+ +

The handleChannelMessage() function looks like this:

+ +
function handleChannelMessage(data) {
+  if(data.action === 'subscribe' || data.action === 'init') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name;
+    subscribersList.appendChild(listItem);
+  } else if(data.action === 'unsubscribe') {
+    for(i = 0; i < subscribersList.children.length; i++) {
+      if(subscribersList.children[i].textContent === data.name) {
+        subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]);
+      }
+    }
+    nameInput.disabled = false;
+  } else if(data.action === 'chatMsg') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name + ": " + data.msg;
+    messagesList.appendChild(listItem);
+    sendInput.value = '';
+  }
+}
+ +

What happens here depends on what the action property on the data object is set to:

+ + + +
+

Note: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read Using Service Workers for more details.

+
+ +

Sending chat messages

+ +

When the Send Chat Message button is clicked, the content of the associated text field is sent as a chat message. This is handled by the sendChatMessage() function (again, not shown in full for brevity). This works in a similar way to the different parts of the updateStatus() function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a statusType of chatMsg.

+ +

The server

+ +

As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using NodeJS (server.js), which handles the XHR requests sent by our client-side JavaScript code.

+ +

It uses a text file (endpoint.txt) to store subscription details; this file starts out empty. There are four different types of request, marked by the statusType property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:

+ + + +

A couple more things to note:

+ + + +

The service worker

+ +

Now let's have a look at the service worker code (sw.js), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's action property:

+ + + +
self.addEventListener('push', function(event) {
+  var obj = event.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    fireNotification(obj, event);
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+ +

Next, let's look at the fireNotification() function (which is blissfully pretty simple).

+ +
function fireNotification(obj, event) {
+  var title = 'Subscription change';
+  var body = obj.name + ' has ' + obj.action + 'd.';
+  var icon = 'push-icon.png';
+  var tag = 'push';
+
+  event.waitUntil(self.registration.showNotification(title, {
+    body: body,
+    icon: icon,
+    tag: tag
+  }));
+}
+ +

Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)

+ +

+ +

Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. waitUntil() will extend the life cycle of the service worker until everything inside this method has completed.

+ +
+

Note: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as Clients.openWindow()) is properly implemented (see {{bug(1203324)}} for more details.)

+
+ +

Handling premature subscription expiration

+ +

Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example.  This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.

+ +
self.addEventListener('pushsubscriptionchange', function() {
+  // do something, usually resubscribe to push and
+  // send the new subscription details back to the
+  // server via XHR or Fetch
+});
+ +

Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.

+ +

Extra steps for Chrome support

+ +

To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.

+ +

Setting up Google Cloud Messaging

+ +

To get this set up, follow these steps:

+ +
    +
  1. Navigate to the Google Developers Console  and set up a new project.
    2. +
  2. Go to your project's homepage (ours is at https://console.developers.google.com/project/push-project-978, for example), then +
      +
    1. Select the Enable Google APIs for use in your apps option.
      2. +
    2. In the next screen, click Cloud Messaging for Android under the Mobile APIs section.
      3. +
    3. Click the Enable API button.
      4. +
    +
    3. +
  3. Now you need to make a note of your project number and API key because you'll need them later. To find them: +
      +
    1. Project number: click Home on the left; the project number is clearly marked at the top of your project's home page.
      2. +
    2. API key: click Credentials on the left hand menu; the API key can be found on that screen.
      3. +
    +
    4. +
+ +

manifest.json

+ +

You need to include a Google app-style manifest.json file in your app, which references the project number you made a note of earlier in the gcm_sender_id parameter. Here is our simple example manifest.json:

+ +
{
+  "name": "Push Demo",
+  "short_name": "Push Demo",
+  "icons": [{
+        "src": "push-icon.png",
+        "sizes": "111x111",
+        "type": "image/png"
+      }],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "gcm_sender_id": "224273183921"
+}
+ +

You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:

+ +
<link rel="manifest" href="manifest.json">
+ +

userVisibleOnly

+ +

Chrome requires you to set the userVisibleOnly parameter to true when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be seen in action in our subscribe() function.

+ +

See also

+ + + +
+

Note: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in Push Notifications on the Open Web. Thanks for the awesome work, Matt!

+
diff --git a/files/es/web/api/pushmanager/index.html b/files/es/web/api/pushmanager/index.html new file mode 100644 index 0000000000..2e42155112 --- /dev/null +++ b/files/es/web/api/pushmanager/index.html @@ -0,0 +1,161 @@ +--- +title: PushManager +slug: Web/API/PushManager +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Push + - Push API + - Reference + - Service Workers + - TopicStub + - WebAPI +translation_of: Web/API/PushManager +--- +

{{SeeCompatTable}}{{ApiRef("Push API")}}

+ +

The PushManager interface of the Push API provides a way to receive notifications from third-party servers as well as request URLs for push notifications.

+ +

This interface is accessed via the {{domxref("ServiceWorkerRegistration.pushManager")}} property.

+ +
+

Note: This interface replaces functionality previously offered by the obsolete {{domxref("PushRegistrationManager")}} interface.

+
+ +

Properties

+ +

None.

+ +

Methods

+ +
+
{{domxref("PushManager.getSubscription()")}}
+
Retrieves an existing push subscription. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of an existing subscription. If no existing subscription exists, this resolves to a null value.
+
{{domxref("PushManager.permissionState()")}}
+
Returns a {{jsxref("Promise")}} that resolves to the permission state of the current {{domxref("PushManager")}}, which will be one of 'granted', 'denied', or 'default'.
+
{{domxref("PushManager.subscribe()")}}
+
Subscribes to a push service. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of a push subscription. A new push subscription is created if the current service worker does not have an existing subscription.
+
+ +

Deprecated methods

+ +
+
{{domxref("PushManager.hasPermission()")}} {{deprecated_inline}}
+
Returns a {{jsxref("Promise")}} that resolves to the PushPermissionStatus of the requesting webapp, which will be one of granted, denied, or default. Replaced by {{domxref("PushManager.permissionState()")}}.
+
{{domxref("PushManager.register()")}} {{deprecated_inline}}
+
Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.
+
{{domxref("PushManager.registrations()")}} {{deprecated_inline}}
+
Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.
+
{{domxref("PushManager.unregister()")}} {{deprecated_inline}}
+
Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is unregistered by calling the {{domxref("PushSubscription.unsubscribe()")}} method.
+
+ +

Example

+ +
this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Push API','#pushmanager-interface','PushManager')}}{{Spec2('Push API')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

See also

+ + diff --git a/files/es/web/api/pushmanager/permissionstate/index.html b/files/es/web/api/pushmanager/permissionstate/index.html new file mode 100644 index 0000000000..f017b2da93 --- /dev/null +++ b/files/es/web/api/pushmanager/permissionstate/index.html @@ -0,0 +1,111 @@ +--- +title: PushManager.permissionState() +slug: Web/API/PushManager/permissionState +translation_of: Web/API/PushManager/permissionState +--- +

{{SeeCompatTable}}{{ApiRef("Push API")}}

+ +

El metodo permissionState()  de la interface   {{domxref("PushManager")}} retorna un {{jsxref("Promise")}} that resolves to a {{domxref("DOMString")}} indicating the permission state of the push manager. Possible values are  'prompt', 'denied', or 'granted'.

+ +
+

Note: As of Firefox 44, the permissions for Notifications and Push have been merged. If permission is granted for notifications, push will also be enabled.

+
+ +

Sintaxis

+ +
PushManager.permissionState(options).then(function(PushMessagingState) { ... });
+
+ +

Parámetros

+ +
+
opciones {{optional_inline}}
+
An object containing optional configuration parameters. It can have the following properties: +
    +
  • userVisibleOnly: A boolean indicating that the returned push subscription will only be used for messages whose effect is made visible to the user.
    • +
+
+
+ +

Retorna

+ +

Un {{jsxref("Promise")}} que resuelve a un {{domxref("DOMString")}} con un valor de  'prompt', 'denied', o 'granted'.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Push API','#widl-PushManager-permissionState-Promise-PushPermissionState--PushSubscriptionOptions-options','permissionState()')}}{{Spec2('Push API')}}Initial definition.
+ +

Compactibilidad del Navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/pushmanager/supportedcontentencodings/index.html b/files/es/web/api/pushmanager/supportedcontentencodings/index.html new file mode 100644 index 0000000000..9966fa3cda --- /dev/null +++ b/files/es/web/api/pushmanager/supportedcontentencodings/index.html @@ -0,0 +1,43 @@ +--- +title: PushManager.supportedContentEncodings +slug: Web/API/PushManager/supportedContentEncodings +translation_of: Web/API/PushManager/supportedContentEncodings +--- +

{{SeeCompatTable}}{{APIRef("Push API")}}

+ +

La propiedadsupportedContentEncodings de solo lectura (read-only) de la interfaz {{domxref("PushManager")}} devuelve un array de los codigos de contenido que puede soportar y que pueden ser usados para encriptar los datos (payload) de un push-message.

+ +

Sintaxis

+ +
var encodings[] = PushManager.supportedContentEncodings
+ +

Valor

+ +

Un array de Strings

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Push API','#dom-pushmanager-supportedcontentencodings','supportedContentEncodings')}}{{Spec2('Push API')}}Initial definition.
+ +

Browser Compatibility

+ +
+
+ + +

{{Compat("api.PushManager.supportedContentEncodings")}}

+
+
diff --git a/files/es/web/api/randomsource/index.html b/files/es/web/api/randomsource/index.html new file mode 100644 index 0000000000..7c68f85c01 --- /dev/null +++ b/files/es/web/api/randomsource/index.html @@ -0,0 +1,110 @@ +--- +title: RandomSource +slug: Web/API/RandomSource +tags: + - API + - Interface + - NeedsTranslation + - RandomSource + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/Crypto/getRandomValues +--- +

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

+ +

RandomSource represents a source of cryptographically secure random numbers. It is available via the {{domxref("Crypto")}} object of the global object: {{domxref("Window.crypto")}} on Web pages, {{domxref("WorkerGlobalScope.crypto")}} in workers.

+ +

RandomSource is a not an interface and no object of this type can be created.

+ +

Properties

+ +

RandomSource neither defines nor inherits any property.

+ +
+
+ +

Methods

+ +
+
{{ domxref("RandomSource.getRandomValues()") }}
+
Fills the passed {{ domxref("ArrayBufferView") }} with cryptographically sound random values.
+
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Crypto API', '#dfn-RandomSource')}}{{Spec2('Web Crypto API')}}Initial definition
+ +

Browser Compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11.0 {{ webkitbug("22049") }}{{CompatGeckoDesktop(21)}} [1]11.015.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}23{{CompatGeckoMobile(21)}}{{ CompatNo() }}{{ CompatNo() }}6
+
+ +

[1] Although the transparent RandomSource is only available since Firefox 26, the feature was available in Firefox 21.

+ +

See also

+ + diff --git a/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html b/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html new file mode 100644 index 0000000000..b6e09439a9 --- /dev/null +++ b/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html @@ -0,0 +1,75 @@ +--- +title: Crypto.getRandomValues() +slug: Web/API/RandomSource/Obtenervaloresaleatorios +tags: + - API + - Criptografía + - Referencia + - metodo +translation_of: Web/API/Crypto/getRandomValues +--- +

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

+ +

El método Crypto.getRandomValues() permite obtener valores aleatorios criptográficamente fuertes. El array que se pasa como parámetro se rellena con números aleatorios (entiéndase aleatorios en el sentido criptográfico).

+ +

Con el fin de garantizar un rendimiento razonable, las distintas implementaciones no utilizan un generador de numeros aleatorios puro, sino que utilizan un generador numérico pseudo-aleatorio, sembrado con un valor con suficiente entropía. Los generadores numéricos pseudo-aleatorios utilizados difieren entre {{Glossary("user agent", "user agents")}}, pero son adecuados para usos criptográficos. Se require también que las distintas implementaciones usen una semilla con suficiente entropía, como una fuente de entropía a nivel de sistema.

+ +

Sintaxis

+ +
cryptoObj.getRandomValues(typedArray);
+ +

Parámetros

+ +
+
typedArray
+
Es un entero {{jsxref("TypedArray")}}, que puede ser un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Int16Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, o un {{jsxref("Uint32Array")}}. Todos los elementos dentro del array seran sobreescritos con números aleatorios.
+
+ +

Excepciones

+ + + +

Ejemplo

+ +
/* Asumiendo que window.crypto.getRandomValues está disponible */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Tus numeros de la suerte:");
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Definición Inicial
+ +

Compatibilidad del navegador

+ +

La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, compruebe https://github.com/mdn/browser-compat-data y envianos un pull request.

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/range/collapsed/index.html b/files/es/web/api/range/collapsed/index.html new file mode 100644 index 0000000000..ce3b6fa91f --- /dev/null +++ b/files/es/web/api/range/collapsed/index.html @@ -0,0 +1,35 @@ +--- +title: range.collapsed +slug: Web/API/Range/collapsed +translation_of: Web/API/Range/collapsed +--- +

{{ APIRef("DOM") }}

+ +

Resumen

+ +

Devuelve un valor booleano verdadero indicando si los puntos de inicio y fin de un rango están en la misma posición.

+ +

Sintaxis

+ +
isCollapsed = range.collapsed;
+
+ +

Ejemplo

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

Notas

+ +

Devuelve un valor boleano verdadero si los puntos límite inicial y final del rango están en el mismo punto en el DOM, y devuelve un valor falso si no lo están.

+ +

Un rango plegado está vacío, sin tener algún contenido, especificando un simple punto en el árbol del DOM. La propiedad plegada es de sólo lectura. Para plegar un rango, vea el método collapse.

+ +

Especificación

+ +

collapsed

+ +

{{ languages( { "en": "en/DOM/range.collapsed", "ja": "ja/DOM/range.collapsed" } ) }}

diff --git a/files/es/web/api/range/commonancestorcontainer/index.html b/files/es/web/api/range/commonancestorcontainer/index.html new file mode 100644 index 0000000000..0f449e5858 --- /dev/null +++ b/files/es/web/api/range/commonancestorcontainer/index.html @@ -0,0 +1,35 @@ +--- +title: range.commonAncestorContainer +slug: Web/API/Range/commonAncestorContainer +translation_of: Web/API/Range/commonAncestorContainer +--- +
{{ApiRef("DOM")}}
+ +

Resumen

+ +

Devuelve el nodo más profundo que contienen los nodos startContainer y endContainer.

+ +

Sintaxis

+ +
rangeAncestor = range.commonAncestorContainer;
+
+ +

Ejemplo

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

Notas

+ +

Devuelve el último nodo, o el más lejano a lo largo del árbol del documento, que contienen los nodos startContainer y endContainer. Ya que un rango no necesita ser contínuo y puede seleccionar nodos parcialmente, ésta es una forma conveniente para encontrar un nodo que encierra un rango.

+ +

Esta propiedad es de sólo lectura. Para cambiar el contenedor ancestro de un nodo, considere usar varios métodos para definir las posiciones iniciales y finales de el rango.

+ +

Especificación

+ +

commonAncestorContainer

+ +

{{ languages( { "en": "en/DOM/range.commonAncestorContainer" } ) }}

diff --git a/files/es/web/api/range/getclientrects/index.html b/files/es/web/api/range/getclientrects/index.html new file mode 100644 index 0000000000..c324753d0b --- /dev/null +++ b/files/es/web/api/range/getclientrects/index.html @@ -0,0 +1,103 @@ +--- +title: Range.getClientRects() +slug: Web/API/Range/getClientRects +tags: + - API + - Experimental + - Rango + - Vista CSSOM + - metodo +translation_of: Web/API/Range/getClientRects +--- +

{{ApiRef("DOM")}}{{ seeCompatTable }}

+ +

El método Range.getClientRects() regresa una lista de objetos {{ domxref("DOMRect") }} los cuales representan el área de la pantalla ocupada por el rango. El resultado es generado al agregar los resultados de las llamadas a {{ domxref("Element.getClientRects()") }} para cada uno de los elementos dentro del rango.

+ +

Sintaxis

+ +
rectList = range.getClientRects()
+
+ +

Ejemplo

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+rectList = range.getClientRects();
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSSOM View', '#dom-range-getclientrects', 'Range.getClientRects()')}}{{Spec2('CSSOM View')}}Especificación inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}915.05
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatNo}}15.0{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/range/index.html b/files/es/web/api/range/index.html new file mode 100644 index 0000000000..8a9cc686ea --- /dev/null +++ b/files/es/web/api/range/index.html @@ -0,0 +1,108 @@ +--- +title: range +slug: Web/API/Range +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Range +--- +

{{ APIRef("DOM") }}

+ +

Introducción

+ +

El objeto Range representa un fragmento de un documento que puede contener nodos y partes de nodos de texto en un documento dado.

+ +

Un rango puede ser creado usando el método createRange del objeto document. Los objetos rango pueden ser recuperados usando el método getRangeAt del objeto Selection.

+ +

Propiedades

+ +
+
collapsed
+
Devuelve un valor booleano indicando si los puntos de inicio y fin están en la misma posición.
+
commonAncestorContainer
+
Devuelve el nodo más profundo que contiene los nodos startContainer y endContainer.
+
endContainer
+
Devuelve el nodo dentro del cual termina el rango.
+
endOffset
+
Devuelve un número representando donde termina el Range en el endContainer.
+
startContainer
+
Devuelve el nodo dentro del cual comienza el rango.
+
startOffset
+
Devuelve un número representando donde empieza el Range en el endContainer.
+
+ +

Métodos

+ +

Métodos de ubicación

+ +

Estos métodos definen el punto de inicio y fin de un rango.

+ +
+
setStart
+
Define la posición inicial de un rango.
+
setEnd
+
Define la posición final de un rango.
+
setStartBefore
+
Define la posición inicial de un rango relativa a otro nodo.
+
setStartAfter
+
Define la posición inicial de un rango relativa a otro nodo.
+
setEndBefore
+
Define la posición final de un rango relativa a otro nodo.
+
setEndAfter
+
Define la posición final de un rango relativa a otro nodo.
+
selectNode
+
Define el rango a contener el nodo y sus contenidos.
+
selectNodeContents
+
Define el rango a contener los contenidos de un nodo.
+
collapse
+
Pliega el Rango a uno de sus puntos límite.
+
+ +

Editando métodos

+ +

Estos métodos recuperan nodos de un rango y modifican los contenidos de un rango.

+ +
+
cloneContents
+
Devuelve un fragmento de documento copiando los nodos de un rango.
+
deleteContents
+
Elimina del documento los contenidos de un rango.
+
extractContents
+
Mueve los contenidos de un rango del árbol de documento a un fragmento del documento.
+
insertNode
+
Inserta un nodo al comienzo de un rango.
+
surroundContents
+
Mueve el contenido de un rango a un nodo nuevo.
+
+ +

Otros métodos

+ +
+
compareBoundaryPoints
+
Compara los puntos límite de dos rangos.
+
cloneRange
+
Devuelve un objeto rango con puntos límites idénticos al rango clonado.
+
detach
+
Libera el Rango desde el uso para mejorar el rendimiento.
+
toString
+
Devuelve el texto del rango.
+
+ +

Métodos de Gecko

+ +

Esta sección describe métodos de Range que son particulares a Mozilla y no son parte de las especificaciones DOM W3C.

+ +
+
compareNode {{obsolete_inline}}
+
Devuelve una constante representando si el nodo está antes, después, dentro o alrededor del rango.
+
comparePoint
+
Devuelve -1, 0, or 1 indicando si el punto ocurre antes, dentro o después del rango.
+
createContextualFragment
+
Devuelve un fragmenteo de documento creado de un texto de código.
+
intersectsNode {{obsolete_inline}}
+
Devuelve un valor boleano verdadero si el nodo dado intersecta el rango.
+
isPointInRange
+
Devuelve un valor boleano verdadero indicando si el punto dado está en el rango.
+
+ +

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

diff --git a/files/es/web/api/range/intersectsnode/index.html b/files/es/web/api/range/intersectsnode/index.html new file mode 100644 index 0000000000..5ffd11b79e --- /dev/null +++ b/files/es/web/api/range/intersectsnode/index.html @@ -0,0 +1,48 @@ +--- +title: range.intersectsNode +slug: Web/API/Range/intersectsNode +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Range/intersectsNode +--- +

{{ ApiRef() }}

+

Summary

+

{{ Obsolete_header() }} Returns a boolean indicating whether the given node intersects the range.

+

Syntax

+
bool = range.intersectsNode( referenceNode )
+
+

Parameters

+
+
+ referenceNode 
+
+ The Node to compare with the Range.
+
+

Example

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+bool = range.intersectsNode(document.getElementsByTagName("p").item(0));
+
+

Notes

+

This method is obsolete; you should instead use the W3C DOM Range methods (see compareBoundaryPoints()).

+
+ Warning: This method has been removed from Gecko 1.9 and will not exist in future versions of Firefox; you should switch to compareBoundaryPoints() as soon as possible.
+

The following function can be used as replacement:

+
function rangeIntersectsNode(range, node) {
+  var nodeRange = node.ownerDocument.createRange();
+  try {
+    nodeRange.selectNode(node);
+  }
+  catch (e) {
+    nodeRange.selectNodeContents(node);
+  }
+
+  return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
+         range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
+}
+
+

Specification

+

This method is not part of a specification.

+
+  
+

{{ languages( { "en": "en/DOM/range.intersectsNode", "pl": "pl/DOM/range.intersectsNode" } ) }}

diff --git a/files/es/web/api/range/setstart/index.html b/files/es/web/api/range/setstart/index.html new file mode 100644 index 0000000000..f4a991615c --- /dev/null +++ b/files/es/web/api/range/setstart/index.html @@ -0,0 +1,120 @@ +--- +title: Range.setStart() +slug: Web/API/Range/setStart +translation_of: Web/API/Range/setStart +--- +

{{ApiRef("DOM")}}

+ +

El método Range.setStart() establece la posición de inicio de un {{ domxref("Range") }}.

+ +

Si startNode es un {{ domxref("Node") }} de tipo Text, Comment, o CDATASection, entonces startOffset es el número de caracteres de partida de startNode. Para otros tiposde nodos, startOffset es el número de nodos hijos entre el inicio de los startNode.

+ +

Setting the start point below (lower in the document) the end point will result in a collapsed range with the start and end points both set to the specified start position.

+ +

Definiendo el punto de partida abajo (más abajo en el documento) el punto final resultará en un rango colapsado con el punto tanto de inicio como de entrada establecidos a la posición de partida especificada.

+ +

Sintaxis

+ +
range.setStart(startNode, startOffset);
+
+ +

Parámetros

+ +
+
startNode
+
El {{ domxref("Node") }} donde {{ domxref("Range") }} debe empezar.
+
startOffset 
+
Un entero mayor o igual a cero representando el offset o desplazamiento de caracteres para el inicio del {{ domxref("Range") }} desde el comienzo de startNode.
+
+ +

Ejemplo

+ +
var range = document.createRange();
+var startNode = document.getElementsByTagName("p").item(2);
+var startOffset = 0;
+range.setStart(startNode,startOffset);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}{{Spec2('DOM WHATWG')}}Sin cambio.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}{{Spec2('DOM2 Traversal_Range')}}Especificación inicial.
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/request/headers/index.html b/files/es/web/api/request/headers/index.html new file mode 100644 index 0000000000..e36f914087 --- /dev/null +++ b/files/es/web/api/request/headers/index.html @@ -0,0 +1,68 @@ +--- +title: Request.headers +slug: Web/API/Request/headers +translation_of: Web/API/Request/headers +--- +
{{APIRef("Fetch")}}
+ +

La propiedad de solo lectura headers de la interface {{domxref("Request")}} es un objeto de tipo {{domxref("Headers")}}, asociado a la petición.

+ +

Sintax

+ +
var myHeaders = request.headers;
+ +

Valor

+ +

Un objeto de tipo {{domxref("Headers")}}.

+ +

Ejemplo

+ +

En el siguiente fragmento de código, crearemos una nueva petición utilizando el constructor del {{domxref("Request.Request()")}} (para un archivo de imagen ubicado en el mismo directorio del script), guardamos el encabezado de la petición en una variable:

+ +
var myRequest = new Request('flowers.jpg');
+var myHeaders = myRequest.headers; // Headers {}
+ +

Para agregar encabezados al objeto {{domxref("Headers")}} usamos {{domxref("Headers.append")}}; creamos una nueva petición usando el parametro init del constructor y asignamos los encabezados como una opción del parametro init:

+ +
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',myInit);
+
+myContentType = myRequest.headers.get('Content-Type'); // returns 'image/jpeg'
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch','#dom-request-headers','headers')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.Request.headers")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/request/index.html b/files/es/web/api/request/index.html new file mode 100644 index 0000000000..770647619e --- /dev/null +++ b/files/es/web/api/request/index.html @@ -0,0 +1,170 @@ +--- +title: Request +slug: Web/API/Request +tags: + - API + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - request +translation_of: Web/API/Request +--- +
{{APIRef("Fetch")}}
+ +

La interfaz Request de la API Fetch representa una solicitud de respuesta.

+ +

Puedes crear un nuevo objeto Request usando el constructor {{domxref("Request.Request()")}}, pero es preferible encontrar un objeto Request que sea devuelto como el resultado de otra operacion API, como un operador de servicio {{domxref("FetchEvent.request")}}.

+ +

Constructor

+ +
+
{{domxref("Request.Request()")}}
+
Crea un nuevo objeto Request.
+
+ +

Propiedades

+ +
+
{{domxref("Request.method")}} {{readonlyInline}}
+
Contiene el metodo de solicitud (GET, POST, etc.)
+
{{domxref("Request.url")}} {{readonlyInline}}
+
Contiene la URL de la solicitud.
+
{{domxref("Request.headers")}} {{readonlyInline}}
+
Contiene el objeto asociado de la solicitud {{domxref("Headers")}}
+
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+
Contiene el contexto de la solicitud (p.ej., audio, image, iframe, etc.)
+
{{domxref("Request.referrer")}} {{readonlyInline}}
+
Contiene la referencia de la soliditud (p.ej., client).
+
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+
Contiene la política de referencia de la solicitud (p.ej., no-referrer).
+
{{domxref("Request.mode")}} {{readonlyInline}}
+
Contiene el modo de la solicitud. (p.ej., cors, no-cors, same-origin, navigate.)
+
{{domxref("Request.credentials")}} {{readonlyInline}}
+
Contiene las credenciales de la solicitud (p.ej., omit, same-origin).
+
{{domxref("Request.redirect")}} {{readonlyinline}}
+
Contiene el modo de cómo son manipuladas las redirecciones. Puede ser follow, error, o manual.
+
{{domxref("Request.integrity")}} {{readonlyInline}}
+
Contiene el valor del subrecurso de integridad (subresource integrity) de la solicitud (p.ej., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
+
{{domxref("Request.cache")}} {{readonlyInline}}
+
Contiene el modo de caché de la solicitud (p.ej., default, reload, no-cache).
+
+ +

Request implementa {{domxref("Body")}}, por lo que también tiene las siguientes propiedades disponibles:

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
Un simple getter usado para exponer un contenido del cuerpo {{domxref("ReadableStream")}}
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Almacena un {{domxref("Boolean")}} que declara si ya se ha usado el cuerpo en una respuesta.
+
+ +

Métodos

+ +
+
{{domxref("Request.clone()")}}
+
Crea una copia del objeto actual Request.
+
+ +

Request implementa {{domxref("Body")}}, por lo que también tiene los siguientes métodos disponibles:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Devuelve una promesa que se resuelve con una representación {{domxref("ArrayBuffer")}} del cuerpo de la solicitud.
+
{{domxref("Body.blob()")}}
+
Devuelve una promesa que se resuelve con una representación {{domxref("Blob")}} del cuerpo de la solicitud.
+
{{domxref("Body.formData()")}}
+
Devuelve una promesa que se resuelve con una representación {{domxref("FormData")}} del cuerpo de la solicitud.
+
{{domxref("Body.json()")}}
+
Devuelve una promesa que se resuelve con una representación {{domxref ("JSON")}} del cuerpo de la solicitud.
+
{{domxref("Body.text()")}}
+
Devuelve una promesa que se resuelve con una representación {{domxref("USVString")}} (text) del cuerpo de la solicitud.
+
+ +
+

Nota: Las funciones {{domxref("Body")}} solo pueden ser ejecutadas una vez; Las siguientes llamadas se resolverán con strings/ArrayBuffers vacíos.

+
+ +

Ejemplos

+ +

En el siguiente fragmento de código, creamos una nueva solicitud utilizando el constructor Request() (para un archivo de imagen en el mismo directorio que el script),  luego devolvemos algunos valores de propiedad de la solicitud:

+ +
const myRequest = new Request('http://localhost/flowers.jpg');
+
+const myURL = myRequest.url; // http://localhost/flowers.jpg
+const myMethod = myRequest.method; // GET
+const myCred = myRequest.credentials; // omit
+
+ +

Puede obtener esta solicitud pasando el objeto Request como parámetro a una llamada {{domxref("GlobalFetch.fetch()")}}, por ejemplo:

+ +
fetch(myRequest)
+  .then(response => response.blob())
+  .then(blob => {
+    myImage.src = URL.createObjectURL(blob);
+  });
+ +

En el siguiente fragmento de código, creamos una nueva solicitud utilizando el constructor Request() con algunos datos iniciales y contenido del cuerpo para una solicitud de API que necesita una carga útil del cuerpo:

+ +
const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
+
+const myURL = myRequest.url; // http://localhost/api
+const myMethod = myRequest.method; // POST
+const myCred = myRequest.credentials; // omit
+const bodyUsed = myRequest.bodyUsed; // true
+
+ +
+

Nota: El tipo de cuerpo solo puede ser {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} o tipo {{domxref("ReadableStream")}}, así que para añadir un objeto JSON a la carga útil, necesitas convertir a string (stringify) dicho objeto.

+
+ +

Puede obtener esta solicitud de API pasando el objeto Request como parámetro a una llamada {{domxref("GlobalFetch.fetch()")}}, por ejemplo, y obtener la respuesta:

+ +
fetch(myRequest)
+  .then(response => {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response => {
+    console.debug(response);
+    // ...
+  }).catch(error => {
+    console.error(error);
+  });
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch','#request-class','Request')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad de navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/response/index.html b/files/es/web/api/response/index.html new file mode 100644 index 0000000000..11e18a501c --- /dev/null +++ b/files/es/web/api/response/index.html @@ -0,0 +1,128 @@ +--- +title: Response +slug: Web/API/Response +tags: + - API + - Experimental + - Fetch + - Interface + - Referencia + - Respuesta +translation_of: Web/API/Response +--- +
{{APIRef("Fetch API")}}
+ +

La interfaz Response de la Fetch API representa la respuesta a una petición.

+ +

Tú puedes crear un nuevo objeto Response usando el  constructor{{domxref("Response.Response()")}}, pero es más probable encontrar un objeto Response siendo devuelto como resultado de la operación de otra API, por ejemplo un service worker {{domxref("Fetchevent.respondWith")}}, o un simple {{domxref("GlobalFetch.fetch()")}}.

+ +

Constructor

+ +
+
{{domxref("Response.Response","Response()")}}
+
Crea un nuevo objeto Response.
+
+ +

Propiedades

+ +
+
{{domxref("Response.headers")}} {{readonlyinline}}
+
Contiene el objeto {{domxref("Headers")}} asociado con la respuesta.
+
{{domxref("Response.ok")}} {{readonlyinline}}
+
Contiene un estado indicando si la respuesta fue exitosa (estado en el rango  200-299) o no.
+
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
+
Indica si la respuesta es o no el resultado de una redirección; eso es, su lista de URL tiene más de una entrada.
+
{{domxref("Response.status")}} {{readonlyinline}}
+
Contiene el código de estado de la respuesta (e.g., 200 si fue exitosa).
+
{{domxref("Response.statusText")}} {{readonlyinline}}
+
Contiene el mensaje de estado correspondiente al código de estado (e.g., OK para el Código 200).
+
{{domxref("Response.type")}} {{readonlyinline}}
+
Contiene el tipo de respuesta (e.g., basic, cors).
+
{{domxref("Response.url")}} {{readonlyinline}}
+
Contiene la URL de respuesta.
+
{{domxref("Response.useFinalURL")}}
+
Contiene un valor booleano indicando si ésta es la URL final de respuesta.
+
+ +

Response implementa {{domxref("Body")}}, de modo que además contiene las propiedades que se detallan a continuación:

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
Un simple método get que expone un {{domxref("ReadableStream")}} de los contenidos del body.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Almacena un {{domxref("Boolean")}}  en el cuál declara si el body ya fue enviado como respuesta anteriormente.
+
+ +

Methods

+ +
+
{{domxref("Response.clone()")}}
+
Clona un Objeto Respuesta.
+
{{domxref("Response.error()")}}
+
Devuelve un nuevo objeto Respuesta asociado a un error de red.
+
{{domxref("Response.redirect()")}}
+
Crea una nueva respuesta con un URL distinto.
+
Response iimplementa {{domxref("Body")}}, de modo que además contiene los métodos que se detallan a continuación:
+
+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("ArrayBuffer")}}.
+
{{domxref("Body.blob()")}}
+
Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("Blob")}}.
+
{{domxref("Body.formData()")}}
+
Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.
+
{{domxref("Body.json()")}}
+
Recibe un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve como {{jsxref("JSON")}} el texto del Body enviado.
+
{{domxref("Body.text()")}}
+
Recibe un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("USVString")}} (texto).
+
+ +

Examples

+ +

En nuestro ejemplo básico de ferch (ejecutar el ejemplo) usamos una llamada fetch() para descargar una imagen y mostrarla en una etiqueta {{htmlelement("img")}} . La llamda a fetch() call devuelve una promesa, la cual resuelve a un objetoResponse asociado a la operación fetch.

+ +

Observa como ya que lo que estamos solicitando es una imagen, necesitamos ejecutar {{domxref("Body.blob")}} ({{domxref("Response")}} implements body) para darle a la respuesta su tipo MIME correcto.

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

También puedes usar el constructor {{domxref("Response.Response()")}} para crear tus objetos Response personalizados:

+ +
var myResponse = new Response();
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/response/ok/index.html b/files/es/web/api/response/ok/index.html new file mode 100644 index 0000000000..1bff7fe5db --- /dev/null +++ b/files/es/web/api/response/ok/index.html @@ -0,0 +1,66 @@ +--- +title: Response.ok +slug: Web/API/Response/ok +translation_of: Web/API/Response/ok +--- +
{{APIRef("Fetch")}}
+La propiedad de solo lectura ok de la interfaz {{domxref("Response")}} contiene un Booleano que indica si la respuesta fue exitosa (estado en un rango de 200 a 299)  o no.
+ +

Sintaxis

+ +
var miOK = respuesta.ok;
+ +

Valor

+ +

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

+ +

Ejemplo

+ +

En nuestro ejemplo de Fetch Response (véase Fetch Response en vivo) creamos un nuevo {{domxref("Request")}} usando el constructor {{domxref("Request.Request","Request()")}}, pasando una ruta a un JPG. Luego traemos esta petición usando {{domxref("GlobalFetch.fetch","fetch()")}}, extraemos un blob de la respuesta usando {{domxref("Body.blob")}}, creamos un objeto URL usando {{domxref("URL.createObjectURL")}}, y mostrar esto en un {{htmlelement("img")}}.

+ +
+

Nota:  en la parte superior del bloque de fetch() imprimimos el valor de ok en la consola.

+
+ +
var imagen = document.querySelector('img');
+
+var peticion = new Request('flowers.jpg');
+
+fetch(peticion).then(function(respuesta) {
+  console.log(respuesta.ok); //retorna true si la respuesta fue exitosa
+  respuesta.blob().then(function(miBlob) {
+    var objectoURL = URL.createObjectURL(miBlob);
+    imagen.src = objectURL;
+  });
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{Spec2('Fetch')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad de navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/response/response/index.html b/files/es/web/api/response/response/index.html new file mode 100644 index 0000000000..f967d677f2 --- /dev/null +++ b/files/es/web/api/response/response/index.html @@ -0,0 +1,75 @@ +--- +title: Response() +slug: Web/API/Response/Response +translation_of: Web/API/Response/Response +--- +
{{APIRef("Fetch")}}
+ +

El constructor Response() crea un nuevo objeto {{domxref("Response")}}

+ +

Sintaxis

+ +
var miRespuesta = new Response(cuerpo,opciones);
+ +

Parámetros

+ +
+
cuerpo {{optional_inline}}
+
Un objeto que define el cuerpo de la respuesta. Puede ser null, o uno de los siguientes elementos: +
    +
  • {{domxref("Blob")}}
    • +
  • {{domxref("BufferSource")}}
    • +
  • {{domxref("FormData")}}
    • +
  • {{domxref("ReadableStream")}}
    • +
  • {{domxref("URLSearchParams")}}
    • +
  • {{domxref("USVString")}}
    • +
+
+
opciones {{optional_inline}}
+
Un objeto que contiene las opciones de personalización para la respuesta HTTP. Las opciones posibles son: +
    +
  • status: El código de estado HTTP, p.e.: 200.
    • +
  • statusText: El mensaje de estado asociado con el código de estado HTTP, p.e.: OK.
    • +
  • headers: Cualquier cabecera que quieras añadir a la respuesta. Puede ser un objeto {{domxref("Headers")}} o un objeto literal de {{domxref("ByteString")}} pares claves/valor (ver Cabeceras HTTP para más información).
    • +
+
+
+ +

Ejemplos

+ +

En nuestro ejemplo Fetch Response (ver Fetch Response live) creamos un nuevo objeto Response usando el constructor, pasándole un nuevo objeto {{domxref("Blob")}} como cuerpo, y un objeto con status ystatusText como opciones:

+ +
var miBlob = new Blob();
+var opciones = { "status" : 200 , "statusText" : "Flipante!" };
+var miRespuesta = new Response(miBlob,opciones);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Fetch','#dom-response','Response()')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad en navegadores

+ + + +

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

+ +

Relacionado

+ + diff --git a/files/es/web/api/response/status/index.html b/files/es/web/api/response/status/index.html new file mode 100644 index 0000000000..eecaf02967 --- /dev/null +++ b/files/es/web/api/response/status/index.html @@ -0,0 +1,73 @@ +--- +title: Response.status +slug: Web/API/Response/status +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - Response + - status +translation_of: Web/API/Response/status +--- +
{{APIRef("Fetch")}}
+ +

La propiedad de solo lectura status de la interfaz {{domxref("Response")}} contiene el código de estado de la respuesta (ejm., 200 para un éxito).

+ +

Sintaxis

+ +
var myStatus = response.status;
+ +

Valor

+ +

Un número (para ser preciso, uno corto sin signo).

+ +

Ejemplo

+ +

En nuestro ejemplo Fetch Response (ver Fetch Response en vivo) nosotros creamos un nuevo objeto {{domxref("Request")}} usando el constructor {{domxref("Request.Request","Request()")}}, pasándole una ruta JPG. Luego buscamos esta solicitud usando  {{domxref("GlobalFetch.fetch","fetch()")}}, extraemos un blob de la respuesta usando {{domxref("Body.blob")}}, creamos un objeto URL fuera de ella usando {{domxref("URL.createObjectURL")}}, y mostramos esto en un {{htmlelement("img")}}.

+ +

Tenga en cuenta que en la parte superior del bloque  fetch() registramos el valor de la respuesta  status en la consola.

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  console.log(response.status); // returns 200
+  response.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Fetch','#dom-response-status','status')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad del navegador

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html new file mode 100644 index 0000000000..d455433b6c --- /dev/null +++ b/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html @@ -0,0 +1,87 @@ +--- +title: RTCPeerConnection.canTrickleIceCandidates +slug: Web/API/RTCPeerConnection/canTrickleIceCandidates +translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates +--- +
{{APIRef("WebRTC")}}
+ +

La propiedad {{domxref("RTCPeerConnection")}} es de solo lectura canTrickleIceCandidates  , devuelve un  {{jsxref("Boolean")}} que indica si el par remoto puede aceptar o no candidatos ICE.

+ +

ICE trickling is the process of continuing to send candidates after the initial offer or answer has already been sent to the other peer.

+ +

This property is only set after having called {{domxref("RTCPeerConnection.setRemoteDescription()")}}.  Ideally, your signaling protocol provides a way to detect trickling support, so that you don't need to rely on this property. A WebRTC browser will always support trickle ICE. If trickling isn't supported, or you aren't able to tell, you can check for a falsy value for this property and then wait until the value of {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} changes to "completed" before creating and sending the initial offer. That way, the offer contains all of the candidates.

+ +

Syntax

+ +
 var canTrickle = RTCPeerConnection.canTrickleIceCandidates;
+ +

Value

+ +

A {{jsxref("Boolean")}} that is true if the remote peer can accept trickled ICE candidates and false if it cannot. If no remote peer has been established, this value is null.

+ +
+

Note: This property's value is determined once the local peer has called {{domxref("RTCPeerConnection.setRemoteDescription()")}}; the provided description is used by the ICE agent to determine whether or not the remote peer supports trickled ICE candidates.

+
+ +

Example

+ +
var pc = new RTCPeerConnection();
+// The following code might be used to handle an offer from a peer when
+// it isn't known whether it supports trickle ICE.
+pc.setRemoteDescription(remoteOffer)
+  .then(_ => pc.createAnswer())
+  .then(answer => pc.setLocalDescription(answer))
+  .then(_ =>
+    if (pc.canTrickleIceCandidates) {
+      return pc.localDescription;
+    }
+    return new Promise(r => {
+      pc.addEventListener('icegatheringstatechange', e => {
+        if (e.target.iceGatheringState === 'complete') {
+          r(pc.localDescription);
+        }
+      });
+    });
+  })
+  .then(answer => sendAnswerToPeer(answer)) // signaling message
+  .catch(e => handleError(e));
+
+pc.addEventListener('icecandidate', e => {
+  if (pc.canTrickleIceCandidates) {
+    sendCandidateToPeer(e.candidate); // signaling message
+  }
+});
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-cantrickleicecandidates', 'RTCPeerConnection.canTrickleIceCandidates') }}{{ Spec2('WebRTC 1.0') }}Initial specification.
+ +

Browser compatibility

+ + + +

{{Compat("api.RTCPeerConnection.canTrickleIceCandidates")}}

+ +

See also

+ + diff --git a/files/es/web/api/rtcpeerconnection/index.html b/files/es/web/api/rtcpeerconnection/index.html new file mode 100644 index 0000000000..8a902d3ab5 --- /dev/null +++ b/files/es/web/api/rtcpeerconnection/index.html @@ -0,0 +1,444 @@ +--- +title: RTCPeerConnection +slug: Web/API/RTCPeerConnection +translation_of: Web/API/RTCPeerConnection +--- +

{{APIRef('WebRTC')}}{{draft}}

+ +

La interfaz RTCPeerConnection representa una conexión WebRTC entre un computador local y un par remoto (otro computador). Esta interfaz provee métodos para: conectar un equipo remoto (remote peer), mantener y monitorear esa coneexión y cerrar la conexión una vez que no se necesite más.

+ +
+

RTCPeerConnection y {{domxref("RTCSessionDescription")}} aún están prefijados en algunos navegadores. Se recomienda encarecidamente usar una librería de ajuste (shim) como la excelente y ampliamente soportada Adapter.js, para asegurar la compatibilidad más amplia posible de su sitio o aplicación web. Vale la pena señalar que Adapter.js va más allá del manejo de prefijos, esta librería implementa ajustes (shims) para asegurar la compatibilidad entre las distintas implementaciones de WebRTC de los distintos navegadores.

+
+ +

{{InheritanceDiagram}}

+ +

{{InterfaceOverview("WebRTC")}}

+ +

Método obsoleto

+ +

El siguiente método fue declarado obsoleto ya hace un tiempo, admás, nunca fue implementado en los navegadores más importantes.

+ +
+
{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}
+
Crea un nuevo {{domxref("RTCDTMFSender")}}, que se asocia a un {{domxref("MediaStreamTrack")}} específico, that will be able to send {{Glossary("DTMF")}} phone signaling over the connection.
+
+ +

Constantes

+ +

RTCBundlePolicy enum

+ +

The RTCBundlePolicy enum defines string constants which are used to request a specific policy for gathering ICE candidates if the remote peer isn't compatible with the SDP BUNDLE standard for bundling multiple media streams on a single transport link.

+ +
+

In technical terms, a BUNDLE lets all media flow between two peers flow across a single 5-tuple; that is, from the same IP and port on one peer to the same IP and port on the other peer, using the same transport protocol.

+
+ + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"balanced"On BUNDLE-aware connections, the ICE agent should gather candidates for all of the media types in use (audio, video, and data). Otherwise, the ICE agent should only negotiate one audio and video track on separate transports.
"max-compat"The ICE agent should gather candidates for each track, using separate transports to negotiate all media tracks for connections which aren't BUNDLE-compatible.
"max-bundle"The ICE agent should gather candidates for just one track. If the connection isn't BUNDLE-compatible, then the ICE agent should negotiate just one media track.
+ +

RTCIceConnectionState enum

+ +

The RTCIceConnectionState enum defines the string constants used to describe the current state of the ICE agent and its connection to the ICE server (that is, the {{Glossary("STUN")}} or {{Glossary("TURN")}} server).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"new"The ICE agent is gathering addresses or is waiting to be given remote candidates through calls to {{domxref("RTCPeerConnection.addIceCandidate()")}} (or both).
"checking"The ICE agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made. It's possible that gathering of candidates is also still underway.
"connected"A usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. It's possible that gathering is still underway, and it's also possible that the ICE agent is still checking candidates against one another looking for a better connection to use.
"completed"The ICE agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components.
"failed"The ICE candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. It is, however, possible that the ICE agent did find compatible connections for some components.
"disconnected"Checks to ensure that components are still connected failed for at least one component of the {{domxref("RTCPeerConnection")}}. This is a less stringent test than "failed" and may trigger intermittently and resolve just as spontaneously on less reliable networks, or during temporary disconnections. When the problem resolves, the connection may return to the "connected" state.
"closed"The ICE agent for this {{domxref("RTCPeerConnection")}} has shut down and is no longer handling requests.
+ +

RTCIceGatheringState enum

+ +

The RTCIceGatheringState enum defines string constants which reflect the current status of ICE gathering, as returned using the {{domxref("RTCPeerConnection.iceGatheringState")}} property. You can detect when this value changes by watching for an event of type {{event("icegatheringstatechange")}}.

+ + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"new"The peer connection was just created and hasn't done any networking yet.
"gathering"The ICE agent is in the process of gathering candidates for the connection.
"complete"The ICE agent has finished gathering candidates. If something happens that requires collecting new candidates, such as a new interface being added or the addition of a new ICE server, the state will revert to "gathering" to gather those candidates.
+ +

RTCIceTransportPolicy enum

+ +

The RTCIceTransportPolicy enum defines string constants which can be used to limit the transport policies of the ICE candidates to be considered during the connection process.

+ + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"all"All ICE candidates will be considered.
"public" {{obsolete_inline}}Only ICE candidates with public IP addresses will be considered. Removed from the specification's May 13, 2016 working draft.
"relay"Only ICE candidates whose IP addresses are being relayed, such as those being passed through a TURN server, will be considered.
+ +

RTCPeerConnectionState enum

+ +

The RTCPeerConnectionState enum defines string constants which describe states in which the RTCPeerConnection may be. These values are returned by the {{domxref("RTCPeerConnection.connectionState", "connectionState")}} property. This state essentially represents the aggregate state of all ICE transports (which are of type {{domxref("RTCIceTransport")}} or {{domxref("RTCDtlsTransport")}}) being used by the connection.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"new"At least one of the connection's ICE transports ({{domxref("RTCIceTransport")}}s or {{domxref("RTCDtlsTransport")}}s) are in the "new" state, and none of them are in one of the following states: "connecting", "checking", "failed", or "disconnected", or all of the connection's transports are in the "closed" state.
"connecting"One or more of the ICE transports are currently in the process of establishing a connection; that is, their RTCIceConnectionState is either "checking" or "connected", and no transports are in the "failed" state. <<< Make this a link once I know where that will be documented
"connected"Every ICE transport used by the connection is either in use (state "connected" or "completed") or is closed (state "closed"); in addition, at least one transport is either "connected" or "completed".
"disconnected"At least one of the ICE transports for the connection is in the "disconnected" state and none of the other transports are in the state "failed", "connecting", or "checking".
"failed"One or more of the ICE transports on the connection is in the "failed" state.
"closed" +

The RTCPeerConnection is closed.

+ +

This value was in the RTCSignalingState enum (and therefore found by reading the value of the {{domxref("RTCPeerConnection.signalingState", "signalingState")}}) property until the May 13, 2016 draft of the specification.

+
+ +

RTCRtcpMuxPolicy enum

+ +

The RTCRtcpMuxPolicy enum defines string constants which specify what ICE candidates are gathered to support non-multiplexed RTCP. <<<add a link to info about multiplexed RTCP.

+ + + + + + + + + + + + + + + + + + +
ConstantDescription
"negotiate"Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately.
"require"Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.
+ +

RTCSignalingState enum

+ +

The RTCSignalingState enum specifies the possible values of {{domxref("RTCPeerConnection.signalingState")}}, which indicates where in the process of signaling the exchange of offer and answer the connection currently is.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"stable"There is no ongoing exchange of offer and answer underway. This may mean that the {{domxref("RTCPeerConnection")}} object is new, in which case both the {{domxref("RTCPeerConnection.localDescription", "localDescription")}} and {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} are null; it may also mean that negotiation is complete and a connection has been established.
"have-local-offer"The local peer has called {{domxref("RTCPeerConnection.setLocalDescription()")}}, passing in SDP representing an offer (usually created by calling {{domxref("RTCPeerConnection.createOffer()")}}), and the offer has been applied successfully.
"have-remote-offer"The remote peer has created an offer and used the signaling server to deliver it to the local peer, which has set the offer as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.
"have-local-pranswer"The offer sent by the remote peer has been applied and an answer has been created (usually by calling {{domxref("RTCPeerConnection.createAnswer()")}}) and applied by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. This provisional answer describes the supported media formats and so forth, but may not have a complete set of ICE candidates included. Further candidates will be delivered separately later.
"have-remote-pranswer"A provisional answer has been received and successfully applied in response to an offer previously sent and established by calling setLocalDescription().
"closed" {{obsolete_inline}} +

The connection is closed.

+ +
+

This value moved into the RTCPeerConnectionState enum in the May 13, 2016 draft of the specification, as it reflects the state of the RTCPeerConnection, not the signaling connection. You now detect a closed connection by checking for {{domxref("RTCPeerConnection.connectionState", "connectionState")}} to be "closed" instead.

+
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(56)}} (unprefixed)		{{CompatVersionUnknown}}{{CompatGeckoDesktop(22)}}
+ {{property_prefix("-moz")}} until Firefox 44		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
addTrack(){{CompatNo}}{{CompatUnknown}}{{ CompatGeckoDesktop(45) }} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
iceConnectionState: disconnected{{CompatChrome(48)}}{{CompatUnknown}}{{CompatGeckoDesktop(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onicegatheringstatechange{{CompatChrome(59)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
removeTrack(){{CompatNo}}{{CompatUnknown}}{{ CompatVersionUnknown }}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(56)}} (unprefixed)		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(56)}} (unprefixed)		{{CompatVersionUnknown}}{{CompatGeckoDesktop(22)}}
+ {{property_prefix("-moz")}} until Firefox 44		22{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
addTrack(){{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{ CompatGeckoDesktop(45) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} 
iceConnectionState: disconnected{{CompatChrome(48)}}{{CompatChrome(48)}}{{CompatUnknown}}{{CompatGeckoDesktop(52)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onicegatheringstatechange{{CompatChrome(59)}}{{CompatChrome(59)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
removeTrack(){{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} 
+
+ +

[1] Prior to Firefox 49, the specified track was required to be component of all passed {{domxref("MediaStream")}}s. Starting in Firefox 49, this is no longer the case. See {{bug(1271669)}} for specifics.

+ +

[2] Firefox currently removes the {{domxref("RTCRtpSender")}} from the list of senders as reported by {{domxref("RTCPeerConnection.getSenders()")}}. This was correct in earlier versions of the specification, but no longer is. See {{bug(1290949)}}.

+ +

See also

+ + diff --git a/files/es/web/api/rtcrtpreceiver/index.html b/files/es/web/api/rtcrtpreceiver/index.html new file mode 100644 index 0000000000..0944e1d163 --- /dev/null +++ b/files/es/web/api/rtcrtpreceiver/index.html @@ -0,0 +1,72 @@ +--- +title: RTCRtpReceiver +slug: Web/API/RTCRtpReceiver +translation_of: Web/API/RTCRtpReceiver +--- +
{{APIRef("WebRTC")}}
+ +

La interfaz RTCRtpReceiver de la WebRTC API gestiona la recepción y decodificación de los datos para una {{domxref("MediaStreamTrack")}} a una {{domxref("RTCPeerConnection")}}.

+ +

Propiedades

+ +
+
{{domxref("RTCRtpReceiver.track")}} {{readonlyinline}}
+
Devuelve el {{domxref("MediaStreamTrack")}} asociado con la instancia actual de RTCRtpReceiver
+
{{domxref("RTCRtpReceiver.rtcpTransport")}} {{readonlyinline}}
+
Devuelve la instancia {{domxref("RTCDtlsTransport")}} en la que se envía y se recibe el RTCP.
+
{{domxref("RTCRtpReceiver.transport")}} {{readonlyinline}}
+
Devuelve la instancia {{domxref("RTCDtlsTransport")}} en la que se reciben los medios para la pista del receptor.
+
+ +

Métodos

+ +
+
{{domxref("RTCRtpReceiver.getContributingSources()")}}
+
Devuelve un array de instancia {{domxref("RTCRtpContributingSource")}} para cada identificador CSRC (fuente contribuyente) identificador recibido actual RTCRtpReceiver en los últimos 10 segundos.
+
{{domxref("RTCRtpReceiver.getParameters()")}} 
+
Devuelve un objeto RTCRtpParameters que contiene información sobre cómo se van a decodificar los datos de RTC.
+
{{domxref("RTCRtpReceiver.getStats()")}}
+
Devuelve un {{jsxref("Promise")}} cuyo controlador de cumplimiento recibe un
+ {{domxref("RTCStatsReport")}} que contiene estadísticas sobre los flujos entrantes y sus dependencias.
+
{{domxref("RTCRtpReceiver.getSynchronizationSources()")}} 
+
Devuelve un arreglo que incluye una instancia {{domxref("RTCRtpSynchronizationSource")}} para cada identificador SSRC (fuente de sincronización) único recibido por el RTCRtpReceiver actual en los últimos diez segundos.
+
+ +

Métodos estáticos

+ +
+
{{domxref("RTCRtpReceiver.getCapabilities()")}}
+
Devuelve la visión más optimista de las capacidades del sistema para recibir medios de comunicación del tipo dado.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónStatusComentario
{{SpecName('WebRTC 1.0','#rtcrtpreceiver-interface','RTCRtpReceiver')}}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

Compatibilidad

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/screen/index.html b/files/es/web/api/screen/index.html new file mode 100644 index 0000000000..0d5e87f9c9 --- /dev/null +++ b/files/es/web/api/screen/index.html @@ -0,0 +1,89 @@ +--- +title: Screen +slug: Web/API/Screen +translation_of: Web/API/Screen +--- +
{{APIRef("CSSOM View")}}
+ +

La interfaz Screen representa una pantallaa, usualmente la misma donde la ventana actual está siendo visualizada.

+ +

Usualmente es también la única en la que la ventana actual está siendo visualizada, obtenida utilizando window.screen.

+ +

Propiedades

+ +
+
{{domxref("Screen.availTop")}}
+
Especifica la coordenada-y del primer pixel que no está asignado a prestaciones permanentes o semipermanentes de la interfaz de usuario.
+
{{domxref("Screen.availLeft")}}
+
Retorna el primer pixel disponible desde el border izquierdo de la pantalla.
+
{{domxref("Screen.availHeight")}}
+
Especifica la altura de la pantalla, en pixels, menos la altura de los elementos permanentes o semipermanentes de la interfaz de usuario visualizados por el sistema operativo, como la barra de tareas de Windows.
+
{{domxref("Screen.availWidth")}}
+
Retorna el total de espacio horizontal en pixels disponibles para la ventana.
+
{{domxref("Screen.colorDepth")}}
+
Retorna la profundidad de color de la pantalla.
+
{{domxref("Screen.height")}}
+
Retorna la altura de la pantalla en pixels.
+
{{domxref("Screen.left")}}
+
Retorna la distancia en pixels desde el borde izquierdo de la pantalla principal al borde izquierdo de la pantalla actual.
+
{{domxref("Screen.orientation")}}
+
Retorna la orientación actual de la pantalla.
+
{{domxref("Screen.pixelDepth")}}
+
Obtiene la profundidad de bits de la pantalla.
+
{{domxref("Screen.top")}}
+
Retorna la distancia en pixels desde el borde supierior de la pantalla principal al border superior de la pantalla actual.
+
{{domxref("Screen.width")}}
+
Retorna la anchura de la pantalla.
+
{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}
+
Booleano. Estableciendo su valor a false desactivará el dispositivo de pantalla.
+
{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}
+
Controla el brillo del dispositivo de pantalla. Espera un valor doble-precisión entre 0 y 1.0.
+
+ +

Manejador de eventos

+ +
+
{{domxref("Screen.onorientationchange")}}
+
Un manejador para los eventos {{event("orientationchange")}}.
+
+ +

Métodos

+ +
+
{{domxref("Screen.lockOrientation")}}
+
Bloquea la orientación de pantalla (sólo funciona en pantalla completa o para apps instaladas)
+
{{domxref("Screen.unlockOrientation")}}
+
Desbloquea la orientación de pantalla (sólo funciona en pantalla completa o para apps instaladas)
+
+ +

Métodos heredados de {{domxref("EventTarget")}}

+ +

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+ +

Ejemplo

+ +
if (screen.pixelDepth < 8) {
+  // usa versión low-color de la página
+} else {
+  // usa versión regular, a todo color de la página
+}
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{ SpecName('CSSOM View', '#the-screen-interface', 'Screen') }}{{ Spec2('CSSOM View') }}
diff --git a/files/es/web/api/selection/addrange/index.html b/files/es/web/api/selection/addrange/index.html new file mode 100644 index 0000000000..a684954e9c --- /dev/null +++ b/files/es/web/api/selection/addrange/index.html @@ -0,0 +1,46 @@ +--- +title: addRange +slug: Web/API/Selection/addRange +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/addRange +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Añade un objeto de rango a la selección.

+ +

Sintaxis

+ +
sel.addRange(
+range)
+
+ +

Parámetros

+ +
+
+ range +
+
Un objeto range que será añadido a la selección.
+
+ +

Ejemplos

+ +
 /* Seleccionar todos los elementos en NEGRITA en un 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( { "en": "en/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange", "pl": "pl/DOM/Selection/addRange" } ) }}

diff --git a/files/es/web/api/selection/anchornode/index.html b/files/es/web/api/selection/anchornode/index.html new file mode 100644 index 0000000000..dcb4b194b0 --- /dev/null +++ b/files/es/web/api/selection/anchornode/index.html @@ -0,0 +1,27 @@ +--- +title: anchorNode +slug: Web/API/Selection/anchorNode +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/anchorNode +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el nodo en el cual empieza la selección.

+ +

Sintaxis

+ +
sel.anchorNode
+
+ +

Notas

+ +

Un usuario puede hacer una selección de izquierda a derecha (en el orden del documento) o de derehca a izquierda (en el orden contrario del documento). El ancla es donde el usuario empezó la selección. Ésta puede ser visualizada manteniendo presionada la tecla Shift y presionando las flechas de movimiento del teclado. El ancla de la selección no se mueve, pero el foco de ésta (el otro "final" de la selección) sí se mueve.

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/anchorNode", "it": "it/DOM/Selection/anchorNode", "pl": "pl/DOM/Selection/anchorNode" } ) }}

diff --git a/files/es/web/api/selection/anchoroffset/index.html b/files/es/web/api/selection/anchoroffset/index.html new file mode 100644 index 0000000000..e228803085 --- /dev/null +++ b/files/es/web/api/selection/anchoroffset/index.html @@ -0,0 +1,27 @@ +--- +title: anchorOffset +slug: Web/API/Selection/anchorOffset +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/anchorOffset +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el número de caracteres en que el ancla de la selección es colocada dentro de anchorNode.

+ +

Sintaxis

+ +
sel.anchorOffset
+
+ +

Notas

+ +

Este número está basado en cero. Si la selección empieza con el primer carácter en anchorNode, el número devuelto será 0.

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/anchorOffset", "it": "it/DOM/Selection/anchorOffset", "pl": "pl/DOM/Selection/anchorOffset" } ) }}

diff --git a/files/es/web/api/selection/collapse/index.html b/files/es/web/api/selection/collapse/index.html new file mode 100644 index 0000000000..a0540265c3 --- /dev/null +++ b/files/es/web/api/selection/collapse/index.html @@ -0,0 +1,50 @@ +--- +title: collapse +slug: Web/API/Selection/collapse +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/collapse +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Pliega la selección a un simple punto. El documento no es modificado. Si el contenido es enfocado y editable, el cursor parpadeará ahí.

+ +

Sintaxis

+ +
sel.collapse(
+parentNode,
+offset);
+
+ +

Parámetros

+ +
+
+ parentNode +
+
La localización del cursor estará dentro de este nodo.
+
+ +
+
+ offset +
+
El cursor estará colocado éste número de caracteres desdel el comienzo del texto de + parentNode' + s text.
+
+ +

Ejemplos

+ +
/* Colocar el cursor al principio del cuerpo de un documento HTML. */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+
+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/collapse", "it": "it/DOM/Selection/collapse", "pl": "pl/DOM/Selection/collapse" } ) }}

diff --git a/files/es/web/api/selection/collapsetoend/index.html b/files/es/web/api/selection/collapsetoend/index.html new file mode 100644 index 0000000000..f0f729b928 --- /dev/null +++ b/files/es/web/api/selection/collapsetoend/index.html @@ -0,0 +1,27 @@ +--- +title: collapseToEnd +slug: Web/API/Selection/collapseToEnd +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/collapseToEnd +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Traslada el ancla hasta el mismo punto del foco. El foco no se mueve. Si el contenido es enfocado y editable, el cursor parpadeará ahí.

+ +

Sintaxis

+ +
sel.collapseToEnd()
+
+ +

Parámetros

+ +

Ninguno.

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "it": "it/DOM/Selection/collapseToEnd", "pl": "pl/DOM/Selection/collapseToEnd" } ) }}

diff --git a/files/es/web/api/selection/collapsetostart/index.html b/files/es/web/api/selection/collapsetostart/index.html new file mode 100644 index 0000000000..ce04e7a985 --- /dev/null +++ b/files/es/web/api/selection/collapsetostart/index.html @@ -0,0 +1,29 @@ +--- +title: collapseToStart +slug: Web/API/Selection/collapseToStart +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/collapseToStart +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Traslada el foco de la selección al mismo punto que el ancla. El ancla no se mueve. Si el contenido es enfocado y editable, el cursor parpadeará ahí.

+ +

Sintaxis

+ +
sel.collapseToStart()
+
+ +

Parámetros

+ +

Ninguno.

+ +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/collapseToStart", "it": "it/DOM/Selection/collapseToStart", "pl": "pl/DOM/Selection/collapseToStart" } ) }}

diff --git a/files/es/web/api/selection/containsnode/index.html b/files/es/web/api/selection/containsnode/index.html new file mode 100644 index 0000000000..272c7e71af --- /dev/null +++ b/files/es/web/api/selection/containsnode/index.html @@ -0,0 +1,49 @@ +--- +title: containsNode +slug: Web/API/Selection/containsNode +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/containsNode +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Indica si tal nodo es parte de la selección.

+ +

Sintaxis

+ +
sel.containsNode(
+aNode,
+aPartlyContained)
+
+ +

Parámetros

+ +
+
+ aNode +
+
El nodo que está siendo vigilado por si es parte de la selección.
+
+ aPartlyContained +
+
Cuando da un valor + verdadero + , containsNode devuelve verdadero cuanbdo una parte del nodo es parte de la selección.
+
Cuando da un valor + falso + , containsNode solo devuelve verdadeor cuando el nodo completo es parte de la selección.
+
+ +

Ejemplos

+ +
 /* Checar si algo dentro del elemento cuerpo (etiquetas body) está seleccionado */
+ alert(window.getSelection().containsNode(document.body, true));
+
+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/containsNode", "it": "it/DOM/Selection/containsNode", "pl": "pl/DOM/Selection/containsNode" } ) }}

diff --git a/files/es/web/api/selection/deletefromdocument/index.html b/files/es/web/api/selection/deletefromdocument/index.html new file mode 100644 index 0000000000..808461dba4 --- /dev/null +++ b/files/es/web/api/selection/deletefromdocument/index.html @@ -0,0 +1,31 @@ +--- +title: deleteFromDocument +slug: Web/API/Selection/deleteFromDocument +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/deleteFromDocument +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Elimina del documento el contenido de la selección.

+ +

Sintaxis

+ +
sel.deleteFromDocument()
+
+ +

Parámetros

+ +

Ninguno.

+ +

Ejemplos

+ +

Un usuario selecciona el texto (imaginario) "jos tienen do" del texto "Los conejos tienen dos orejas." en una página web. Después el usuario da click en un botón que ejecuta la acción cortar de JavaScript window.getSelection().deleteFromDocument(). El texto del documento quedaría como "Los cones orejas."

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "it": "it/DOM/Selection/deleteFromDocument", "pl": "pl/DOM/Selection/deleteFromDocument" } ) }}

diff --git a/files/es/web/api/selection/extend/index.html b/files/es/web/api/selection/extend/index.html new file mode 100644 index 0000000000..d4c0315631 --- /dev/null +++ b/files/es/web/api/selection/extend/index.html @@ -0,0 +1,41 @@ +--- +title: extend +slug: Web/API/Selection/extend +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/extend +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Traslada el foco de la selección a un punto especificado. El ancla de la selección no se mueve. La selección será desde el ancla hasta el nuevo focus regardless of direction.

+ +

Sintaxis

+ +
sel.extend(
+parentNode,
+offset)
+
+ +

Parámetros

+ +
+
+ parentNode +
+
El nodo dentro del cual el foco será movido.
+
+ +
+
+ offset +
+
El número de caracteres que habrá desde el principio del texto + parentNode + hasta donde el foco se colocará.
+
+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/extend", "it": "it/DOM/Selection/extend", "pl": "pl/DOM/Selection/extend" } ) }}

diff --git a/files/es/web/api/selection/focusnode/index.html b/files/es/web/api/selection/focusnode/index.html new file mode 100644 index 0000000000..6ccaae09fe --- /dev/null +++ b/files/es/web/api/selection/focusnode/index.html @@ -0,0 +1,25 @@ +--- +title: focusNode +slug: Web/API/Selection/focusNode +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/focusNode +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el nudo en el cual acaba la selección.

+ +

Sintaxis

+ +
sel.focusNode
+
+ +

Notas

+ +

Un usuario puede hacer una selección de izquierda a derecha (en el orden del documento) o de derehca a izquierda (en el orden contrario del documento). El foco es donde el usuario terminó la selección. Éste puede ser visualizado manteniendo presionada la tecla Shift y presionando las flechas de movimiento del teclado para modificar la selección. El foco de la selección se mueve, pero el ancla de ésta (el otro final de la selección) no se mueve.

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/focusNode", "it": "it/DOM/Selection/focusNode", "pl": "pl/DOM/Selection/focusNode" } ) }}

diff --git a/files/es/web/api/selection/focusoffset/index.html b/files/es/web/api/selection/focusoffset/index.html new file mode 100644 index 0000000000..88f525f887 --- /dev/null +++ b/files/es/web/api/selection/focusoffset/index.html @@ -0,0 +1,27 @@ +--- +title: focusOffset +slug: Web/API/Selection/focusOffset +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/focusOffset +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el número de caracteres en que el foco de la selección es colocado dentro de focusNode.

+ +

Sintaxis

+ +
sel.focusOffset
+
+ +

Notas

+ +

Este número está basado en cero. Si la selección termina con el primer carácter en focusNode, el número devuelto será 0.

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/focusOffset", "it": "it/DOM/Selection/focusOffset", "pl": "pl/DOM/Selection/focusOffset" } ) }}

diff --git a/files/es/web/api/selection/getrangeat/index.html b/files/es/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..db0505dd77 --- /dev/null +++ b/files/es/web/api/selection/getrangeat/index.html @@ -0,0 +1,49 @@ +--- +title: getRangeAt +slug: Web/API/Selection/getRangeAt +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/getRangeAt +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve un objeto de rango representando uno de los rangos seleccionados.

+ +

Sintaxis

+ +
range =
+sel.getRangeAt(
+index)
+
+ +

Parámetros

+ +
+
+ range +
+
El objeto range (rango) que será devuelto.
+
+ +
+
+ index +
+
El exponente (basado en cero) del rango a devolver. Un número negativo o un número mayor o igual a rangeCount provocará un error.
+
+ +

Ejemplos

+ +
ranges = [];
+sel = window.getSelection();
+for(var i = 0; i < sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Cada artículo en el array de rangos ahora es
+ * un objeto rango representando uno de los
+ * rangos en la selección */
+
+ +

{{ languages( { "en": "en/DOM/Selection/getRangeAt", "pl": "pl/DOM/Selection/getRangeAt" } ) }}

diff --git a/files/es/web/api/selection/index.html b/files/es/web/api/selection/index.html new file mode 100644 index 0000000000..d267e3b16b --- /dev/null +++ b/files/es/web/api/selection/index.html @@ -0,0 +1,105 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Selection +--- +

{{ ApiRef("DOM") }}

+ +

Introducción

+ +

Selección es la clase de objeto devuelto por window.getSelection() y otros métodos.

+ +

Un objeto de selección representa los rangos que el usuario ha seleccionado. Suele llevar un sólo rango, accesado como sigue:

+ +
range = sel.getRangeAt(0);
+
+ +

Llamar al método toString() devuelve el texto contenido en la selección, ej:

+ +
selObj = window.getSelection();
+window.alert(selObj.toString());
+
+ +

 

+ +

Glosario

+ +

Otros términos claves usados en esta parte.

+ +
+
anchor
+
El ancla de una selección es el punto inicial de ésta. Cuando se hace una selección con el ratón, el ancla es el punto donde se presionó por primera vez el botón del ratón. Cuando el usuario mueve la selección utilizando el ratón o el teclado, el ancla no se mueve.
+
focus
+
El foco de una selección es el punto último de ésta. Cuando se hace la selección con el ratón, el foco es el punto donde se suelta el botón del ratón. Cuando el usuario mueve la selección utilizando el "mouse" o el teclado, el foco es el final de la selección que el usuario está moviendo.
+
range
+
Un rango es una parte contigua de un documento. Un rango puede contener un nodo entero así como porciones de nodos, por ejemplo una parte de un nodo de texto. Normalmente un usuario seleccionará únicamente un solo rango a la vez, pero también le es posible seleccionar múltiples rangos (por ejemplo, utilizando la tecla controlCtrl ). Un rango puede ser recuperado de una selección como un objeto de rango. Los objetos de rango también pueden ser creados vía el DOM y programadamente adheridos o removidos de una selección.
+
+ +

Propiedades

+ +
+
anchorNode
+
Devuelve el nodo en el cual empieza la selección.
+
anchorOffset
+
Devuelve el número de caracteres en que el ancla de la selección es colocada dentro de anchorNode.
+
focusNode
+
Devuelve el nodo en el cual acaba la selección.
+
focusOffset
+
Devuelve el número de caracteres en que el foco de la selección es colocado dentro de focusNode.
+
isCollapsed
+
Devuelve un valor boleano verdadero si los puntos de inicio y fin de la selección están en la misma posición.
+
rangeCount
+
Devuelve el número de los rangos que hay en la selección.
+
+ +

Métodos

+ +
+
getRangeAt
+
Devuelve un objeto de rango representando uno de los rangos seleccionados.
+
collapse
+
Pliega la selección a un simple punto.
+
extend
+
Traslada el foco de la selección a un punto especificado.
+
collapseToStart
+
Traslada el foco de la selección al mismo punto que el ancla.
+
collapseToEnd
+
Traslada el ancla hasta el mismo punto del foco. El foco no se mueve.
+
selectAllChildren
+
Añadirá todos los "hijos" del nodo especificado a la selección.
+
addRange
+
Añade un objeto de rango a la selección.
+
removeRange
+
Quita un rango de la selección.
+
removeAllRanges
+
Quita todos los rangos de la selección.
+
deleteFromDocument
+
Elimina del documento el contenido de la selección.
+
selectionLanguageChange
+
NO IMPLEMENTADA, Cambia la direccion de la seleccion de Izquierda a Derecha a Derecha a Izquierda
+
toString
+
Devuelve una cadena de caracteres (texto), la cual es representada por el objeto de selección, es decir, el texto seleccionado.
+
containsNode
+
Indica si tal nodo es parte de la selección.
+
+ +

Ver también

+ +

window.getSelection, Rango

+ +

Enlaces externos

+ + + +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection", "fr": "fr/DOM/selection", "it": "it/DOM/Selection", "ja": "ja/DOM/selection", "pl": "pl/DOM/Selection" } ) }}

diff --git a/files/es/web/api/selection/iscollapsed/index.html b/files/es/web/api/selection/iscollapsed/index.html new file mode 100644 index 0000000000..230c9f147d --- /dev/null +++ b/files/es/web/api/selection/iscollapsed/index.html @@ -0,0 +1,25 @@ +--- +title: isCollapsed +slug: Web/API/Selection/isCollapsed +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/isCollapsed +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve un valor boleano verdadero si los puntos de inicio y fin de la selección están en la misma posición.

+ +

Sintaxis

+ +
sel.isCollapsed
+
+ +

Notas

+ +

Incluso hasta una selección colapsada/plegada puede tener un rangeCount mayor que 0. sel.getRangeAt(0) puede retornar un rango que también esté colapsado/plegado.

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/isCollapsed", "it": "it/DOM/Selection/isCollapsed", "pl": "pl/DOM/Selection/isCollapsed" } ) }}

diff --git a/files/es/web/api/selection/rangecount/index.html b/files/es/web/api/selection/rangecount/index.html new file mode 100644 index 0000000000..fb39e6be07 --- /dev/null +++ b/files/es/web/api/selection/rangecount/index.html @@ -0,0 +1,28 @@ +--- +title: rangeCount +slug: Web/API/Selection/rangeCount +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/rangeCount +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el número de los rangos que hay en la selección.

+ +

Sintaxis

+ +
sel.rangeCount
+
+ +

Notas

+ +

Antes de que el usuario haya hecho + click + en una página recién cargada, el rangeCount es 0. Un usuario normalmente puede seleccionar un rango a la vez, entonces el rangeCount usualmente será 1. El + + scripting + puede usarse para hacer que la selección contenga más de 1 rango.

+ +

{{ languages( { "en": "en/DOM/Selection/rangeCount", "it": "it/DOM/Selection/rangeCount", "pl": "pl/DOM/Selection/rangeCount" } ) }}

diff --git a/files/es/web/api/selection/removeallranges/index.html b/files/es/web/api/selection/removeallranges/index.html new file mode 100644 index 0000000000..5c8ad3f311 --- /dev/null +++ b/files/es/web/api/selection/removeallranges/index.html @@ -0,0 +1,27 @@ +--- +title: removeAllRanges +slug: Web/API/Selection/removeAllRanges +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/removeAllRanges +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Quita todos los rangos de la selección, dejando las propiedades anchorNode y focusNode con un valor null (nulo) y dejando nada seleccionado.

+ +

Sintaxis

+ +
sel.removeAllRanges();
+
+ +

Parámetros

+ +

Ninguno.

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/removeAllRanges", "it": "it/DOM/Selection/removeAllRanges", "pl": "pl/DOM/Selection/removeAllRanges" } ) }}

diff --git a/files/es/web/api/selection/removerange/index.html b/files/es/web/api/selection/removerange/index.html new file mode 100644 index 0000000000..fa617c49b9 --- /dev/null +++ b/files/es/web/api/selection/removerange/index.html @@ -0,0 +1,45 @@ +--- +title: removeRange +slug: Web/API/Selection/removeRange +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/removeRange +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Quita un rango de la selección.

+ +

Sintaxis

+ +
sel.removeRange(
+range)
+
+ +

Parámetros

+ +
+
+ range +
+
Un objeto rango que será eliminado de la selección.
+
+ +

Ejemplos

+ +
/* Programadamente, mas de un rango puede ser seleccionado.
+ * Esto eliminará todos los rangos excepto el primero. */
+s = window.getSelection();
+if(s.rangeCount > 1) {
+ for(var i = 1; i < s.rangeCount; i++) {
+  s.removeRange(s.getRangeAt(i));
+ }
+}
+
+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/removeRange", "it": "it/DOM/Selection/removeRange", "pl": "pl/DOM/Selection/removeRange" } ) }}

diff --git a/files/es/web/api/selection/selectallchildren/index.html b/files/es/web/api/selection/selectallchildren/index.html new file mode 100644 index 0000000000..5f824dc200 --- /dev/null +++ b/files/es/web/api/selection/selectallchildren/index.html @@ -0,0 +1,45 @@ +--- +title: selectAllChildren +slug: Web/API/Selection/selectAllChildren +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/selectAllChildren +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Añadirá todos los "hijos" del nodo especificado a la selección. La selección previa se pierde.

+ +

Sintaxis

+ +
sel.selectAllChildren(
+parentNode)
+
+ +

Parámetros

+ +
+
+ parentNode +
+
Todos los "hijos" de + parentNode + serán seleccionados. El mismo + + parentNode + no es parte de la selección.
+
+ +

Ejemplos

+ +
footer = document.getElementById("footer");
+window.getSelection().selectAllChildren(footer);
+/* Todo el contendio del pie de página ahora está seleccionado */
+
+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren", "pl": "pl/DOM/Selection/selectAllChildren" } ) }}

diff --git a/files/es/web/api/selection/tostring/index.html b/files/es/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..0a70de979b --- /dev/null +++ b/files/es/web/api/selection/tostring/index.html @@ -0,0 +1,48 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/toString +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve una cadena de caracteres (texto), la cual es representada por el objeto de selección, es decir, el texto seleccionado.

+ +

Sintaxis

+ +
string =
+sel.toString()
+
+ + + +

Parámetros

+ +

Ninguno.

+ +

Descripción

+ +

Este método devuelve el texto seleccionado.

+ +

En JavaScript, este método es llamado automáticamente cuando una función, a la cual es pasado como parámetro el objeto de selección, requiere una cadena de caracteres (texto):

+ +
alert(window.getSelection()) // Lo que se llama.
+alert(window.getSelection().toString())  // Lo que está siendo efectivamente llamado.
+
+ +

Ver también

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/toString", "fr": "fr/DOM/Selection/toString", "it": "it/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}

diff --git a/files/es/web/api/service_worker_api/index.html b/files/es/web/api/service_worker_api/index.html new file mode 100644 index 0000000000..8b0b05e252 --- /dev/null +++ b/files/es/web/api/service_worker_api/index.html @@ -0,0 +1,311 @@ +--- +title: Service Worker API +slug: Web/API/Service_Worker_API +tags: + - API + - Landing + - NeedsTranslation + - Offline + - Overview + - Reference + - Service Workers + - TopicStub + - Workers +translation_of: Web/API/Service_Worker_API +--- +
+

{{ServiceWorkerSidebar}}

+ +

Los Service workers actúan esencialmente como proxy servers asentados entre las aplicaciones web, el navegador y la red (cuando está accesible). Están destinados, entre otras cosas, a permitir la creación de experiencias offline efectivas, interceptando peticiones de red y realizando la acción apropiada si la conexión de red está disponible y hay disponibles contenidos actualizados en el servidor. También permitirán el acceso a notificaciones tipo push y APIs de  sincronización en segundo plano.

+
+ +

Conceptos y uso de Service worker

+ +

Un service worker es un worker manejado por eventos registrado para una fuente y una ruta. Consiste en un fichero JavaScript que controla la página web (o el sitio) con el que está asociado, interceptando y modificando la navegación y las peticiones de recursos, y cacheando los recursos de manera muy granular para ofrecer un control completo sobre cómo la aplicación debe comportarse en ciertas situaciones (la mas obvia es cuando la red no está disponible).

+ +

Un service worker se ejecuta en un contexto worker: por lo tanto no tiene acceso al DOM, y se ejecuta en un hilo distinto al JavaScript principal de la aplicación, de manera que no es bloqueante. Está diseñado para ser completamente asíncrono, por lo que APIs como el XHR asíncrono y localStorage no se pueden usar dentro de un service worker.

+ +

Los service workers solo funcionan sobre HTTPS, por razones de seguridad. Modificar las peticiones de red en abierto permitiría ataques man in the middle realmente peligrosos. En Firefox, las APIs de service worker se ocultan y no pueden ser empleadas cuando el usuario está en modo de navegación en privado.

+ +
+

Nota: Los Service Workers mejoran los intentos anteriores en este área tal como AppCache puesto que no hacen suposiciones sobre qué se está intentando hacer para luego tener que cortar cuando las suposiciones no son correctas; hay control granular sobre todos los aspectos.

+
+ +
+

Nota: Los Service workers hace un uso intensivo de las promesas, por lo que generalmente esperarán a que lleguen las respuestasas correspondientes, tras lo cual responderán con una acción de éxito o de fracaso. La arquitectura de promesas es ideal en este caso.

+
+ +

Registro

+ +

Un service worker se registra primero mediante el método {{domxref("ServiceWorkerContainer.register()")}}. Si ha habido éxito, el service worker se descargará al cliente e intentará la instalación/activación (ver más abajo) de las URLs accedidas por el usuario dentro de todo su origen de datos, o dentro de algún subconjunto especificado por el autor.

+ +

Descarga, instalación y activación

+ +

En este punto, su service worker observará el siguiente ciclo de vida:

+ +
    +
  1. Descarga
    2. +
  2. Instalación
    3. +
  3. Activación
    4. +
+ +

El service worker se descaga inmediatamente cuando un usuario accede por primera vez a un sitio controlado por el mismo.

+ +

Después de esto se descarga cada 24 horas aproximadamente. Se puede descargar con más frecuencia, pero debe ser descargado cada 24 horas para prevenir que una mala programación sea molesta durante mucho tiempo.

+ +

La instalación se realiza cuando el fichero descargado es nuevo, es decir, diferente a otro service worker existente (comparado byte a byte), o si es el primero descargado para esta página/sitio.

+ +

Si es la primera vez que el service worker está disponible se intenta la instalación, y tras una instalación satisfactoria se activa.

+ +

Si ya existe un service worker disponible la nueva versión se instala en segundo plano, pero no se activa -en ese momento se llama worker in waiting. Sólo se activa cuando ya no hay más páginas cargadas que utilicen el antiguo service worker. En cuanto no hay más páginas de este estilo cargadas, el nuevo service worker se activa (pasando a ser el active worker). La activación se puede realizar antes mediante {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} y las páginas existentes se pueden llamar por el active worker usando {{domxref("Clients.claim()")}}.

+ +

Presta atención a {{domxref("InstallEvent")}}; es habitual preparar tu service worker para usarlo cuando se dispara, por ejemplo creando una caché que utilice la API incorporada de almacenamiento, y colocando los contenidos dentro de ella para poder usarlos con la aplicación offline.

+ +

También hay un evento activate. El momento en el que este evento se activa es, en general, un bueno momento para limpiar viejas cachés y demás cosas asociadas con la versión previa de tu service worker.

+ +

Tu service worker puede responder a las peticiones usando el evento {{domxref("FetchEvent")}}. Puedes modificar la respuesta a estas peticiones de la manera que quieras, usando el método {{domxref("FetchEvent.respondWith") }}.

+ +
+

Nota: Dado que oninstall/onactivate puede tardar un poco en completarse, la especificación de service worker spec provee un método waitUntil que, cuando es llamado oninstall o onactivate, pasa una promesa. Los eventos funcionales no se envían al service worker hasta que la promesa se resuelve con éxito.

+
+ +

Para un tutorial completo que muestra cómo construir tu primer ejemplo básico, lee Using Service Workers.

+ +

Otras posibilidades

+ +

Los service workers también pueden usarse para cosas como:

+ + + +

En el futuro, los service workers podrán hacer una cantidad de cosas útiles para la plataforma web que estarán muy próximos a las aplicaciones nativas. Interesantement, otras especificacions pueden comenzar y lo harán a hacer uso del contexto de service worker, por ejemplo:

+ + + +

Interfaces

+ +
+
{{domxref("Cache") }}
+
Representa el almacenamiento para un par de objetos {{domxref("Request")}} / {{domxref("Response")}} que son cacheados como parte del ciclo de vida de {{domxref("ServiceWorker")}}.
+
{{domxref("CacheStorage") }}
+
Representa el almacenamiento de objetos {{domxref("Cache")}}. Proporciona un directorio maestro de todos los nombres de caché a los que puede acceder un {{domxref("ServiceWorker")}} y mantiene un mapa de nombres (strings) correspondientes a objetos {{domxref("Cache")}}.
+
{{domxref("Client") }}
+
Representa el ámbito de un cliente service worker. Un cliente service worker es bien un documento en un contexto de navador, bien un {{domxref("SharedWorker")}}, que está controlado por un worker activo.
+
{{domxref("Clients") }}
+
Representa un contenedor para una lista de objetos {{domxref("Client")}}; principal vía de acceso de los clientes service worker al origen actual.
+
{{domxref("ExtendableEvent") }}
+
Extiende el tiempo de vida de los eventosinstall y activate lanzados en {{domxref("ServiceWorkerGlobalScope")}} como parte del ciclo de vida del service worker. Esto asegura que cualquier evento funcional (como {{domxref("FetchEvent")}}) no se despachan al {{domxref("ServiceWorker")}} hasta que actualiza los esquemas de base de datos, borra entradas de caché antiguas, etc.
+
{{domxref("ExtendableMessageEvent") }}
+
Es el objeto evento de un {{event("message_(ServiceWorker)","message")}} lanzado en un service worker (cuando se recibe un mensaje en el {{domxref("ServiceWorkerGlobalScope")}} desde otro contexto) — extiende el tiempo de vida de tales eventos.
+
{{domxref("FetchEvent") }}
+
Parametro pasado en el controlador {{domxref("ServiceWorkerGlobalScope.onfetch")}}, FetchEvent representa una acción de consulta (fetch) despachada en el {{domxref("ServiceWorkerGlobalScope")}} de un {{domxref("ServiceWorker")}}. Contiene información sobre la petición y respuesta resultante, y proporciona el método {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}, que nos permite proporcionar una respuesta arbitraria a la página controlada.
+
{{domxref("InstallEvent") }}
+
Parámetro pasado en el controlador {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}}, el interfazInstallEvent representa una acctión de instalación realizada en el {{domxref("ServiceWorkerGlobalScope")}} de un {{domxref("ServiceWorker")}}. Como hijo de {{domxref("ExtendableEvent")}}, asegura que los eventos funcionales como {{domxref("FetchEvent")}} no se llevan a cabo durante la instalación. 
+
{{domxref("Navigator.serviceWorker") }}
+
Devuelve un objeto {{domxref("ServiceWorkerContainer")}}, que proporciona acceso al registro, eliminación, actualización y comunicación con los objetos {{domxref("ServiceWorker")}} para el documento asociado.
+
{{domxref("NotificationEvent") }}
+
Parámetro pasado en el controlador {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, el interfaz NotificationEvent representa una notificación del evento click ejecutado en  {{domxref("ServiceWorkerGlobalScope")}} de un {{domxref("ServiceWorker")}}.
+
{{domxref("ServiceWorker") }}
+
Representa un service worker. Multiples contextos de navegación (e.g. pages, workers, etc.) se pueden asociar con el mismo objeto ServiceWorker.
+
{{domxref("ServiceWorkerContainer") }}
+
Proporciona un objeto que representa el service worker como una unidad en el ecosistema de red, incluyendo servicios para registrar, eliminar y actualizar los service workers, y acceder al estado de los service workers y sus registros.
+
{{domxref("ServiceWorkerGlobalScope") }}
+
Representa el contexto global de ejecución de un service worker.
+
{{domxref("ServiceWorkerMessageEvent")}} {{deprecated_inline}}
+
Representa un mensaje envaido a un{{domxref("ServiceWorkerGlobalScope")}}. Observese que este interfaz está considerado obsoleto en navegadores modernos. Los mensajes de service worker no podrán utilizar el interfaz {{domxref("MessageEvent")}}, por consistencia con otras características de mensajería web.
+
{{domxref("ServiceWorkerRegistration") }}
+
Representa un registro service worker.
+
{{domxref("SyncEvent")}} {{non-standard_inline}}
+
+

El interfaz SyncEvent representa una acción sync ejecutada en el {{domxref("ServiceWorkerGlobalScope")}} de un ServiceWorker. 

+
+
{{domxref("SyncManager")}} {{non-standard_inline}}
+
Proporciona un interfaz para registrar y listar registros sync.
+
{{domxref("WindowClient") }}
+
Representa el ámbito de un cliente service worker que es un documento en un contexto de navegador, controlado por un worker activo. Es un tipo especial de objeto {{domxref("Client")}}, con algunos métodos y propiedades adicionales disponibles.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +
{{ CompatibilityTable() }}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoDesktop("44.0") }}[2]{{ CompatNo() }}24{{ CompatNo() }}
install/activate events{{ CompatChrome(40.0) }}{{CompatNo}}[1]{{ CompatGeckoDesktop("44.0") }}[2]{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
fetch event/request/
+ respondWith()		{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoDesktop("44.0") }}[2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
caches/cache +

{{CompatChrome(42.0)}}

+ 		{{CompatNo}}[1]{{ CompatGeckoDesktop("39.0") }}[2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
{{domxref("ServiceWorkerMessageEvent")}} deprecated in favour of {{domxref("MessageEvent")}} +

{{CompatChrome(57.0)}}

+ 		{{ CompatNo() }}{{ CompatGeckoDesktop("55.0") }}[2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoMobile("44.0") }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
 install/activate events{{ CompatNo() }}{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoMobile("44.0") }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
fetch event/request/
+ respondWith()		{{ CompatNo() }}{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoMobile("44.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
caches/cache{{ CompatNo() }}{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoMobile("39.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
{{domxref("ServiceWorkerMessageEvent")}} deprecated in favour of {{domxref("MessageEvent")}}{{ CompatNo() }} +

{{CompatChrome(57.0)}}

+ 		{{ CompatNo() }}{{ CompatGeckoMobile("55.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

[1] Esta característica aún no está soportada, aunque está  ya en desarrollo.

+ +

[2] Service workers (y Push) han sido inhabilitados en Firefox 45 & 52 Extended Support Releases (ESR.)

+ +

Ver también

+ + diff --git a/files/es/web/api/service_worker_api/using_service_workers/index.html b/files/es/web/api/service_worker_api/using_service_workers/index.html new file mode 100644 index 0000000000..d687cddd19 --- /dev/null +++ b/files/es/web/api/service_worker_api/using_service_workers/index.html @@ -0,0 +1,526 @@ +--- +title: Usando Service Workers +slug: Web/API/Service_Worker_API/Using_Service_Workers +tags: + - Guía + - básico +translation_of: Web/API/Service_Worker_API/Using_Service_Workers +--- +

{{ServiceWorkerSidebar}}

+ +

{{ SeeCompatTable() }}

+ +
+

Este articulo provee información sobre cómo empezar con los service workers, incluyendo su arquitectura básica, el registro de un service worker, el proceso de instalación y activación de un nuevo service worker, cómo actualizar un service worker, controlar su cache y respuestas personalizadas, todo esto en el contexto de una simple aplicación con la capacidad de trabajar offline (sin internet).

+
+ +

La premisa de los service workers

+ +

Un problema primordial que los usuarios de la web han sufrido durante años es la pérdida de conectividad. La mejor aplicación web en el mundo ofrecerá una experiencia de usuario terrible si simplemente no se puede utilizar. Han habido varios intentos de crear tecnologías para resolver este problema, como muestra nuestra página offline, y algunos problemas han sido solucionados. Pero el problema primordial es que todavía no hay un mecanismo de control eficiente para el almacenamiento en caché de activos y solicitudes de red personalizadas.

+ +

El mecanismo previamente utilizado -el AppCache- parecía una buena idea porque te permitía especificar los recursos que almacenarías en caché de una forma realmente fácil. Sin embargo, AppCache presuponía lo que el desarrollador trataba de crear y fallaba demasiado cuando la aplicación no se comportaba exactamente según las suposiciones iniciales. Veáse el artículo de Jake Archibald Application Cache is a Douchebag para más información.

+ +
+

Nota: A partir de Firefox 44, cuando se usa AppCache para proveer soporte offline a una página se muestra un mensaje de advertencia en la consola aconsejandole al desarrollador para que  use Service workers en su lugar ({{bug("1204581")}}.)

+
+ +

Los Service workers deberían finalmente solucionar estos inconvenientes. Aunque la sintaxis de Service Worker es más compleja que la de AppCache, presenta la ventaja de que puede usar JavaScript para controlar los recursos de cache con gran detalle, permitiendo gestionar los problemas asociados a  AppCache, y muchos más.

+ +

Al utilizar un Service Worker, puedes configurar fácilmente una aplicación para que utilice primero los recursos en caché antes de obtener alguna información de la red (Comunmente conocido como Offline First) lo que proporciona la experiencia de uso predeterminada incluso cuando se está offline. Este paradigma se usa en aplicaciones nativas, y es una de las principales razones por las que a menudo éstas se eligen por encima de las aplicaciones web.

+ +

Setting up to play with service workers

+ +

Many service workers features are now enabled by default in newer versions of supporting browsers. If however you find that demo code is not working in your installed versions, you might need to enable a pref:

+ + + +

You’ll also need to serve your code via HTTPS — Service workers are restricted to running across HTTPS for security reasons. GitHub is therefore a good place to host experiments, as it supports HTTPS. In order to facilitate local development, localhost is considered a secure origin by browsers as well.

+ +

Basic architecture

+ +

With service workers, the following steps are generally observed for basic set up:

+ +
    +
  1. The service worker URL is fetched and registered via {{domxref("serviceWorkerContainer.register()")}}.
    2. +
  2. If successful, the service worker is executed in a {{domxref("ServiceWorkerGlobalScope") }}; this is basically a special kind of worker context, running off the main script execution thread, with no DOM access.
    3. +
  3. The service worker is now ready to process events.
    4. +
  4. Installation of the worker is attempted when service worker-controlled pages are accessed subsequently. An Install event is always the first one sent to a service worker (this can be used to start the process of populating an IndexedDB, and caching site assets). This is really the same kind of procedure as installing a native or Firefox OS app — making everything available for use offline.
    5. +
  5. When the oninstall handler completes, the service worker is considered installed.
    6. +
  6. Next is activation. When the service worker is installed, it then receives an activate event. The primary use of onactivate is for cleanup of resources used in previous versions of a Service worker script.
    7. +
  7. The Service worker will now control pages, but only those opened after the register() is successful. i.e. a document starts life with or without a Service worker and maintains that for its lifetime. So documents will have to be reloaded to actually be controlled.
    8. +
+ +

+ +

The below graphic shows a summary of the available service worker events:

+ +

install, activate, message, fetch, sync, push

+ +

Promises

+ +

Las promesas (Promises) son un gran mecanismo para ejecutar operaciones asíncronas,  con éxito dependiente el uno del otro. Esto es fundamental para la forma en que trabajan los service workers.
+
+ Promises can do a great many things, but for now, all you need to know is that if something returns a promise, you can attach .then() to the end and include callbacks inside it for success, failure, etc., or you can insert .catch() on the end if you want to include a failure callback.

+ +

Let’s compare a traditional synchronous callback structure to its asynchronous promise equivalent.

+ +

sync

+ +
try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}
+ +

async

+ +
myFunction().then(function(value) {
+  console.log(value);
+}).catch(function(err) {
+  console.log(err);
+});
+ +

In the first example, we have to wait for myFunction() to run and return value before any more of the code can execute. In the second example, myFunction() returns a promise for value, then the rest of the code can carry on running. When the promise resolves, the code inside then will be run, asynchronously.
+
+ Now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them? This is a standard thing to want to do, but it can be a bit of a pain. We can use .onload to only display the image after it’s loaded, but what about events that start happening before we start listening to them? We could try to work around this using .complete, but it’s still not foolproof, and what about multiple images? And, ummm, it’s still synchronous, so blocks the main thread.
+
+ Instead, we could build our own promise to handle this kind of case. (See our Promises test example for the source code, or look at it running live.)

+ +

{{note("A real service worker implementation would use caching and onfetch rather than the deprecated XMLHttpRequest API. Those features are not used here so that you can focus on understanding Promises.")}}

+ +
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = function() {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}
+ +

We return a new promise using the Promise() constructor, which takes as an argument a callback function with resolve and reject parameters. Somewhere in the function, we need to define what happens for the promise to resolve successfully or be rejected — in this case return a 200 OK status or not — and then call resolve on success, or reject on failure. The rest of the contents of this function is fairly standard XHR stuff, so we won’t worry about that for now.

+ +

When we come to call the imgLoad() function, we call it with the url to the image we want to load, as we might expect, but the rest of the code is a little different:

+ +
var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});
+ +

On to the end of the function call, we chain the promise then() method, which contains two functions — the first one is executed when the promise successfully resolves, and the second is called when the promise is rejected. In the resolved case, we display the image inside myImage and append it to the body (it’s argument is the request.response contained inside the promise’s resolve method); in the rejected case we return an error to the console.

+ +

This all happens asynchronously.

+ +
+

Note: You can also chain promise calls together, for example:
+ myPromise().then(success, failure).then(success).catch(failure);

+
+ +
+

Note: You can find a lot more out about promises by reading Jake Archibald’s excellent JavaScript Promises: there and back again.

+
+ +

Service workers demo

+ +

To demonstrate just the very basics of registering and installing a service worker, we have created a simple demo called sw-test, which is a simple Star wars Lego image gallery. It uses a promise-powered function to read image data from a JSON object and load the images using Ajax, before displaying the images in a line down the page. We’ve kept things static and simple for now. It also registers, installs, and activates a service worker, and when more of the spec is supported by browsers it will cache all the files required so it will work offline!

+ +


+
+
+ You can see the source code on GitHub, and view the example live. The one bit we’ll call out here is the promise (see app.js lines 22-47), which is a modified version of what you read about above, in the Promises test demo. It is different in the following ways:

+ +
    +
  1. In the original, we only passed in a URL to an image we wanted to load. In this version, we pass in a JSON fragment containing all the data for a single image (see what they look like in image-list.js). This is because all the data for each promise resolve has to be passed in with the promise, as it is asynchronous. If you just passed in the url, and then tried to access the other items in the JSON separately when the for() loop is being iterated through later on, it wouldn’t work, as the promise wouldn’t resolve at the same time as the iterations are being done (that is a synchronous process.)
    2. +
  2. We actually resolve the promise with an array, as we want to make the loaded image blob available to the resolving function later on in the code, but also the image name, credits and alt text (see app.js lines 31-34). Promises will only resolve with a single argument, so if you want to resolve with multiple values, you need to use an array/object.
    3. +
  3. To access the resolved promise values, we then access this function as you’d then expect (see app.js lines 60-64). This may seem a bit odd at first, but this is the way promises work.
    4. +
+ +

Enter service workers

+ +

Now let’s get on to service workers!

+ +

Registering your worker

+ +

The first block of code in our app’s JavaScript file — app.js — is as follows. This is our entry point into using service workers.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
+  .then(function(reg) {
+    // registration worked
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch(function(error) {
+    // registration failed
+    console.log('Registration failed with ' + error);
+  });
+}
+ +
    +
  1. The outer block performs a feature detection test to make sure service workers are supported before trying to register one.
    2. +
  2. Next, we use the {{domxref("ServiceWorkerContainer.register()") }} function to register the service worker for this site, which is just a JavaScript file residing inside our app (note this is the file's URL relative to the origin, not the JS file that references it.)
    3. +
  3. The scope parameter is optional, and can be used to specify the subset of your content that you want the service worker to control. In this case, we have specified '/sw-test/', which means all content under the app's origin. If you leave it out, it will default to this value anyway, but we specified it here for illustration purposes.
    4. +
  4. The .then() promise function is used to chain a success case onto our promise structure.  When the promise resolves successfully, the code inside it executes.
    5. +
  5. Finally, we chain a .catch() function onto the end that will run if the promise is rejected.
    6. +
+ +

This registers a service worker, which runs in a worker context, and therefore has no DOM access. You then run code in the service worker outside of your normal pages to control their loading.
+
+ A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it. Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn’t get its own unique worker.

+ +
+

Note: Your service worker functions like a proxy server, allowing you to modify requests and responses, replace them with items from its own cache, and more.

+
+ +
+

Note: One great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion. Furthermore, if you use AppCache and SW on a page, browsers that don’t support SW but do support AppCache will use that, and browsers that support both will ignore the AppCache and let SW take over.

+
+ +

Why is my service worker failing to register?

+ +

This could be for the following reasons:

+ +
    +
  1. You are not running your application through HTTPS.
    2. +
  2. The path to your service worker file is not written correctly — it needs to be written relative to the origin, not your app’s root directory. In our example, the worker is at https://mdn.github.io/sw-test/sw.js, and the app’s root is https://mdn.github.io/sw-test/. But the path needs to be written as /sw-test/sw.js, not /sw.js.
    3. +
  3. The service worker being pointed to is on a different origin to that of your app. This is also not allowed.
    4. +
+ +

+ +

Also note:

+ + + +

Install and activate: populating your cache

+ +

After your service worker is registered, the browser will attempt to install then activate the service worker for your page/site.
+
+ The install event is fired when an install is successfully completed. The install event is generally used to populate your browser’s offline caching capabilities with the assets you need to run your app offline. To do this, we use Service Worker’s brand new storage API — {{domxref("cache")}} — a global on the service worker that allows us to store assets delivered by responses, and keyed by their requests. This API works in a similar way to the browser’s standard cache, but it is specific to your domain. It persists until you tell it not to — again, you have full control.

+ +
+

Note: The Cache API is not supported in every browser. (See the {{anch("Browser support")}} section for more information.) If you want to use this now, you could consider using a polyfill like the one available in Google's Topeka demo, or perhaps store your assets in IndexedDB.

+
+ +

Let’s start this section by looking at a code sample — this is the first block you’ll find in our service worker:

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+ +
    +
  1. Here we add an install event listener to the service worker (hence this), and then chain a {{domxref("ExtendableEvent.waitUntil()") }} method onto the event — this ensures that the service worker will not install until the code inside waitUntil() has successfully occurred.
    2. +
  2. Inside waitUntil() we use the caches.open() method to create a new cache called v1, which will be version 1 of our site resources cache. This returns a promise for a created cache; once resolved, we then call a function that calls addAll() on the created cache, which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.
    3. +
  3. If the promise is rejected, the install fails, and the worker won’t do anything. This is ok, as you can fix your code and then try again the next time registration occurs.
    4. +
  4. After a successful installation, the service worker activates. This doesn’t have much of a distinct use the first time your service worker is installed/activated, but it means more when the service worker is updated (see the {{anch("Updating your service worker") }} section later on.)
    5. +
+ +
+

Note: localStorage works in a similar way to service worker cache, but it is synchronous, so not allowed in service workers.

+
+ +
+

Note: IndexedDB can be used inside a service worker for data storage if you require it.

+
+ +

Custom responses to requests

+ +

Now you’ve got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the fetch event.

+ +

+ +

A fetch event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if index.html makes a cross origin request to embed an image, that still goes through its service worker.)

+ +

You can attach a fetch event listener to the service worker, then call the respondWith() method on the event to hijack our HTTP responses and update them with your own magic.

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // magic goes here
+  );
+});
+ +

We could start by simply responding with the resource whose url matches that of the network request, in each case:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});
+ +

caches.match(event.request) allows us to match each resource requested from the network with the equivalent resource available in the cache, if there is a matching one available. The matching is done via url and vary headers, just like with normal HTTP requests.

+ +

Let’s look at a few other options we have when defining our magic (see our Fetch API documentation for more information about {{domxref("Request")}} and {{domxref("Response")}} objects.)

+ +
    +
  1. +

    The {{domxref("Response.Response","Response()")}} constructor allows you to create a custom response. In this case, we are just returning a simple text string:

    + + 
    new Response('Hello from your friendly neighbourhood service worker!');
    +
    2. +
  2. +

    This more complex Response below shows that you can optionally pass a set of headers in with your response, emulating standard HTTP response headers. Here we are just telling the browser what the content type of our synthetic response is:

    + + 
    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
+  headers: { 'Content-Type': 'text/html' }
+});
    +
    3. +
  3. +

    If a match wasn’t found in the cache, you could tell the browser to simply {{domxref("GlobalFetch.fetch","fetch")}} the default network request for that resource, to get the new resource from the network if it is available:

    + + 
    fetch(event.request);
    +
    4. +
  4. +

    If a match wasn’t found in the cache, and the network isn’t available, you could just match the request with some kind of default fallback page as a response using {{domxref("CacheStorage.match","match()")}}, like this:

    + + 
    caches.match('/fallback.html');
    +
    5. +
  5. +

    You can retrieve a lot of information about each request by calling parameters of the {{domxref("Request")}} object returned by the {{domxref("FetchEvent")}}:

    + + 
    event.request.url
+event.request.method
+event.request.headers
+event.request.body
    +
    6. +
+ +

Recovering failed requests

+ +

So caches.match(event.request) is great when there is a match in the service worker cache, but what about cases when there isn’t a match? If we didn’t provide any kind of failure handling, our promise would resolve with undefined and we wouldn't get anything returned.

+ +

Fortunately service workers’ promise-based structure makes it trivial to provide further options towards success. We could do this:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      return response || fetch(event.request);
+    })
+  );
+});
+ +

If the resources isn't in the cache, it is requested from the network.

+ +

If we were being really clever, we would not only request the resource from the network; we would also save it into the cache so that later requests for that resource could be retrieved offline too! This would mean that if extra images were added to the Star Wars gallery, our app could automatically grab them and cache them. The following would do the trick:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});
+ +

Here we return the default network request with return fetch(event.request), which returns a promise. When this promise is resolved, we respond by running a function that grabs our cache using caches.open('v1'); this also returns a promise. When that promise resolves, cache.put() is used to add the resource to the cache. The resource is grabbed from event.request, and the response is then cloned with response.clone() and added to the cache. The clone is put in the cache, and the original response is returned to the browser to be given to the page that called it.

+ +

Cloning the response is necessary because request and response streams can only be read once.  In order to return the response to the browser and put it in the cache we have to clone it. So the original gets returned to the browser and the clone gets sent to the cache.  They are each read once.

+ +

The only trouble we have now is that if the request doesn’t match anything in the cache, and the network is not available, our request will still fail. Let’s provide a default fallback so that whatever happens, the user will at least get something:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+        });
+        return response;
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});
+ +

We have opted for this fallback image because the only updates that are likely to fail are new images, as everything else is depended on for installation in the install event listener we saw earlier.

+ +

Updating your service worker

+ +

If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates.

+ +

You’ll want to update your install event listener in the new service worker to something like this (notice the new version number):

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+        …
+
+        // include other new resources for the new version...
+      ]);
+    })
+  );
+});
+ +

While this happens, the previous version is still responsible for fetches. The new version is installing in the background. We are calling the new cache v2, so the previous v1 cache isn't disturbed.

+ +

When no pages are using the current version, the new worker activates and becomes responsible for fetches.

+ +

Deleting old caches

+ +

You also get an activate event. This is a generally used to do stuff that would have broken the previous version while it was still running, for example getting rid of old caches. This is also useful for removing data that is no longer needed to avoid filling up too much disk space — each browser has a hard limit on the amount of cache storage that a given service worker can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin.  The browser will generally delete all of the data for an origin or none of the data for an origin.

+ +

Promises passed into waitUntil() will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first fetch event on the new cache.

+ +
this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+ +

Developer tools

+ +

Chrome has chrome://inspect/#service-workers, which shows current service worker activity and storage on a device, and chrome://serviceworker-internals, which shows more detail and allows you to start/stop/debug the worker process. In the future they will have throttling/offline modes to simulate bad or non-existent connections, which will be a really good thing.

+ +

Firefox has also started to implement some useful tools related to service workers:

+ + + +
+

Note: You may serve your app from http://localhost (e.g. using me@localhost:/my/app$ python -m SimpleHTTPServer) for local development. See Security considerations

+
+ +

Specifications

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

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("33.0") }}[1]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(40.0)}}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{CompatNo}}{{ CompatVersionUnknown() }}{{CompatNo}}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)

+ +

See also

+ + diff --git a/files/es/web/api/serviceworkercontainer/index.html b/files/es/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..36eca36006 --- /dev/null +++ b/files/es/web/api/serviceworkercontainer/index.html @@ -0,0 +1,127 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Service worker API + - ServiceWorkerContainer + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerContainer +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

The ServiceWorkerContainer interface of the ServiceWorker API provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.

+ +

Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.

+ +

Properties

+ +
+
{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}
+
Returns a {{domxref("ServiceWorker")}} object if its state is activated (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns null during a force-refresh request (Shift + refresh) or if there is no active worker.
+
+ +
+
{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}
+
Provides a way of delaying code execution until a service worker is active. It returns a {{jsxref("Promise")}} that will never reject, and which waits indefinitely until the {{domxref("ServiceWorkerRegistration")}} associated with the current page has an {{domxref("ServiceWorkerRegistration.active")}} worker. Once that condition is met, it resolves with the {{domxref("ServiceWorkerRegistration")}}.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorkerContainer.oncontrollerchange")}}
+
Fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active","active")}} worker.
+
{{domxref("ServiceWorkerContainer.onerror")}}
+
Fired whenever an {{Event("error")}} event occurs in the associated service workers.
+
{{domxref("ServiceWorkerContainer.onmessage")}}
+
Fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)
+
+ +

Methods

+ +
+
{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} 
+
Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given scriptURL.
+
{{domxref("ServiceWorkerContainer.getRegistration()")}}
+
Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope matches the provided document URL.  If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a Promise. 
+
{{domxref("ServiceWorkerContainer.getRegistrations()")}}
+
Returns all {{domxref("ServiceWorkerRegistration")}} objects associated with a ServiceWorkerContainer in an array.  If the method can't return {{domxref("ServiceWorkerRegistration")}} objects, it returns a Promise. 
+
+ +

Examples

+ +

The example below first checks to see if the browser supports service workers. If supported, the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.

+ +
if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+
+    // At this point, you can optionally do something
+    // with registration. See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+
+  // Independent of the registration, let's also display
+  // information about whether the current page is controlled
+  // by an existing service worker, and when that
+  // controller changes.
+
+  // First, do a one-off check if there's currently a
+  // service worker in control.
+  if (navigator.serviceWorker.controller) {
+    console.log('This page is currently controlled by:', navigator.serviceWorker.controller);
+  }
+
+  // Then, register a handler to detect when a new or
+  // updated service worker takes control.
+  navigator.serviceWorker.oncontrollerchange = function() {
+    console.log('This page is now controlled by:', navigator.serviceWorker.controller);
+  };
+} else {
+  console.log('Service workers are not supported.');
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/es/web/api/serviceworkercontainer/register/index.html b/files/es/web/api/serviceworkercontainer/register/index.html new file mode 100644 index 0000000000..c5b1d3ed8a --- /dev/null +++ b/files/es/web/api/serviceworkercontainer/register/index.html @@ -0,0 +1,92 @@ +--- +title: ServiceWorkerContainer.register() +slug: Web/API/ServiceWorkerContainer/register +translation_of: Web/API/ServiceWorkerContainer/register +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

El método register()de la interfaz {{domxref("ServiceWorkerContainer")}} crea o actualiza un {{domxref("ServiceWorkerRegistration")}} para un scriptURL. dado

+ +

Si tiene éxito, el registro de un "service worker" relaciona la URL del script proporcionada con un ámbito, que posteriormente se utiliza para la coincidencia de navegación. Puede llamar a este método incondicionalmente desde la página controlada. Es decir, no necesita verificar primero si hay un registro activo.

+ +

Existe una confusión frecuente en torno al significado y uso del alcance. Dado que un trabajador de servicio no puede tener un alcance más amplio que su propia ubicación, solo use la opción de ámbito cuando necesite un alcance que sea más estrecho que el predeterminado.

+ +

Sintaxis

+ +
ServiceWorkerContainer.register(scriptURL, options)
+  .then(function(ServiceWorkerRegistration) { ... });
+ +

Parámetros

+ +
+
scriptURL
+
La URL del script de trabajador de servicio.
+
options {{optional_inline}}
+
Un objeto que contiene opciones de registro. Las opciones disponibles actualmente son: +
    +
  • alcance: {{domxref("USVString")}} representa una URL que define el alcance de registro de un "service worker"; es decir, qué rango de URL puede controlar un "service worker". Esto es generalmente una URL relativa. El valor predeterminado es la URL que obtendría si resolviera './' utilizando la ubicación de la página web como base. No es, como se cree comúnmente, relativo a la ubicación del "service worker". Vea la sección de Ejemplos para más información sobre cómo funciona.
    • +
+
+
+ +

Valor retornado

+ +

A {{domxref("Promise")}} that resolves with a {{domxref("ServiceWorkerRegistration")}} object.

+ +

Ejemplos

+ +

The examples described here should be taken together to get a better understanding of how service workers scope applies to a page.

+ +

The following example uses the default value of scope (by omitting it). The service worker in this case will control example.com/index.html as well as pages underneath it, like example.com/product/description.html.

+ +
if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}
+ +

The following code, if included in a page at the root of a site, would apply to exactly the same pages as the example above. Remember the scope, when included, uses the page's location as its base. Alternatively, if this code were included in a page at example.com/product/description.html, the scope of './' would mean that the service worker only applies to resources under example.com/product. If I needed to register a service worker on example.com/product/description.html that applied to all of example.com, I would leave off the scope as above.

+ +
if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using a more restrictive scope.
+  navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.ServiceWorkerContainer.register")}}

+
diff --git a/files/es/web/api/serviceworkerregistration/index.html b/files/es/web/api/serviceworkerregistration/index.html new file mode 100644 index 0000000000..88f1c3da52 --- /dev/null +++ b/files/es/web/api/serviceworkerregistration/index.html @@ -0,0 +1,145 @@ +--- +title: ServiceWorkerRegistration +slug: Web/API/ServiceWorkerRegistration +tags: + - API + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Service worker API + - ServiceWorkerRegistration + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerRegistration +--- +
+
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+
+ +

The ServiceWorkerRegistration interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin.

+ +

The lifetime of a service worker registration is beyond that of the ServiceWorkerRegistration objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active ServiceWorkerRegistration objects.

+ +
+

Note: This feature is available in Web Workers.

+
+ +

Properties

+ +

Also implements properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}
+
Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.
+
{{domxref("ServiceWorkerRegistration.installing")}} {{readonlyinline}}
+
Returns a service worker whose state is installing. This is initially set to null.
+
{{domxref("ServiceWorkerRegistration.waiting")}} {{readonlyinline}}
+
Returns a service worker whose state is waiting. This is initially set to null.
+
{{domxref("ServiceWorkerRegistration.active")}} {{readonlyinline}}
+
Returns a service worker whose state is either activating or activated. This is initially set to null. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the scope option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)
+
{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}
+
Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.
+
{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.
+
{{domxref("ServiceWorkerRegistration.sync")}} {{non-standard_inline}} {{readonlyinline}} 
+
Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}
+
An EventListener property called whenever an event of type updatefound is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.
+
+ +

Methods

+ +

Also implements methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("ServiceWorkerRegistration.getNotifications()")}}
+
Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.
+
{{domxref("ServiceWorkerRegistration.showNotification()")}}
+
Displays the notification with the requested title.
+
{{domxref("ServiceWorkerRegistration.update()")}}
+
Checks the server for an updated version of the service worker without consulting caches.
+
{{domxref("ServiceWorkerRegistration.unregister()")}}
+
Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.
+
+ +

Examples

+ +

In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and updatefound event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the updatefound event will not be fired.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+  .then(function(registration) {
+    registration.addEventListener('updatefound', function() {
+      // If updatefound is fired, it means that there's
+      // a new service worker being installed.
+      var installingWorker = registration.installing;
+      console.log('A new service worker is being installed:',
+        installingWorker);
+
+      // You can listen for changes to the installing service worker's
+      // state via installingWorker.onstatechange
+    });
+  })
+  .catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}{{Spec2('Service Workers')}}Initial definition.
{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}{{Spec2('Push API')}}Adds the {{domxref("PushManager","pushManager")}} property.
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.
{{SpecName('Background Sync')}}{{Spec2('Background Sync')}}Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/simple_push_api/index.html b/files/es/web/api/simple_push_api/index.html new file mode 100644 index 0000000000..d3d4dd4d1a --- /dev/null +++ b/files/es/web/api/simple_push_api/index.html @@ -0,0 +1,235 @@ +--- +title: Simple Push +slug: Web/API/Simple_Push_API +translation_of: Archive/B2G_OS/API/Simple_Push_API +--- +

{{ non-standard_header() }}

+ +
+

Nota: Esta documentación cubre el mecanismo propietario Simple Push de Firefox OS; si usted está buscando la documentación sobre el W3C Push API, diríjase a Push API.

+
+ +

El Simple Push API, también conocido como Push Notification API, provee a las aplicaciones la habilidad de ser despertadas para recibir notificaciones. Usted puede utilizar Simple Push como un mecanismo de sincronización, o incluso para traer datos desde servidores de terceros.

+ +

Un "push" (empujón) no es más que un evento enviado a un servidor remoto. Así es como funciona: una aplicación usa el Simple Push API para solicitar una URL especial y única llamada endpoint (punto final). Esta solicitud viaja hacia un servidor existente mantenido por Mozilla especialmente para este proposito (este se denomina "push server"). Cuando la aplicación recibe el endpoint de vuelta desde el push server, la aplicación envía el endpoint a su propio servidor (su servidor de aplicación). El servidor de aplicación guarda este endpoint, luego cuando quiere despertar la aplicación, llama al endpoint con un número de versión, y el push server contacta a la aplicación con una notificación del número de versión. La aplicación puede hacer cualquier cosa al momento de recibir la notificación, incluso ignorarla.

+ +

El Simple Push API extiende Window.navigator con una propiedad push que es un objeto {{domxref("PushManager")}}, e incluye algunos eventos nuevos que usted puede recibir para monitorear el estado del empuje.

+ +

Ejemplo mostrando los conceptos básicos

+ +

Existen varias formas de usar la Simple Push API. Este ejemplos cubren los conceptos básicos de como usarla. El ejemplo consta de los siguientes pasos generales. Consulte las siguientes secciones para obtener información completa sobre cada paso.

+ +
    +
  1. Añadir configuración push al manifiesto de la aplicación
    2. +
  2. LLamar a PushManager.register para solicitar un endpoint
    3. +
  3. Enviar un endpoint a su servidor
    4. +
  4. Agregar a su aplicación controladores de mensajes para notificaciones push
    5. +
  5. Enviar una notificación desde su servidor utilizando el endpoint
    6. +
+ +

1. Añadir configuración push al manifiesto de la aplicación

+ +

Usted necesita cambiar dos cosas en el manifiesto de la aplicación para poder utilizar Simple Push:

+ +
    +
  1. Campo messages - Añadir push y push-register a messages.
    + Esto le hace saber a la página de aplicación que recibirá cada uno de estos eventos (push y push-register). En este ejemplo, ambos van a la misma página: "/index.html", pero también pueden usar otras páginas. Observe a continuación para mayor información sobre cada uno de estos eventos.
    2. +
  2. Campo permissions - Añadir que su aplicación quiere recibir notificaciones push.
    + Es una buena idea proveer una descripción clara en este campo para que el usuario final entienda por qué usted necesita permisos de empuje ("push").
    3. +
+ +
"messages": [
+   { "push": "/index.html"},
+   { "push-register": "/index.html"}
+],
+"permissions": {
+  "push": {
+    "description": "Required for being updated with new goals in soccer matches"
+  }
+}
+ +

2. LLamar a PushManager.register() para solicitar un endpoint

+ +

La aplicación necesita solicitar un endpoint llamando {{domxref("PushManager.register")}}. Usted debe decidir cuando este debe ser llamado. Usted podría llamarlo cuando el usuario ha iniciado sesión en el servicio, o cuando el usuario decide comenzar a ver un partido de fútbol, o en cualquier otro momento. El código a continuación es una forma de hacerlo.

+ +
if (navigator.push) {
+  // Solicitar el endpoint. Esto usa PushManager.register().
+  var req = navigator.push.register();
+
+  req.onsuccess = function(e) {
+    var endpoint = req.result;
+      console.log("New endpoint: " + endpoint );
+      // En este punto, usted deberá usar algunos llamados para enviar el
+      // endpoint a su servidor. Por ejemplo:
+      /*
+      var post = XMLHTTPRequest();
+      post.open("POST", "https://your.server.here/registerEndpoint");
+      post.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+      post.send("endpoint=" + encodeURIComponents( endpoint ) );
+      */
+      // Obviamente usted querrá añadir controladores .onload y .onerror,
+      // añadir información de id del usuario, y cualquier otra cosa que podría
+      // necesitar para asocial el endpoint con el usuario.
+    }
+
+   req.onerror = function(e) {
+     console.error("Error getting a new endpoint: " + JSON.stringify(e));
+   }
+} else {
+  // push no se encuentra disponible en el DOM, así que haga algo diferente.
+}
+ +

3. Enviar un endpoint a su servidor

+ +

Una vez que la aplicación ha recibido un endpoint, esta necesita enviarla a su servidor de aplicación. Hay más de una forma de hacer esto. Por ejemplo usted puede enviarla por email, o enviarla a través de POST, PUT, o incluso GET. Nosotros recomendamos que almacene el endpoint con algunos datos de usuario desde la aplicación, tales como una cookie, un username, o lo que sea que usted utilice para identificar su par enpoint-user.

+ +

Pero si usted está enviando a su servidor, nosotros recomendamos que siga estas buenas prácticas:

+ + + +

4. Agregar a su aplicación controladores de mensajes para notificaciones push

+ +

Una vez haya configurado su endpoint siguiendo los pasos anteriores, usted está listo para hacer que su aplicación comience a escuchar mensajes push y push-register utilizando los controladores de mensajes.

+ +

Añadir un controlador de mensajes push

+ +

El controlador de mensajes push puede encontrarse en su archivo index.html o en su script main.js, o incluso en un archivo específico push-message.html que contiene solamente el controlador de mensajes. Esto puede ser útil si un mensaje push es enviado y su aplicación se encuentra cerrada, porque cargará solamente una pequeña porción del código HTML/JavaScript, y usted puede decidir si la aplicación necesita estar completamente abierta o puede hacer algo en segundo plano. Donde sea que usted decida ubicar el controlador de mensajes push, asegurese de que el manifiesto apunte a la ubicación correcta (ver el primer paso anterior), de otro modo su aplicación podría no obtener actualizaciones. Aquí hay un ejemplo de un controlador de mensajes push:

+ +
if (window.navigator.mozSetMessageHandler) {
+  window.navigator.mozSetMessageHandler('push', function(e) {
+    console.log('My endpoint is ' + e.pushEndpoint);
+    console.log('My new version is ' +  e.version);
+    // Recuerde que usted puede controlar aquí si tiene más de
+    // un pushEndpoint
+    if (e.pushEndpoint === emailEndpoint) {
+      emailHandler(e.version);
+    } else if (e.pushEndpoint === imEndpoint) {
+      imHandler(e.version);
+    }
+  });
+} else {
+  // Controlador No message
+}
+ +

Añadir un controlador de mensajes push-register

+ +
+

Nota: Asegurese de añadir este controlador y verificar que funciona. Si ustedes no registra de nuevo sus endpoints cuando este mensaje es recibido por su aplicación, la aplicación NO SERÁ CAPAZ de recibir nuevas notificaciones push.

+
+ +

Un mensaje push-register será enviado a todas las aplicaciones cuando el dispositivo cambie su identificador interno (llamado el UAID o User Agent Identifier). Esto puede deberse a que el servidor push ha cambiado, o se ha caido y necesita recuperarse, o cualquier otra circunstancia. Si cualquiera de estas cosas llegara a ocurrir, ustedes DEBE registrar de nuevo todos sus endpoints, porque sus previos endpoints ya no serán válidos. Por lo tanto su aplicación necesita implementar un controlador de mensajes push-register. Observe el siguiente código de ejemplo.

+ +
if (window.navigator.mozSetMessageHandler) {
+  window.navigator.mozSetMessageHandler('push-register', function(e) {
+    console.log('push-register received, I need to register my endpoint(s) again!');
+
+    var req = navigator.push.register();
+    req.onsuccess = function(e) {
+      var endpoint = req.result;
+      console.log("New endpoint: " + endpoint );
+      localStorage.endpoint = endpoint;
+    }
+
+    req.onerror = function(e) {
+      console.error("Error getting a new endpoint: " + JSON.stringify(e));
+    }
+  });
+} else {
+  // Controlador No message
+}
+ +

5. Enviar una notificación desde su servidor utilizando el endpoint

+ +

Una vez usted tiene el endpoint en su servidor, usted puede enviar una notificación simplemente enviando una petición HTTP PUT al endpoint con el cuerpo version=<version>. Por ejemplo, imagine un endpoint con la siguiente URL:

+ +
https://updates.push.services.mozilla.com/update/abcdef01234567890abcdefabcdef01234567890abcdef
+ +

y con la version 5:

+ +
version=5
+ +

Así es como la notificación se verá utilizando curl:

+ +
curl -X PUT -d "version=5" https://updates.push.services.mozilla.com/update/abcdef01234567890abcdefabcdef01234567890abcdef
+ +

Si el servidor push esta corriendo correctamente, usted recibirá una respuesta con un 200 Status (OK) y un {} como cuerpo. También podría recibir un 200 Status indicando que el mensaje fue aceptado, pero que pudo haber sido controlado por un sistema alternativo. Si no, una respuesta error HTTP valida con un JSON explicando el error será retornada.

+ +
+

Por favor recuerde: Solo porque Simple Push ha aceptado el mensaje, esto no garantiza que el mensaje será entregado exitosamente a la aplicación. Muchos factores, desde un dispositivo desconectado a varios fallos de transmisión de datos, pueden ocacionar que no se entregue exitosamente una notificación. Nosotros hacemos nuestro mejor esfuerzo, pero a veces el universo tiene otros planes.

+
+ +

Recuerde que el valor de version debe ser números enteros, e incrementales. Las aplicaciones no recibirán nuevas notificaciones si la versión en menor a aquella almacenada en el servidor y/o dispositivo. Las versiones pueden ser útiles para que la aplicación indique si existen eventos "perdidos" que realmente debería verificar. Usted también podriá simplemente usar el UTC (el número de segundos desde la media noche del 1 de enero de 1970, GMT) actual si el valor de la versión no es muy importante para usted.

+ +

Anular el registro de un endpoint

+ +

Una vez haya terminado de utilizar el endpoint y no desee recibir más notificaciones, le rogamos anular el registro del antiguo endpoint mediante {{domxref("PushManager.unregister")}}. Esto limpiará la cantidad de datos que el dispositivo envía al servidor push, y además disminuirá el consumo de batería al no enviar notificaciones de las aplicaciones que no las usen.

+ +

Especificaciones

+ +

{{page("/en-US/docs/Web/API/PushManager","Specifications")}}

+ +

Conpatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/storage/clear/index.html b/files/es/web/api/storage/clear/index.html new file mode 100644 index 0000000000..fc9e9890b2 --- /dev/null +++ b/files/es/web/api/storage/clear/index.html @@ -0,0 +1,131 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +tags: + - API + - Almacenamiento local + - Storage + - Web Storage + - sessionStorage +translation_of: Web/API/Storage/clear +--- +

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

+ +

El método clear() de la interfaz {{domxref("Storage")}}, al invocarlo, elimina todos los registros del almacen local.

+ +

Sintaxis

+ +
storage.clear();
+ +

Parámetros

+ +

No recibe parámetros.

+ +

Devuelve

+ +

No devuelve ningún valor.

+ +

 

+ +

Ejemplo

+ +

 

+ +

La siguiente función crea tres elementos con datos dentro del almacen local, seguidamente, los elimina usando clear().

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.clear();
+}
+ +
+

Nota: Para ver un ejemplo real, vea nuestro Web Storage Demo.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage', '#dom-storage-clear', 'clear()')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Los navegadores tienen diferentes niveles de capacidad, tanto para el localStorage como para el sesionStorage. He aquí una lista detallada de todas las capacidades de almacenamiento para varios navegadores.

+ +
+

Nota: desde la versión 5.1 de iOS, Safari Mobile almacena los datos de localStorage en la carpeta de la caché, la cual se vacía a intervalos, a criterio del sistema operativo, generalmente, si hay una falta de espacio.

+
+ +

Vea también

+ +

Uso de la Web Storage API

diff --git a/files/es/web/api/storage/getitem/index.html b/files/es/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..ea5da3292b --- /dev/null +++ b/files/es/web/api/storage/getitem/index.html @@ -0,0 +1,139 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +tags: + - API + - Almacenamiento + - Almacenamiento web + - Referencia + - Storage + - Web Storage + - metodo +translation_of: Web/API/Storage/getItem +--- +

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

+ +

El método getItem() de la interfaz {{domxref("Storage")}} devuelve el valor de la clave cuyo nombre se le pasa por parámetro.

+ +

Sintaxis

+ +
var aValue = storage.getItem(keyName);
+
+ +

Parámetros

+ +
+
keyName
+
Una {{domxref("DOMString")}} que contiene el nombre de la clave cuyo valor se quiere obtener.
+
+ +

Devuelve

+ +

Una {{domxref("DOMString")}} que contiene el valor de la clave. Si la clave no existe, devuelve null.

+ +

Ejemplo

+ +

La siguiente función toma 3 elementos del almacenamiento local (local storage) y los utiliza para establecer estilos personalizados en una página.

+ +
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: Para ver esto utilizado en un ejemplo real, vea nuestra Demo de Web Storage.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Web Storage', '#dom-storage-getitem', 'getItem()')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage como para sessionStorage. Aquí hay un resumen detallado de la capacidad de almacenamiento para diversos navegadores.

+ +
+

Nota: desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de cache, que está sujeta a borrados ocasionales a petición del sistema operativo, típicamente cuando queda poco espacio.

+
+ +

Vea también

+ +

Utilizando la API de Web Storage

diff --git a/files/es/web/api/storage/index.html b/files/es/web/api/storage/index.html new file mode 100644 index 0000000000..f5116f0fff --- /dev/null +++ b/files/es/web/api/storage/index.html @@ -0,0 +1,162 @@ +--- +title: Almacenamiento +slug: Web/API/Storage +tags: + - API + - Almacenamiento + - Almacenamiento web + - Interface + - Reference + - TopicStub + - data +translation_of: Web/API/Storage +--- +

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

+ +

La interfaz Storage de la API de almacenamiento web provee acceso al almacenamiento de la sesión o al almacenamiento local para un dominio en particular, permitiéndote por ejemplo añadir, modificar o eliminar elementos de dato almacenados.

+ +

Si deseas manipular el almacenamiento de sesión para un dominio, debes llamar al método {{domxref("Window.sessionStorage")}}; Si deseas manipular el almacenamiento local para un dominio, debes llamar a {{domxref("Window.localStorage")}}.

+ +

Propiedades

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Retorna un entero que representa el número de elementos almacenados en el objeto Storage.
+
+ +

Métodos

+ +
+
{{domxref("Storage.key()")}}
+
Cuando se le pasa un número n, éste método retorna el nombre de la enésima clave en el almacenamiento.
+
+ +
+
{{domxref("Storage.getItem()")}}
+
Cuando se le pasa un nombre de clave, retorna el valor de esa clave.
+
{{domxref("Storage.setItem()")}}
+
Cuando se le pasa un nombre de clave y un valor, añade dicha clave al almacenamiento, o la actualiza el valor de la clave si ya existe.
+
{{domxref("Storage.removeItem()")}}
+
Cuando se le pasa el nombre de una clave, eliminará dicha clave del almacenamiento.
+
{{domxref("Storage.clear()")}}
+
Cuando es invocado vacía todas las claves del almacenamiento.
+
+ +

Ejemplos

+ +

Aquí tenemos un objeto Storage al llamar a localStorage. Primero probamos si el almacenamiento local contiene elementos de dato usando !localStorage.getItem('bgcolor'). Si lo hace, ejecutamos una función llamada setStyles() que obtiene los elementos usando {{domxref("localStorage.getItem()")}} y utiliza dichos valores para actualizar los estilos de la página. Si no, ejecutamos otra función, populateStorage(), que utiliza {{domxref("localStorage.setItem()")}} para definir los valores de los elementos, luego ejecuta 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: Para ver la ejecución de esto como un ejemplo funcional completo, mira nuestra Demo de almacenamiento web.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}8113.2[1]
+
+ +

[1] A partir de iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta cache, que es sujeta a ser vaciada ocasionalmente a petición del SO, típicamente si hay poco espacio disponible.

+ +

Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage y sessionStorage. Aquí hay un análisis detallado de todas las capacidades de almacenamiento para diferentes navegadores.

+ +

Ver también

+ +

Usar la API de almacenamiento Web

diff --git a/files/es/web/api/storage/length/index.html b/files/es/web/api/storage/length/index.html new file mode 100644 index 0000000000..47434b2813 --- /dev/null +++ b/files/es/web/api/storage/length/index.html @@ -0,0 +1,117 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +translation_of: Web/API/Storage/length +--- +

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

+ +

La propiedad de sólo lectura length de la interfaz {{domxref("Storage")}} devuelve un entero que indica el numero de elementos guardados en el objeto Storage.

+ +

Sintaxis

+ +
var aLength = storage.length;
+ +

Valor devuelto

+ +

Entero

+ +

Ejemplo

+ +

La siguiente función añade tres elementos de datos en el almacen local para el dominio actual, posteriormente, devuelve el número de elementos guardados en el almacen:

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // should return 3
+}
+ +
+

Nota: Para un ejemplo real, vea nuestro Web Storage Demo.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacíonEstadoComentario
{{SpecName('Web Storage', '#dom-storage-length', 'length')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Los navegadores tienen diferentes niveles de capacidad, tanto para el localStorage como para el sesionStorage. He aquí una lista detallada de todas las capacidades de almacenamiento para varios navegadores.

+ +
+

Nota:  desde la versión 5.1 de iOS, Safari Mobile almacena los datos de localStorage en la carpeta de la caché, la cual se vacía a intervalos, a criterio del sistema operativo, generalmente, si hay una falta de espacio.

+
+ +

Vea también

+ +

Uso de la Web Storage API

diff --git a/files/es/web/api/storage/localstorage/index.html b/files/es/web/api/storage/localstorage/index.html new file mode 100644 index 0000000000..80a54ff11b --- /dev/null +++ b/files/es/web/api/storage/localstorage/index.html @@ -0,0 +1,135 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +tags: + - Almacenamiento en Navegador + - Almacenamiento local +translation_of: Web/API/Window/localStorage +--- +

localStorage (almacenamiento local) es lo mismo que sessionStorage (almacenamiento de sesión), con las mismas reglas de mismo-origen aplicadas, pero es persistente a través de diferentes sesiones. localStorage se introdujo en la version Firefox 3.5.

+ +
Nota: Cuando el navegador está en modo de navegación privado, una nueva base de datos temporal se crea para guardar datos de almacenamiento local. Esta base de datos se vacía y descarta cuando salimos del modo de navegación privado.
+ +
// Guardar datos al almacenamiento local actual
+localStorage.setItem("nombredeusuario", "John");
+
+// Acceder a datos almacenados
+alert( "nombredeusuario = " + localStorage.getItem("nombredeusuario"));
+ +

La persistencia de localStorage lo hace útil para una variedad de cosas, incluyendo contadores de páginas, como se demuestra en este tutorial en Codepen.

+ +

Compatibilidad

+ +

Los objetos de Storage (almacenamiento) son una adición reciente al estándar, por lo que pueden no estar presentes en todos los navegadores. Esto se puede solucionar si introduce uno de los dos códigos al principio de sus scripts, permitiendo el uso de el objeto localStorage en implementaciones que no lo soportan de forma nativa.

+ +

Este algoritmo es una imitación exacta del objeto localStorage, pero hace uso de cookies.

+ +
if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+ +
Nota: El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones localStorage.getItem(), localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
+ +
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y al cambiar el nombre del objeto), esto se pasará a ser un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  sessionStorage completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.
+ +

Esta es otra imitación menos exacta de el objeto localStorage, es más simple que la anterior, pero es compatible con navegadores antiguos, como Internet Explorer < 8 (probado y funcional incluso en Internet Explorer 6). También hace uso de cookies.

+ +
if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+
+ +
Nota: El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones localStorage.getItem(), localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
+ +
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y al cambiar el nombre del objeto), esto se volverá un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  sessionStorage completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.
+ +

Compatibilidad y relación con globalStorage

+ +

localStorage es lo mismo que globalStorage[location.hostname], con la excepción de que tiene un ámbito de origen HTML5 (esquema + nombre del host + puerto no estandar), y localStorage es una instancia de Storage, al contrario que globalStorage[location.hostname], que es una instancia de StorageObsolete, como se explica más adelante. Por ejemplo, http://ejemplo.com no puede acceder al mismo objeto localStorage que https://ejemplo.com, pero los dos pueden acceder al mismo elemento de globalStorage. --localStorage es una interfaz estándar mientras que globalStorage no lo es, así que no se debe depender de ella.

+ +

Nótese que al establecer una propiedad en globalStorage[location.hostname] no la establece en localStorage, y al extender Storage.prototype no afecta a los elementos de globalStorage; sólo al extender StorageObsolete.prototype los afecta.

+ +

El formato de Storage

+ +

Las claves y valores de Storage se guardan en el formato UTF-16 DOMString, que usa 2 bytes por carácter.

diff --git a/files/es/web/api/storage/removeitem/index.html b/files/es/web/api/storage/removeitem/index.html new file mode 100644 index 0000000000..f597bd4d5a --- /dev/null +++ b/files/es/web/api/storage/removeitem/index.html @@ -0,0 +1,142 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +tags: + - API + - Almacenamiento + - Almacenamiento web + - Referencia + - Storage + - Web Storage + - metodo +translation_of: Web/API/Storage/removeItem +--- +

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

+ +

El método removeItem() de la interfaz {{domxref("Storage")}} elimina la clave cuyo nombre recibe por parámetro del almacenamiento. La interfaz Storage de la API de almacenamiento web provee acceso al almacenamiento de la sesión (sessionStorage) o al almacenamiento local (localStorage).

+ +

Sintaxis

+ +
storage.removeItem(keyName);
+ +

Parámetros

+ +
+
keyName
+
Una {{domxref("DOMString")}} que contiene el nombre de la clave que se desea eliminar.
+
+ +

Devuelve

+ +

Ningún valor.

+ +

Ejemplos

+ +

La siguiente función crea 3 elementos dentro del almacenamiento local y después elimina el elemento image.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}
+ +

De la misma manera se podría manipular el almacenamiento de sesión:

+ +
function populateSessionStorage() {
+  sessionStorage.setItem('bgcolor', 'red');
+  sessionStorage.setItem('font', 'Helvetica');
+  sessionStorage.setItem('image', 'myCat.png');
+
+  sessionStorage.removeItem('image');
+}
+ +
+

Nota: Para ver esto en un ejemplo real, vea nuestra Demo de Web Storage.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}{{Spec2('Web Storage')}}
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage como para sessionStorage. Aquí hay un resumen detallado de la capacidad de almacenamiento para diversos navegadores.

+ +
+

Nota: desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de cache, que está sujeta a borrados ocasionales a petición del sistema operativo, típicamente cuando queda poco espacio.

+
+ +

Vea también

+ +

Utilizando la API de Web Storage

diff --git a/files/es/web/api/storage/setitem/index.html b/files/es/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..f9d4ee0237 --- /dev/null +++ b/files/es/web/api/storage/setitem/index.html @@ -0,0 +1,136 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +tags: + - API + - Almacenamiento + - Almacenamiento web + - Storage + - Web Storage + - metodo +translation_of: Web/API/Storage/setItem +--- +

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

+ +

El método setItem() de la interfaz {{domxref("Storage")}}, cuando reciba una clave y un valor, añadirá estos al almacén, o actualizará el valor si la clave ya existe.

+ +

Sintaxis

+ +
storage.setItem(keyName, keyValue);
+ +

Parámetros

+ +
+
keyName
+
Un {{domxref("DOMString")}} conteniendo la clave que se quiere crear/actualizar.
+
keyValue
+
Un {{domxref("DOMString")}} conteniendo el valor que se le quiere dar a la clave que se está creando/actualizando.
+
+ +

Devuelve

+ +

No devuelve valor.

+ +

Excepciones

+ +

setItem() puede lanzar una excepción si el almacén esta lleno. Particularmente, en Safari Mobile (desde iOS 5) siempre lo hará cuando el usuario ingresa en modo privado (Safari determina una cuota de 0 bytes en modo privado, al contrario de otros navegadores, que permiten almacenamiento en modo privado, usando contenedores de información separados).
+ Por lo tanto, los desarrolladores deben asegurarse de capturar siempre las posibles excepciones de setItem().

+ +

Ejemplo

+ +

La siguiente función crea tres ítems dentro del almacenamiento local.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}
+ +
+

Nota: Para ver un ejemplo real, vea nuestro Web Storage Demo.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen niveles de capacidad variados para localStorage y sessionStorage. Aquí hay un análisis detallado de todas las capacidades de almacenamiento para varios navegadores.

+ +
+

Nota: desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, que está sujeta a limpieza ocasional a petición del sistema operativo, típicamente cuando el espacio es reducido.

+
+ +

Vea también

+ +

Usando la Web Storage API

diff --git a/files/es/web/api/storagemanager/estimate/index.html b/files/es/web/api/storagemanager/estimate/index.html new file mode 100644 index 0000000000..b2c0ee4df6 --- /dev/null +++ b/files/es/web/api/storagemanager/estimate/index.html @@ -0,0 +1,90 @@ +--- +title: StorageManager.estimate() +slug: Web/API/StorageManager/estimate +tags: + - API + - Almacenamiento + - Contexto seguro + - Cuota + - Referencia + - Storage API + - StorageManager + - Uso + - estimación + - estimate + - metodo +translation_of: Web/API/StorageManager/estimate +--- +

{{securecontext_header}}{{APIRef("Storage")}}

+ +

El método estimate() de la interfaz {{domxref("StorageManager")}} solicita al Gestor de Almacenamiento la información de cuota y uso para el origen actual. Este método opera de forma asíncrona, por lo que devuelve una {{jsxref("Promise")}} que se resuelve una vez que la información esté disponible. La función que controla el cumplimiento de la promesa recibe un {{domxref("StorageEstimate")}} como entrada con la informción de uso y cuota.

+ +

Sintaxis

+ +
var estimatePromise = StorageManager.estimate();
+ +

Parámetros

+ +

Ninguno.

+ +

Valor devuelto

+ +

Una {{jsxref('Promise')}} que se resuelve como un objeto que se ajusta al diccionario {{domxref('StorageEstimate')}}. Este diccionario contiene estimaciones sobre la cantidad de espacio disponible para el origen o aplicación (en {{domxref("StorageEstimate.quota")}}, así como la cantidad que se usa en ese momento (in {{domxref("StorageEstimate.usage")}}). Estos no son números exactos; entre la compresión, la deduplicación y la ofuscación por razones de seguridad, no serán precisos.

+ +

Es posible que la quota varíe de una aplicación a otra en función de factores como la frecuencia con la que el usuario la visita, los datos de popularidad del sitio, etc.

+ +

Ejemplo

+ +

En este ejemplo, obtenemos las estimaciones de uso y presentamos el porcentaje de la capacidad de almacenamiento utilizada actualmente al usuario.

+ +

HTML

+ +
<p>
+  You're currently using about <span id="percent">
+  </span>% of your available storage.
+</p>
+
+ +

JavaScript

+ +
navigator.storage.estimate().then(function(estimate) {
+  document.getElementById("percent").innerHTML =
+      (estimate.usage / estimate.quota).toFixed(2);
+});
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', 600, 40) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}}{{Spec2('Storage')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.StorageManager.estimate")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/storagemanager/index.html b/files/es/web/api/storagemanager/index.html new file mode 100644 index 0000000000..afc0bd77ad --- /dev/null +++ b/files/es/web/api/storagemanager/index.html @@ -0,0 +1,55 @@ +--- +title: StorageManager +slug: Web/API/StorageManager +tags: + - API + - Interface + - NeedsTranslation + - Persistence + - Quotas + - Reference + - Secure context + - Storage + - Storage API + - StorageManager + - TopicStub + - Usage +translation_of: Web/API/StorageManager +--- +

{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}

+ +

The StorageManager interface of the the Storage API provides an interface for managing persistance permissions and estimating available storage. You can get a reference to this interface using either {{domxref("navigator.storage")}} or {{domxref("WorkerNavigator.storage")}}.

+ +

Methods

+ +
+
{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}
+
Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin.
+
{{domxref("StorageManager.persist()")}} {{securecontext_inline}}
+
Returns a {{jsxref('Promise')}} that resolves to true if the user agent is able to persist your site's storage.
+
{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}
+
Returns a {{jsxref('Promise')}} that resolves to true if persistence has already been granted for your site's storage.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Storage','#storagemanager','StorageManger')}}{{Spec2('Storage')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

diff --git a/files/es/web/api/storagemanager/persist/index.html b/files/es/web/api/storagemanager/persist/index.html new file mode 100644 index 0000000000..bb42fbeac4 --- /dev/null +++ b/files/es/web/api/storagemanager/persist/index.html @@ -0,0 +1,59 @@ +--- +title: StorageManager.persist() +slug: Web/API/StorageManager/persist +tags: + - Contexto seguro + - Referencia + - Storage API + - metodo + - persist() +translation_of: Web/API/StorageManager/persist +--- +

{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}

+ +

El método persist() de la interfaz {{domxref("StorageManager")}} solicita permiso para usar el almacenamiento persistente, y devuelve una {{jsxref('Promise')}} que se resuelve como true si se concede el permiso y box mode es persistente, y false en cualquier otro caso.

+ +

Sintaxis

+ +
navigator.storage.persist().then(function(persistent) { ... })
+ +

Parámetros

+ +

Ninguno.

+ +

Valor devuelto

+ +

Una {{jsxref('Promise')}} que se resuelve en un {{jsxref('Boolean')}}.

+ +

Ejemplo

+ +
if (navigator.storage && navigator.storage.persist)
+  navigator.storage.persist().then(function(persistent) {
+    if (persistent)
+      console.log("Storage will not be cleared except by explicit user action");
+    else
+      console.log("Storage may be cleared by the UA under storage pressure.");
+  });
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Storage','#dom-storagemanager-persist','persist')}}{{Spec2('Storage')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.StorageManager.persist")}}

diff --git a/files/es/web/api/storagemanager/persisted/index.html b/files/es/web/api/storagemanager/persisted/index.html new file mode 100644 index 0000000000..bce6970649 --- /dev/null +++ b/files/es/web/api/storagemanager/persisted/index.html @@ -0,0 +1,59 @@ +--- +title: StorageManager.persisted() +slug: Web/API/StorageManager/persisted +tags: + - Contexto seguro + - Referencia + - Storage API + - metodo + - persisted() +translation_of: Web/API/StorageManager/persisted +--- +

{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}

+ +

La propiedad persisted de la interfaz {{domxref("StorageManager")}} devuelve una {{jsxref('Promise')}} que se resuelve como true si box mode es persistente para el alamacenamiento de su sitio.

+ +

Sintaxis

+ +
navigator.storage.persisted().then(function(persistent) { ... })
+ +

Parámetros

+ +

Ninguno.

+ +

Devuelve

+ +

Una {{jsxref('Promise')}} que se resuelve como {{jsxref('Boolean')}}.

+ +

Ejemplo

+ +
if (navigator.storage && navigator.storage.persist)
+  navigator.storage.persisted().then(function(persistent) {
+    if (persistent)
+      console.log("Storage will not be cleared except by explicit user action");
+    else
+      console.log("Storage may be cleared by the UA under storage pressure.");
+  });
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Storage','#dom-storagemanager-persisted','persisted')}}{{Spec2('Storage')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.StorageManager.persisted")}}

diff --git a/files/es/web/api/stylesheet/disabled/index.html b/files/es/web/api/stylesheet/disabled/index.html new file mode 100644 index 0000000000..470283c9dc --- /dev/null +++ b/files/es/web/api/stylesheet/disabled/index.html @@ -0,0 +1,20 @@ +--- +title: Stylesheet.disabled +slug: Web/API/StyleSheet/disabled +translation_of: Web/API/StyleSheet/disabled +--- +

{{ ApiRef() }}

+

Resumen

+

Esta propiedad indica si es se aplica o no, la hoja de estilo actual.

+

Sintaxis

+
bool = stylesheet.disabled
+
+

Ejemplo

+
// si la hoja de estilo está deshabilitada...
+if (stylesheet.disabled) {
+   // apply style in-line
+}
+
+

Especificación

+

disabled

+

{{ languages( { "pl": "pl/DOM/stylesheet.disabled" } ) }}

diff --git a/files/es/web/api/stylesheet/href/index.html b/files/es/web/api/stylesheet/href/index.html new file mode 100644 index 0000000000..0f4a42dd0c --- /dev/null +++ b/files/es/web/api/stylesheet/href/index.html @@ -0,0 +1,38 @@ +--- +title: stylesheet.href +slug: Web/API/StyleSheet/href +translation_of: Web/API/StyleSheet/href +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve la localización de la hoja de estilo.

+

Sintaxis

+
uri = stylesheet.href
+
+

Parámetros

+ +

Ejemplo

+
 // en una máquina local:
+ <html>
+  <head>
+   <link rel="StyleSheet" href="example.css" type="text/css" />
+   <script>
+    function sref() {
+     alert(document.styleSheets[0].href);
+    }
+   </script>
+  </head>
+  <body>
+   <div class="thunder">Thunder</div>
+   <button onclick="sref()">ss</button>
+  </body>
+ </html>
+// returns "file:////C:/Windows/Desktop/example.css
+
+

Notas

+

Si la hoja de estilo es un enlace, el valor de este atributo es su localización. Para las hojas de estilo in-line, el valor del atributo es NULL.

+

 

+

Specification

+

href

diff --git a/files/es/web/api/stylesheet/index.html b/files/es/web/api/stylesheet/index.html new file mode 100644 index 0000000000..3344780e21 --- /dev/null +++ b/files/es/web/api/stylesheet/index.html @@ -0,0 +1,50 @@ +--- +title: objeto Stylesheet +slug: Web/API/StyleSheet +translation_of: Web/API/StyleSheet +--- +

{{ ApiRef("CSSOM") }}

+ +

Esta sección describe el objeto CSSStyleSheet, que representa una única hoja de estilos CSS.

+ +

Una hoja de estilos CSS consiste en reglas CSS que pueden, cada una de ellas, ser manipuladas a través del objeto CSSRule. El objeto de la hoja de estilo en sí mismo, te permite examinar y modificar la hoja de estilos, incluyendo su lista de reglas.

+ +

Puedes tomar la lista de estilos de un documento determinado mediante el uso de la propiedad document.styleSheets.

+ +

Propiedades

+ +
+
stylesheet.cssRules
+
Devuelve todas las reglas CSS que hay en la hoja de estilo, en forma de arreglo.
+
stylesheet.disabled
+
Esta propiedad indica si se ha aplicado o no, la hoja de estilo actual.
+
stylesheet.href
+
Devuelve la localización de la hoja de estilo.
+
stylesheet.media
+
Especifica el medio al que se tiene intención de aplicar la hoja de estilo.
+
stylesheet.ownerNode
+
el nodo que asocia la hoja de estilo con el documento.
+
stylesheet.ownerRule
+
Si la hoja de estilo tiene una regla marcada con @import, la propiedad ownerRule contendrá la CSSImportRule.
+
stylesheet.parentStyleSheet
+
Devuelve la hoja de estilo que que está incluida en esta, si existe.
+
stylesheet.title
+
Devuelve el título de la hoja de estilo actual.
+
stylesheet.type
+
Especifica el lenguaje de la hoja de estilo.
+
+ +

Métodos

+ +
+
stylesheet.deleteRule
+
Elimina una regla de la hoja de estilo.
+
stylesheet.insertRule
+
Agrega una nueva regla de estilo a la hoja de estilo actualmente usada.
+
+ +

Especificación

+ +

DOM Level 2 Style Sheets: StyleSheet

+ +

DOM Level 2 CSS: CSSStyleSheet

diff --git a/files/es/web/api/stylesheet/media/index.html b/files/es/web/api/stylesheet/media/index.html new file mode 100644 index 0000000000..47e36011cd --- /dev/null +++ b/files/es/web/api/stylesheet/media/index.html @@ -0,0 +1,24 @@ +--- +title: Stylesheet.media +slug: Web/API/StyleSheet/media +translation_of: Web/API/StyleSheet/media +--- +

{{ ApiRef() }}

+

Resumen

+

media Especifica el medio al que se tiene intención de aplicar la hoja de estilo.

+

Sintaxis

+
medium = stylesheet.media
+stylesheet.media = medium
+
+

Parámetros

+ +

Ejemplo

+
<link rel="StyleSheet" href="document.css" type="text/css" media="screen" />
+
+

Notas

+

El valor por defecto para media es "screen."

+

Especificación

+

DOM Level 2 Styles - STYLESHEET

+

{{ languages( { "pl": "pl/DOM/stylesheet.media" } ) }}

diff --git a/files/es/web/api/stylesheet/ownernode/index.html b/files/es/web/api/stylesheet/ownernode/index.html new file mode 100644 index 0000000000..e7a14fb528 --- /dev/null +++ b/files/es/web/api/stylesheet/ownernode/index.html @@ -0,0 +1,35 @@ +--- +title: Stylesheet.ownerNode +slug: Web/API/StyleSheet/ownerNode +translation_of: Web/API/StyleSheet/ownerNode +--- +

{{ ApiRef() }}

+

Resumen

+

ownerNode devuelve el nodo que asocia la hoja de estilo con el documento.

+

Sintaxis

+
objRef = stylesheet.ownerNode
+
+

Ejemplo

+
<html>
+ <head>
+  <link rel="StyleSheet" href="example.css" type="text/css" />
+  <script>
+   function stilo() {
+    alert(document.styleSheets[0].ownerNode);
+   }
+  </script>
+ </head>
+ <body>
+
+
+ Thunder
+
  <button onclick="stilo()">ss</button>
+ </body>
+</html>
+// displays "object HTMLLinkElement"
+
+

Notas

+

Para el HTML, ownerNode correspondería a un elemento LINK o STYLE. Para XML, serían las instrucciones del proceso de enlace. Para las hojas de estilo que están incluidas en otras hojas de estilo, este valor es NULL.

+

Especificación

+

DOM Level 2 Styles - STYLESHEET

+

{{ languages( { "pl": "pl/DOM/stylesheet.ownerNode" } ) }}

diff --git a/files/es/web/api/stylesheet/parentstylesheet/index.html b/files/es/web/api/stylesheet/parentstylesheet/index.html new file mode 100644 index 0000000000..118aedd82a --- /dev/null +++ b/files/es/web/api/stylesheet/parentstylesheet/index.html @@ -0,0 +1,24 @@ +--- +title: Stylesheet.parentStyleSheet +slug: Web/API/StyleSheet/parentStyleSheet +translation_of: Web/API/StyleSheet/parentStyleSheet +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve la hoja de estilo que incluye a la que está en curso, si existe.

+

Sintaxis

+
objRef = stylesheet.parentStyleSheet
+
+

Ejemplo

+
// encuentra la hoja de estilo de alto nivel
+if (stylesheet.parentStyleSheet) {
+  sheet = stylesheet.parentStyleSheet;
+}
+else
+{ sheet = stylesheet; }
+
+

Notas

+

Esta propiedad devuelve NULL si la hoja de estilo actual es una hoja de estilo de alto nivel o si la inclusión de hojas de estilo no está implementada.

+

Specification

+

parentStyleSheet

+

{{ languages( { "pl": "pl/DOM/stylesheet.parentStyleSheet" } ) }}

diff --git a/files/es/web/api/stylesheet/title/index.html b/files/es/web/api/stylesheet/title/index.html new file mode 100644 index 0000000000..e6c61082d7 --- /dev/null +++ b/files/es/web/api/stylesheet/title/index.html @@ -0,0 +1,13 @@ +--- +title: Stylesheet.title +slug: Web/API/StyleSheet/title +translation_of: Web/API/StyleSheet/title +--- +

{{ ApiRef() }}

+

Resumen

+

title devuelve el título de la hoja de estilo que se está usando.

+

Notas

+

El título es a menudo especificado en el ownerNode.

+

Especificación

+

title

+

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

diff --git a/files/es/web/api/stylesheet/type/index.html b/files/es/web/api/stylesheet/type/index.html new file mode 100644 index 0000000000..fa60372cc0 --- /dev/null +++ b/files/es/web/api/stylesheet/type/index.html @@ -0,0 +1,17 @@ +--- +title: Stylesheet.type +slug: Web/API/StyleSheet/type +translation_of: Web/API/StyleSheet/type +--- +

{{ ApiRef() }}

+

Resumen

+

type especifica el lenguaje de la hoja de estilo.

+

Sintaxis

+
string = stylesheet.type
+
+

Ejemplo

+
 ss.type = "text/css";
+
+

Especificación

+

type

+

{{ languages( { "pl": "pl/DOM/stylesheet.type" } ) }}

diff --git a/files/es/web/api/subtlecrypto/digest/index.html b/files/es/web/api/subtlecrypto/digest/index.html new file mode 100644 index 0000000000..48669844b6 --- /dev/null +++ b/files/es/web/api/subtlecrypto/digest/index.html @@ -0,0 +1,135 @@ +--- +title: SubtleCrypto.digest() +slug: Web/API/SubtleCrypto/digest +translation_of: Web/API/SubtleCrypto/digest +--- +
{{APIRef("Web Crypto API")}}
+ +

El método digest() de la interfaz {{domxref("SubtleCrypto")}} genera un digest de los datos proveidos. Un {{domxref("digest")}} es un valor corto de longitud fija derivado de alguna entrada de longitud variable. Los digest criptográficos deben mostrar resistencia a colisiones, lo que significa que es difícil encontrar dos entradas diferentes que tengan el mismo valor de digest.

+ +

Toma como argumento un identificador para el algoritmo digest a utilizar y los datos a codificar. Devuelve un Promise que se completará con el digest.

+ +

Sintaxis

+ +
const digest = crypto.subtle.digest(algorithm, data);
+
+ +

Parámetros

+ + + +

Valor de retorno

+ + + +

Algoritmos soportados

+ +

Los argoritmos digest, también conocidos como funciones criptográficas hash, transforman un bloque de datos arbitrariamente grande en una salida de tamaño fijo, normalmente mucho más corta que la entrada. Tienen una variedad de aplicaciones en criptografía.

+ +

SHA-1

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.1, y produce una salida de 160 bits de largo.

+ +
+

Advertencia: Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.

+
+ +

SHA-256

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.2, y produce una salida de 256 bits de largo.

+ +

SHA-384

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.5, y produce una salida de 384 bits de largo.

+ +

SHA-512

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.4, y produce una salida de 512 bits de largo.

+ +
+

Sugerencia: Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" (HMAC), necesitas usar SubtleCrypto.sign() en su lugar.

+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

Este ejemplo codifica un mensaje, luego calcula su digest SHA-256 y muestra la longitud del mismo:

+ +
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(message);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
+const digestBuffer = await digestMessage(text);
+console.log(digestBuffer.byteLength);
+
+ +

Convirtiendo un digest a una cadena hexadecimal

+ +

El resumen se devuelve como un ArrayBuffer, pero para la comparación y visualización los digests se representan a menudo como cadenas hexadecimales. Este ejemplo calcula un digest, y luego convierte el ArrayBuffer a un string hexadecimal:

+ +
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
+  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+  return hashHex;
+}
+
+const digestHex = await digestMessage(text);
+console.log(digestHex);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}{{Spec2('Web Crypto API')}}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.SubtleCrypto.digest")}}

+ +
+

En Chrome 60, se añadió una característica que deshabilita crypto.subtle para conexiones no TLS.

+
+ +

Ver también

+ + diff --git a/files/es/web/api/subtlecrypto/encrypt/index.html b/files/es/web/api/subtlecrypto/encrypt/index.html new file mode 100644 index 0000000000..8f35030d35 --- /dev/null +++ b/files/es/web/api/subtlecrypto/encrypt/index.html @@ -0,0 +1,142 @@ +--- +title: SubtleCrypto.digest() +slug: Web/API/SubtleCrypto/encrypt +tags: + - API + - Encriptación + - Referencia + - SubtleCrypto + - Web Crypto API + - encrypt +translation_of: Web/HTTP/Headers/Digest +--- +
{{APIRef("Web Crypto API")}}
+ +

El método digest() de la interfaz {{domxref("SubtleCrypto")}} genera un digest de los datos proveidos. Un {{domxref("digest")}} es un valor corto de longitud fija derivado de alguna entrada de longitud variable. Los digest criptográficos deben mostrar resistencia a colisiones, lo que significa que es difícil encontrar dos entradas diferentes que tengan el mismo valor de digest.

+ +

Toma como argumento un identificador para el algoritmo digest a utilizar y los datos a codificar. Devuelve un Promise que se completará con el digest.

+ +

Sintaxis

+ +
const digest = crypto.subtle.digest(algorithm, data);
+
+ +

Parámetros

+ + + +

Valor de retorno

+ + + +

Algoritmos soportados

+ +

Los argoritmos digest, también conocidos como funciones criptográficas hash, transforman un bloque de datos arbitrariamente grande en una salida de tamaño fijo, normalmente mucho más corta que la entrada. Tienen una variedad de aplicaciones en criptografía.

+ +

SHA-1

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.1, y produce una salida de 160 bits de largo.

+ +
+

Advertencia: Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.

+
+ +

SHA-256

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.2, y produce una salida de 256 bits de largo.

+ +

SHA-384

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.5, y produce una salida de 384 bits de largo.

+ +

SHA-512

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.4, y produce una salida de 512 bits de largo.

+ +
+

Sugerencia: Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" (HMAC), necesitas usar SubtleCrypto.sign() en su lugar.

+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

Este ejemplo codifica un mensaje, luego calcula su digest SHA-256 y muestra la longitud del mismo:

+ +
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(message);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
+const digestBuffer = await digestMessage(text);
+console.log(digestBuffer.byteLength);
+
+ +

Convirtiendo un digest a una cadena hexadecimal

+ +

El resumen se devuelve como un ArrayBuffer, pero para la comparación y visualización los digests se representan a menudo como cadenas hexadecimales. Este ejemplo calcula un digest, y luego convierte el ArrayBuffer a un string hexadecimal:

+ +
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
+  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+  return hashHex;
+}
+
+const digestHex = await digestMessage(text);
+console.log(digestHex);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}{{Spec2('Web Crypto API')}}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.SubtleCrypto.digest")}}

+ +
+

En Chrome 60, se añadió una característica que deshabilita crypto.subtle para conexiones no TLS.

+
+ +

Ver también

+ + diff --git a/files/es/web/api/subtlecrypto/index.html b/files/es/web/api/subtlecrypto/index.html new file mode 100644 index 0000000000..429f0c080e --- /dev/null +++ b/files/es/web/api/subtlecrypto/index.html @@ -0,0 +1,290 @@ +--- +title: SubtleCrypto +slug: Web/API/SubtleCrypto +tags: + - API + - Interfaz + - Referencia + - SubtleCrypto + - Web Crypto API +translation_of: Web/API/SubtleCrypto +--- +
{{APIRef("Web Crypto API")}}
+ +

La interfaz SubtleCrypto de la Web Crypto API provee una serie de funciones criptográficas de bajo nivel. Se accede a ella a través de las propiedades {{domxref("Crypto.subtle")}} disponible en un contexto de la ventana (via {{domxref("Window.crypto")}}).

+ +
+

Advertencia: Esta API proporciona una serie de primitivos criptográficos de bajo nivel. Es muy fácil hacer un mal uso de ellos, y las trampas involucradas pueden ser muy sutiles.

+ +

Incluso suponiendo que se utilicen correctamente las funciones criptográficas básicas, la gestión segura de las claves y el diseño general del sistema de seguridad son extremadamente difíciles de conseguir correctamente, y generalmente son el dominio de expertos en seguridad especializados.

+ +

Los errores en el diseño e implementación del sistema de seguridad pueden hacer que la seguridad del sistema sea completamente ineficaz.

+ +

Si no estás seguro de saber lo que estás haciendo, probablemente no deberías usar esta API.

+
+ +

Descripción general

+ +

Podemos dividir las funciones implementadas por esta API en dos grupos: funciones criptográficas y funciones de administración de claves.

+ +

Funciones criptográficas

+ +

Estas son las funciones que puedes utilizar para implementar características de seguridad como la privacidad y la autenticación en un sistema. El API de SubtleCrypto proporciona las siguientes funciones criptográficas:

+ +

* {{DOMxRef("SubtleCrypto.sign","sign()")}} y {{DOMxRef("SubtleCrypto.verify","verify()")}}: crea y verifica las firmas digitales.
+ * {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} y {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: encripta y desencripta datos.
+ * {{DOMxRef("SubtleCrypto.digest","digest()")}}: crea un digest de longitud fija y resistente a colisiones de algunos datos.

+ +

Funciones de gestión clave

+ +

Excepto para {{DOMxRef("SubtleCrypto.digest","digest()")}}, todas las funciones de criptografía de la API utilizan claves criptográficas. En la API SubtleCrypto una clave criptográfica se representa usando un objeto {{DOMxRef("CryptoKey","CryptoKey")}}. Para realizar operaciones como firmado y encriptación, provee un objeto {{DOMxRef("CryptoKey","CryptoKey")}} a la función {{DOMxRef("SubtleCrypto.sign","sign()")}} o {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}}.

+ +

Generando y derivando claves

+ +

Las funciones {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} y {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} ambos crean un nuevo objeto {{DOMxRef("CryptoKey")}}.

+ +

La diferencia es que generateKey() generará un nuevo valor clave distinto cada vez que lo llames, mientras que deriveKey() deriva una llave de algún material inicial de claves. Si proporcionas el mismo material de claves a dos llamadas separadas a deriveKey(), obtendrás dos objetos  CryptoKey que tienen el mismo valor de base. Esto es útil si, por ejemplo, se quiere derivar una clave de cifrado de una contraseña y luego derivar la misma clave de la misma contraseña para descifrar los datos.

+ +

Importación y exportación de claves

+ +

Para hacer que las claves estén disponibles fuera de tu aplicación, necesitas exportar la clave, y para eso sirve {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}}.Puedes elegir uno de varios formatos de exportación.

+ +

El inverso de exportKey() es {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. Puedes importar claves de otros sistemas, y la compatibilidad con formatos estándar como PKCS #8 y JSON Web Key te ayudan a hacer esto. La función exportKey() exporta la clave en un formato no codificado.

+ +

Si la clave es sensible, deberías usar {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, que exporta la clave y luego la encripta usando otra clave; el API llama a una "llave de envoltura".

+ +

El inverso de wrapKey() es {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, que descifra y luego importa la llave.

+ +

Almacenamiento de claves

+ +

Epecification objetos CryptoKey pueden ser almacenados usando el structured clone algorithm, lo que significa que puedes almacenarlos y recuperarlos usando las API de almacenamiento web estándar. La especificación espera que la mayoría de los desarrolladores usen el IndexedDB API para almacenar objetos CryptoKey.

+ +

Algoritmos Suportados

+ +

Las funciones criptográficas que proporciona la Web Crypto API pueden ser realizadas por uno o más algoritmos criptográficos diferentes: El argumento algorithm de la función indica el algoritmo a utilizar. Algunos algoritmos necesitan parámetros adicionales: en estos casos el argumento algorithm es un objeto de diccionario que incluye los parámetros adicionales.

+ +

En el cuadro que figura a continuación se resume qué algoritmos son adecuados para cada operación criptográfica:

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

sign()

+ +

verify()

+ 		+

encrypt()

+ +

decrypt()

+ 		digest() +

deriveBits()

+ +

deriveKey()

+ 		+

wrapKey()

+ +

unwrapKey()

+
RSASSA-PKCS1-v1_5✓
RSA-PSS✓
ECDSA✓
HMAC✓
RSA-OAEP✓✓
AES-CTR✓✓
AES-CBC✓✓
AES-GCM✓✓
SHA-1✓
SHA-256✓
SHA-384✓
SHA-512✓
ECDH✓
HKDF✓
PBKDF2✓
AES-KW✓
+ +

Propiedades

+ +

Esta interfaz no hereda ni implementa ninguna propiedad.

+ +

Métodos

+ +

Esta interfaz no hereda ningún método.

+ +
+
{{domxref("SubtleCrypto.encrypt()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con los datos codificados correspondientes al texto sin cifrar, el algoritmo y la clave dados como parámetros.
+
{{domxref("SubtleCrypto.decrypt()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con los datos claros correspondientes al texto encriptado, el algoritmo y la clave dados como parámetros.
+
{{domxref("SubtleCrypto.sign()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con la firma correspondiente al texto, algoritmo y clave dados como parámetros.
+
{{domxref("SubtleCrypto.verify()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un valor {{jsxref("Boolean")}} indicando si la firma dada como parámetro coincide con el texto, el algoritmo y la clave que también se dan como parámetros.
+
{{domxref("SubtleCrypto.digest()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con digest generado a partir del algoritmo y el texto dados como parámetros.
+
{{domxref("SubtleCrypto.generateKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un recién generado {{domxref("CryptoKey")}}, para algoritmos simétricos, o un {{domxref("CryptoKeyPair")}}, que contiene dos claves recién generadas, para algoritmos asimétricos. Estas coincidirán con el algoritmo, usos y extraíbles dados como parámetros.
+
{{domxref("SubtleCrypto.deriveKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un recién generado {{domxref("CryptoKey")}} derivado de la clave maestra y el algoritmo específico dados como parámetros.
+
{{domxref("SubtleCrypto.deriveBits()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un recién generado buffer de bits pseudo-aleatorios derivado de la clave maestra y el algoritmo específico dados como parámetros.
+
{{domxref("SubtleCrypto.importKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un {{domxref("CryptoKey")}} correspondiente al formato, el algoritmo, los datos clave en bruto, los usos y la extraíbilidad dados como parámetros.
+
{{domxref("SubtleCrypto.exportKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un buffer que contiene la clave en el formato solicitado.
+
{{domxref("SubtleCrypto.wrapKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con una llave simétrica envuelta para su uso (transferencia y almacenamiento) en entornos inseguros. La llave envuelta coincide con el formato especificado en los parámetros dados, y la envoltura se hace con la llave envuelta dada, usando el algoritmo especificado.
+
{{domxref("SubtleCrypto.unwrapKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un {{domxref("CryptoKey")}} correspondiente a la llave envuelta dada en el parámetro.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}{{ Spec2('Web Crypto API') }}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/svgpoint/index.html b/files/es/web/api/svgpoint/index.html new file mode 100644 index 0000000000..9709061af4 --- /dev/null +++ b/files/es/web/api/svgpoint/index.html @@ -0,0 +1,13 @@ +--- +title: SVGPoint +slug: Web/API/SVGPoint +tags: + - SVGPoint + - createSVGPoint + - getScreenCTM + - matrixTransform +translation_of: Web/API/SVGPoint +--- +
{{APIRef("SVG")}}
+ +

Crea un nuevo elemento SVGPoint que se inicializa en el origen ( 0,0) del sistema de coordenadas. El elemento no es visible ni es agregado al DOM

diff --git a/files/es/web/api/texttrack/cuechange_event/index.html b/files/es/web/api/texttrack/cuechange_event/index.html new file mode 100644 index 0000000000..4a667535fc --- /dev/null +++ b/files/es/web/api/texttrack/cuechange_event/index.html @@ -0,0 +1,109 @@ +--- +title: 'TextTrack: evento cuechange' +slug: Web/API/TextTrack/cuechange_event +tags: + - API + - Audio + - Event + - Media + - Reference + - TextTrack + - Video + - WebVTT + - cuechange + - events + - oncuechange + - track +translation_of: Web/API/TextTrack/cuechange_event +--- +
{{APIRef}}
+ +

El evento cuechange se activa cuando un {{domxref("TextTrack")}} ha cambiado las anotaciones que se estan mostrando. El evento es activado tanto en TextTrack y en el {{domxref("HTMLTrackElement")}} donde esta siendo mostrado, si lo hay.

+ + + + + + + + + + + + + + + + + + + + +
BurbujasNo
CancelableNo
Interfaz{{domxref("Event")}}
Propiedad del controlador de eventos{{domxref("GlobalEventHandlers.oncuechange")}}
+ +

Ejemplos

+ +

En el TextTrack

+ +

Tu puedes preparar una escucha para el evento cuechange en un TextTrack usando el método {{domxref("EventTarget.addEventListener", "addEventListener()")}}:

+ +
track.addEventListener('cuechange', function () {
+  let cues = track.activeCues;  // array de las anotaciones actuales
+});
+
+ +

O puedes solo preparar la propiedad del controlador de eventos {{domxref("GlobalEventHandlers.oncuechange", "oncuechange")}}:

+ +
track.oncuechange = function () {
+  let cues = track.activeCues; // array of current cues
+}
+ +

En el elemento track

+ +

El subyacente {{domxref("TextTrack")}}, indicado por la propiedad {{domxref("HTMLTrackElement.track", "track")}}, recive un evento  {{domxref("TextTrack.cuechange_event", "cuechange")}} cada vez que la anotación que esta siendo actualmente presentada cambia. Est sucede incluso si la pista de texto no está asociada cun un elemento multimedia.

+ +

Si la pista de texto está asociada con el elemento multimedia, usando el elemento {{HTMLElement("track")}} como hijo del elemento {{HTMLElement("audio")}} o del elemento {{HTMLElement("video")}}, el evento cuechange es también enviado al {{domxref("HTMLTrackElement")}}.

+ +
let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.addEventListener("cuechange", (event) => {
+  let cues = event.target.track.activeCues;
+});
+
+ +

Además, puedes utilizar el controlador de eventos oncuechange:

+ +
let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.oncuechange = (event) => {
+  let cues = event.target.track.activeCues;
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', '#event-media-cuechange', 'cuechange')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("api.TextTrack.cuechange_event")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/texttrack/index.html b/files/es/web/api/texttrack/index.html new file mode 100644 index 0000000000..17c32575fa --- /dev/null +++ b/files/es/web/api/texttrack/index.html @@ -0,0 +1,102 @@ +--- +title: TextTrack +slug: Web/API/TextTrack +tags: + - API + - Interface + - Media + - NeedsTranslation + - Reference + - TextTrack + - TopicStub + - Web + - WebVTT +translation_of: Web/API/TextTrack +--- +
{{APIRef("WebVTT")}}
+ +
+

The TextTrack interface—part of the API for handling WebVTT (text tracks on media presentations)—describes and controls the text track associated with a particular {{HTMLElement("track")}} element.

+
+ +

Properties

+ +

This interface also inherits properties from {{domxref("EventTarget")}}.

+ +
+
{{domxref("TextTrack.activeCues")}} {{readonlyInline}}
+
A {{domxref("TextTrackCueList")}} object listing the currently active set of text track cues. Track cues are active if the current playback position of the media is between the cues' start and end times. Thus, for displayed cues such as captions or subtitles, the active cues are currently being displayed.
+
{{domxref("TextTrack.cues")}} {{readonlyInline}}
+
A {{domxref("TextTrackCueList")}} which contains all of the track's cues.
+
{{domxref("TextTrack.id")}} {{readonlyInline}}
+
A {{domxref("DOMString")}} which identifies the track, if it has one. If it doesn't have an ID, then this value is an empty string (""). If the TextTrack is associated with a {{HTMLElement("track")}} element, then the track's ID matches the element's ID.
+
{{domxref("TextTrack.inBandMetadataTrackDispatchType")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} which indicates the track's in-band metadata track dispatch type. needs details
+
{{domxref("TextTrack.kind")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} indicating what kind of text track the TextTrack describes. The value must be one of those in the TextTrackKind enum.
+
{{domxref("TextTrack.label")}} {{readonlyInline}}
+
A human-readable {{domxref("DOMString")}} which contains the text track's label, if one is present; otherwise, this is an empty string (""), in which case a custom label may need to be generated by your code using other attributes of the track, if the track's label needs to be exposed to the user.
+
{{domxref("TextTrack.language")}} {{readonlyInline}}
+
A {{domxref("DOMString")}} which specifies the text language in which the text track's contents is written. The value must adhere to the format specified in the Tags for Identifying Languages (BCP 47) document from the IETF, just like the HTML {{htmlattrxref("lang")}} attribute. For example, this can be "en-US" for United States English or "pt-BR" for Brazilian Portuguese.
+
{{domxref("TextTrack.mode")}}
+
A {{domxref("DOMString")}} specifying the track's current mode. Changing this property's value changes the track's current mode to match. Permitted values are listed under Text track mode constants. The default is disabled, unless the {{HTMLElement("track")}} element's {{htmlattrxref("default", "track")}} Boolean attribute is specified, in which case the default mode is started.
+
+ +

Events

+ +
+
cuechange
+
Fired when cues are entered and exited. A given text cue appears when the cue is entered and disappears when the cue is exited.
+ Also available via the oncuechange property.
+
+ +

Methods

+ +

This interface also inherits methods from {{domxref("EventTarget")}}.

+ +
+
{{domxref("TextTrack.addCue()")}}
+
Adds a cue (specified as a {{domxref("TextTrackCue")}} object to the track's list of cues.
+
{{domxref("TextTrack.removeCue()")}}
+
Removes a cue (specified as a {{domxref("TextTrackCue")}} object from the track's list of cues.
+
+ +
+
+ +

Example

+ +

tbd

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', '#texttrack', 'TextTrack') }}{{ Spec2('HTML WHATWG') }}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/touchevent/index.html b/files/es/web/api/touchevent/index.html new file mode 100644 index 0000000000..c18c737064 --- /dev/null +++ b/files/es/web/api/touchevent/index.html @@ -0,0 +1,190 @@ +--- +title: TouchEvent +slug: Web/API/TouchEvent +translation_of: Web/API/TouchEvent +--- +

{{ APIRef("Touch Events") }}

+ +

La interfaz TouchEvent representa un evento enviado cuando cambia el estado de los contactos con una superficie sensible al tacto. Esta superficie puede ser una pantalla táctil o un trackpad, por ejemplo. El evento puede describir uno o mas puntos de contacto con la pantalla e incluye soporte para detectar el movimiento, adición y remoción de puntos de contacto, etc.

+ +

Los toques pueden ser representados por el objeto {{ domxref("Touch") }}, cada toque es descrito por una posición, tamaño y forma, cantidad de presión, y el elemento que se presiona. Los toques son almacenados en el objeto {{ domxref("TouchList") }}

+ +

Constructor

+ +
+
{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}
+
Crea un objeto TouchEvent.
+
+ +

Propiedades

+ +

Esta interfaz hereda propiedades de sus padres {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +
+
{{ domxref("TouchEvent.altKey") }} {{readonlyInline}}
+
Un valor Booleano indicando si la tecla alt estaba pulsada cuando el evento touch fue lanzado.
+
{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}
+
Una lista {{ domxref("TouchList") }} objetos {{ domxref("Touch") }} representan puntos de contacto individuales cuyos estados cambiaron entre el evento touch previo y este. 
+
{{ domxref("TouchEvent.ctrlKey") }} {{readonlyInline}}
+
Un valor booleano que indica si la tecla de control estaba pulsada o no cuando el evento touch se disparó.
+
{{ domxref("TouchEvent.metaKey") }} {{readonlyInline}}
+
Un valor Boleano que indica si la tecla meta estaba apagada o no cuando el evento touch se disparó.
+
{{ domxref("TouchEvent.shiftKey") }} {{readonlyInline}}
+
Un valor Boleano que indica si la techa shift estaba apagado(presionada) cuando el evento touch se disparó.
+
{{ domxref("TouchEvent.targetTouches") }}{{readonlyInline}}
+
A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects that are both currently in contact with the touch surface and were also started on the same element that is the target of the event.
+
{{ domxref("TouchEvent.touches") }} {{readonlyInline}}
+
A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects representing all current points of contact with the surface, regardless of target or changed status.
+
+ +

Tipos de evento táctiles

+ +

Hay varios tipos de eventos que pueden ser disparados (activados) para indicar que han ocurrido cambios relacionados con el contacto. Puede determinar cuál de estos ha ocurrido mirando la propiedad {{domxref ("event.type", "TouchEvent.type")}} del evento.

+ +
Nota: Es importante observar que en muchos casos, Los eventos táctiles y de mouse se envían (para permitir que el código no táctil específico aún interactúe con el usuario). Si usa eventos táctiles, debe llamar a {{domxref ("event.preventDefault ()")}} para evitar que también se envíe el evento del mouse.
+ +

{{event("touchstart")}}

+ +

Sent when the user places a touch point on the touch surface. The event's target will be the {{ domxref("element") }} in which the touch occurred.

+ +

{{event("touchend")}}

+ +

Sent when the user removes a touch point from the surface (that is, when they lift a finger or stylus from the surface). This is also sent if the touch point moves off the edge of the surface; for example, if the user's finger slides off the edge of the screen.

+ +

The event's target is the same {{ domxref("element") }} that received the touchstart event corresponding to the touch point, even if the touch point has moved outside that element.

+ +

The touch point (or points) that were removed from the surface can be found in the {{ domxref("TouchList") }} specified by the changedTouches attribute.

+ +

{{event("touchmove")}}

+ +

Sent when the user moves a touch point along the surface. The event's target is the same {{ domxref("element") }} that received the touchstart event corresponding to the touch point, even if the touch point has moved outside that element.

+ +

This event is also sent if the values of the radius, rotation angle, or force attributes of a touch point change.

+ +
Note: The rate at which touchmove events is sent is browser-specific, and may also vary depending on the capability of the user's hardware. You must not rely on a specific granularity of these events.
+ +

{{event("touchcancel")}}

+ +

Sent when a touch point has been disrupted in some way. There are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser):

+ + + +

GlobalEventHandlers

+ +

{{SeeCompatTable}}

+ +
+
{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}
+
A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchstart")}} event.
+
{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}
+
A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchend")}} event.
+
{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}
+
A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.
+
{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}
+
A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchcancel")}} event.
+
+ +

Ejemplo

+ +

See the example on the main Touch events article.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}{{Spec2('Touch Events 2')}}Added ontouchstart, ontouchend, ontouchmove, ontouchend global attribute handlers
{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}{{Spec2('Touch Events')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome("22.0")}}{{CompatGeckoDesktop("18.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("6.0")}}{{CompatVersionUnknown}}11{{CompatVersionUnknown}}{{CompatVersionUnknown}}
TouchEvent(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/uievent/index.html b/files/es/web/api/uievent/index.html new file mode 100644 index 0000000000..8d896924eb --- /dev/null +++ b/files/es/web/api/uievent/index.html @@ -0,0 +1,158 @@ +--- +title: UIEvent +slug: Web/API/UIEvent +tags: + - API +translation_of: Web/API/UIEvent +--- +

{{APIRef("DOM Events")}}

+ +

The UIEvent interface represents simple user interface events.

+ +

UIEvent derives from {{domxref("Event")}}. Though the {{domxref("UIEvent.initUIEvent()")}} method is kept for backward compatibility, creating of a UIEvent object should be done using the {{domxref("UIEvent.UIEvent", "UIEvent()")}} constructor.

+ +

Several interfaces are direct or indirect descendants of this one: {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}}, and {{domxref("CompositionEvent")}}.

+ +

Constructors

+ +
+
{{domxref("UIEvent.UIEvent()", "UIEvent()")}}
+
Creates a UIEvent object.
+
+ +

Properties

+ +

This interface also inherits properties of its parent, {{domxref("Event")}}.

+ +
+
{{domxref("UIEvent.cancelBubble")}} {{Deprecated_inline}}{{Non-standard_inline}}
+
Is a {{jsxref("Boolean")}} indicating whether the bubbling of the event has been canceled or not.
+
+ +
+
{{domxref("UIEvent.detail")}}{{readonlyinline}}
+
Returns a long that gives some detail about the event, depending on the type of event.
+
{{domxref("UIEvent.isChar")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns a {{jsxref("Boolean")}} indicating whether the event produced a key character or not.
+
{{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns the horizontal coordinate of the event relative to the current layer.
+
{{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns the vertical coordinate of the event relative to the current layer.
+
{{domxref("UIEvent.pageX")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns the horizontal coordinate of the event relative to the whole document.
+
{{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns the vertical coordinate of the event relative to the whole document.
+
{{domxref("UIEvent.view")}}{{readonlyinline}}
+
Returns a {{domxref("WindowProxy")}} that contains the view that generated the event.
+
{{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns the numeric keyCode of the key pressed, or the character code (charCode) for an alphanumeric key pressed.
+
+ +

Methods

+ +

This interface also inherits methods of its parent, {{domxref("Event")}}.

+ +
+
{{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}
+
Initializes a UIEvent object. If the event has already being dispatched, this method does nothing.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#interface-UIEvent', 'UIEvent')}}{{Spec2('DOM3 Events')}}From {{SpecName('DOM2 Events')}}: +
    +
  • added the UIEvent() constructor,
    • +
  • deprecated the initUIEvent() method,
    • +
  • and changed the type of view from AbstractView to WindowProxy.
    • +
+
{{SpecName('DOM2 Events', '#Events-UIEvent', 'UIEvent')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
UIEvent(){{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(11)}}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
UIEvent(){{ CompatVersionUnknown() }}{{ CompatGeckoMobile(11)}}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/es/web/api/uievent/pagex/index.html b/files/es/web/api/uievent/pagex/index.html new file mode 100644 index 0000000000..fbd75e26f8 --- /dev/null +++ b/files/es/web/api/uievent/pagex/index.html @@ -0,0 +1,102 @@ +--- +title: event.pageX +slug: Web/API/UIEvent/pageX +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías +translation_of: Web/API/UIEvent/pageX +--- +

{{ ApiRef() }}

+

Sumario

+

Retorna la coordena horizontal del evento, relativo al documento completo.

+

Sintaxis

+
pageX =event.pageX;
+
+

pageX es un valor entero expresado en pixels para la corrdenada X del puntero del ratón, relativo al documento entero, cuando se produjo el evento. Esta propiedad toma en cuenta la barra de desplazamiento horizontal de la página.

+

Ejemplo

+
<html>
+<head>
+<title>pageX\pageY & layerX\layerY example</title>
+
+<script type="text/javascript">
+
+function showCoords(evt){
+  var form = document.forms.form_coords;
+  var parent_id = evt.target.parentNode.id;
+  form.parentId.value = parent_id;
+  form.pageXCoords.value = evt.pageX;
+  form.pageYCoords.value = evt.pageY;
+  form.layerXCoords.value = evt.layerX;
+  form.layerYCoords.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="showCoords(event)">
+
+<p>To display the mouse coordinates please click anywhere on the page.</p>
+
+<div id="d1">
+<span>This is an un-positioned div so clicking it will return
+layerX/layerY values almost the same as pageX/PageY values.</span>
+</div>
+
+<div id="d2">
+<span>This is a positioned div so clicking it will return layerX/layerY
+values that are relative to the top-left corner of this positioned
+element. Note the pageX\pageY properties still return the
+absolute position in the document, including page scrolling.</span>
+
+<span>Make the page scroll more! This is a positioned div so clicking it
+will return layerX/layerY values that are relative to the top-left
+corner of this positioned element. Note the pageX\pageY properties still
+return the absolute position in the document, including page
+scrolling.</span>
+</div>
+
+<div id="d3">
+<form name="form_coords">
+ Parent Element id: <input type="text" name="parentId" size="7" /><br />
+ pageX:<input type="text" name="pageXCoords" size="7" />
+ pageY:<input type="text" name="pageYCoords" size="7" /><br />
+ layerX:<input type="text" name="layerXCoords" size="7" />
+ layerY:<input type="text" name="layerYCoords" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Specificación

+

No es parte del estándar público.

+

{{ languages( { "pl": "pl/DOM/event.pageX", "en": "en/DOM/event.pageX" } ) }}

diff --git a/files/es/web/api/url/createobjecturl/index.html b/files/es/web/api/url/createobjecturl/index.html new file mode 100644 index 0000000000..9a6b6841b4 --- /dev/null +++ b/files/es/web/api/url/createobjecturl/index.html @@ -0,0 +1,148 @@ +--- +title: URL.createObjectURL() +slug: Web/API/URL/createObjectURL +tags: + - API + - Experimental + - Method + - URL + - URL API + - createObjectURL +translation_of: Web/API/URL/createObjectURL +--- +

{{ApiRef("URL")}}{{SeeCompatTable}}

+ +

El método estático URL.createObjectURL() crea un {{domxref("DOMString")}} que contiene una URL que representa al objeto pasado como parámetro. La vida de la URL está ligado al {{domxref("document")}} de la ventana en la que fue creada. El nuevo objeto URL representa al objeto {{domxref("File")}} especificado o al objeto {{domxref("Blob")}}.

+ +
+

El uso de un objeto {{domxref("MediaStream")}} como entrada a este método está en proceso de ser obsoleto. Las discusiones están en curso sobre si o no debe ser quitado totalmente. Como tal, se debe de evitar usar este método con  {{domxref("MediaStream")}}s, y se debería usar {{domxref("HTMLMediaElement.srcObject", "HTMLMediaElement.srcObject()")}}.

+
+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
objectURL = URL.createObjectURL(object);
+
+ +

Parámetros

+ +
+
object
+
Un objeto {{domxref("File")}} o un objeto {{domxref("Blob")}} para el que se creará la URL.
+
+ + + +

Ejemplo

+ +

Ver Usando objetos URL para representar imágenes.

+ +

Notas

+ +

Cada vez que se llama a createObjectURL(), un nuevo objeto URL es creado, incluso si ya creaste uno para el mismo objeto. Cada uno de estos objetos puede ser liberado usando {{domxref("URL.revokeObjectURL()")}} cuándo ya no lo necesitas. Los navegadores liberan estos objetos cuando el documento es cerrado; de todas formas, para obtener un rendimiento óptimo y un óptimo uso de memoria, si hay momentos seguros en los que puedes liberar estos objetos deberías hacerlo. Por ejemplo: No liberar los recursos cuando se ha creado una URL a partir de un {{domxref('MediaStream')}} puede dejar la luz de la cámara del navegador encendida más tiempo del necesario.

+ +
+

Notese que no es necesario crear URLs a partir de un {{domxref('MediaStream')}}, ya que los objetos de streams deberían asignarse directamente a elementos de reproducción con {{domxref("HTMLMediaElement.srcObject")}}. La posibilidad de usar un MediaStream como valor de un objeto está obsoleta.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API', '#dfn-createObjectURL', 'URL')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico8 [1]
+ {{CompatChrome(23)}}		{{CompatGeckoDesktop(2)}}{{CompatIE(10)}}{{CompatOpera(15)}}{{CompatSafari(6)}} [1]
+ {{CompatSafari(7)}}
In a {{ domxref("Worker", "Web Worker") }}10 [1]
+ {{CompatChrome(23)}}		{{CompatGeckoDesktop(21)}}{{CompatIE(11)}}{{CompatOpera(15)}}{{CompatSafari(6)}} [1]
+ {{CompatSafari(7)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChrome para AndroidAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico18 [1]4.0 [1]{{CompatGeckoMobile(14)}}{{CompatUnknown}}{{CompatOpera(15)}} [1]6.0 [1]
In a {{ domxref("Worker", "Web Worker") }}18 [1]{{CompatVersionUnknown}} [1]{{CompatGeckoMobile(14)}}{{CompatUnknown}}{{CompatOpera(15)}} [1]6.0 [1]
+
+ +

[1] Con URL prefijado como webkitURL

+ +

Mirar también

+ + diff --git a/files/es/web/api/url/host/index.html b/files/es/web/api/url/host/index.html new file mode 100644 index 0000000000..f18934e6a6 --- /dev/null +++ b/files/es/web/api/url/host/index.html @@ -0,0 +1,62 @@ +--- +title: Estabilidad +slug: Web/API/URL/Host +translation_of: Web/API/URL/host +--- +
{{ApiRef("URL API")}}
+ +

The host property of the {{domxref("URL")}} interface is a {{domxref("USVString")}} containing the host, that is the {{domxref("URL.hostname", "hostname")}}, and then, if the {{glossary("port")}} of the URL is nonempty, a ':', followed by the {{domxref("URL.port", "port")}} of the URL.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
const host = url.host
+url.host = newHost
+
+ +

Value

+ +

A {{domxref("USVString")}}.

+ +

Examples

+ +
let url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org"
+
+url = new URL('https://developer.mozilla.org:443/en-US/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org"
+// The port number is not included because 443 is the scheme's default port
+
+url = new URL('https://developer.mozilla.org:4097/en-US/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org:4097"
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('URL', '#dom-url-host', 'URL.host')}}{{Spec2('URL')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.URL.host")}}

+ +

See also

+ + diff --git a/files/es/web/api/url/index.html b/files/es/web/api/url/index.html new file mode 100644 index 0000000000..c107b21511 --- /dev/null +++ b/files/es/web/api/url/index.html @@ -0,0 +1,217 @@ +--- +title: URL +slug: Web/API/URL +tags: + - API + - Experimental + - Expérimental(2) + - NeedsTranslation + - TopicStub + - URL API +translation_of: Web/API/URL +--- +
{{ApiRef("URL API")}} {{SeeCompatTable}}
+ +

La interfaz URL representa a un objeto que provee métodos estáticos para crear objetos URL.

+ +

When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the {{domxref("Window.URL")}} properties (prefixed with Webkit-based browser as Window.webkitURL).

+ +

{{AvailableInWorkers}}

+ +

Properties

+ +
+
{{domxref("URL.href")}}
+
Is a {{domxref("DOMString")}} containing the whole URL.
+
{{domxref("URL.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("URL.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, a ':', and the port of the URL.
+
{{domxref("URL.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("URL.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("URL.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("URL.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters of the URL.
+
{{domxref("URL.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("URL.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("URL.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("URL.origin")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.
+
+ +
+
{{domxref("URL.searchParams")}}
+
Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.
+
+ +

Constructor

+ +
+
{{domxref("URL.URL", "URL()")}}
+
Creates and return a URL object composed from the given parameters.
+
+ +

Methods

+ +

The URL interface implements methods defined in {{domxref("URLUtils")}}.

+ +
+
{{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.
+
+ +

Static methods

+ +
+
{{domxref("URL.createObjectURL()")}}
+
Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.
+
{{domxref("URL.revokeObjectURL()")}}
+
Revokes an object URL previously created using {{domxref("URL.createObjectURL()")}}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#creating-revoking', 'URL')}}{{Spec2('File API')}}Added the static methods URL.createObjectURL() and URL.revokeObjectURL().
{{SpecName('URL', '#api', 'Node')}}{{Spec2('URL')}}Initial definition (implements URLUtils).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8.0[2]
+ 32		In Development[5]{{CompatGeckoDesktop("2.0")}}[1][3]
+ {{CompatGeckoDesktop("19.0")}}		{{CompatNo}}[4]15.0[2]
+ 19		6.0[2]
+ 7.0
username, password, and origin32{{CompatUnknown}}{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}19{{CompatVersionUnknown}}
searchParams{{CompatChrome(49)}}{{CompatUnknown}}{{CompatGeckoDesktop("29.0")}}{{CompatUnknown}}36{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4[2]
+ 4.4		8.0[2]
+ 32		{{CompatGeckoMobile("14.0")}}[1][3]
+ {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
username, password, and origin4.432{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
searchParams{{CompatNo}}{{CompatChrome(49)}}{{CompatGeckoMobile("29.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko supported this interface with the non-standard nsIDOMMozURLProperty internal type. As the only to access such an object was through {{domxref("window.URL")}}, in practice, this didn't make any difference.

+ +

[2] This feature is implemented under the non-standard name webkitURL.

+ +

[3] For Firefox, to use from chrome code, JSM and Bootstrap scope, you have to import it like this:

+ +
Cu.importGlobalProperties(['URL']);
+
+ +

URL is available in Worker scopes.

+ +

[4] As of IE11, instantiating new URL objects is not supported - ie. new URL() does not work. 

+ +

[5] Edge in development: see https://developer.microsoft.com/en-us/microsoft-edge/platform/status/urlapi/  and https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263638-url-api

+ +

See also

+ + diff --git a/files/es/web/api/url/port/index.html b/files/es/web/api/url/port/index.html new file mode 100644 index 0000000000..fea61df62a --- /dev/null +++ b/files/es/web/api/url/port/index.html @@ -0,0 +1,55 @@ +--- +title: URL.port +slug: Web/API/URL/port +translation_of: Web/API/URL/port +--- +
{{ApiRef("URL API")}}
+ +

La propiedad port de la interfaz {{domxref("URL")}} es un {{domxref("USVString")}} que contiene el número de puerto de la URL. Si la URL no contiene un número de puerto explícito, se establecerá ''.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
string = object.port;
+object.port = string;
+
+ +

Valor

+ +

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

+ +

Ejemplos

+ +
var url = new URL('https://mydomain.com:80/svn/Repos/');
+var result = url.port; // Devuelve:'80'
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('URL', '#dom-url-port', 'URL.port')}}{{Spec2('URL')}}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.URL.port")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/url/url/index.html b/files/es/web/api/url/url/index.html new file mode 100644 index 0000000000..978a7de9f9 --- /dev/null +++ b/files/es/web/api/url/url/index.html @@ -0,0 +1,99 @@ +--- +title: URL() +slug: Web/API/URL/URL +translation_of: Web/API/URL/URL +--- +
{{APIRef("URL API")}}
+ +

El constructor URL() devuelve un objeto {{domxref("URL")}} recién creado que representa la URL definida por los parámetros.

+ +

Si la URL base dada o la URL resultante no son URL válidas, se lanza un {{domxref("DOMException")}}  de tipo SYNTAX_ERROR.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
url = new URL(url, [base])
+
+ +

Parámetros

+ +
+
url
+
Un {{domxref("USVString")}} que representa una URL absoluta o relativa. Si url es una URL relativa, se requiere base, y se usará como URL base. Si url es una URL absoluta, se ignorará una base determinada.
+
base {{optional_inline}}
+
Un {{domxref("USVString")}} representa la URL base a usar en caso de que la URL sea una URL relativa. Si no se especifica, el valor predeterminado es ''.
+
+ +
+

Nota: Aún puede usar un objeto {{domxref("URL")}} existente para la base, que se enchufa al atributo  {{domxref("DOMString.href","href")}} del objeto.

+
+ +

Excepciones

+ + + + + + + + + + + + + + +
ExcepciónExplicación
TypeErrorurl (en el caso de URL absolutas) o base + url (en el caso de URL relativas) no es una URL válida.
+ +

Ejemplos

+ +
// Urls base
+var m = 'https://developer.mozilla.org';
+var a = new URL("/", m);                                // => 'https://developer.mozilla.org/'
+var b = new URL(m);                                     // => 'https://developer.mozilla.org/'
+
+        new URL('en-US/docs', b);                      // => 'https://developer.mozilla.org/en-US/docs'
+var d = new URL('/en-US/docs', b);                     // => 'https://developer.mozilla.org/en-US/docs'
+        new URL('/en-US/docs', d);                     // => 'https://developer.mozilla.org/en-US/docs'
+        new URL('/en-US/docs', a);                     // => 'https://developer.mozilla.org/en-US/docs'
+
+        new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
+                                                       // => 'https://developer.mozilla.org/en-US/docs'
+
+        new URL('/en-US/docs', '');                    // Provoca una excepción TypeError ya que '' no es una URL válida
+        new URL('/en-US/docs');                        // Provoca una excepción TypeError ya que '/en-US/docs' no es una URL válida
+        new URL('http://www.example.com', );           // => 'http://www.example.com/'
+        new URL('http://www.example.com', b);          // => 'http://www.example.com/'
+
+        new URL("//foo.com", "https://example.com")    // => 'https://foo.com' (ver URL relativas)
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('URL', '#constructors', 'URL.URL()')}}{{Spec2('URL')}}Initial definition.
+ +

Compatibilidad del navegador

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/urlsearchparams/index.html b/files/es/web/api/urlsearchparams/index.html new file mode 100644 index 0000000000..ec3433af72 --- /dev/null +++ b/files/es/web/api/urlsearchparams/index.html @@ -0,0 +1,204 @@ +--- +title: URLSearchParams +slug: Web/API/URLSearchParams +translation_of: Web/API/URLSearchParams +--- +

{{ApiRef("URL API")}}

+ +

La interfaz URLSearchParams define métodos útiles para trabajar con los parámetros de búsqueda de una URL.

+ +

Un objeto implementando URLSearchParams puede directamente ser usado en una {{jsxref("Statements/for...of", "for...of")}} estructura, en lugar de {{domxref('URLSearchParams.entries()', 'entries()')}}: for (var p of mySearchParams) la cual es equivalente a for (var p of mySearchParams.entries()).

+ +

Constructor

+ +
+
{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
+
El Constructor returna un objeto de tipo URLSearchParams.
+
+ +

Propiedades

+ +

Esta interfaz no hereda ninguna propiedad.

+ +

Métodos

+ +

Esta interfaz no hereda ningún método.

+ +
+
{{domxref("URLSearchParams.append()")}}
+
Agrega el par de llave/valor especificado como un nuevo parámetro de búsqueda.
+
{{domxref("URLSearchParams.delete()")}}
+
Elimina el parámetro de búsqueda especificado, y su valor asociado, de la lista de todos los parámetros de búsqueda.
+
{{domxref("URLSearchParams.entries()")}}
+
Returna un {{jsxref("Iteration_protocols","iterator")}} que permite iterar a traves de todos los pares de llave/valor que contiene el objeto.
+
{{domxref("URLSearchParams.get()")}}
+
Returna el primer valor asociado al parámetro de búsqueda especificado.
+
{{domxref("URLSearchParams.getAll()")}}
+
Returna todas los valores asociados con el parámetro de búsqueda especificado.
+
{{domxref("URLSearchParams.has()")}}
+
Returna un {{jsxref("Boolean")}} que indica si el parametro de búsqueda especificado existe.
+
{{domxref("URLSearchParams.keys()")}}
+
Returna un {{jsxref("Iteration_protocols", "iterator")}} que permite iterar a través de todas las llaves de los pares de llave/valor que contiene un objeto.
+
{{domxref("URLSearchParams.set()")}}
+
Establece el valor al parámetro de búsqueda asociado con el valor dado. Si hay varios valores, elimina los demás.
+
{{domxref("URLSearchParams.sort()")}}
+
Organiza todos los pares de llave/valor, si existen, por sus llaves.
+
{{domxref("URLSearchParams.toString()")}}
+
Returna una cadena de texto que contiene un parámetro de consulta adecuado para utilizar en una URL.
+
{{domxref("URLSearchParams.values()")}}
+
Returna un {{jsxref("Iteration_protocols", "iterator")}} que permite iterar a través de todos los valores de los pares de llave/valor que contiene un objeto.
+
+ +

Ejemplo

+ +
var paramsString = "q=URLUtils.searchParams&topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+//Itera los parámetros de búsqueda.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}{{Spec2('URL')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome(49)}}{{CompatGeckoDesktop("29.0")}}{{CompatNo}}3610.1
entries(), keys(), values(), and support of for...of{{CompatChrome(49)}}{{CompatGeckoDesktop("44.0")}}{{CompatNo}}36{{CompatUnknown}}
USVString for constructor init object{{CompatVersionUnknown}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
Record for constructor init object{{CompatNo}}{{CompatGeckoDesktop("54.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatChrome(49)}}{{CompatChrome(49)}}{{CompatGeckoMobile("29.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
entries(), keys(), values(), and support of for...of{{CompatChrome(49)}}{{CompatChrome(49)}}{{CompatGeckoMobile("44.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
USVString for constructor init object{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Record for constructor init object{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("54.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vea también

+ + + +
+
diff --git a/files/es/web/api/urlsearchparams/urlsearchparams/index.html b/files/es/web/api/urlsearchparams/urlsearchparams/index.html new file mode 100644 index 0000000000..0cfe5f28df --- /dev/null +++ b/files/es/web/api/urlsearchparams/urlsearchparams/index.html @@ -0,0 +1,78 @@ +--- +title: URLSearchParams() +slug: Web/API/URLSearchParams/URLSearchParams +tags: + - API + - API URL + - Constructor + - Referencia + - URLSearchParams +translation_of: Web/API/URLSearchParams/URLSearchParams +--- +

{{ApiRef("URL API")}}

+ +

El constructor URLSearchParams() crea y retorna un nuevo objeto {{domxref("URLSearchParams")}}. Si se incluye el caracter '?' al comienzo, éste es ignorado.

+ +

{{availableinworkers}}

+ +

Sintaxis

+ +
var URLSearchParams = new URLSearchParams(init);
+ +

Parámetros

+ +
+
init {{optional_inline}}
+
Una instancia de {{domxref("USVString")}}, una secuencia de {{domxref("USVString")}}s, o un registro conteniendo dos {{domxref("USVString")}}s.
+
+ +

Valor retornado

+ +

Un objeto instancia de {{domxref("URLSearchParams")}}.

+ +

Ejemplos

+ +

El siguiente ejemplo muestra cómo crear un objeto {{domxref("URLSearchParams")}} desde un string que representa una URL.

+ +
// Pasar un literal string
+var url = new URL('https://example.com?foo=1&bar=2');
+// Obtener la URL actual desde window.location
+var url2 = new URL(window.location);
+
+// Obtener parámetros de url.search y pasarlos al constructor
+var params = new URLSearchParams(url.search);
+var params2 = new URLSearchParams(url2.search);
+
+// Pasar una secuencia
+var params3 = new URLSearchParams([["foo", 1],["bar", 2]]);
+
+// Pasar un registro
+var params4 = new URLSearchParams({"foo" : 1 , "bar" : 2});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('URL', '#dom-urlsearchparams-urlsearchparams', "URLSearchParams()")}}{{Spec2('URL')}}Definición inicial.
+ +

Compatibilidad de browsers

+ +
+ + +

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

+
diff --git a/files/es/web/api/using_the_browser_api/index.html b/files/es/web/api/using_the_browser_api/index.html new file mode 100644 index 0000000000..31fb24d2fb --- /dev/null +++ b/files/es/web/api/using_the_browser_api/index.html @@ -0,0 +1,159 @@ +--- +title: Using the browser API +slug: Web/API/Using_the_Browser_API +translation_of: Mozilla/Gecko/Chrome/API/Browser_API/Using +--- +

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('privileged') }}

+

Summary

+

The HTML Browser API is an extension of the HTML {{HTMLElement("iframe")}} element that allows web apps to implement browsers or browser-like applications. This entails two major aspects:

+ +

In addition to that, it's also possible to express the notion that the embedded content is an Open Web App. In that case the content is loaded within the appropriate app context (such as permissions).

+

Usage

+

An {{HTMLElement("iframe")}} is turned into a browser frame by setting the {{htmlattrxref("mozbrowser","iframe")}} attribute:

+
<iframe src="http://hostname.tld" mozbrowser>
+

In order to embed an Open Web App, the {{htmlattrxref("mozapp","iframe")}} attribute must also be supplied, with the path to the app's manifest:

+
<iframe src="http://hostname.tld" mozapp='http://path/to/manifest.webapp' mozbrowser>
+

At last the content of the {{HTMLElement("iframe")}} can be loaded in its own child process, separate to the page embedding this frame by using the {{htmlattrxref("remote","iframe")}} attribute.

+
<iframe src="http://hostname.tld" mozbrowser remote>
+
+

Warning: That last attribute is necessary for security reasons if you plan to load content from an untrusted/unknown origin. If you don't use it, you take the risk of your application being compromised by a malicious web site.

+
+

Permissions

+

Any application that wants to embed a browser frame must have the browser permission within its app manifest.

+
{
+  "permissions": {
+    "browser": {}
+  }
+}
+

Additionally, to embed an Open Web App, the app must have the embed-apps permission.

+
{
+  "permissions": {
+    "browser": {},
+    "embed-apps": {}
+  }
+}
+

Extra methods

+

To support the requirement of a browser {{HTMLElement("iframe")}}, Firefox OS extends the {{domxref("HTMLIFrameElement")}} DOM interface. Those new methods gives the {{HTMLElement("iframe")}} some super powers:

+ +

Those methods allow navigating through the browsing history of the {{HTMLElement("iframe")}}. They are necessary to be able to implement back, forward, stop, and reload buttons.

+ +

Performance methods

+

Those methods are used to manage the resources used by a browser {{HTMLElement("iframe")}}. This is especially useful for implementing tabbed browser application.

+ +

Event methods

+

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:

+ +

Miscellaneous methods

+

Those methods are utilities, useful for apps that host a browser {{HTMLElement("iframe")}}.

+ +

Events

+

In order to allow an application to manage the browser {{HTMLElement("iframe")}}, the application can listen for new events about what's happening within the browser {{HTMLElement("iframe")}}. The following new events can be listened for:

+ +

Example

+

In this example we'll see how to implement a very basic browser app.

+

HTML

+

In the HTML we just add a URL bar, a "Go" and "Stop" button, and a browser {{HTMLElement("iframe")}}.

+
<header>
+  <input id="url">
+  <button id="go">Go</button>
+  <button id="stop">Stop</button>
+</header>
+
+<iframe src="about:blank" mozbrowser remote></iframe>
+
+

CSS

+

We switch between the go and stop button with a little css trick.

+
button:disabled {
+  display: none;
+}
+

JavaScript

+

Now we can add the required functionalities:

+
document.addEventListener("DOMContentLoaded", function () {
+  var url  = document.getElementById("url");
+  var go   = document.getElementById("go");
+  var stop = document.getElementById("stop");
+
+  var browser = document.getElementsByTagName("iframe")[0];
+
+  // This function is used to switch the Go and Stop button
+  // If the browser is loading content, "Go" is disabled and "Stop" is enabled
+  // Otherwise, "Go" is enabled and "Stop" is disabled
+  function uiLoading(isLoading) {
+      go.disabled =  isLoading;
+    stop.disabled = !isLoading;
+  }
+
+  go.addEventListener("touchend", function () {
+    browser.setAttribute("src", url.value);
+  });
+
+  stop.addEventListener("touchend", function () {
+    browser.stop();
+  });
+
+  // When the browser starts loading content, we switch the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowserloadstart', function () {
+    uiLoading(true);
+  });
+
+  // When the browser finishes loading content, we switch back the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowserloadend', function () {
+    uiLoading(false);
+  });
+
+  // In case of error, we also switch back the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowsererror', function (event) {
+    uiLoading(false);
+    alert("Loading error: " + event.detail);
+  });
+
+  // When a user follows a link, we make sure the new location is displayed in the address bar
+  browser.addEventListener('mozbrowserlocationchange', function (event) {
+    url.value = event.detail;
+  });
+});
+

See also

+ diff --git a/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html new file mode 100644 index 0000000000..f2e2ef65fd --- /dev/null +++ b/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html @@ -0,0 +1,30 @@ +--- +title: Verificando la autenticidad usando contraseña +slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password +translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password +--- +

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

+ +

La autenticidad del mensaje puede ser verificada usando el API Crypto Web. En este artículo mostrarémos como crear y controlar una firma digital utilizando una contraseña y una función hash.

+ +

Un algoritmo HMAC toma una llave y genera un código digerido de la llave y los datos a firmar. Posteriormente, cualquiera con la llave puede volver a generar el mismo código digerido para verificar si los datos han sido alterados.  Además, mediante el conocimiento de una clave secreta, permite almacenar juntos el código digerido y los datos: un atacante no podrá generar un código digerido sobre datos manipulados si no conoce la clave secreta.

+ +

Note that this algorithm doesn't carry any information about the person owning the data, nor its unicity: the mere knowledge of the key is enough to alter the data.

+ +

Let's assume that the data is stored on the computer. To access it, both for writing and reading, we will use localforage.js a small library wrapping the different storages capabilities of a browser in the same interface. This library is not an essential component of this use case and is used here for convenience, to keep focused on what really matter, the cryptographic part.

+ +

The data we want to access is of the form:

+ +

 

+ +

where data is the information to guarantee the integrity and signature the information used to verify it.

+ +

Cryptographic keys can't be remembered by heart by human, and passwords, or passphrases, make bad, that is unsecure, cryptographic key. To solve this problem, cryptographers have designed algorithms generating cryptographically-sound keys from password. Knowing the password allowed to regenerate the same key and to use it.

+ +

We ask the user for a password, and we use it to generate the key:

+ +
 
+ +

With that key, we will be able to compute the mac of the data.

+ +
 
diff --git a/files/es/web/api/web_crypto_api/index.html b/files/es/web/api/web_crypto_api/index.html new file mode 100644 index 0000000000..d8d0069fe4 --- /dev/null +++ b/files/es/web/api/web_crypto_api/index.html @@ -0,0 +1,85 @@ +--- +title: Web Crypto API +slug: Web/API/Web_Crypto_API +tags: + - Referencia + - Vista general + - Web Crypto API +translation_of: Web/API/Web_Crypto_API +--- +

{{DefaultAPISidebar("Web Crypto API")}}{{SeeCompatTable}}{{draft}}

+ +

La Web Crypto API  es una interfaz que permite a un script usar primitivos criptográficos con el fin de construir sistemas utilizando criptografía.

+ +
+

Advertencia: Esta API proporciona una serie de primitivos criptográficos de bajo nivel. Es muy fácil hacer un mal uso de ellos, y las trampas involucradas pueden ser muy sutiles.

+ +

Incluso suponiendo que se utilicen correctamente las funciones criptográficas básicas, la gestión segura de las claves y el diseño general del sistema de seguridad son extremadamente difíciles de conseguir correctamente, y generalmente son el dominio de expertos en seguridad especializados.

+ +

Los errores en el diseño e implementación del sistema de seguridad pueden hacer que la seguridad del sistema sea completamente ineficaz.

+ +

Si no estás seguro de saber lo que estás haciendo, probablemente no deberías usar esta API.

+
+ +

Una de las principales características de esta API es que permite la manipulación y almacenamiento de claves privadas y secretas sin la capa de bits de la clave para poder usarlo con Javascript.

+ +

Esta interfaz permite el acceso a las siguientes primitivos:

+ + + +

La Web Crypto API no resuelve todos los problemas criptográficos a los que un sitio web o una aplicación puedan encontrarse:

+ + + +
+

¡Atención!

+ + +
+ +

Interfaces

+ +

Algunos navegadores implementan una interfaz llamada {{domxref("Crypto")}} sin tenerla bien definida o criptográficamente siendo llamada. Con el fin de evitar conclusiones, los métodos y propiedades de esta interfaz van a ir implementados en la Web Crypto API, y todos los métodos de la Web Crypto API están disponibles en una nueva interfaz: {{domxref("SubtleCrypto")}}.
+ La propiedad {{domxref("Crypto.subtle")}} da acceso a un objeto para implementarla.

+ +

Casos de uso

+ +

La Web Crypto API puede ser usada para:

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Web Crypto API")}}{{Spec2("Web Crypto API")}}Initial definition
diff --git a/files/es/web/api/web_speech_api/index.html b/files/es/web/api/web_speech_api/index.html new file mode 100644 index 0000000000..0a8de49da3 --- /dev/null +++ b/files/es/web/api/web_speech_api/index.html @@ -0,0 +1,121 @@ +--- +title: Web Speech API +slug: Web/API/Web_Speech_API +tags: + - API + - Experimental + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web Speech API + - recognition + - speech + - synthesis +translation_of: Web/API/Web_Speech_API +--- +
{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}
+ +
+

The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition.)

+
+ +

Web Speech Concepts and Usage

+ +

The Web Speech API makes web apps able to handle voice data. There are two components to this API:

+ + + +

For more details on using these features, see Using the Web Speech API.

+ +

Web Speech API Interfaces

+ +

Speech recognition

+ +
+
{{domxref("SpeechRecognition")}}
+
The controller interface for the recognition service; this also handles the {{domxref("SpeechRecognitionEvent")}} sent from the recognition service.
+
{{domxref("SpeechRecognitionAlternative")}}
+
Represents a single word that has been recognised by the speech recognition service.
+
{{domxref("SpeechRecognitionError")}}
+
Represents error messages from the recognition service.
+
{{domxref("SpeechRecognitionEvent")}}
+
The event object for the {{event("result")}} and {{event("nomatch")}} events, and contains all the data associated with an interim or final speech recognition result.
+
{{domxref("SpeechGrammar")}}
+
The words or patterns of words that we want the recognition service to recognize.
+
{{domxref("SpeechGrammarList")}}
+
Represents a list of {{domxref("SpeechGrammar")}} objects.
+
{{domxref("SpeechRecognitionResult")}}
+
Represents a single recognition match, which may contain multiple {{domxref("SpeechRecognitionAlternative")}} objects.
+
{{domxref("SpeechRecognitionResultList")}}
+
Represents a list of {{domxref("SpeechRecognitionResult")}} objects, or a single one if results are being captured in {{domxref("SpeechRecognition.continuous","continuous")}} mode.
+
+ +

Speech synthesis

+ +
+
{{domxref("SpeechSynthesis")}}
+
The controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.
+
{{domxref("SpeechSynthesisErrorEvent")}}
+
Contains information about any errors that occur while processing {{domxref("SpeechSynthesisUtterance")}} objects in the speech service.
+
{{domxref("SpeechSynthesisEvent")}}
+
Contains information about the current state of {{domxref("SpeechSynthesisUtterance")}} objects that have been processed in the speech service.
+
{{domxref("SpeechSynthesisUtterance")}}
+
Represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)
+
+ +
+
{{domxref("SpeechSynthesisVoice")}}
+
Represents a voice that the system supports. Every SpeechSynthesisVoice has its own relative speech service including information about language, name and URI.
+
{{domxref("Window.speechSynthesis")}}
+
Specced out as part of a [NoInterfaceObject] interface called SpeechSynthesisGetter, and Implemented by the Window object, the speechSynthesis property provides access to the {{domxref("SpeechSynthesis")}} controller, and therefore the entry point to speech synthesis functionality.
+
+ +

Examples

+ +

The Web Speech API repo on GitHub contains demos to illustrate speech recognition and synthesis.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Speech API')}}{{Spec2('Web Speech API')}}Initial definition
+ +

Browser compatibility

+ +

SpeechRecognition

+ +
+ + +

{{Compat("api.SpeechRecognition", 0)}}

+ +

SpeechSynthesis

+ + + +

{{Compat("api.SpeechSynthesis", 0)}}

+ +

See also

+ + +
diff --git a/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html b/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html new file mode 100644 index 0000000000..407de0e10d --- /dev/null +++ b/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html @@ -0,0 +1,301 @@ +--- +title: Uso de la Web Speech API +slug: Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API +translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API +--- +

La API Web Speech API proporciona dos funcionalidades distintas — reconocimiento de voz, y síntesis de voz (también conocido como texto a voz o tts) — lo que nos ofrece nuevas e interesantes posibilidades para accesibilidad y otros mecanismos. Este artículo ofrece una breve introducción en las dos áreas, así como unas demos.

+ +

Reconocimiento de voz

+ +

El reconocimiento de voz implica recibir voz a través del micrófono de un dispositivo, luego es verificado por un servicio de reconocimiento de voz contra una lista de palabras o frases 'grammar' (esta lista básicamente es el vocabulario a reconocer en una app particular). Cuando se reconoce con éxito una palabra o frase, esta se devuelve como una cadena de texto y así poder iniciar otras acciones.

+ +

La API Web Speech tiene una interfaz principal de control para el - {{domxref ("SpeechRecognition")}} -, además de una serie de interfaces estrechamente relacionadas para representar la gramática, los resultados, etc. Normalmente, el sistema de reconocimiento de voz predeterminado que dispone el dispositivo se utilizará para el reconocimiento de voz: la mayoría de los sistemas operativos modernos tienen un sistema de reconocimiento de voz para emitir comandos de voz. Piense en Dictado en macOS, Siri en iOS, Cortana en Windows 10, Android Speech, etc.

+ +
+

Note: En algunos navegadores como Chrome, el uso del reconocimiento de voz implica el uso de un motor de reconocimiento basado en un servidor. Tu audio se envía a un servicio de reconocimiento web para ser procesado, por lo que no funcionará offline.

+
+ +

Demo

+ +

Para mostrar un uso sencillo del reconocimiento de voz Web, hemos escrito una demo llamada Speech color changer. Cuando se toca o hace click en la pantalla, se puede decir un color HTML, y el color de fondo de la aplicación cambiará a ese color.

+ +

The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red.

+ +

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

+ +

Compatibilidad de navegadores

+ +

Actualmente, la compatibilidad de la Web Speech API para el reconocimiento de voz se limita a Chrome para escritorio y Android — Chrome tiene soporte desde la versión 33 pero con interfaces 'prefixed', por lo que se deben incluir ese tipo de interfaces 'prefixed', por ejemplo webkitSpeechRecognition.

+ +

HTML y CSS

+ +

El HTML y el CSS para esta app no son importantes. Solo tenemos un título, instrucciones en un párrafo, y un div dentro del cual visualizaremos los mensajes de diagnósticos.

+ +
<h1>Speech color changer</h1>
+<p>Tap/click then say a color to change the background color of the app.</p>
+<div>
+  <p class="output"><em>...diagnostic messages</em></p>
+</div>
+ +

El CSS proporciona un estilo responsive muy simple para que se visualice bien en todos los dispositivos.

+ +

JavaScript

+ +

Miremos el JavaScript con un poco más de detalle.

+ +

Compatibilidad con Chrome 

+ +

Como se ha mencionado anteriormente, Chrome actualmente admite el reconocimiento de voz con propiedades 'prefixed', por lo tanto, al principio de nuestro código incluiremos las siguientes líneas para usar los objetos que correspondan a Chrome, y así cualquier implementación en el futuro pueda admitir estas características sin ningún 'prefixed':

+ +
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
+ +

La gramática -grammar-

+ +

Las siguientes líneas de código definen la gramática que queremos que reconozca nuestra app. Se define una variable para contener nuestra gramática:

+ +
var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
+var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
+ +

El formato usado para 'grammar' es JSpeech Grammar Format (JSGF) — Se puede encontrar más sobre las especificaciones de este formato en el anterior enlace. Sin embargo y por ahora vamos a echarle un vistazo rápidamente:

+ + + +

Conectando la gramática a nuestro reconocimiento de voz

+ +

Lo siguiente que tenemos que hacer es definir una instancia de reconocimiento de voz para el control en nuestra aplicación. Esto se hace usando el constructor {{domxref("SpeechRecognition.SpeechRecognition()", "SpeechRecognition()")}}. También creamos una lista de gramática de voz para contener nuestra gramática usando el constructor {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}}.

+ +
var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+ +

Añadimos nuestra  grammar  a la lista anterior usando el método {{domxref("SpeechGrammarList.addFromString()")}}. Este método acepta como parámetro la cadena que queremos añadir, así como opcionalmente, un valor que especifique la importancia de esta gramática en relación a otras gramáticas disponibles en la lista (el rango del valor va desde 0 hasta 1 inclusive). La gramática agregada está disponible en la lista como una instancia del objeto {{domxref("SpeechGrammar")}}.

+ +
speechRecognitionList.addFromString(grammar, 1);
+ +

Después añadimos la lista {{domxref("SpeechGrammarList")}} a la instancia del reconocimiento de voz estableciéndola en la propiedad {{domxref("SpeechRecognition.grammars")}}. También establecemos algunas otras propiedades a la instancia de reconocimiento antes de continuar:

+ + + +
recognition.grammars = speechRecognitionList;
+recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+ +

Comenzando el reconocimiento de voz

+ +

Tomamos las referencias de la salida {{htmlelement("div")}} y del elemento HTML (para que podamos enviar mensajes de diagnostico y actualizar el color de fondo de la aplicación más adelante), e implementamos un manejador onclick para que cuando se haga click o se toque la pantalla, se inicie el reconocimiento de voz. Esto se logra llamando al método {{domxref("SpeechRecognition.start()")}}. El método forEach() se usa para visualizar indicadores de colores que muestran qué colores intenta decir.

+ +
var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+var hints = document.querySelector('.hints');
+
+var colorHTML= '';
+colors.forEach(function(v, i, a){
+  console.log(v, i);
+  colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
+});
+hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+ +

Recepción y manejo de resultados

+ +

Una vez que comienza el reconocimiento de voz, hay muchos manejadores de eventos que se pueden usar para recuperar los resultados, así como otros elementos de información adicional (ver SpeechRecognition event handlers list.) El más común que probablemente usarás es {{domxref("SpeechRecognition.onresult")}}, el cual es lanzado cuando se recibe el resultado con éxito:

+ +
recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color + '.';
+  bg.style.backgroundColor = color;
+  console.log('Confidence: ' + event.results[0][0].confidence);
+}
+ +

La tercera línea es un poco más compleja, así que vamos a explicarla paso a paso. La propiedad {{domxref("SpeechRecognitionEvent.results")}} devuelve un objeto {{domxref("SpeechRecognitionResultList")}} que contiene los objetos {{domxref("SpeechRecognitionResult")}}. Tiene un getter para que pueda ser accesible como si fuera un array — así el primer [0] devuelve el SpeechRecognitionResult en la posición 0. Cada objeto SpeechRecognitionResult contiene objetos {{domxref("SpeechRecognitionAlternative")}} que contienen palabras individuales reconocidas. Estos también tienen getters para que se puedan acceder a ellos como arrays — por lo tanto el segundo [0] devuelve SpeechRecognitionAlternative en la posición 0. Luego devolvemos su propiedad transcript para obtener una cadena que contenga  el resultado individual reconocido como un string, estableciendo el color de fondo a ese color, e informando del color reconocido como un mensaje de diagnóstico en el IU.

+ +

También usamos el manejador {{domxref("SpeechRecognition.onspeechend")}} para parar el servicio de reconocimiento de voz (usando {{domxref("SpeechRecognition.stop()")}}) cuando se ha reconocido una sola palabra y se ha finalizado de hablar:

+ +
recognition.onspeechend = function() {
+  recognition.stop();
+}
+ +

Manejo de errores y voz no reconocida

+ +

Los dos últimos manejadores son para controlar los casos donde no se reconoce ninguna de las palabras definidas en la gramática, o cuando ocurre un error. {{domxref("SpeechRecognition.onnomatch")}} maneja el primer caso mencionado, pero tenga en cuenta que de momento no parece que se dispare correctamente; solo devuelve lo que ha reconocido:

+ +
recognition.onnomatch = function(event) {
+  diagnostic.textContent = 'I didnt recognise that color.';
+}
+ +

{{domxref("SpeechRecognition.onerror")}} maneja los casos donde se ha producido en error en el reconocimiento  — la propiedad {{domxref("SpeechRecognitionError.error")}} contiene el error devuelto:

+ +
recognition.onerror = function(event) {
+  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
+}
+ +

Síntesis de voz

+ +

La síntesis de voz (también  conocida como texto a voz o tts) implica recibir  contenido en forma de texto dentro de una aplicación y convertirla en voz a través del altavoz del dispositivo o de la conexión de salida del audio.

+ +

La Web Speech API tiene una interface principal controladora — {{domxref("SpeechSynthesis")}} — además de una serie de interfaces estrechamente relacionadas para representar  el texto que se va a sintetizar (conocido como dictados 'utterances'), voces que se usarán para los dictados, etc. De nuevo, la mayoría de sistemas operativos disponen de algún sistema de síntesis de voz que pueden serán usados por la API si están disponibles.

+ +

Demo

+ +

Para mostrar un uso sencillo de la síntesis de voz Web, tenemos la demo llamada Speak easy synthesis. Esta incluye un juego de controles de formulario para introducir texto a sintetizar, configurar el tono, velocidad de reproducción y la voz a usar cuando el texto sea pronunciado.  Después de introducir el texto se puede presionar Enter/Return para escucharlo.

+ +

UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices.

+ +

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

+ +

Compatibilidad de navegadores

+ +

El soporte para la síntesis de voz Web Speech API solo ha llegado a los navegadores más importantes  y actualmente se limita a los siguientes:

+ + + +

HTML y CSS

+ +

El HTML y CSS de nuevo no son fundamentales, simplemente contiene un titulo, algunas instrucciones de uso y un formulario con algunos controles sencillos. El elemento {{htmlelement("select")}} inicialmente está vacío pero se rellena con {{htmlelement("option")}} mediante JavaScript (ver más adelante.)

+ +
<h1>Speech synthesiser</h1>
+
+<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
+
+<form>
+  <input type="text" class="txt">
+  <div>
+    <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
+    <div class="rate-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <div>
+    <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
+    <div class="pitch-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <select>
+
+  </select>
+</form>
+ +

JavaScript

+ +

Analicemos el JavaScript usado en esta app.

+ +

Configurar variables

+ +

En primer lugar, capturamos las referencias de todos los elementos DOM involucrados en la IU, pero lo más importante es capturar una referencia a  {{domxref("Window.speechSynthesis")}}. Este es el punto de entrada a la API — devuelve una instancia a {{domxref("SpeechSynthesis")}}, la interface controladora para la síntesis de voz en la web.

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+
+ +

Rellenar el elemento select 

+ +

Para rellenar el elemento {{htmlelement("select")}} con las diferentes opciones de voz del que dispone el dispositivo, hemos escrito la función populateVoiceList(). Primero invocamos {{domxref("SpeechSynthesis.getVoices()")}}, que devuelve una lista de todas las voces disponibles representadas por objetos {{domxref("SpeechSynthesisVoice")}}. Después recorremos esa lista — para cada voz creamos un elemento {{htmlelement("option")}}, establecemos su contenido con el nombre de la voz (desde {{domxref("SpeechSynthesisVoice.name")}}), y el lenguaje de la misma (desde {{domxref("SpeechSynthesisVoice.lang")}}), y -- DEFAULT si la voz es la predeterminada para el motor de síntesis (verificando si {{domxref("SpeechSynthesisVoice.default")}} devuelve true.)

+ +

Para cada opción también creamos atributos data-, conteniendo el nombre y lenguaje de la voz asociada, para que más tarde podamos usarlos fácilmente, y después añadimos las opciones 'option' como hijos del select.

+ +
function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i < voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+ +

Cuando vamos a ejecutar la función hacemos lo siguiente debido a que Firefox no soporta {{domxref("SpeechSynthesis.onvoiceschanged")}}, y sólo devolverá una lista de voces cuando se ejecute {{domxref("SpeechSynthesis.getVoices()")}}. Sin embargo con Chrome solo hay que esperar a que se active el evento antes de rellenar la lista, de ahí la siguiente parte de código.

+ +
populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+ +

Reproduciendo el texto introducido

+ +

A continuación, creamos un manejador de eventos para comenzar a reproducir el texto introducido en el campo de texto. Usamos un manejador onsubmit en el formulario para que la acción ocurra cuando se presione Enter/Return. Primero creamos una nueva instancia de  {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} usando su constructor — a este se le pasa el valor de la entrada de texto como parámetro.

+ +

A continuación, debemos obtener la voz que queremos utilizar. Usamos la propiedad {{domxref("HTMLSelectElement")}} selectedOptions para devolver el elemento seleccionado {{htmlelement("option")}}. Entonces usamos el atributo de este elemento data-name, encontrando el objeto {{domxref("SpeechSynthesisVoice")}} cuyo nombre coincida con el valor del atributo. Y configuramos la propiedad de {{domxref("SpeechSynthesisUtterance.voice")}} con el valor que coincida con la opción seleccionada.

+ +

Por último, configuramos {{domxref("SpeechSynthesisUtterance.pitch")}} y {{domxref("SpeechSynthesisUtterance.rate")}} con los valores de los elementos del formulario correspondientes. Entonces y ya configurado todo lo necesario, comenzamos la reproducción invocando  {{domxref("SpeechSynthesis.speak()")}}, y pasándolo a la instancia {{domxref("SpeechSynthesisUtterance")}} como parámetro.

+ +
inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i < voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);
+ +

Al final del manejador incluimos un manejador {{domxref("SpeechSynthesisUtterance.onpause")}} para mostrar cómo usar {{domxref("SpeechSynthesisEvent")}}. Cuando se invoca a  {{domxref("SpeechSynthesis.pause()")}},este devuelve un mensaje informando del número y nombre del carácter en el que se detuvo la reproducción.

+ +
   utterThis.onpause = function(event) {
+    var char = event.utterance.text.charAt(event.charIndex);
+    console.log('Speech paused at character ' + event.charIndex + ' of "' +
+    event.utterance.text + '", which is "' + char + '".');
+  }
+ +

Por último, llamamos a blur() en la entrada de texto. Esto permite ocultar la entrada de texto en Firefox OS.

+ +
  inputTxt.blur();
+}
+ +

Actualizando los valores de tono y velocidad mostrados

+ +

La última parte del código simplemente actualiza los valores pitch/rate mostrados en la IU, cada vez que el slider cambia de posición.

+ +
pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+}
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+}
diff --git a/files/es/web/api/web_workers_api/index.html b/files/es/web/api/web_workers_api/index.html new file mode 100644 index 0000000000..3a055af3ca --- /dev/null +++ b/files/es/web/api/web_workers_api/index.html @@ -0,0 +1,226 @@ +--- +title: Web Workers API +slug: Web/API/Web_Workers_API +translation_of: Web/API/Web_Workers_API +--- +

{{DefaultAPISidebar("Web Workers API")}}

+ +

Los Web Workers hacen posible ejecutar la operación de un script en un hilo en segundo plano separado de la ejecución el hilo principal de la aplicación web. La ventaja de esto es que un proceso laborioso puede actuar en un hilo separado, permitiendo al hilo principal (normlamente la UI) ejecutarse sin ser bloqueado o ralentizado.

+ +

Web Workers conceptos y uso

+ +

Un worker es un objeto que se crea a través del constructor ( {{domxref("Worker.Worker", "Worker()")}}) este ejecuta un archivo javascript — este fichero contiene los scripts que se van a ejecutan en el hilo del worker; los workers se ejecutan en un contexto global diferente al actual del navegador {{domxref("window")}}. Este contexto está representado por el objeto {{domxref("DedicatedWorkerGlobalScope")}} en el caso de los workers dedicados (los workers standard utilizan un solo script; y los shared workers usan {{domxref("SharedWorkerGlobalScope")}}).

+ +

Podemos ejecutar los script que necesitemos dentro del hilo del worker, pero con algunas excepciones. Por ejemplo no se puede manipular directamente el DOM, ni usar algunos métodos y propiedades por defecto del objeto {{domxref("window")}}. Pero puede usar un gran número de elementos que están dentro de window, incluyendo WebSockets, y data storage formas de almacenamiento como IndexedDB y solo en Firefox OS Data Store API.  Mira Funciones y clases disponibles para workers para saber más.

+ +

Los datos se comunican entre los workers y el hilo principal a través de un sistema de mensajes — tanto del hilo principal como del worker para enviar un mensaje se invoca al método postMessage() , y a través del listener del evento onmessage se pueden escuchar los mensajes (El mensaje está dentro de la propiedad data del evento) . Los datos se copian en lugar de compartirse.

+ +

Los workers también pueden generar nuevos workers, siempre que los workers estén en la misma página que el principal.  Además, los workers pueden usar XMLHttpRequest para la network I/O, con la excepción de que los atributos responseXML y channel de XMLHttpRequest siempre retornan valor null.

+ +

Ademas de los workers dedicados, hay otro tipo de workers:

+ + + +
+

Note: Según el Web workers Spec, los errores del worker no deberían bubujear (mira {{bug(1188141)}}. Esto está implementado en Firefox 42.

+
+ +

Web Worker interfaces

+ +
+
{{domxref("AbstractWorker")}}
+
Abstrae todas las propiedades y métodos comunes a toda clase de workers (i.e. {{domxref("Worker")}} or {{domxref("SharedWorker")}}).
+
{{domxref("Worker")}}
+
Representa el hilo del worker en ejecución, pudiendo pasar mensajes a este.
+
{{domxref("WorkerLocation")}}
+
Define la ruta absoluta del script que ejecuta el Worker.
+
+ +
+
{{domxref("SharedWorker")}}
+
Representa un tipo de worker al que se puede acceder desde distintos contextos de navegación, tanto de varias ventanas, iframes, y otros workers.
+
{{domxref("WorkerGlobalScope")}}
+
Representa el ámbito genérico de cualquier worker (similar a  {{domxref("Window")}} en un contenido web normal). Los diferentes tipos de workers tienen objetos de ámbito que heredan de esta interfaz y añade características más específicas.
+
{{domxref("DedicatedWorkerGlobalScope")}}
+
Representa el ámbito de un worker dedicado, hereda de {{domxref("WorkerGlobalScope")}} y añade algunas características.
+
{{domxref("SharedWorkerGlobalScope")}}
+
Representa el ámbito de un shared worke, hereda de {{domxref("WorkerGlobalScope")}} y añade algunas características.
+
{{domxref("WorkerNavigator")}}
+
Representa la identidad y estado del user agent (El cliente):
+
+ +

Examples

+ +

Hemos creado un par de demostraciones para ver su uso básico:

+ + + +

You can find out more information on how these demos work in Using web workers.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#workers')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
soporte básico4{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9.1)}}10.010.64
Shared workers4{{CompatNo}}{{CompatGeckoDesktop(29)}}{{CompatNo}}10.64
Paso de datos usando structured cloning13{{CompatVersionUnknown}}{{CompatGeckoDesktop(8)}}10.011.56
Paso de datos usando transferable objects17 {{property_prefix("webkit")}}
+ 21		{{CompatNo}}{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Global {{domxref("window.URL", "URL")}}10[1]
+ 23		{{CompatVersionUnknown}}{{CompatGeckoDesktop(21)}}11156[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.44{{CompatVersionUnknown}}{{CompatGeckoMobile(1.9.1)}}1.0.110.011.55.1
Shared workers{{CompatNo}}4{{CompatNo}}291.4{{CompatNo}}{{CompatNo}}{{CompatNo}}
Pasando datos usando structured cloning{{CompatNo}}4{{CompatVersionUnknown}}81.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Pasando datos usando transferable objects{{CompatNo}}{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] As webkitURL.

+ +

See also

+ + diff --git a/files/es/web/api/webgl_api/index.html b/files/es/web/api/webgl_api/index.html new file mode 100644 index 0000000000..28d94c22d4 --- /dev/null +++ b/files/es/web/api/webgl_api/index.html @@ -0,0 +1,98 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +

WebGL trae gráficos en 3D para la Web mediante la introducción de una API que cumple estrictamente la OpenGL ES 2.0 que se puede utilizar en elementos canvas HTML5. La compatibilidad para WebGL viene en Firefox 4 y se puede probar en las betas de Firefox 4 o en trunk builds. .

+ +
Nota: La especificación para WebGL se encuentra todavía en fase de borrador y sujeta a cambios.
+ + + + + + + + +
+

Temas sobre desarrollo

+ +
+
Primeros pasos con WebGL
+
Cómo crear un contexto WebGL.
+
Adición de contenido 2D a un contexto WebGL
+
Cómo representar formas planas sencillas utilizando WebGL.
+
Uso de sombreadores para aplicar color en WebGL
+
Muestra cómo agregar color a las formas mediante sombreadores.
+
Animación de objetos con WebGL
+
Muestra cómo rotar y trasladar los objetos para crear animaciones sencillas.
+
Creación de objetos 3D utilizando WebGL
+
Muestra cómo crear y animar un objeto 3D (en este caso, un cubo).
+
Uso de texturas en WebGL
+
Muestra cómo asignar texturas a las caras de un objeto.
+
Iluminación en WebGL
+
Cómo simular efectos de iluminación en tu contexto WebGL.
+
Animación de texturas en WebGL
+
Se muestra cómo animar texturas, en este caso, mediante la asignación de un vídeo Ogg a las caras de un cubo que gira.
+
+ 		+

Recursos

+ +
+
Especificación WebGL (Borrador de trabajo)
+
El borrador de la especificación WebGL.
+
Sitio de Khronos WebGL
+
El sitio web principal de WebGL en el Grupo Khronos.
+
Aprender WebGL
+
Un sitio con tutoriales sobre cómo usar WebGL.
+
La guía práctica de WebGL
+
Un sitio web con recetas muy útiles para escribir código WebGL.
+
Sylvester
+
Una biblioteca de código abierto para la manipulación de vectores y matrices.
+
Planeta WebGL
+
Un agregador de RSS para las personas que pertenecen a la comunidad WebGL.
+
+
+ +

Compatibilidad de los navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorCompatibilidad básica.getContext(context)
Internet Explorer------
Firefox (Gecko)4.0 (2)experimental-webgl
Opera------
Chrome9experimental-webgl
Safari6 (en Safari nightlies)experimental-webgl
+ +

 

diff --git a/files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html new file mode 100644 index 0000000000..595b0f57f1 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -0,0 +1,276 @@ +--- +title: Agregando Contenido 2D en el Contexto WebGL +slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +--- +
{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}
+ +

Una vez que has logrado crear el contexto WebGL, estás listo para crear objetos dentro del mismo. Algo sencillo que podemos hacer es pintar un simple cuadrado plano sin texturas, así que vamos a empezar desde ahí, creando el código para dibujar el cuadrado plano.

+ +

Dibujando la Escena

+ +

Lo mas importante que tenemos que entender antes de empezar, es que aún cuando dibujaremos un cuadrado plano en este ejemplo, estaremos trabajando en un espacio 3D. Lo que estaremos haciendo es dibujar un cuadrado plano y posicionándolo frente de la camara de forma perpendicular. Necesitaremos definir los Shaders que definirán el color para nuestra escena además de dibujar nuestro objeto. Esto establecerá cómo aparece el cuadrado plano en nuestra pantalla.

+ +

Los Shaders 

+ +

Los shaders usan especificamente OpenGL ES Shading Language. Los detalles de la forma de trabajar de los shaders estan fuera del alcance de este articulo, como tambien la sintaxis del lenguaje de los shaders sin embargo la version corta es que hay 2 tipos de shaders (funciones que se ejecutan en la GPU) que necesitas escribir.  shaders de vertices y shaders de fragmentos. Estos son pasados al WebGL como una cadena y compilados para ejecutarse en el GPU.

+ +

Shaders de Vértices

+ +

La responsabilidad de los Shaders de Vértices es asignar un valor a una variable especial gl_Position para crear los valores del espacio de trabajo (valores entre  -1 y +1) en toda la zona del canvas. En nuestro Shader de Vértices de abajo estamos recibiendo valores de un atributo que definiremos como aVertexPosition. Estamos entonces multiplicando esa posición por dos matrices 4x4 que definimos como uProjectionMatrix y uModelMatrix e igualando gl_Position al resultado. Para más información sobre proyección y otras matrices puedes encontrar útil este artículo.

+ +
  // Vertex shader program
+
+  const vsSource = `
+    attribute vec4 aVertexPosition;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    void main() {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+    }
+  `;
+
+ +

Shaders de Fragmentos

+ +

Cada vez que el Shader de Vértices escribe de 1 a 3 valores al gl_Position este también dibujará un punto, una linea o un triángulo. Mientras éste esta dibujando, llamará al Shader de Fragmentos y preguntará: ¿De qué color debería dibujar este pixel? En este caso, simplemente retornaremos blanco cada vez.

+ +

gl_FragColor es una variable built-in de GL que es usada para el color del fragmento. Al definir su valor se establece el color del pixel, como se ve a continuación:

+ +
  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;
+
+ +

Inicializando los shaders

+ +

Ahora que hemos definido los dos shaders, necesitamos pasarlos a WebGL, compilarlos y enlazarlos juntos. El código de abajo crea dos shaders al llamar loadShader, pasando el tipo y la fuente para el shader. Entonces crea un programa, adjunta los shaders y los enlaza juntos. Si la compilación o el enlace fallan, el código muestra una alerta.

+ +
//
+// Initialize a shader program, so WebGL knows how to draw our data
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Create the shader program
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // If creating the shader program failed, alert
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+//
+// creates a shader of the given type, uploads the source and
+// compiles it.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Send the source to the shader object
+
+  gl.shaderSource(shader, source);
+
+  // Compile the shader program
+
+  gl.compileShader(shader);
+
+  // See if it compiled successfully
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+
+ +

Para usar este código lo llamamos así:

+ +
  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+
+ +

Después de haber creado el programa de sombreado necesitaremos buscar las ubicaciones que WebGL asignó a nuestras entradas (inputs). En este caso tenemos un attribute y 2 uniforms. Los attribute reciben valores de los buffers. Cada iteración del Shader de Vértices recibe el siguiente valor desde el buffer asignado al attribute. Los uniforms son similares a variables globales en Javascript, estos mantienen el mismo valor para todas las iteraciones de un shader. Como las ubicaciones attribute y uniform son específicas de un solo programa de sombreado, los almacenamos juntos para que sean fáciles de pasar.

+ +
  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+    },
+  };
+
+ +

Creando el cuadrado plano

+ +

Antes de que podamos renderizar nuestro cuadrado plano, necesitamos crear el buffer que contenga sus posiciones de vértice y poner las posiciones de vértice en él. Lo haremos usando una función que llamaremos initBuffers(). Mientras vayamos explorando conceptos WebGL más avanzados, esta rutina crecerá para crear objetos 3D más y más complejos.

+ +
function initBuffers(gl) {
+
+  // Create a buffer for the square's positions.
+
+  const positionBuffer = gl.createBuffer();
+
+  // Select the positionBuffer as the one to apply buffer
+  // operations to from here out.
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  // Now create an array of positions for the square.
+
+  const positions = [
+     1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+    -1.0, -1.0,
+  ];
+
+  // Now pass the list of positions into WebGL to build the
+  // shape. We do this by creating a Float32Array from the
+  // JavaScript array, then use it to fill the current buffer.
+
+  gl.bufferData(gl.ARRAY_BUFFER,
+                new Float32Array(positions),
+                gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+  };
+}
+
+ +

Esta rutina es muy sencilla dada la naturaleza de la escena en este ejemplo. Empieza llamando el método {{domxref("WebGLRenderingContext.createBuffer()", "createBuffer()")}} del objeto gl para obtener un buffer dentro del cual almacenaremos las posiciones del vértice. Este es ligado al contexto al llamar el método {{domxref("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}.

+ +

Una vez terminado, creamos un array de Javascript almacenando la posición de cada vértice en el cuadrado plano. Este es convertido entonces en un array de flotantes y es pasado al método {{domxref("WebGLRenderingContext.bufferData()", "bufferData()")}} del objeto gl para establecer las posiciones de vértice para el objeto.

+ +

Renderizando la escena

+ +

Una vez que los shaders estan establecidos, se buscan las ubicaciones, y las posiciones de vértice del cuadrado plano puestas en un buffer, podemos renderizar la escena. Como no estamos animando nada en este ejemplo, nuestra función drawScene() es muy simple. Esta usa unas rutinas de utilidad que cubriremos en breve.

+ +
function drawScene(gl, programInfo, buffers) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
+  gl.clearDepth(1.0);                 // Clear everything
+  gl.enable(gl.DEPTH_TEST);           // Enable depth testing
+  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
+
+  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Create a perspective matrix, a special matrix that is
+  // used to simulate the distortion of perspective in a camera.
+  // Our field of view is 45 degrees, with a width/height
+  // ratio that matches the display size of the canvas
+  // and we only want to see objects between 0.1 units
+  // and 100 units away from the camera.
+
+  const fieldOfView = 45 * Math.PI / 180;   // in radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glmatrix.js always has the first argument
+  // as the destination to receive the result.
+  mat4.perspective(projectionMatrix,
+                   fieldOfView,
+                   aspect,
+                   zNear,
+                   zFar);
+
+  // Set the drawing position to the "identity" point, which is
+  // the center of the scene.
+  const modelViewMatrix = mat4.create();
+
+  // Now move the drawing position a bit to where we want to
+  // start drawing the square.
+
+  mat4.translate(modelViewMatrix,     // destination matrix
+                 modelViewMatrix,     // matrix to translate
+                 [-0.0, 0.0, -6.0]);  // amount to translate
+
+  // Tell WebGL how to pull out the positions from the position
+  // buffer into the vertexPosition attribute.
+  {
+    const numComponents = 2;  // pull out 2 values per iteration
+    const type = gl.FLOAT;    // the data in the buffer is 32bit floats
+    const normalize = false;  // don't normalize
+    const stride = 0;         // how many bytes to get from one set of values to the next
+                              // 0 = use type and numComponents above
+    const offset = 0;         // how many bytes inside the buffer to start from
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexPosition);
+  }
+
+  // Tell WebGL to use our program when drawing
+
+  gl.useProgram(programInfo.program);
+
+  // Set the shader uniforms
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.projectionMatrix,
+      false,
+      projectionMatrix);
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.modelViewMatrix,
+      false,
+      modelViewMatrix);
+
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}
+
+
+ +

El primer paso es limpiar el canvas de nuestro color de fondo; establecemos la perspectiva de la cámara. Configuramos un campo de 45º, con una relación ancho/alto que coincide con las dimensiones de nuestro canvas. También especificamos que queremos objetos entre 0.1 y 100 unidades de la cámara para ser renderizados.

+ +

Entonces establecemos la posición del cuadrado plano al cargar la posición de identidad y alejando la cámara en 6 unidades. Déspues de eso, enlazamos el buffer del vértice del cuadrado al atributo que el shader estaba usando para aVertexPosition y le decimos a WebGL como jalar los datos fuera de este. Finalmente dibujamos el objeto al llamar el método {{domxref("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}

+ +

Ver código completo | Abrir esta demostración en una nueva página

+ +

Utilidades para operaciones de Matrices

+ +

Las operaciones de matrices pueden parecer complicadas pero en realidad son muy fáciles si las tomas un paso a la vez. Generalmente la gente usa una librería de matrices antes que escribir la suya. En nuestro caso estamos usando la popular librería glMatrix.

+ +

Ver también

+ + + +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html new file mode 100644 index 0000000000..ad9b98310a --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html @@ -0,0 +1,119 @@ +--- +title: Animación de Objetos con WebGL +slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

+ +

Our existing code from the previous examples is already configured to redraw our WebGL scene every 15 milliseconds. Until now, it's simply redrawing everything exactly the same way every time. It's time to change that, so that our square actually moves.

+ +

In this example, we'll actually rotate and move our 2D square in all three dimensions; this will prove that even though we're only creating a 2D object, it still exists in 3D space.

+ +

Making the square rotate

+ +

Let's start by making the square rotate. The first thing we'll need is a variable in which to track the current rotation of the square:

+ +
var squareRotation = 0.0;
+
+ +

Now we need to update the drawScene() function to apply the current rotation to the square when drawing it. After translating to the initial drawing position for the square, we apply the rotation like this:

+ +
mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+
+ +

This saves the current model-view matrix, then rotates the matrix by the current value of squareRotation, around the X and Z axes.

+ +

After drawing, we need to restore the original matrix:

+ +
  mvPopMatrix();
+
+ +

We save and restore the original matrix to avoid having this rotation applied to other objects we might draw.

+ +

To actually animate, we need to add code that changes the value of squareRotation over time. We can do that by creating a new variable to track the time at which we last animated (let's call it lastSquareUpdateTime), then adding the following code to the end of the drawScene() function:

+ +
  var currentTime = (new Date).getTime();
+  if (lastSquareUpdateTime) {
+  	var delta = currentTime - lastSquareUpdateTime;
+
+  	squareRotation += (30 * delta) / 1000.0;
+  }
+
+  lastSquareUpdateTime = currentTime;
+
+ +

This code uses the amount of time that's passed since the last time we updated the value of squareRotation to determine how far to rotate the square.

+ +

Making the square move

+ +

We can also move the square around by translating to a different position before drawing it. This example is going to do some very basic animation; obviously in the real world you'd want to do something less insane.

+ +

Let's track offsets to each axis for our translation in new variables:

+ +
var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+
+ +

And the amount by which to change our position on each axis in these variables:

+ +
var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+
+ +

Now we can simply add this code to the previous code that updates the rotation:

+ +
    squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+    squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+    squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+    if (Math.abs(squareYOffset) > 2.5) {
+      xIncValue = -xIncValue;
+      yIncValue = -yIncValue;
+      zIncValue = -zIncValue;
+    }
+
+ +

This causes our square to zoom around, moving haphazardly around the context as well as toward and away from the viewer, all while rotating. It looks rather like a screen saver.

+ +

If your browser supports WebGL, click here to take a look at this example in action.

+ +

More matrix operations

+ +

This example uses a few additional matrix operations, including two routines to push and pop matrices from a stack to preserve them, and one that rotates a matrix a given number of degrees. These follow, for your reference:

+ +
var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+
+ +

These routines were borrowed from a sample previously written by Vlad Vukićević.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

diff --git a/files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html b/files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html new file mode 100644 index 0000000000..0274f91187 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html @@ -0,0 +1,106 @@ +--- +title: Animating textures in WebGL +slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

+ +

En esta demostración nos basamos en el ejemplo anterior, solo que ahora reemplazaremos nuestra textura estática con los fotogramas de un video Ogg.

+ +

Esto es de hecho muy fácil de entender y de hacer, así que vamos a empezar. 

+ +

Podemos utilizar un código similar para usar, como fuente para las texturas, otros tipos de datos tales como {{ HTMLElement("canvas") }}.

+ +

Obteniendo acceso al video

+ +

El primer paso es añadir el HTML para crear el elemento {{ HTMLElement("video") }} que usaremos para obtener los fotogramas de video:

+ +
<video id="video">
+  Parece ser que tu navegador no soporta el elemento HTML5. <code>&lt;video&gt;</code>
+</video>
+
+ +

Esto simplemente crea un elemento para reproducir el archivo de video "Firefox.ogv". Usaremos CSS para ocultar el video

+ +
video {
+  display: none;
+}
+
+ +

Ahora pasamos al código JavasScript, empezando por añadir una línea de código a la función start() para obtener la referencia al elemento de video:

+ +
videoElement = document.getElementById("video");
+
+ +

Y reemplazamos el código que configura las llamadas de "interval-driven" en drawScecene() por esto:

+ +
videoElement.addEventListener("canplaythrough", startVideo, true);
+videoElement.addEventListener("ended", videoDone, true);
+
+ +

Finalmente configuramos el atributo src para empezar a cargar el video. FIXME (bjacob): También se debe configurar preload="auto" o si no, el video nunca ejecuta canplaythrough en Firefox. En Chrome se debería cargar el video aun sin usar preload="auto".

+ +
video.preload = "auto";
+videoElement.src = "Firefox.ogv";
+ +

El objetivo aquí es no empezar la animación hasta que una parte suficiente del video se haya cargado de modo que pueda ser reproducido sin interrupciones. Para esto añadimos un event listener para esperar a que el elemento de video nos diga que ya ha cargado los suficientes datos como para reproducir el video puede ser reproducido sin pausas.

+ +

The startVideo() quedará así:

+ +
function startVideo() {
+  videoElement.play();
+  intervalID = setInterval(drawScene, 15);
+}
+
+ +

Esto simplemente reproduce el video, entonces establece las llamadas "interval-driven" a drawScene() para gestionar el renderizado del cubo.

+ +

Añadiremos también un segundo event listener en el "ended" del video de modo que cuando el video haya finalizado de reproducirse nosotros podamos parar la animación.

+ +
function videoDone() {
+  clearInterval(intervalID);
+}
+ +

La función de videoDone() simplemente llama a {{ domxref("window.clearInterval()") }}  para terminar de llamar a la función de actualizar la animación.

+ +

Usando los fotogramas del video como textura

+ +

El siguiente paso es initTexture(), el cual se ha vuelto mucho más simple desde que no es necesario cargar un archivo de imagen. En lugar de esto, todo lo que vamos a hacer es crear un objeto de textura vacío para configurar el filtering cuando lo usemos más tarde:

+ +
function initTextures() {
+  cubeTexture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+}
+
+ +
La función updateTexture() quedaría así; Aquí es donde se realiza el trabajo real.
+ +
function updateTexture() {
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
+        gl.UNSIGNED_BYTE, videoElement);
+}
+
+ +

Has visto este código antes. Es prácticamente idéntico a la rutina de handleTextureLoaded() en el ejemplo anterior, excepto que cuando llamamos a texImage2D() en lugar de pasarle un objeto Image, lo pasamos en el elemento {{ HTMLElement("video") }}. Ya que WebGL sabe como obtener el fotograma actual y usarlo como textura.

+ +

updateTexture() se llama cada vez que estamos preparados para que la función drawScene() redibuje la escena. La única diferencia es que añadimos la llamada de updateTexture() antes de hacer nada más.

+ +

¡Esto es todo al respecto!

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}

+ +

Ver el código completo | Abrir esta demo en una nueva página

+ +

Artículos relacionados

+ + + +

{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html new file mode 100644 index 0000000000..a56004e010 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -0,0 +1,106 @@ +--- +title: Primeros pasos con WebGL +slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +tags: + - Intro + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

+ +

WebGL permite que el contenido web utilice una API basada en OpenGL ES 2.0 para llevar a cabo la representación 2D y 3D en un elemento canvas HTML en los navegadores que lo soporten sin el uso de plug-ins. WebGL consiste en código de control escrito en JavaScript y código de efectos especiales (código shader) que se ejecuta en la unidad de procesamiento gráfico de una computadora (GPU). Los elementos WebGL se pueden mezclar con otros elementos HTML y componerse con otras partes de la página o el fondo de la misma.

+ +

Este artículo le dará a conocer los conceptos básicos de WebGL. Se asume que ya tiene una comprensión de las matemáticas implicadas en gráficos 3D, y este artículo no pretende tratar de enseñar OpenGL en sí.

+ +

Preparando el renderizado en 3D

+ +

Lo primero que necesitas para poder usar WebGL para renderizar en 3D es un HTML canvas. El fragmento HTML a continuación establece un canvas y configura un controlador de eventos onload que se utilizarán para inicializar nuestro contexto WebGL.

+ +
<body onload="start()">
+  <canvas id="glcanvas" width="640" height="480">
+   Tu navegador parece no soportar el elemento HTML5 <code>&lt;canvas&gt;</code>.
+  </canvas>
+</body>
+
+ +

Preparando el contexto de WebGL

+ +

La función start(), en nuestro código JavaScript, es llamada después de que el documento fue cargado. Su misión es establecer el contexto WebGL y empezar a renderizar contenido.

+ +
var gl; // Un variable global para el contexto WebGL
+
+function start() {
+  var canvas = document.getElementById("glcanvas");
+
+  gl = initWebGL(canvas);      // Inicializar el contexto GL
+
+  // Solo continuar si WebGL esta disponible y trabajando
+
+  if (gl) {
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // Establecer el color base en negro, totalmente opaco
+    gl.enable(gl.DEPTH_TEST);                               // Habilitar prueba de profundidad
+    gl.depthFunc(gl.LEQUAL);                                // Objetos cercanos opacan objetos lejanos
+    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Limpiar el buffer de color asi como el de profundidad
+  }
+}
+
+ +

La primer cosa que hacemos aqui es obtener una referencia al canvas, ocultándolo en una variable llamada canvas. Obviamente si no necesitas referenciar repetidamente, deberías evitar guardar este valor globalmente, y solo guardarlo en una variable local o miembro de un objeto.

+ +

Una vez tenemos el canvas, llamamos a la función llamada initWebGL(); esta es una función que definiremos momentaneamente; su trabajo es inicializar el contexto WebGL.

+ +

Si el contexto es exitosamente inicializado, gl sera una referencia a este. En este caso, establecemos el color base a negro, después limpiamos el contexto a ese color. Después, el contexto es configurado estableciendo parametros. En este caso, estamos habilitando la prueba de profundidad y especificando que los objetos cercanos opacaran a los objetos lejanos.

+ +

Para los propositos de esta introducción al código, eso sera todo lo que haremos. Empezaremos a ver como crear algo después.

+ +

Crear el contexto de WebGL

+ +

La función initWebGL()se ve como esto:

+ +
function initWebGL(canvas) {
+  gl = null;
+
+  try {
+    // Tratar de tomar el contexto estandar. Si falla, retornar al experimental.
+    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+  }
+  catch(e) {}
+
+  // Si no tenemos ningun contexto GL, date por vencido ahora
+  if (!gl) {
+    alert("Imposible inicializar WebGL. Tu navegador puede no soportarlo.");
+    gl = null;
+  }
+
+  return gl;
+}
+
+
+ +

Para obtener el contexto WebGL de un canvas, pedimo el contexto llamado "webgl" del canvas. Si este falla, intentamos con el nombre "experimental-webgl". Si este igualmente, falla, mostramos una alerta permitiendo al usuario conocer que parece no tener soporte WebGL. Eso es todo al respecto. En este punto, gl es nulo (no hay ningun contexto WebGL disponible) o es una referencia al contexto WebGL en donde renderizaremos.

+ +
Nota: El nombre de contexto "experimental-webgl" es nombre temporal para usar durante el desarrollo de las especificaciones; el nombre "webgl" sera usado una vez se termine el desarrollo.
+ +

En este punto, tienes suficiente código para que el contexto WebGL, inicialice exitosamente, y deberias terminar con una gran cuadro negro y vacio, listo y esperando a recibir contenido .

+ +

Prueba este ejemplo si estas usando un navegador compatible con WebGL.

+ +

Cambiando el tamaño del contexto WebGL

+ +

Un nuevo contexto WebGL establecera el tamaño de su ventana a la altura y anchura del elemento canvas, sin CSS, al instante el contexto fue obtenido. Editando el estilo del elemento canvas cambiara su tamaño mostrado pero no cambiara la resolución de renderizado. Editando los atributos de anchura y altura de un elemento canvas después de crear el contexto tampoco cambiara el numero de pixeles a ser renderizados. Para cambiar la resolución en la cual WebGL renderiza, como cuando el usuario cambia el tamaño de ventana de un canvas de documento completo o quieres proveer ajustes graficos ajustables dentro de la aplicación, necesitaras llamar a la función del contexto WebGL llamada viewport() para hacer efectivo el cambio.

+ +

Para modificar la resolución renderizada de un contexto WebGL con las variables gl y canvas como fue usado en el ejemplo de arriba:

+ +
gl.viewport(0, 0, canvas.width, canvas.height);
+ +

Un lienzo experimentara escalado cuando es renderizado en una resolución diferente a la establecida en el estilo CSS . Cambiar el tamaño con CSS es muy util para salvar recursos renderizando a una baja resolución y permitiendo que el navegador aumente la escala; bajar la escala es posible, lo que producira un efecto de Super Sample AntiAliasing (SSAA) (con resultados sencillos y un costo alto de rendimiento). Es mejor usar el MSAA (Multi Sample AntiAliasing) e implementar un filtrado de texturas en el navegador del usuario, si es que esta disponible y es apropiado, en lugar de hacerlo por medio de la fuerza bruta, esperando que el algoritmo de reducción de la imagen del navegador produzca un resultado limpio.

+ +

También podría interesarte

+ + + +

{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

diff --git a/files/es/web/api/webgl_api/tutorial/index.html b/files/es/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..47a0aceb5e --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,42 @@ +--- +title: Tutoral de WebGL +slug: Web/API/WebGL_API/Tutorial +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

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

+
+ +

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

+ +

Antes de que inicies

+ +

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

+ +

 

+ +

En este tutorial

+ +
+
Getting started with WebGL
+
How to set up a WebGL context.
+
Adding 2D content to a WebGL context
+
How to render simple flat shapes using WebGL.
+
Using shaders to apply color in WebGL
+
Demonstrates how to add color to shapes using shaders.
+
Animating objects with WebGL
+
Shows how to rotate and translate objects to create simple animations.
+
Creating 3D objects using WebGL
+
Shows how to create and animate a 3D object (in this case, a cube).
+
Using textures in WebGL
+
Demonstrates how to map textures onto the faces of an object.
+
Lighting in WebGL
+
How to simulate lighting effects in your WebGL context.
+
Animating textures in WebGL
+
Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
+
diff --git a/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html b/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html new file mode 100644 index 0000000000..91e6bf3d37 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html @@ -0,0 +1,133 @@ +--- +title: Creación de objetos 3D utilizando WebGL +slug: Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL +tags: + - Cubo 3D + - Objetos 3D + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

+ +

Vamos a llevar nuestro cuadrado hacia la tercera dimensión agregando cinco caras más para crear el cubo. Para hacer esto de manera eficiente, vamos a cambiar el dibujado por medio de vertices utilizando el método {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} por el uso de un arreglo de vértices como tabla, esto por medio del llamado hacia   {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

+ +

Considerar: cada cara cuatro vértices para su definición, pero cada vértice es compartido por 3 caras. Realizando una lista con los 24 vértices es como nosotros haremos un menor intercambio de datos, después haremos referencia hacia cada vértic por medio se su índice en la lista en lugar de pasar el juego entero de coordenadas. Si te preguntas por qué necesitamos 24 vértices, y no solo 8, es porque cada esquina pertenece a tres caras de diferente color, y un solo vértice necesita tener un solo color específico, por lo tanto crearemos 3 copias de cada vértice en tres colores diferentes, uno por cada cara.

+ +

Definir la posición de los vértices del cubo

+ +

Primero, construiremos el buffer para la posición de los vértices actualizando el código en initBuffers(). Esto es muy parecido a lo como si fuera para el cuadraro, pero más lardo debido a que ahora son 24 vértices (4 por lado):

+ +
var vertices = [
+  // Cara delantera
+  -1.0, -1.0,  1.0,
+   1.0, -1.0,  1.0,
+   1.0,  1.0,  1.0,
+  -1.0,  1.0,  1.0,
+
+  // Cara trasera
+  -1.0, -1.0, -1.0,
+  -1.0,  1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0, -1.0, -1.0,
+
+  // Top face
+  -1.0,  1.0, -1.0,
+  -1.0,  1.0,  1.0,
+   1.0,  1.0,  1.0,
+   1.0,  1.0, -1.0,
+
+  // Bottom face
+  -1.0, -1.0, -1.0,
+   1.0, -1.0, -1.0,
+   1.0, -1.0,  1.0,
+  -1.0, -1.0,  1.0,
+
+  // Right face
+   1.0, -1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0,  1.0,  1.0,
+   1.0, -1.0,  1.0,
+
+  // Left face
+  -1.0, -1.0, -1.0,
+  -1.0, -1.0,  1.0,
+  -1.0,  1.0,  1.0,
+  -1.0,  1.0, -1.0
+];
+
+ +

Definir los colores de los vértices

+ +

Necesitamos construir un arreglo de colores por cada uno de los 24 vertices. Este código comienza por definir un color para cada cara, después utiliza un ciclo para ensamblar el arreglo de colores por cada uno de los vértices.

+ +
var colors = [
+  [1.0,  1.0,  1.0,  1.0],    // Cara delantera: blanco
+  [1.0,  0.0,  0.0,  1.0],    // Cara trasera: rojo
+  [0.0,  1.0,  0.0,  1.0],    // Cara superior: verde
+  [0.0,  0.0,  1.0,  1.0],    // Cara inferior: azul
+  [1.0,  1.0,  0.0,  1.0],    // Cara derecha: amarillo
+  [1.0,  0.0,  1.0,  1.0]     // Cara izquierda: morado
+];
+
+var generatedColors = [];
+
+for (j=0; j<6; j++) {
+  var c = colors[j];
+
+  for (var i=0; i<4; i++) {
+    generatedColors = generatedColors.concat(c);
+  }
+}
+
+var cubeVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+
+ +

Definir el elemento arreglo

+ +

Una ves que el vértice es generado, nosotros necesitamos contruir el elemento arreglo.

+ +
var cubeVerticesIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+// Este arrelgo define cada cara como 2 triángulos utilizando
+// los índices dentro de cada arreglo de vértices
+// para especificar cada posición en los tríangulos.
+
+var cubeVertexIndices = [
+  0,  1,  2,      0,  2,  3,    // enfrente
+  4,  5,  6,      4,  6,  7,    // atrás
+  8,  9,  10,     8,  10, 11,   // arriba
+  12, 13, 14,     12, 14, 15,   // fondo
+  16, 17, 18,     16, 18, 19,   // derecha
+  20, 21, 22,     20, 22, 23    // izquierda
+];
+
+// Ahora enviamos el elemento arreglo a  GL
+
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+
+ +

El arreglo cubeVertexIndices define cada cara como un par de triángulos, especificando cada vértice del triángulo como un índice dentro del arreglo de vértices en el cubo. Así el cubo es descrito como una colección de 12 triángulos. 

+ +

Dibujando el cubo

+ +

Para continuar necesitaremos agregar el código a nuestra función drawScene() esto para poder dibujar utilizando el buffer índice del cubo, agregaremos un nuevo llamado a  {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}}  y {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}como se muestra a continuación:

+ +
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+setMatrixUniforms();
+gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+ +

Desde que cada cara de nuestro cubo está compuesto de dos triángulos, tenemos 6 vértices en el cubo, se podría pensar que algunos de ellos son duplicados. Sin embargo, desde que nuestro arreglo índice se encuentra compuesto de enteros simples, esto no es una cantidad excesiva de intercambio de datos para pasar por cada cuadro de la animación.

+ +

En este punto ahora tenemos un cubo animado rebotando y rotando, cuenta con seis caras coloreadas vívidamente.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}

+ +

Ver el Código completo | Abrir esta demostración en una página nueva

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html new file mode 100644 index 0000000000..25192a8281 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html @@ -0,0 +1,91 @@ +--- +title: Utilizar los shaders para aplicar color en WebGL +slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

+ +

Habiendo creado un cuadrado en la demostración anterior, el siguiente paso es agregar algo de color. Nosotros podemos hacer esto a través de los shaders.

+ +

Aplicando color a los vértices

+ +

En WebGL, los objetos son construidos  utilizando conjuntos de vértices, donde cada uno de ellos posee una posición y un color. Por defecto, los colores de los otros pixeles (y todos sus atributos, incluyendo la posición) son procesados utilizando interpolación, creando automáticamente gradientes suaves. Anteriormente, nuestro sombreador de vértices (vertex shader) no aplicaba ningún color específico a los vértices. Entre éste y el fragmento sombreado que asigna el color blanco fijo a cada pixel, todo el cuadrado se renderizó como blanco sólido.

+ +

Vamos a suponer que queremos desplegar un gradiente donde cada una de las esquinas tiene diferente color: rojo, azul, verde, y blanco. La primera tarea es establecer estos colores en los cuatro vértices. Para hacer esto, primero necesitamos crear una matriz de colores de vértices, después la guardaremos dentro del buffer WebGL. Podemos realizarlo agregando el siguiente código a nuestra función initBuffers(): 

+ +
  var colors = [
+    1.0,  1.0,  1.0,  1.0,    // blanco
+    1.0,  0.0,  0.0,  1.0,    // rojo
+    0.0,  1.0,  0.0,  1.0,    // verde
+    0.0,  0.0,  1.0,  1.0     // azul
+  ];
+
+  squareVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+
+ +

El código comienza por crear una matriz JavaScript que contenga cuatro vectores de 4 valores, para cada uno de los colores del vértice. Entonces se reserva un nuevo buffer WebGL para almacenar esos colores y la matriz se convierte en floats (Números de tipo flotante) y se almacena dentro del buffer.

+ +

Para designar los colores a utilizar, el vertex shader necesita ser actualizado para extraer el color apropiado del buffer de color:

+ +
    <script id="shader-vs" type="x-shader/x-vertex">
+      attribute vec3 aVertexPosition;
+      attribute vec4 aVertexColor;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vColor = aVertexColor;
+      }
+    </script>
+
+ +

La diferencia principal aquí es que, por cada vértice, vamos a establecer su color usando varying en el fragmento de sombreado.

+ +

Coloreando los fragments

+ +

Anteriormente utilizábamos el fragment shader como un actualizador:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+      void main(void) {
+        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+      }
+    </script>
+
+ +

Según vayamos tomando el color interpolado para cada pixel, nosotros simplemente necesitamos cambiar esto para obtener el valor de la variable vColor:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+    	varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_FragColor = vColor;
+      }
+    </script>
+
+ +

Es un cambio simple; cada fragmento simplemente recibe el color interpolado basado en su posición relativa a los vértices, en lugar que de un valor establecido.

+ +

Dibujando usando los colores

+ +

Como siguiente, es necesario agregar código hacia la rutina initShaders() esto para inicializar el atributo de color para el shader program:

+ +
  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+
+ +

Then, drawScene() puede ser revisado para que utilice dichos colores cuando dibuje el cuadrado:

+ +

gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer); gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}

+ +

Ver el código completo | Abrir demostración en una nueva página

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html b/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html new file mode 100644 index 0000000000..9d2be2d61b --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html @@ -0,0 +1,209 @@ +--- +title: Utilizando texturas en WebGL +slug: Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL +tags: + - Texturas + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

+ +

Ahora que nuestro programa de prueba tiene un cubo, asignemos una textura en lugar de tener sus caras de un color solido.

+ +

Cargando texturas

+ +

La primera cosa que debemos hacer es añadir el codigo para cargar nuestra textura. en nuestro caso, estaremos usando una unica textura, asignada en las seis caras de nuestro cubo rotador, pero la misma tecnica puede ser utilizada para cualquier cantidad de texturas.

+ +
Note: Es importante señalar que la carga de texturas sigue reglas de dominio-cruzado; Es decir, sólo puede cargar texturas de sitios para los que su contenido tiene aprobación de CORS. Vea las texturas entre dominios a continuación para más detalles.
+ +

El codigo que carga la textura se ve como esto:

+ +
function initTextures() {
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = 'cubetexture.png';
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+ +

La rutina initTextures() comienza por crear el GL texture cubeTexture llamando la rutina GL {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Para cargar la textura desde un archivo de imagen, este luego crea un Objeto Imagen y carga en él el archivo de imagen que deseamos utilizar como nuestra textura. La rutina handleTextureLoaded() corre cuando la textura ha terminado de cargar.

+ +

Para realmente crear la textura, especificamos que la nueva textura es la textura actual en la que queremos operar vinculándola a gl.TEXTURE_2D. Despues de esto, la imagen cargada es pasada a  {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}} para escribir la informacion de la imagen en la textura.

+ +
Nota: El alto y hancho de las texturas deben, en la mayoría de las circunstancias, ser una potencia de dos píxeles (es decir, 1, 2, 4, 8, 16, etc.) en cada dimensión. Para la excepción, vea la sección: "Texturas no potencia de dos", a continuación.
+ +

Las siguientes dos líneas setean el filtrado para la textura; Esto controla cómo se filtra la imagen mientras se escala. En este caso estamos usando linear filtering cuando escala la imagen, y mipmap cuando se hace mas pequeña. Entonces el mipmap es generado llamando {{domxref("WebGLRenderingContext.generateMipMap()", "generateMipMap()")}}, Y terminamos diciéndole a WebGL que hemos terminado de manipular la textura vinculando null a gl.TEXTURE_2D.

+ +

Texturas no potencia-de-dos

+ +

Generalmente hablando, Utilizar texturas cuyos lados son una potencia de dos es ideal. Están almacenadas eficientemente en la memoria de video y no están restringidas en cómo podrían ser utilizadas. Las texturas creadas por el artista deben ser escaladas hacia arriba o hacia abajo a una potencia cercana a dos y, realmente, debería haber sido creada en potencia-de-dos para empezar. Cada lado debe ser: 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024 ó 2048 píxeles. Muchos dispositivos, pero no todos, pueden soportar 4096 píxeles; Algunos pueden soportar 8192 e incluso más.

+ +

Ocasionalmente, es difícil utilizar texturas en potencia-de-dos dada una circunstancia especifica. Si la fuente es alguna tercera parte, A menudo los mejores resultados vienen de modificar las imágenes usando canvas HTML5 en tamaños de potencia-de-dos antes de que se pasen a WebGL; Las coordenadas UV también pueden requerir ajuste si el estiramiento es notorio.

+ +

Pero, Si tiene que tener una textura no-potencia-de-dos (NPOT = no-power-of-two), WebGL incluye un limitado soporte nativo. Las texturas NPOT son en su mayoría útiles si las dimensiones de la textura debe ser la misma resolución que otra cosa, como la resolución de tu monitor, o si no vale la pena molestarse por las sugerencias anteriores. Resumiendo: estas texturas no se pueden usar con mipmapping y no deben repetirse (tile o wrap).

+ +

Un ejemplo de una textura es tilear una imagen de unos ladrillos para cubrir una pared de ladrillos.

+ +

Mipmapping y "UV tiling" pueden ser desactivados utilizando {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}} y cuando creas tu textura utilizando {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}}. Ésto permitirá las texturas NPOT a expensas de mipmapping, UV wrapping, UV tiling, y tu control sobre cómo el dispositivo procederá a manejar tu textura.

+ +
// gl.NEAREST is also allowed, instead of gl.LINEAR, as neither mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Prevents s-coordinate wrapping (repeating).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Prevents t-coordinate wrapping (repeating).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+ +

Una vez más, con estos parámetros, los dispositivos compatibles con WebGL aceptarán automáticamente cualquier resolución para esa textura (hasta sus dimensiones máximas). Sin realizar la configuración anterior, WebGL requiere que todas las muestras de texturas NPOT fallen al devolver el color "negro sólido": rgba (0,0,0,1).

+ +

Mapeando la textura en las caras

+ +

A este punto, la textura esta cargada y lista para usar. pero antes de utilizarla, Necesitamos asignar el mapeo de las coordenadas de textura a los vértices de las caras de nuestro cubo. Esto reemplaza todo el código previamente existente para configurar colores para cada una de las caras del cubo en initBuffers().

+ +
cubeVerticesTextureCoordBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+var textureCoordinates = [
+  // Front
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Back
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Top
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Bottom
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Right
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Left
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+              gl.STATIC_DRAW);
+
+ +

Primeramente, este codigo crea un GL buffer en el cual almacenaremos las coordenadas de la textura para cada cara, luego enlazamos ese buffer como el array en el cual escribiremos.

+ +

El array textureCoordinates define las coordenadas de textura correspondientes a cada vértice de cada cara. Tenga en cuenta que las coordenadas de textura van de 0,0 a 1,0; Las dimensiones de las texturas se normalizan a un rango de 0,0 a 1,0 independientemente de su tamaño real, con el propósito de mapeo de textura.

+ +

Una vez que hemos seteado la matriz de mapeo de textura, pasamos la matriz al búfer, de modo que GL tiene esos datos listos para su uso.

+ +

Actualizando los shaders

+ +

El shader -- y el código que inicializa los shaders -- también necesita ser actualizado para utilizar la textura en vez de un color solido.

+ +

Primero, echemos un vistazo a un cambio muy sencillo que se necesita en initShaders():

+ +
textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');
+gl.enableVertexAttribArray(textureCoordAttribute);
+gl.vertexAttribPointer(texCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+ +

Esto reemplaza el código que setea el atributo "vertex color" (color del vertice) con uno que contiene la coordenada de textura para cada vértice.

+ +

El vertex shader

+ +

A continuación, necesitamos reemplazar el "vertex shader" de modo que en lugar de buscar datos de color, busque los datos de coordenadas de textura.

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+  attribute vec2 aTextureCoord;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+  }
+</script>
+
+ +

El cambio clave aquí es que en lugar de buscar el color del vértice (vertex color), estamos estableciendo las coordenadas de textura; Esto indicará la ubicación dentro de la textura correspondiente al vértice.

+ +

El fragment shader

+ +

El fragment shader también debe actualizarse:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  varying highp vec2 vTextureCoord;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+  }
+</script>
+
+ +

En lugar de asignar un valor de color al fragment color, el fragment color se calcula recolectando el texel (es decir, el píxel dentro de la textura) que el muestreador dice que se corresponde mejor con la posición del fragment.

+ +

Dibujando el cubo texturado

+ +

El cambio a la función drawScene() es simple (excepto que por razones de claridad, he eliminado el código que hace que el cubo se traslade a través del espacio mientras se anima, en vez de eso, solo gira).

+ +

El código para mapear colores a la textura se ha ido, sustituido por esto:

+ +
gl.activeTexture(gl.TEXTURE0);
+gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+gl.uniform1i(gl.getUniformLocation(shaderProgram, 'uSampler'), 0);
+
+ +

GL proporciona 32 registros de textura; La primera de ellas es gl.TEXTURE0. Vincularemos nuestra textura previamente cargada a ese registro, a continuación, establecremos el shader sampler uSampler (especificado en el shader) para utilizar esa textura.

+ +

En este punto, el cubo giratorio debe estar listo.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}

+ +

Ver el código completo | Abrir esta demo en una nueva pestaña

+ +

Texturas entre dominios

+ +

La carga de texturas WebGL esta sujeta a controles de acceso entre dominios. Para que su contenido cargue una textura de otro dominio, La aprobacion CORS debe ser obtenida. Ver control de acceso HTTP para mas detalles sobre CORS.

+ +

Ver este articulo hacks.mozilla.org para una explicacion de como usar imágenes CORS-approved como texturas WebGL , con un ejemplo auto-contenido.

+ +
+

Nota: El soporte CORS para texturas WebGL y el atributo crossOrigin para elementos de imagen se implementan en {{Gecko ("8.0")}}.

+
+ +

Canvas 2D contaminados (Solo lectura) no pueden ser utilizados como texturas WebGL. una 2D {{ HTMLElement("canvas") }} se convierte en contaminada, por ejemplo, cuando una imagen de dominio cruzado (cross-domain) es dibujada en el.

+ +
+

Nota: El soporte de CORS para Canvas 2D drawImage se implementa en {{Gecko ("9.0")}}. Esto significa que el uso de una imagen de dominio cruzado con aprobación de CORS ya no pinta el lienzo 2D, por lo que el lienzo 2D sigue siendo utilizable como fuente de una textura WebGL. 

+
+ +
+

Nota: El soporte de CORS para videos de dominio cruzado y el atributo de crossorigin para elementos {{HTMLElement("video")}} se implementa en {{Gecko ("12.0")}}.

+
+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/es/web/api/webrtc_api/index.html b/files/es/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..d4de66d803 --- /dev/null +++ b/files/es/web/api/webrtc_api/index.html @@ -0,0 +1,126 @@ +--- +title: API de WebRTC +slug: Web/API/WebRTC_API +tags: + - API + - WebRTC +translation_of: Web/API/WebRTC_API +--- +

{{WebRTCSidebar}}

+ +

WebRTC (Web real-time communications o comunicaciones web en tiempo real) es una tecnología que permite a aplicaciones y sitios web capturar y opcionalmente retransmitir audio/vídeo, así como intercambiar datos arbitrarios entre navegadores sin necesidad de un intermediario. El conjunto de estándares que comprende WebRTC hace posible compartir datos y realizar teleconferencias de igual-a-igual (peer-to-peer), sin requerir que el usuario instale complementos (plug-ins) o cualquier otro software de terceros.

+ +

WebRTC consta de varias API y protocolos interrelacionados que trabajan juntos para lograr esto. La documentación que encontrará aquí le ayudará a entender los fundamentos de WebRTC, cómo configurarlo y usar tanto datos como conexiones de medios, etc.

+ +

Referencia

+ +
+ +
+ +

Guías

+ +
+
Visión general de la arquitectura de WebRTC
+
Debajo de las API que los desarrolladores usan para crear y usar conexiones WebRTC se encuentran varios protocolos de red y estándares de conectividad. Esta breve descripción cubre estos estándares.
+
Lo esencial de WebRTC
+
Este artículo le muestra la creación de una aplicación RTC a través del navegador. Al final, debe tener un canal de datos punto a punto y un canal de medios en funcionamiento.
+
Protocolos de WebRTC
+
Este artículo presenta los protocolos sobre los cuales se construye la API WebRTC.
+
Conectividad de WebRTC
+
Este artículo describe cómo los diversos protocolos relacionados con WebRTC interactúan entre sí para crear una conexión y transferir datos y / o medios entre pares.
+
Nociones sobre la API WebRTC
+
WebRTC consta de varias API y protocolos interrelacionados que trabajan juntos para admitir el intercambio de datos y medios entre dos o más pares. Este artículo proporciona una breve descripción de cada una de estas API y para qué sirve.
+
Duración de una sesión de WebRTC
+
WebRTC le permite construir una comunicación punto a punto de datos arbitrarios, audio o video, o cualquier combinación de los mismos, en una aplicación de navegador. En este artículo, veremos la duración de una sesión de WebRTC, desde establecer la conexión hasta cerrarla cuando ya no sea necesaria.
+
+ +

Tutoriales

+ +
+
Improving compatibility using WebRTC adapter.js
+
The WebRTC organization provides on GitHub the WebRTC adapter to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.
+
Taking still photos with WebRTC
+
This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.
+
A simple RTCDataChannel sample
+
The {{domxref("RTCDataChannel")}} interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the WebSocket API, so that the same programming model can be used for each.
+
+ + + +

Protocolos

+ +

WebRTC-proper protocols

+ + + + + + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebRTC 1.0')}}{{Spec2('WebRTC 1.0')}}The initial definition of the API of WebRTC.
{{SpecName('Media Capture')}}{{Spec2('Media Capture')}}The initial definition of the object conveying the stream of media content.
{{SpecName('Media Capture DOM Elements')}}{{Spec2('Media Capture DOM Elements')}}The initial definition on how to obtain stream of content from DOM Elements
+ +

In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under resources.

+ + + + diff --git a/files/es/web/api/webrtc_api/protocols/index.html b/files/es/web/api/webrtc_api/protocols/index.html new file mode 100644 index 0000000000..efa90077fa --- /dev/null +++ b/files/es/web/api/webrtc_api/protocols/index.html @@ -0,0 +1,38 @@ +--- +title: WebRTC protocols +slug: Web/API/WebRTC_API/Protocols +translation_of: Web/API/WebRTC_API/Protocols +--- +

{{WebRTCSidebar}}

+ +

Este artículo presenta los protocolos sobre los cuales se construye la API WebRTC.

+ +

ICE

+ +

Interactive Connectivity Establishment (ICE) es un marco para permitir que su navegador web se conecte con sus compañeros. Hay muchas razones por las que una conexión directa de un par a otro simplemente no funcionará. Debe evitar los firewalls que evitarían abrir conexiones, darle una dirección única si, como en la mayoría de las situaciones, su dispositivo no tiene una dirección IP pública y transmitir datos a través de un servidor si su enrutador no le permite conectarse directamente con sus pares. ICE utiliza algunas de las siguientes técnicas que se describen a continuación para lograr esto:

+ +

STUN

+ +

Session Traversal Utilities for NAT (STUN) (acrónimo dentro de un acrónimo) es un protocolo para descubrir su dirección pública y determinar cualquier restricción en su enrutador que impida una conexión directa con un par.

+ +

El cliente enviará una solicitud a un servidor STUN en Internet que responderá con la dirección pública del cliente y si el cliente está accesible detrás del NAT del enrutador.

+ +

An interaction between two users of a WebRTC application involving a STUN server.

+ +

NAT

+ +

Network Address Translation (NAT) se usa para dar a su dispositivo una dirección IP pública. Un enrutador tendrá una dirección IP pública y cada dispositivo conectado al enrutador tendrá una dirección IP privada. Las solicitudes se traducirán de la IP privada del dispositivo a la IP pública del enrutador con un puerto único. De esa manera, no necesita una IP pública única para cada dispositivo, pero aún puede descubrirse en Internet.

+ +

Algunos enrutadores tendrán restricciones sobre quién puede conectarse a dispositivos en la red. Esto puede significar que aunque tengamos la dirección IP pública encontrada por el servidor STUN, nadie puede crear una conexión. En esta situación, debemos recurrir a TURN.

+ +

TURN

+ +

Algunos enrutadores que utilizan NAT emplean una restricción llamada "NAT simétrica". Esto significa que el enrutador solo aceptará conexiones de pares a los que se haya conectado previamente.

+ +

Traversal Using Relays around NAT (TURN) está destinado a eludir la restricción NAT simétrica al abrir una conexión con un servidor TURN y transmitir toda la información a través de ese servidor. Crearía una conexión con un servidor TURN y le diría a todos los pares que envíen paquetes al servidor que luego se le reenviarán. Obviamente, esto conlleva algunos gastos generales, por lo que solo se usa si no hay otras alternativas.

+ +

An interaction between two users of a WebRTC application involving STUN and TURN servers.

+ +

SDP

+ +

Session Description Protocol (SDP) es un estándar para describir el contenido multimedia de la conexión, como la resolución, los formatos, los códecs, el cifrado, etc., de modo que ambos pares puedan entenderse una vez que se transfieren los datos. Esto es, en esencia, los metadatos que describen el contenido y no el contenido de los medios en sí.

diff --git a/files/es/web/api/websocket/close_event/index.html b/files/es/web/api/websocket/close_event/index.html new file mode 100644 index 0000000000..da70792cdc --- /dev/null +++ b/files/es/web/api/websocket/close_event/index.html @@ -0,0 +1,72 @@ +--- +title: close +slug: Web/API/WebSocket/close_event +translation_of: Web/API/WebSocket/close_event +--- +

El manejador close es ejecutado cuando una conexión con un websocket es cerrada.

+ +

General info

+ +
+
Specification
+
WebSocket
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
WebSocket
+
Default Action
+
None
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}El objetivo del evento (el objetivo superior en el árbol DOM).
type {{readonlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si el evento normalmente burbujea o no.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si el evento es cancelable o no.
+ + + + + +

See also

+ + diff --git a/files/es/web/api/websocket/index.html b/files/es/web/api/websocket/index.html new file mode 100644 index 0000000000..b281258e99 --- /dev/null +++ b/files/es/web/api/websocket/index.html @@ -0,0 +1,356 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +translation_of: Web/API/WebSocket +--- +
{{APIRef("Web Sockets API")}}{{SeeCompatTable}}
+ +
 
+ +
El objeto WebSocket provee la API para la creación y administración de una conexión WebSocket a un servidor, así como también para enviar y recibir datos en la conexión.
+ +
 
+ +
El constructor de WebSocket acepta un parámetro requerido y otro opcional.
+ +

 

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+
+ +

 

+ +
+
url
+
La URL a la cual se conecta, debe ser la URL con la cual el servidor WebSocket debe responder.
+
protocols {{optional_inline}}
+
Permite cualquier caso, desde un simple protocolo o un arreglo de cadenas de texto. Estas cadenas de texto son usadas para indicar subprotocolos, en los cuales un único servidor puede implementar múltiples subprotocolos para el WebSocket (por ejemplo, tu podrías esperar que un servido gestione diferentes tipos de interacciones dependiendo de un tipo específico de protocolo). Si no especificas un subprotocolo, se asume una cadena de texto vacía.
+
 
+
+ +

El constructor puede levantar excepciones:

+ +
+
SECURITY_ERR
+
El puerto en el cual la conexión se realiza se encuentra bloqueado.
+
+ +

Revisión de Métodos

+ + + + + + + + + + +
void close(in optional unsigned long code, in optional DOMString reason);
void send(in DOMString data);
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescricción
binaryType{{DOMXref("DOMString")}} +

Una cadena de texto indicando el tipo de dato binario que es transmitido por la conexión. Debe ser de cualquier manera "blob" si es se unas objetos DOM {{domxref("Blob")}}  o bien "arraybuffer" {{jsxref("ArrayBuffer")}} si se usan otro tipo de objetos

+
bufferedAmountunsigned long +

La cantidad de bytes de data que pueden ser almacenadas en cola utilizando llamadas a {{manch("send")}} pero que aún no se han transmitido a la red. Este valor se reestablece a cero una vez que toda la información ha sido enviada. Este valor no vuelve a cero cuando la conexión es cerrada; si mantientes llamando {{manch("send")}}, continuará acumulandose. Solo de lectura.

+
extensions{{DOMXref("DOMString")}} +

Las extensiones seleccionadas por el servidor. Esto solamente puede ser un string vacío o bien una lista de extensiones que es negociada por la conexión.

+
onclose{{domxref("EventListener")}} +

Un monitor de eventos que atiende una llamada cuando la conexión del WebSocket cambia a un estado CERRADO (CLOSED). El monitor recibe un CloseEvent llamado "cerrado".

+
onerror{{domxref("EventListener")}} +

Un monitor de eventos que es llamado cuando un error ocurre. Esto es un evento simple llamado "error"

+
onmessage{{domxref("EventListener")}} +

Un monitor de eventos que es llamado cuando un mensaje es recibido desde un servidor. El monitor recibe un objeto MessageEvent llamado "mensaje".

+
onopen{{domxref("EventListener")}}Un monitor de eventos que es llamado cuando el estado readyState de la conexión Websocket cambia a OPEN. Esto indica que la conexión está lista para enviar y recibir datos. El evento es uno simple con el nombre "open".
protocol{{DOMXref("DOMString")}}Una cadena indicando el nombre del sub-protocolo que el servidor ha seleccionado. Este puede ser una de las cadenas especificadas en el parámetro protocols cuando se ha creado el objeto Websocket.
readyStateunsigned shortEl estado actual de la conexión. Este es uno de {{anch("Ready state constants")}}. Solo lectura.
url{{DOMXref("DOMString")}}La URL como la resuelve el constructor. Esto siempre es una URL absoluta. Solo lectura.
+ +

Constantes

+ +

Ready state constants

+ +

Estas constantes son usadas por el atributo readyState para describir el estado de la conexión WebSocket.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValorDescripción
CONNECTING0La conexión no está aún abierta.
OPEN1La conexión está abierta y lista para comunicar.
CLOSING2La conexión está siendo cerrada.
CLOSED3La conexión está cerrada o no puede ser abierta.
+ +

Métodos

+ +

close()

+ +

Cierra la conexión o intento de conexión del WebSocket si lo hay. Si la conexión ya está cerrada, no hace nada.

+ +
void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+
+ +

Parámetros

+ +
+
code {{optional_inline}}
+
Un valor numérico indicando el código de estado que explica porqué la conexión está siendo cerrada. Si no se especifica este parámetro, se asume un valor por defecto de 1000 (que indica un cierre normal por "transacción completa") . Ver códigos de estado en la página de CloseEvent para la lista de valores permitidos.
+
reason {{optional_inline}}
+
Una cadena legible explicando porqué la conexión está siendo cerrada. Esta cadena no puede ser mayor que 123 bytes de texto UTF-8 (no caracteres)
+
+ +

Exceptions thrown

+ +
+
INVALID_ACCESS_ERR
+
Se ha especificado un código erróneo.
+
SYNTAX_ERR
+
La reason cadena es demasiado larga o continene caracteres no validos.
+
+ +
+

Note: En Gecko, este métido no soporta ningun parámetro antes de Gecko 8.0 {{geckoRelease("8.0")}}.

+
+ +

send()

+ +

Transmite datos al servidor sobre la conexión WebSocket.

+ +
void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+
+ +

Parametros

+ +
+
data
+
Una cadena de texto que enviar al servidor.
+
+ +

Excepciones

+ +
+
INVALID_STATE_ERR
+
La conexión no está abierta en este momento.
+
SYNTAX_ERR
+
La data tiene caracteres no válidos que no se pueden decodificar.
+
+ +
+

Note: La implementación del método send() en el  motor de renderizado Gecko puede cambiar de la especificación en {{Gecko("6.0")}}; Gecko devuelve un boolean indicando si la conexión esta todavía abierta (y, por extensión, que los datos son encolados o trasmitidos satisfactoriamente). Esto ha sido corregido en {{Gecko("8.0")}}.

+ +

A partir de {{Gecko("11.0")}}, implementa {{jsxref("ArrayBuffer")}} pero no tipos de datos {{domxref("Blob")}}.

+
+ +

Ejemplo

+ +
// Crea una nueva conexión.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Abre la conexión
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Escucha por mensajes
+socket.addEventListener('message', function (event) {
+    console.log('Message from server', event.data);
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}{{Spec2("Websockets")}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sub-protocol support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("7.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Sub-protocol support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the constructor is prefixed; you will need to use MozWebSocket(): var mySocket = new MozWebSocket("http://www.example.com/socketserver");

+ +

The extensions attribute was not supported in Gecko until Gecko 8.0.

+ +

Prior to Gecko 11.0 {{geckoRelease("11.0")}}, outbound messages sent using the send() method were limited to 16 MB. They can now be up to 2 GB in size.

+ +

Referencias adicionales

+ + diff --git a/files/es/web/api/websocket/onerror/index.html b/files/es/web/api/websocket/onerror/index.html new file mode 100644 index 0000000000..69a523b1b6 --- /dev/null +++ b/files/es/web/api/websocket/onerror/index.html @@ -0,0 +1,50 @@ +--- +title: WebSocket.onerror +slug: Web/API/WebSocket/onerror +tags: + - API + - Error + - Propiedad + - Referencia + - Web API + - WebSocket +translation_of: Web/API/WebSocket/onerror +--- +

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

+ +

La propiedad WebSocket.onerror, del tipo {{domxref("EventHandler")}}, será llamada cuando se dé un error. Esta llamada recibirá un tipo {{domxref("Event")}} como argumento.

+ +

Sintaxis

+ +
aWebSocket.onerror = function(event) {
+  console.error("Error en el WebSocket detectado:", event);
+};
+ +

Valor

+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', '#handler-websocket-onerror', 'WebSocket: onerror')}}{{Spec2('HTML WHATWG')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.WebSocket.onerror")}}

diff --git a/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html b/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html new file mode 100644 index 0000000000..333e8e8830 --- /dev/null +++ b/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html @@ -0,0 +1,244 @@ +--- +title: Escribiendo un servidor WebSocket en C# +slug: Web/API/WebSockets_API/Escribiendo_servidor_WebSocket +tags: + - HTML5 + - Tutorial + - WebSockets +translation_of: Web/API/WebSockets_API/Writing_WebSocket_server +--- +

Introducción

+ +

Si deseas utilizar la API WebSocket, es conveniente si tienes un servidor. En este artículo te mostraré como puedes escribir uno en C#. Tú puedes hacer esto en cualquier lenguaje del lado del servidor, pero para mantener las cosas simples y más comprensibles, elegí el lenguaje de Microsoft.

+ +

Este servidor se ajusta a RFC 6455 por lo que solo manejará las conexiones de Chrome version 16, Firefox 11, IE 10 and superiores.

+ +

Primeros pasos

+ +

WebSocket se comunica a través de conexiones TCP (Transmission Control Protocol), afortunadamente C# tiene una clase TcpListener la cual hace lo que su nombre sugiere. Esta se encuentra en el namespace System.Net.Sockets.

+ +
+

Es una buena idea usar la instrucción using para escribir menos. Eso significa que no tendrás que re escribir el namespace de nuevo en cada ocasión.

+
+ +

TcpListener

+ +

Constructor:

+ +
TcpListener(System.Net.IPAddress localaddr, int port)
+ +

localaddr especifica la IP a escuchar y port especifica el puerto.

+ +
+

Para crear un objeto IPAddress desde un string, usa el método estático Parse de IPAddres.

+
+ +

Métodos:

+ + + +

Aquí está como utilizar lo que hemos aprendido:

+ +
​using System.Net.Sockets;
+using System.Net;
+using System;
+
+class Server {
+    public static void Main() {
+        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
+
+        server.Start();
+        Console.WriteLine("El server se ha iniciado en 127.0.0.1:80.{0}Esperando una conexión...", Environment.NewLine);
+
+        TcpClient client = server.AcceptTcpClient();
+
+        Console.WriteLine("Un cliente conectado.");
+    }
+}
+
+ +

TcpClient

+ +

Métodos:

+ + + +

Propiedades:

+ + + +

NetworkStream

+ +

Métodos:

+ +
Write(Byte[] buffer, int offset, int size)
+ +

Escribe bytes desde el buffer; el offset y el size determinan la longitud del mensaje.

+ +
Read(Byte[] buffer, int offset, int size)
+ +

Lee bytes al buffer; el offset y el size determinan la longitud del mensaje.

+ +

Ampliemos nuestro ejemplo anterior.

+ +
TcpClient client = server.AcceptTcpClient();
+
+Console.WriteLine("Un cliente conectado.");
+
+NetworkStream stream = client.GetStream();
+
+//enter to an infinite cycle to be able to handle every change in stream
+while (true) {
+    while (!stream.DataAvailable);
+
+    Byte[] bytes = new Byte[client.Available];
+
+    stream.Read(bytes, 0, bytes.Length);
+}
+ +

Handshaking

+ +

Cuando un cliente se conecta al servidor, envía una solicitud GET para actualizar la conexión al WebSocket desde una simple petición HTTP. Esto es conocido como handshaking.

+ +

Este código de ejemplo detecta el GET desde el cliente. Nota que esto bloqueará hasta los 3 primeros bytes del mensaje disponible. Soluciones alternativas deben ser investigadas para ambientes de producción.

+ +
using System.Text;
+using System.Text.RegularExpressions;
+
+while(client.Available < 3)
+{
+   // wait for enough bytes to be available
+}
+
+Byte[] bytes = new Byte[client.Available];
+
+stream.Read(bytes, 0, bytes.Length);
+
+//translate bytes of request to string
+String data = Encoding.UTF8.GetString(bytes);
+
+if (Regex.IsMatch(data, "^GET")) {
+
+} else {
+
+}
+ +

Esta respuesta es fácil de construir, pero puede ser un poco díficil de entender. La explicación completa del handshake al servidor puede encontrarse en  RFC 6455, section 4.2.2. Para nuestros propósitos, solo construiremos una respuesta simple.

+ +

Debes:

+ +
    +
  1. Obtener el valor de "Sec-WebSocket-Key" sin espacios iniciales ni finales de el encabezado de la solicitud
    2. +
  2. Concatenarlo con "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    3. +
  3. Calcular el código SHA-1 y Base64
    4. +
  4. Escribe el valor Sec-WebSocket-Accept en el encabezado como parte de la respuesta HTTP.
    5. +
+ +
if (new Regex("^GET").IsMatch(data)) {
+    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
+        + "Connection: Upgrade" + Environment.NewLine
+        + "Upgrade: websocket" + Environment.NewLine
+        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
+            SHA1.Create().ComputeHash (
+                Encoding.UTF8.GetBytes (
+                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
+                )
+            )
+        ) + Environment.NewLine
+        + Environment.NewLine);
+
+    stream.Write(response, 0, response.Length);
+}
+
+ +

Decoding messages

+ +

Luego de un handshake exitoso el cliente puede enviar mensajes al servidor, pero estos serán codificados.

+ +

Si nosotros enviamos "MDN", obtendremos estos bytes:

+ + + + + + + + + + + + + + + +
129131618435611216109
+ +

- 129:

+ + + + + + + + + + + + + + + + + + + + +
FIN (¿Es el mensaje completo?)RSV1RSV2RSV3Opcode
10000x1=0001
+ +

FIN: Puedes enviar tu mensaje en marcos, pero ahora debe mantener las cosas simples.
+ Opcode 0x1 significa que es un texto. Lista completa de Opcodes

+ +

- 131:

+ +

Si el segundo byte menos 128 se encuentra entre 0 y 125, esta es la longitud del mensaje. Si es 126, los siguientes 2 bytes (entero sin signo de 16 bits), si es 127, los siguientes 8 bytes (entero sin signo de 64 bits) son la longitud.

+ +
+

Puedo tomar 128, porque el primer bit siempre es 1.

+
+ +

- 61, 84, 35 y 6 son los bytes de la clave a decodificar. Cambian en cada oportunidad.

+ +

- Los bytes codificados restantes son el mensaje.

+ +

Algoritmo de decodificación

+ +

byte decodificado = byte codificado XOR (posición del byte codificado Mod 4) byte de la clave

+ +

Ejemplo en C#:

+ +
Byte[] decoded = new Byte[3];
+Byte[] encoded = new Byte[3] {112, 16, 109};
+Byte[] key = Byte[4] {61, 84, 35, 6};
+
+for (int i = 0; i < encoded.Length; i++) {
+    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
+}
+ +

Relacionado

+ + + +
 
diff --git a/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html b/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html new file mode 100644 index 0000000000..1261f75bec --- /dev/null +++ b/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html @@ -0,0 +1,246 @@ +--- +title: Escribir servidores WebSocket +slug: Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +

{{gecko_minversion_header("2")}}

+ +

Introducción

+ +

Un servidor WebSocket es simplemente una aplicación TCP que escucha en cualquier puerto de un servidor que sigue un protocolo específico. La tarea de crear un servidor propio personalizado suele asustar a los desarrolladores, sin embargo puede resultar muy fácil implementar un servidor WebSocket en la plataforma que elijas.

+ +

Un servidor WebSocket puede ser escrito en cualquier lenguaje de programación Server-Side que sea soporte Berkeley Sockets, como por ejemplo C++ o Python o inclusive PHP y JavaScript para servidores. Este no va a ser un tutorial para ningún lenguaje espefícamente sino que te ayudará a escribir tu propio servidor.
+
+ Necesitarás conocer como trabaja el protocolo HTTP y una experiencia intermedia en programación. Dependiendo de las capacidades de tu lenguaje puede ser necesario tener conocimientos en sockets TCP. Esta guía te dará el conocimiento necesario para escribir un servidor con WebSocket.

+ +
+

Lea las últimas especificaciones oficiales de WebSocket RFC 6455. Las secciones 1 y 4-7 son especialmente interesantes para personas que deseen implementar servidores. La sección 10 abarca temas de seguridad y definitivamente deberías leerla antes de exponer tu servidor a la red.

+
+ +

Un servidor WebSocket es explicado a un muy bajo nivel aquí. Los servidores WebSocket usualmente estan separados y especializados (por una cuestión de balance de cargas y otra razones prácticas), por lo tanto deberías usar un Reverse Proxy (semejante a un servidor HTTP común) casi siempre para detectar los Handshakes de WebSocket, preprocesarlos, y reenviar los datos de los clientes al servidor WebSocket real.
+  

+ +

Paso 1: El Handshake del WebSocket

+ +

Antes que nada, el servidor debe escuchar las conexiones entrantes usando un socket TCP estandar. Dependiendo de tu plataforma, esto puede ser manejado por tí. Por ejemplo asumamos que tu servidor esta escuchando la dirección example.com en el puerto 8000, y tu socket en el servidor responde a la petición GET con /chat.

+ +
+

Advertencia: El servidor puede escuchar cualquier puerto que elijas, pero si elijes un puerto diferente al 80 o 443 podría haber problemas con los firewalls y proxies. Suele suceder con el puerto 443 tambien pero para eso se necesita un conexión segura (TLS/SSL). También se debe aclarar que la mayoría de los navegadores (como Firefox 8 o superiores) no permiten conexiones a servidores WebSocket sin seguridad que se realicen desde páginas web con seguridad (HTTPS). 

+
+ +

El Handshake es el puente desde HTTP a WS. En el Handshake se negocian los detalles de la conexión y cualquier de las partes pueden abandonar el proceso antes de completar dicha conexión si los términos no son favorables. El servidor debe ser cuidadoso al analizar lo que el cliente pide, de lo contrario podrían introducirse problemas de seguridad.

+ +

Petición de Handshake en el cliente

+ +

A pesar de que estamos creando un servidor, un cliente es quien tiene que comenzar el proceso de Handshake de WebSocket. Entonces tú tienes que saber cómo interpretar la petición del cliente. El cliente enviará una linda petición HTTP estandar que lucirá algo asi (la versión del HTTP debe ser 1.1 o mayor y el método debe ser GET):

+ +
GET /chat HTTP/1.1
+Host: example.com:8000
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+
+ +

El cliente puede solicitar aquí extensiones y/o sub protocolos; vea Misceláneos para más detalles. También, cabeceras comunes como User-Agent, Referer, Cookie, or cabeceras de autenticación podrían ser incluidos. Haz lo que quieras con ellos; no pertencen a WebSocket. También puedes ignorarlos. En muchas configuraciones comunes, un proxy inverso ya ha tratado con ellos.

+ +

Si alguna cabecera no se entiende o posee un valor incorrecto, el servidor debe responder "400 Bad Request" e inmediatamente cerrar la conexión. Normalmente, también puede dar la razón porque falló el handshake en el cuerpo de la respuesta HTTP, pero el mensaje podría no ser mostrado (el browser no lo muestra). Si el servidor no comprende que la versión del WebSockets, debería enviar una cabecera Sec-WebSocket-Version que contenga la(s) versión(es) no entendidas. (Esta guía explica v13, la más nueva). Ahora, vamos a ver la cabecera más curiosa, Sec-WebSocket-Key.

+ +
+

Tip: Todos los navegadores deben enviar una cabecera Origin. Tu puedes usar esta cabecera por seguridad (revisando por el mismo origen, listas blancas/ listas negras, etc.) y enviar un 403 Forbidden si no te gusta lo que ves. Sin embargo, se advierte que los agentes no navegadores pueden enviar un falso Origin.  La mayoría de las aplicaciones rechazaran las solicitudes sin esta cabecera.

+
+ +
+

Tip: The request-uri (/chat here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, example.com/chat could invoke a multiuser chat app, while /game on the same server might invoke a multiplayer game.

+
+ +
+

Note: Regular HTTP status codes can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).

+
+ +

Respuesta de Handshake del servidor

+ +

Después de la petición, el servidor debería enviar una linda respuesta (aunque todavía en formato HTTP) que se verá asi (hay que recordar que la cabecera termina con \r \n y agrega un \r \n extra después del último):

+ +
HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+
+ +

Adicionalmente, el servidor puede decidir respecto de las solicitudes "extension/subprotocol" en este punto (ver Miscelláneos para más detalles). La cabecera Sec-WebSocket-Accept es interesante. El servidor debe derivarla a partir de la cabecera Sec-WebSocket-Key enviada anteriormente por el cliente. Para lograr esto se deben concatenar la cabecera del cliente Sec-WebSocket-Key y el string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (es un "magic string"), calcular el hash SHA-1 del resultado y devolver el string codificado en base64 de este hash.

+ +
+

FYI: Este aparentemente complicado e innecesario proceso se realiza de manera que sea obvio para el cliente si el servidor soporta o noWebSockets. Esto es importante de realizar, ya que podrían crearse problemas de seguridad si el servidor acepta conexiones WebSockets pero interpreta los datos como solicitudes HTTP.

+
+ +

Así, si la cabecera Sec-WebSocket-Key era "dGhlIHNhbXBsZSBub25jZQ==", la correspondiente respuesta Sec-WebSocket-Accept será "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Una vez que el servidor envía estas cabeceras, el "handshake" se considera completo y puedes comenzar a intercambiar datos.

+ +
+

El servidor puede enviar otras cabeceras como Set-Cookie, o solicitar autenticación o redirigir mediante otros status codes antes de responder al handshake.

+
+ +

Llevando registro de los clientes

+ +

Esto no está directamente relacionado con el protocolo WebSocket, pero no está de más mencionarlo: tu servidor debe llevar el registro de los sockets de los clientes, de manera de no realizar handshakes constantemente con los clientes que ya han completado este proceso. La misma dirección IP cliente puede intentar conectarse múltiples veces (pero el servidor puede denegar la conexión si se intentan demasiadas conexiones con el objetivo de evitar ataques ataques DoS).

+ +

Paso 2: Intercambiando Data Frames

+ +

Tanto el cliente como el servidor puede decidir enviar un mensaje en cualquier momento — ese es el encanto de los WebSockets. Sin embargo, extraer información de esos denominados "frames" o tramas de datos no es una experiencia muy mágica. Aunque todos los frames siguen el mismo formato específico, los datos que van del cliente al servidor se enmascaran utilizando el cifrado XOR (con una clave de 32 bits). La sección 5 de la especificación describe esto en detalle.

+ +

Formato

+ +

Cada trama de datos (desde el cliente al servidor o viceversa) sigue este mismo formato:

+ +
 0                   1                   2                   3
+ 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+
+ +

Los RSV1-3 se pueden ignorar, son para las extensiones.

+ +

El bit MASK simplemente indica si el mensaje está codificado. Los mensajes del cliente deben estar enmascarados, por lo que tu servidor debe esperar que valga 1. (De hecho, la sección 5.1 de las espeficicaciones  dice que tu servidor debe desconectarse de un cliente si ese cliente envía un mensaje sin enmascarar). Cuando se envía una trama al cliente, no lo ocultes y no pongas el bit de la máscara. Te explicaremos el enmascaramiento más tarde. Nota: Tienes que enmascarar los mensajes incluso cuando uses un socket seguro.

+ +

El campo opcode define cómo interpretar los datos de la carga útil:0x0 para continuar, 0x1 para texto (que siempre se codifica con UTF-8), 0x2 para datos binarios, otros llamados "códigos de control" se explican más tarde. En esta versión de WebSockets, de 0x3 a 0x7 y de 0xB a 0xF no tienen significado.

+ +

El bit FIN indica si este es el último mensaje de una serie. Si es 0, el servidor seguirá escuchando más partes del mensaje; de lo contrario, el servidor debería considerar el mensaje entregado. Más sobre esto después.

+ +

Decoding Payload Length

+ +

To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:

+ +
    +
  1. Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're done. If it's 126, go to step 2. If it's 127, go to step 3.
    2. +
  2. Read the next 16 bits and interpret those as an unsigned integer. You're done.
    3. +
  3. Read the next 64 bits and interpret those as an unsigned integer. You're done.
    4. +
+ +

Reading and Unmasking the Data

+ +

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

+ +
var DECODED = "";
+for (var i = 0; i < ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+}
+ +

Now you can figure out what DECODED means depending on your application.

+ +

Message Fragmentation

+ +

The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

+ +

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

+ +
Client: FIN=1, opcode=0x1, msg="hello"
+Server: (process complete message immediately) Hi.
+Client: FIN=0, opcode=0x1, msg="and a"
+Server: (listening, new message containing text started)
+Client: FIN=0, opcode=0x0, msg="happy new"
+Server: (listening, payload concatenated to previous message)
+Client: FIN=1, opcode=0x0, msg="year!"
+Server: (process complete message) Happy new year to you too!
+ +

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

+ +

Pings and Pongs: The Heartbeat of WebSockets

+ +

At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.

+ +

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

+ +
+

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

+
+ +

Step 4: Closing the connection

+ +

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. 

+ +

Miscellaneous

+ +
+

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

+
+ +

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

+ +

Extensions

+ +
+

This section needs expansion. Please edit if you are equipped to do so.

+
+ +

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

+ +
+

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

+
+ +

TODO

+ +

Subprotocols

+ +

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

+ +
+

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

+
+ +

A client has to ask for a specific subprotocol. To do so, it will send something like this as part of the original handshake:

+ +
GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+
+ +

or, equivalently:

+ +
...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+
+ +

Now the server must pick one of the protocols that the client suggested and it supports. If there are more than one, send the first one the client sent. Imagine our server can use both soap and wamp. Then, in the response handshake, it'll send:

+ +
Sec-WebSocket-Protocol: soap
+
+
+ +
+

The server can't send more than one Sec-Websocket-Protocol header.
+ If the server doesn't want to use any subprotocol, it shouldn't send any Sec-WebSocket-Protocol header. Sending a blank header is incorrect.
+ The client may close the connection if it doesn't get the subprotocol it wants.

+
+ +

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.

+ +
+

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. For different versions, a widely-used method is to add a / followed by the version number, like chat.example.com/2.0. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

+
+ + + + diff --git a/files/es/web/api/websockets_api/index.html b/files/es/web/api/websockets_api/index.html new file mode 100644 index 0000000000..e1c339558f --- /dev/null +++ b/files/es/web/api/websockets_api/index.html @@ -0,0 +1,172 @@ +--- +title: WebSockets +slug: Web/API/WebSockets_API +translation_of: Web/API/WebSockets_API +--- +

{{DefaultAPISidebar("Websockets API")}}

+ +

WebSockets es una tecnología avanzada que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor. Con esta  API, puede enviar mensajes a un servidor y  recibir  respuestas controladas por eventos sin tener que consultar al servidor para una respuesta.

+ +

Interfaces

+ +
+
WebSocket
+
El interfaz principal para conectar a un servidor Websocket y así enviar y recibir datos a través de la conexión.
+
CloseEvent
+
El evento enviado por el objeto WebSocket cuando se cierra la conexión.
+
MessageEvent
+
El evento enviado por el objeto WebSocket cuando se recibe un mensaje enviado desde el servidor.
+
+ +
+

Herramientas

+ + + + + + +
+ +

Ver también

+ + + +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Versión -76  {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (disabled)5.0.1
Protocolo versión 7{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
+ {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Protocolo versión 1014{{CompatGeckoDesktop("7.0")}}
+ {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
RFC 6455 (IETF Draft 17)16{{CompatGeckoDesktop("11.0")}}1012.10{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Versión -76  {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocolo versión 7{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocolo versión 8 (IETF draft 10){{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
RFC 6455 (IETF Draft 17)16{{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
+
+ +

Notas para Gecko

+ +

La compatibilidad de Firefox con WebSockets ha seguido la evolución de la especificación WebSocket. Firefox 6 implementa la versión 7 del protocolo subyacente, mientras que Firefox 7 implementa la versión 8 (como especifica IETF draft 10). Firefox mobile tuvo compatibilidad con WebSocket en Firefox mobile 7.0.

+ +

Gecko 6.0

+ +

Prior to Gecko 6.0 {{geckoRelease("6.0")}}, there was, incorrectly, a WebSocket object that some sites were thinking implied that WebSocket services were not prefixed; this object has been renamed to MozWebSocket.

+ +

Gecko 7.0

+ +

Starting in Gecko 7.0 {{geckoRelease("7.0")}}, the network.websocket.max-connections preference is used to determine the maximum number of WebSocket connections that can be open at a time. The default value is 200.

+ +

Gecko 8.0

+ +

Starting in Gecko 8.0 {{geckoRelease("8.0")}}, the deflate-stream extension to the WebSocket protocol has been disabled, since it's been deprecated from the specification drafts. This resolves incompatibilities with some sites.

+ +

Gecko 11.0

+ +

Prior to Gecko 11.0, both incoming and outgoing messages were limited to 16 MB in size. They may now be up to 2 GB in size. Note, however, that memory limitations (especially on mobile devices) make that a theoretical maximum, not a practical one. In reality, transfers of that size will fail on devices that don't have enough memory.

+ +

Additionally, ArrayBuffer send and receive support for binary data has been implemented.

+ +

Starting in Gecko 11.0, the WebSocket API is no longer prefixed.

+ +
Warning: Among other things, a key reason WebSockets was disabled by default in Firefox 4 and 5 is the discovery of a security issue in the protocol's design. This was fixed in Firefox 6 by implementing a newer version of the protocol that corrects the problem.
+ +
{{HTML5ArticleTOC}}
diff --git a/files/es/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/es/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..3dda33b8da --- /dev/null +++ b/files/es/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,197 @@ +--- +title: Escribiendo aplicaciones con WebSockets +slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications +tags: + - Guía WebSocket WebSockets +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +

{{ draft() }}

+ +

WebSockets es una tecnología basada en el protocolo ws, este hace posible establecer una conexión continua  full-duplex, entre un cliente y servidor. Un cliente websocket podría ser el navegador del usuario, pero el protocolo es una plataforma independiente.

+ +
Nota: Tenemos un ejemplo funcional de un sistema de chat/servidor usado para ejemplos de código que estará disponible una vez nuestra infraestructura esté en posición de hospedar ejemplos de WebSocket apropiadamente.
+ +

Disponibilidad de WebSockets

+ +

La API de WebSocket esta disponible para el código JavaScript cuyo alcance DOM sea un objeto {{ domxref("Window") }} o cualquier objeto implementando {{ domxref("WorkerUtils") }}; si es así, puedes usarlos desde los Web Workers.

+ +
Nota: La API de WebSockets (y el protocolo subyacente) continúan en activo desarrollo, y existen muchos problemas de compatibilidad entre los navegadores en este momento (e inclusive entre los diferentes lanzamientos del mismo navegador).
+ +

Creando un Objeto WebSocket

+ +

Para comunicarse utilizando  el protocolo webSocket, necesitarás crear un objeto WebSocket; este automáticamente abrirá una conexión temporal al servidor.

+ +

El constructor WebSocket requiere de un parámetro obligatorio y otro opcional:

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+
+ +
+
url
+
La url a la que conectar; esta es la URL a la que el WebSocket responde.
+
protocols {{ optional_inline() }}
+
Un string o array de strings con el/los protocolos a usar. Estos strings son usados para indicar sub-protocolos, para que el servidor pueda implementar multiples sub-protocolos WebSocket (por ejemplo, puede necesitar usar un servidor para manejar diferentes tipos de interacciones dependiendo del protocolo especificado). Si no se especifica el string como protocolo, se asumirá un string vacío.
+
+ +

El constructor puede lanzar excepciones:

+ +
+
SECURITY_ERR
+
El puerto de la conexión está siendo bloqueado.
+
+ +
+
+ +

Errores de conexión

+ +

Si ocurre un error al intentar conectar, lo primero que recibiremos será un evento con el nombre de "error" en el objeto WebSocket (de este modo se invoca el manejador onerror), y luego CloseEvent es enviado al objeto WebSocket (de este modo se invoca el manejador onclose), para indicar la razón del cierre de la conexión.

+ +

A partir de Firefox 11, es normal recibir un mensaje de error descriptivo  en la consola de la plataforma Mozilla, y un código de cierre como está definido en el RFC 6455, Section 7.4 a través de un CloseEvent.

+ +

Ejemplos

+ +

En este ejemplo de crea un nuevo WebSocket, conectandose al servidor ws://www.example.com/socketserver. El nombre del protocolo "protocolOne"  es el utilizado para la consulta del socket, aunque puede ser omitido.

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+
+ +

Como respuesta, exampleSocket.readyState es CONNECTING. El readyState será  OPEN una vez que la conexión este lista para transferir información.

+ +

Si se quiere establecer una conexión que soporte varios protocolos, se puede establecer un array de protocolos:

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+
+ +

Una vez que la conexión este establecida (readyState estará OPEN), exampleSocket.protocol te dirá qué protocolo ha seleccionado el servidor.

+ +

En los ejemplos anteriores ws sustituye http, y de igual manera wss sustituye a https. Al crear un WebSocket se hace uso del mecanismo Upgrade de HTTP, por lo que la petición de actualización del protocolo está implícita cuando accedemos al servidor HTTP con ws://www.example.com o wss://www.example.com.

+ +

Enviando Información al servidor

+ +

Una vez la conexión esta abierta, se puede comenzar a enviar datos al servidor. Para hacer esto, simplemente se llama al metodo send() del objeto WebSocket, cada vez que se desea enviar un mensaje:

+ +
exampleSocket.send("Here's some text that the server is urgently awaiting!");
+
+ +

Puedes enviar información como un string, {{ domxref("Blob") }}, o en un  ArrayBuffer.

+ +
Nota: Antes de la version 11, Firefox sólo soportaba el envío de datos como una cadena.
+ +

Como la conexión es asincronica y es propensa a fallar, no hay garantia de poder llamar al metodo send() inmediatamente despúes de haber creado el objeto WebSocket de manera exitosa. Para enviar información se debe estar seguro de que almenos una conexión ya esta abierta, usando el manejador onopen:

+ +
exampleSocket.onopen = function (event) {
+  exampleSocket.send("Here's some text that the server is urgently awaiting!");
+};
+
+ +

Usando JSON para transferir Objetos

+ +

Una forma de enviar información compleja al servidor es utilizar JSON. Por ejemplo, un programa para chatear puede interactuar con el servidor usando un protocolo que implementa el uso de paquetes de JSON:

+ +
// Envia texto a todos los usuarios através del servidor
+function sendText() {
+  // Se construye un Objeto msg que contiene la información que el servidor necesita procesar de ese cliente.
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Send the msg object as a JSON-formatted string.
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Blank the text input element, ready to receive the next line of text from the user.
+  document.getElementById("text").value = "";
+}
+
+ +

Recibiendo mensajes del servidor

+ +

WebSockets API es un manejador de eventos; cuando el mensaje es recibido, un "message" el evento es pasado el manejador onmessage. Para escuchar la entrada de información, se puede hacer algo como lo siguiente:

+ +
exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+
+ +

Recibiendo e interpretando objetos JSON

+ +

Vamos a imaginar una aplicación de chat, donde el cliente usa JSON para transmitir objetos con información. Hay varios tipos de paquetes que el cliente recibirá:

+ + + +

El código que interpretará los mensajes entrantes será así:

+ +
exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
+      break;
+    case "message":
+      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
+      break;
+    case "rejectusername":
+      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i < msg.users.length; i++) {
+        ul += msg.users[i] + "<br>";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+
+ +

Se usa JSON.parse() para convertir el objeto JSON de vuelta al original, luego se examina y se realiza la acción pertinente.

+ +

Formato de texto de los datos

+ +

El texto recibido a través de la conexión WebSocket está en formato UTF-8.

+ +

Antes de Gecko 9.0 {{ geckoRelease("9.0") }}, algunos no-caracteres que siguen siendo texto UTF-8 válido podrían causar el cierre de la conexión. Ahora Gecko permite esos valores.

+ +

Cerrando la conexión

+ +

Cuando se ha terminado de usar la conexión WebSocket, se llama el método close() del objeto WebSocket:

+ +
exampleSocket.close();
+
+ +

Puede ser de gran ayuda revisar el atributo bufferedAmount del socket para verificar que toda la información ha sido enviada antes de intentar cerrar el socket.

+ +

Consideraciones de Seguridad

+ +

Los WebSockets no deben ser usados en entornos de contenido mixto; eso es, no debes abrir una conexión de WebSocket no segura desde una página cargada usando HTTPS o viceversa. De hecho, muchos navegadores solo admiten conexiones WebSocket seguras, y ya no soportan su uso en contextos no seguros.

+ +

{{ languages ( {"zh-tw": "zh_tw/WebSockets/Writing_WebSocket_client_applications"} ) }}

diff --git a/files/es/web/api/webvr_api/index.html b/files/es/web/api/webvr_api/index.html new file mode 100644 index 0000000000..199e8f6458 --- /dev/null +++ b/files/es/web/api/webvr_api/index.html @@ -0,0 +1,256 @@ +--- +title: WebVR API +slug: Web/API/WebVR_API +tags: + - API + - Experimental + - Landing + - NeedsTranslation + - Reference + - TopicStub + - VR + - Virtual Reality + - WebVR +translation_of: Web/API/WebVR_API +--- +
{{SeeCompatTable}}{{APIRef("WebVR API")}}
+ +

WebVR proporciona soporte para la exposición de dispositivos de realidad virtual — por ejemplo el visualizador de Oculus Rift o HTC Vive — para aplicaciones web, permitiendo a los desarrolladores traducir la información de posición y movimiento del visualizador al movimiento alrededor de una escena en 3D. Esto tiene numerosas aplicaciones interesantes, desde visitas virtuales de productos y aplicaciones de capacitación interactiva hasta juegos inmersivos en primera persona.

+ +

Concepts and usage

+ +

Any VR devices attached to your computer will be returned by the {{domxref("Navigator.getVRDisplays()")}} method; each one will be represented by a {{domxref("VRDisplay")}} object.

+ +

Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"

+ +

{{domxref("VRDisplay")}} is the central interface in the WebVR API — via its properties and methods you can access functionality to:

+ + + +

A typical (simple) WebVR app would work like so:

+ +
    +
  1. {{domxref("Navigator.getVRDisplays()")}} is used to get a reference to your VR display.
    2. +
  2. {{domxref("VRDisplay.requestPresent()")}} is used to start presenting to the VR display.
    3. +
  3. WebVR's dedicated {{domxref("VRDisplay.requestAnimationFrame()")}} method is used to run the app's rendering loop at the correct refresh rate for the display.
    4. +
  4. Inside the rendering loop, you grab the data required to display the current frame ({{domxref("VRDisplay.getFrameData()")}}), draw the displayed scene twice — once for the view in each eye, then submit the rendered view to the display to show to the user ({{domxref("VRDisplay.submitFrame()")}}).
    5. +
+ +

In addition, WebVR 1.1 adds a number of events on the {{domxref("Window")}} object to allow JavaScript to respond to changes to the status of the display.

+ +
+

Note: You can find a lot more out about how the API works in our Using the WebVR API and WebVR Concepts articles.

+
+ +

Using controllers: Combining WebVR with the Gamepad API

+ +

Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the Gamepad API, and specifically the Gamepad Extensions API that adds API features for accessing controller pose, haptic actuators, and more.

+ +
+

Note: Our Using VR controllers with WebVR article explains the basics of how to use VR controllers with WebVR apps.

+
+ +

WebVR Interfaces

+ +
+
{{domxref("VRDisplay")}}
+
Represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.
+
{{domxref("VRDisplayCapabilities")}}
+
Describes the capabilities of a {{domxref("VRDisplay")}} — it's features can be used to perform VR device capability tests, for example can it return position information.
+
{{domxref("VRDisplayEvent")}}
+
Represents the event object of WebVR-related events (see the {{anch("Window", "window object extensions")}} listed below).
+
{{domxref("VRFrameData")}}
+
Represents all the information needed to render a single frame of a VR scene; constructed by {{domxref("VRDisplay.getFrameData()")}}.
+
{{domxref("VRPose")}}
+
Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)
+
{{domxref("VREyeParameters")}}
+
Provides access to all the information required to correctly render a scene for each given eye, including field of view information.
+
{{domxref("VRFieldOfView")}}
+
Represents a field of view defined by 4 different degree values describing the view from a center point.
+
{{domxref("VRLayerInit")}}
+
Represents a layer to be presented in a {{domxref("VRDisplay")}}.
+
{{domxref("VRStageParameters")}}
+
Represents the values describing the the stage area for devices that support room-scale experiences.
+
+ +

Extensions to other interfaces

+ +

The WebVR API extends the following APIs, adding the listed features.

+ +

Gamepad

+ +
+
{{domxref("Gamepad.displayId")}} {{readonlyInline}}
+
Returns the {{domxref("VRDisplay.displayId")}} of the associated {{domxref("VRDisplay")}} — the VRDisplay that the gamepad is controlling the displayed scene of.
+
+ + + +
+
{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}
+
Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is true).
+
{{domxref("Navigator.getVRDisplays()")}}
+
Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR displays connected to the computer.
+
+ +

Window events

+ +
+
{{domxref("Window.onvrdisplaypresentchange")}}
+
Represents an event handler that will run when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).
+
{{domxref("Window.onvrdisplayconnect")}}
+
Represents an event handler that will run when a compatible VR display has been connected to the computer (when the {{event("vrdisplayconnect")}} event fires).
+
{{domxref("Window.onvrdisplaydisconnect")}}
+
Represents an event handler that will run when a compatible VR display has been disconnected from the computer (when the {{event("vrdisplaydisconnect")}} event fires).
+
{{domxref("Window.onvrdisplayactivate")}}
+
Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
+
{{domxref("Window.onvrdisplaydeactivate")}}
+
Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
+
+ +

Unimplemented window events

+ +

The following events are listed in the spec, but do not currently seem to be implemented anywhere as yet.

+ +
+
{{domxref("Window.onvrdisplayblur")}}
+
Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
+
{{domxref("Window.onvrdisplayfocus")}}
+
Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).
+
+ +

Examples

+ +

You can find a number of examples at these locations:

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("GamepadExtensions")}}{{Spec2("GamepadExtensions")}}Defines the Experimental Gamepad extensions.
{{SpecName('WebVR 1.1')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop(55)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
Gamepad extensions{{CompatNo}}{{CompatNo}}{{CompatNo}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for AndroidSamsung Internet for GearVR
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(55)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[3]{{CompatVersionUnknown}}
+  
Gamepad extensions{{CompatNo}}{{CompatNo}}{{CompatNo}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] API Available on all platforms behind a flag, but currently only works on desktop in an experimental version of Chrome (other builds won't return any devices when {{domxref("Navigator.getVRDisplays()")}} is invoked).

+ +

[2] Currently only Windows support is enabled by default. Mac support is available in Firefox Nightly.

+ +

[3] Currently supported only by Google Daydream.

+ +

[4] Enabled in Firefox Nightly and Beta, versions 55 and above. Enabled/disabled by the dom.gamepad-extensions.enabled pref.

+ +

See also

+ + diff --git a/files/es/web/api/webvr_api/using_the_webvr_api/index.html b/files/es/web/api/webvr_api/using_the_webvr_api/index.html new file mode 100644 index 0000000000..0a4bc67e58 --- /dev/null +++ b/files/es/web/api/webvr_api/using_the_webvr_api/index.html @@ -0,0 +1,448 @@ +--- +title: Uso de la API de WebVR +slug: Web/API/WebVR_API/Using_the_WebVR_API +tags: + - '1.1' + - API + - Canvas + - Realidad Virtual + - Tutorial + - VR + - WebGL + - WebVR +translation_of: Web/API/WebVR_API/Using_the_WebVR_API +--- +
{{APIRef("WebVR API")}}
+ +

La API WebVR es una fantástica adición al kit de herramientas del desarrollador web, permitiendo que las escenas de WebGL sean presentadas en pantallas de realidad virtual como el Oculus Rift y HTC Vive. Pero, ¿cómo empezar a desarrollar aplicaciones VR para la Web? Este artículo le guiará a través de los fundamentos.

+ +
+

Nota: La versión más estable de la API de WebVR (1.1) se ha implementado recientemente en Firefox 55 (Windows en versión de lanzamiento y Mac OS X sólo en Nightly) y también está disponible en Chrome cuando se usa con hardware de Google Daydream. También hay una evolución posterior de la especificación 2.0, pero esto está en una etapa temprana ahora mismo. Puede encontrar información sobre el estado más reciente de las especificaciones en  WebVR Spec Version List.

+
+ +

Empezando

+ +

Para empezar, necesita:

+ + + +

Una vez que tengas todo montado, puedes probar si tu configuración funciona con WebVR yendo a nuestro simple A-Frame demo, y ver si la escena se procesa y si puede entrar en el modo de visualización VR pulsando el botón en la parte inferior derecha.

+ +

A-Frame es de lejos la mejor opción si desea crear una escena 3D compatible con WebVR rápidamente, sin necesidad de entender un montón de código nuevo de JavaScript. Sin embargo, no te enseña cómo funciona la API WebVR en bruto, y esto es lo que veremos a continuación.

+ +

Introduccion a nuestra demostración

+ +

Para ilustrar cómo funciona la API de WebVR, estudiaremos nuestro ejemplo raw-webgl-example, que se parece un poco a esto:

+ +

+ +
+

Nota: Puedes encontrar el código fuente de nuestra demo en  GitHub, y verlo en vivo también.

+
+ +
+

Nota: Si WebVR no funciona en su navegador, es posible que deba asegurarse de que se está ejecutando a través de su tarjeta gráfica. Por ejemplo, para las tarjetas NVIDIA, si el panel de control de NVIDIA se ha configurado correctamente, habrá una opción de menú contextual disponible - haga clic con el botón derecho del ratón en Firefox y seleccione Ejecutar con procesador gráfico > Procesador NVIDIA de alto rendimiento.

+
+ +

Nuestra demo presenta el santo grial de las demostraciones de WebGL - un cubo 3D giratorio. Hemos implementado esto usando raw WebGL API código. No enseñaremos ningún JavaScript básico o WebGL, solo las partes de WebVR.

+ +

Nuestra demo también cuenta con:

+ + + +

Cuando miras a través del código fuente de nuestro archivo JavaScript principal de demostraciones , puede encontrar fácilmente las partes específicas de WebVR buscando la cadena "WebVR" en comentarios anteriores.

+ +
+

Nota: Para obtener más información sobre JavaScript básico y WebGL, consulte nuestro material de aprendizaje JavaScrip , y nuestro WebGL Tutorial.

+
+ +

¿Como funciona?

+ +

En este punto, veamos cómo funcionan las partes WebVR del código.

+ +

Una típica (simple) aplicación WebVR funciona de esta manera:

+ +
    +
  1. {{domxref("Navigator.getVRDisplays()")}} se utiliza para obtener una referencia a la visualización VR.
    2. +
  2. {{domxref("VRDisplay.requestPresent()")}} se utiliza para iniciar la presentación en la pantalla VR.
    3. +
  3. WebVR's dedicado {{domxref("VRDisplay.requestAnimationFrame()")}} se utiliza para ejecutar el bucle de representación de la aplicación a la velocidad de actualización correcta para la pantalla.
    4. +
  4. Dentro del bucle de procesamiento, se capturan los datos necesarios para mostrar el marco actual ({{domxref("VRDisplay.getFrameData()")}}), dibuja la escena visualizada dos veces - una vez para la vista en cada ojo -  luego envia la vista renderizada a la pantalla para mostrar al usuario a través de ({{domxref("VRDisplay.submitFrame()")}}).
    5. +
+ +

En las secciones siguientes veremos en detalle nuestra demostración raw-webgl y veremos dónde se utilizan exactamente las características anteriores.

+ +

Comenzando con algunas variables

+ +

El primer código relacionado con WebVR que encontrarás es el siguiente bloque:

+ +
// WebVR variables
+
+var frameData = new VRFrameData();
+var vrDisplay;
+var btn = document.querySelector('.stop-start');
+var normalSceneFrame;
+var vrSceneFrame;
+
+var poseStatsBtn = document.querySelector('.pose-stats');
+var poseStatsSection = document.querySelector('section');
+poseStatsSection.style.visibility = 'hidden'; // hide it initially
+
+var posStats = document.querySelector('.pos');
+var orientStats = document.querySelector('.orient');
+var linVelStats = document.querySelector('.lin-vel');
+var linAccStats = document.querySelector('.lin-acc');
+var angVelStats = document.querySelector('.ang-vel');
+var angAccStats = document.querySelector('.ang-acc');
+var poseStatsDisplayed = false;
+ +

Vamos a explicar estos brevemente :

+ + + +

Cómo obtener una referencia a nuestra pantalla VR

+ +

Una de las principales funciones dentro de nuestro código es start () - ejecutamos esta función cuando el cuerpo ha terminado de cargar:

+ +
// start
+//
+// Called when the body has loaded is created to get the ball rolling.
+
+document.body.onload = start;
+ +

Para empezar, start() recupera un contexto de WebGL para usarlo para renderizar gráficos 3D {{htmlelement("canvas")}} elemento en our HTML. A continuación verificamos si la gl contexto está disponible — si es así, ejecutamos una serie de funciones para configurar la escena para su visualización.

+ +
function start() {
+  canvas = document.getElementById("glcanvas");
+
+  initWebGL(canvas);      // Initialize the GL context
+
+  // WebGL setup code here
+ +

Next, we start the process of actually rendering the scene onto the canvas, by setting the canvas to fill the entire browser viewport, and running the rendering loop (drawScene()) for the first time. This is the non-WebVR — normal — rendering loop.

+ +
    // draw the scene normally, without WebVR - for those who don't have it and want to see the scene in their browser
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    drawScene();
+ +

Now onto our first WebVR-specific code. First of all, we check to see if {{domxref("Navigator.getVRDisplays")}} exists — this is the entry point into the API, and therefore good basic feature detection for WebVR. You'll see at the end of the block (inside the else clause) that if this doesn't exist, we log a message to indicate that WebVR 1.1 isn't supported by the browser.

+ +
    // WebVR: Check to see if WebVR is supported
+    if(navigator.getVRDisplays) {
+      console.log('WebVR 1.1 supported');
+ +

Inside our if() { ... } block, we run the {{domxref("Navigator.getVRDisplays()")}} function. This returns a promise, which is fulfilled with an array containing all the VR display devices connected to the computer. If none are connected, the array will be empty.

+ +
      // Then get the displays attached to the computer
+      navigator.getVRDisplays().then(function(displays) {
+ +

Inside the promise then() block, we check whether the array length is more than 0; if so, we set the value of our vrDisplay variable to the 0 index item inside the array. vrDisplay now contains a {{domxref("VRDisplay")}} object representing our connected display!

+ +
        // If a display is available, use it to present the scene
+        if(displays.length > 0) {
+          vrDisplay = displays[0];
+          console.log('Display found');
+ +
+

Nota: Es poco probable que tenga varias pantallas VR conectadas a su computadora, y esto es sólo una demostración simple, por lo que esto lo hará por ahora.

+
+ +

Starting and stopping the VR presentation

+ +

Now we have a {{domxref("VRDisplay")}} object, we can use it do a number of things. The next thing we want to do is wire up functionality to start and stop presentation of the WebGL content to the display.

+ +

Continuing on with the previous code block, we now add an event listener to our start/stop button (btn) — when this button is clicked we want to check whether we are presenting to the display already (we do this in a fairly dumb fashion, by checking what the button textContent contains).

+ +

If the display is not already presenting, we use the {{domxref("VRDisplay.requestPresent()")}} method to request that the browser start presenting content to the display. This takes as a parameter an array of the {{domxref("VRLayerInit")}} objects representing the layers you want to present in the display.

+ +

Since the maximum number of layers you can display is currently 1, and the only required object member is the {{domxref("VRLayerInit.source")}} property (which is a reference to the {{htmlelement("canvas")}} you want to present in that layer; the other parameters are given sensible defaults — see {{domxref("VRLayerInit.leftBounds", "leftBounds")}} and {{domxref("VRLayerInit.rightBounds", "rightBounds")}})), the parameter is simply [{ source: canvas }].

+ +

requestPresent() returns a promise that is fulfilled when the presentation begins successfully.

+ +
          // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+          btn.addEventListener('click', function() {
+            if(btn.textContent === 'Start VR display') {
+              vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+                console.log('Presenting to WebVR display');
+ +

With our presentation request successful, we now want to start setting up to render content to present to the VRDisplay. First of all we set the canvas to the same size as the VR display area. We do this by getting the {{domxref("VREyeParameters")}} for both eyes using {{domxref("VRDisplay.getEyeParameters()")}}.

+ +

We then do some simple math to calculate the total width of the VRDisplay rendering area based on the eye {{domxref("VREyeParameters.renderWidth")}} and {{domxref("VREyeParameters.renderHeight")}}.

+ +
                // Set the canvas size to the size of the vrDisplay viewport
+
+                var leftEye = vrDisplay.getEyeParameters('left');
+                var rightEye = vrDisplay.getEyeParameters('right');
+
+                canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+                canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
+ +

Next, we {{domxref("Window.cancelAnimationFrame()", "cancel the animation loop")}} previously set in motion by the {{domxref("Window.requestAnimationFrame()")}} call inside the drawScene() function, and instead invoke drawVRScene(). This function renders the same scene as before, but with some special WebVR magic going on. The loop inside here is maintained by WebVR's special {{domxref("VRDisplay.requestAnimationFrame")}} method.

+ +
                // stop the normal presentation, and start the vr presentation
+                window.cancelAnimationFrame(normalSceneFrame);
+                drawVRScene();
+ +

Finalmente, actualizamos el texto del botón para que la próxima vez que se presione, detenga la presentación en la pantalla VR.

+ +
                btn.textContent = 'Exit VR display';
+              });
+ +


+ To stop the VR presentation when the button is subsequently pressed, we call {{domxref("VRDisplay.exitPresent()")}}. We also reverse the button's text content, and swap over the requestAnimationFrame calls. You can see here that we are using {{domxref("VRDisplay.cancelAnimationFrame")}} to stop the VR rendering loop, and starting the normal rendering loop off again by calling drawScene().

+ +
            } else {
+              vrDisplay.exitPresent();
+              console.log('Stopped presenting to WebVR display');
+
+              btn.textContent = 'Start VR display';
+
+              // Stop the VR presentation, and start the normal presentation
+              vrDisplay.cancelAnimationFrame(vrSceneFrame);
+              drawScene();
+            }
+          });
+        }
+      });
+    } else {
+      console.log('WebVR API not supported by this browser.');
+    }
+  }
+}
+ +

Una vez iniciada la presentación, podrás ver la vista estereoscópica que se muestra en el navegador:

+ +

+ +

A continuación, aprenderá cómo se produce realmente la vista estereoscópica.

+ +

Why does WebVR have its own requestAnimationFrame()?

+ +

This is a good question. The reason is that for smooth rendering inside the VR display, you need to render the content at the display's native refresh rate, not that of the computer. VR display refresh rates are greater than PC refresh rates, typically up to 90fps. The rate will be differ from the computer's core refresh rate.

+ +

Note that when the VR display is not presenting, {{domxref("VRDisplay.requestAnimationFrame")}} runs identically to {{domxref("Window.requestAnimationFrame")}}, so if you wanted, you could just use a single rendering loop, rather than the two we are using in our app. We have used two because we wanted to do slightly different things depending on whether the VR display is presenting or not, and keep things separated for ease of comprehension.

+ +

Rendering and display

+ +

At this point, we've seen all the code required to access the VR hardware, request that we present our scene to the hardware, and start running the rending loop. Let's now look at the code for the rendering loop, and explain how the WebVR-specific parts of it work.

+ +

First of all, we begin the definition of our rendering loop function — drawVRScene(). The first thing we do inside here is make a call to {{domxref("VRDisplay.requestAnimationFrame()")}} to keep the loop running after it has been called once (this occurred earlier on in our code when we started presenting to the VR display). This call is set as the value of the global vrSceneFrame variable, so we can cancel the loop with a call to {{domxref("VRDisplay.cancelAnimationFrame()")}} once we exit VR presenting.

+ +
function drawVRScene() {
+  // WebVR: Request the next frame of the animation
+  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
+ +

Next, we call {{domxref("VRDisplay.getFrameData()")}}, passing it the name of the variable that we want to use to contain the frame data. We initialized this earlier on — frameData. After the call completes, this variable will contain the data need to render the next frame to the VR device, packaged up as a {{domxref("VRFrameData")}} object. This contains things like projection and view matrices for rendering the scene correctly for the left and right eye view, and the current {{domxref("VRPose")}} object, which contains data on the VR display such as orientation, position, etc.

+ +

This has to be called on every frame so the rendered view is always up-to-date.

+ +
  // Populate frameData with the data of the next frame to display
+  vrDisplay.getFrameData(frameData);
+ +

Now we retrieve the current {{domxref("VRPose")}} from the {{domxref("VRFrameData.pose")}} property, store the position and orientation for use later on, and send the current pose to the pose stats box for display, if the poseStatsDisplayed variable is set to true.

+ +
  // You can get the position, orientation, etc. of the display from the current frame's pose
+
+  var curFramePose = frameData.pose;
+  var curPos = curFramePose.position;
+  var curOrient = curFramePose.orientation;
+  if(poseStatsDisplayed) {
+    displayPoseStats(curFramePose);
+  }
+ +

  We now clear the canvas before we start drawing on it, so that the next frame is clearly seen, and we don't also see previous rendered frames:

+ +
  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+ +

We now render the view for both the left and right eyes. First of all we need to create projection and view locations for use in the rendering. these are {{domxref("WebGLUniformLocation")}} objects, created using the {{domxref("WebGLRenderingContext.getUniformLocation()")}} method, passing it the shader program's identifier and an identifying name as parameters.

+ +
  // WebVR: Create the required projection and view matrix locations needed
+  // for passing into the uniformMatrix4fv methods below
+
+  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
+ +

The next rendering step involves:

+ + + +
  // WebVR: Render the left eye’s view to the left half of the canvas
+  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+  drawGeometry();
+ +

We now do exactly the same thing, but for the right eye:

+ +
  // WebVR: Render the right eye’s view to the right half of the canvas
+  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+  drawGeometry();
+ +

Next we define our drawGeometry() function. Most of this is just general WebGL code required to draw our 3D cube. You'll see some WebVR-specific parts in the mvTranslate() and mvRotate() function calls — these pass matrices into the WebGL program that define the translation and rotation of the cube for the current frame

+ +

You'll see that we are modifying these values by the position (curPos) and orientation (curOrient) of the VR display we got from the {{domxref("VRPose")}} object. The result is that, for example, as you move or rotate your head left, the x position value (curPos[0]) and y rotation value ([curOrient[1]) are added to the x translation value, meaning that the cube will move to the right, as you'd expect when you are looking at something and then move/turn your head left.

+ +

This is a quick and dirty way to use VR pose data, but it illustrates the basic principle.

+ +
  function drawGeometry() {
+    // Establish the perspective with which we want to view the
+    // scene. Our field of view is 45 degrees, with a width/height
+    // ratio of 640:480, and we only want to see objects between 0.1 units
+    // and 100 units away from the camera.
+
+    perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+
+    loadIdentity();
+
+    // Now move the drawing position a bit to where we want to start
+    // drawing the cube.
+
+    mvTranslate([
+                  0.0 - (curPos[0] * 25) + (curOrient[1] * 25),
+                  5.0 - (curPos[1] * 25) - (curOrient[0] * 25),
+                  -15.0 - (curPos[2] * 25)
+               ]);
+
+    // Save the current matrix, then rotate before we draw.
+
+    mvPushMatrix();
+    mvRotate(cubeRotation, [0.25, 0, 0.25 - curOrient[2] * 0.5]);
+
+    // Draw the cube by binding the array buffer to the cube's vertices
+    // array, setting attributes, and pushing it to GL.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
+    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+
+    // Set the texture coordinates attribute for the vertices.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+    gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+    // Specify the texture to map onto the faces.
+
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+    gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+    // Draw the cube.
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+    setMatrixUniforms();
+    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+    // Restore the original matrix
+
+    mvPopMatrix();
+  }
+
+ +

The next bit of the code has nothing to do with WebVR — it just updates the rotation of the cube on each frame:

+ +
  // Update the rotation for the next draw, if it's time to do so.
+
+  var currentTime = (new Date).getTime();
+  if (lastCubeUpdateTime) {
+    var delta = currentTime - lastCubeUpdateTime;
+
+    cubeRotation += (30 * delta) / 1000.0;
+  }
+
+  lastCubeUpdateTime = currentTime;
+ +

The last part of the rendering loop involves us calling {{domxref("VRDisplay.submitFrame()")}} — now all the work has been done and we've rendered the display on the {{htmlelement("canvas")}}, this method then submits the frame to the VR display so it is displayed on there as well.

+ +
  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+  vrDisplay.submitFrame();
+}
+ +

Displaying the pose (position, orientation, etc.) data

+ +

In this section we'll discuss the displayPoseStats() function, which displays our updated pose data on each frame. The function is fairly simple.

+ +

First of all, we store the six different property values obtainable from the {{domxref("VRPose")}} object in their own variables — each one is a {{domxref("Float32Array")}}.

+ +
function displayPoseStats(pose) {
+  var pos = pose.position;
+  var orient = pose.orientation;
+  var linVel = pose.linearVelocity;
+  var linAcc = pose.linearAcceleration;
+  var angVel = pose.angularVelocity;
+  var angAcc = pose.angularAcceleration;
+ +

We then write out the data into the information box, updating it on every frame. We've clamped each value to three decimal places using toFixed(), as the values are hard to read otherwise.

+ +

You should note that we've used a conditional expression to detect whether the linear acceleration and angular acceleration arrays are successfully returned before we display the data. These values are not reported by most VR hardware as yet, so the code would throw an error if we did not do this (the arrays return null if they are not successfully reported).

+ +
  posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+  orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+  if(linAcc) {
+    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+  } else {
+    linAccStats.textContent = 'Linear acceleration not reported';
+  }
+
+  if(angAcc) {
+    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+  } else {
+    angAccStats.textContent = 'Angular acceleration not reported';
+  }
+}
+ +

WebVR events

+ +

The WebVR spec features a number of events that are fired, allowing our app code to react to changes in the state of the VR display (see Window events). For example:

+ + + +

To demonstrate how they work, our simple demo includes the following example:

+ +
window.addEventListener('vrdisplaypresentchange', function(e) {
+  console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+});
+ +

As you can see, the {{domxref("VRDisplayEvent", "event object")}} provides two useful properties — {{domxref("VRDisplayEvent.display")}}, which contains a reference to the {{domxref("VRDisplay")}} the event was fired in response to, and {{domxref("VRDisplayEvent.reason")}}, which contains a human-readable reason why the event was fired.

+ +

This is a very useful event; you could use it to handle cases where the display gets disconnected unexpectedly, stopping errors from being thrown and making sure the user is aware of the situation. In Google's Webvr.info presentation demo, the event is used to run an onVRPresentChange() function, which updates the UI controls as appropriate and resizes the canvas.

+ +

Summary

+ +

This article has given you the very basics of how to create a simple WebVR 1.1 app, to help you get started.

diff --git a/files/es/web/api/webvtt_api/index.html b/files/es/web/api/webvtt_api/index.html new file mode 100644 index 0000000000..b7142d1dce --- /dev/null +++ b/files/es/web/api/webvtt_api/index.html @@ -0,0 +1,903 @@ +--- +title: Formato de pistas de texto para la web (WebVTT) +slug: Web/API/WebVTT_API +translation_of: Web/API/WebVTT_API +--- +
{{DefaultAPISidebar("WebVTT")}}
+ +

El formato de pistas de texto para la web (WebVTT) es un formato para mostrar pistas de texto en le tiempo (como subtítulos) usando el elemento {{HTMLElement("track")}}. El propósito principal de los archivos de WebVTT es superponer pistas de texto a un elemento {{HTMLElement("video")}}. WebVTT es un formato basado en el texto, que debe de ser codificado usando {{Glossary("UTF-8")}}. Donde puedes usar espacios también puedes usar tabulaciones. También hay una pequeña API disponible para representar y manejar estas pistas de texto y los datos necesarios para realizar la reproducción del texto en los momentos correctos.

+ +

Archivos WebVTT

+ +

El tipo MIME de los archivos WebVTT es text/vtt.

+ +

Un archivo WebVTT (.vtt) contiene apuntes, que pueden ser tanto de una línea como de varias, como se muestra debajo:

+ +
WEBVTT
+
+00:01.000 --> 00:04.000
+- Nunca bebas nitrógeno líquido.
+
+00:05.000 --> 00:09.000
+- Podría perforar tu estómago.
+- Podrías morir.
+
+NOTE Esta es la última línea en el archivo
+
+ +

Estructura WebVTT

+ +

La estructura de un archivo WevWTT consiste de los siguientes componentes, algunos de ellos opcionales, en este orden:

+ + + +
Ejemplo 1 - El archivo WebVTT más simple posible
+ +
WEBVTT
+
+ +
Ejemplo 2 - Archivo WebVTT muy simple con un encabezado de texto
+ +
WEBVTT - Este archivo no tiene anotaciones.
+
+ +
Ejemplo 3 - Ejemplo de un archivo WebVTT común con encabezado y anotaciones
+ +
WEBVTT - Este archivo tiene anotaciones.
+
+14
+00:01:14.815 --> 00:01:18.114
+- ¿Qué?
+- ¿Dónde estamos ahora?
+
+15
+00:01:18.171 --> 00:01:20.991
+- Este es el país de los murciélagos grandes.
+
+16
+00:01:21.058 --> 00:01:23.868
+- [ Murciélagos chillando ]
+- Ellos no se pondrán entu pelo. Ellos están persiguiendo a los bichos.
+
+ +

Estructura interna de un archivo WebVTT

+ +

Vamos a reexaminar uno de nuestros ejemplos previos, y mirar la estructura de las anotaciones con un poco más de detalle.

+ +
WEBVTT
+
+00:01.000 --> 00:04.000
+- Nunca bebas nitrógeno líquido.
+
+00:05.000 --> 00:09.000
+- Podría perforar tu estómago.
+- Podrías morir.
+
+NOTE Esta es la última línea en el archivo
+ +

En el caso de cada anotación:

+ + + +

También podemos poner comentarios en nuestro archivo .vtt, para ayudarnos a recorddar información importante sobre las partes de nuestro archivo. Estas deben estar en líneas separadas empezando con la cadena NOTE. Aprenderas más sobre eso en la siguiente sección.

+ +

Es importante no usar líneas en blanco extras dentro de una anotación, por ejemplo entre las líneas de tiempo y las anotaciones. WebVTT está basado en líneas, una línea en blanco finalizará la anotación.

+ +

Comentarios en WebVTT

+ +

Los comentarios son un componente opcional que se puede usar para añadir informacion a un archivo WebVTT. Los comentarios estan pensados para aquellos que leen el archivo y no se muestran con las pistas de texto. Los comentarios pueden contener saltos de línea pero no una línea en blanco, que es equivalente a dos saltos de línea consecutivos. Una línea en blanco indica el fin de un comentario.

+ +

Un comentario no puede contener la cadena de texto "-->", el símbolo &, o el signo de menor que (<). Si quisieses usar esos caracteres necesitarías hacer un escape usando por ejemplo &amp; para el símbolo &, y &lt; para menor que (<). Tambien es recomendado que uses la secuencia de escape de mayor que &gt; en vez de el simbo de mayor que (>) para evitar la confusión con etiquetas.

+ +

Un comentario consiste en tres partes:

+ + + +
Ejemplo 4 - Ejemplo común de WebVTT
+ +
NOTE Esto es un comentario
+
+ +
Ejemplo 5 - Comentario multilínea
+ +
NOTE
+Un comentario que está ocupando
+más de una línea.
+
+NOTE También puedes hacer un comentario
+que ocupe más de una línea de esta manera.
+
+ +
Ejemplo 6 - Uso común de comentarios
+ +
WEBVTT - Traducción de la película que me gusta
+
+NOTE
+Esta traducción esta hecha por Kyle para que
+Algunos amigos puedan verla con sus padres.
+
+1
+00:02:15.000 --> 00:02:20.000
+- Ta en kopp varmt te.
+- Det är inte varmt.
+
+2
+00:02:20.000 --> 00:02:25.000
+- Har en kopp te.
+- Det smakar som te.
+
+NOTE Esta ultima línea puede no estar bien traducida.
+
+3
+00:02:25.000 --> 00:02:30.000
+- Ta en kopp
+
+ +

Estilizando anotaciones WebVTT

+ +

Tu puedes estilizar anotaciones WebVTT buscado elementos que coincidan con el pseudoelemento {{cssxref("::cue")}}.

+ +

Dentro del CSS del sitio

+ +
video::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+
+video::cue(b) {
+  color: peachpuff;
+}
+
+ +

Aquí, todos los elementos de video estan estilizados para usar un gradiente gris como fondo, con "papayawhip" como color principal. Además el texto en negrita usando el elemento {{HTMLElement("b")}} tiene el color "peachpuff".

+ +

El ejemplo HTML de abajo actualemte se encarga de mostrar los archivos multimedia él solo.

+ +
<video controls autoplay src="video.webm">
+ <track default src="track.vtt">
+</video>
+
+ +

Within the WebVTT file itself

+ +

You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string "STYLE" all by itelf on a line of text, as shown below:

+ +
WEBVTT
+
+STYLE
+::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+/* Style blocks cannot use blank lines nor "dash dash greater than" */
+
+NOTE comment blocks can be used between style blocks.
+
+STYLE
+::cue(b) {
+  color: peachpuff;
+}
+
+00:00:00.000 --> 00:00:10.000
+- Hello <b>world</b>.
+
+NOTE style blocks cannot appear after the first cue.
+ +

We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:

+ +
WEBVTT
+
+1
+00:00.000 --> 00:02.000
+That’s an, an, that’s an L!
+
+crédit de transcription
+00:04.000 --> 00:05.000
+Transcrit par Célestes™
+
+ +
::cue(#\31) { color: lime; }
+::cue(#crédit\ de\ transcription) { color: red; }
+ +

Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):

+ +
WEBVTT
+
+00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
+Where did he go?
+
+00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?
+ +

WebVTT cues

+ +

A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:

+ + + +
Example 7 - Example of a cue
+ +
1 - Title Crawl
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....
+ +

Cue identifier

+ +

The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "-->". It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).

+ +
Example 8 - Cue identifier from Example 7
+ +
1 - Title Crawl
+ +
Example 9 - Common usage of identifiers
+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+3
+00:00:34.159 --> 00:00:35.743
+Third
+
+ +

Cue timings

+ +

A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.

+ +

If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is chapters) then the file cannot have overlapping timings.

+ +

Each cue timing contains five components:

+ + + +

The timestamps must be in one of two formats:

+ + + +

Where the components are defined as follows:

+ + + +
Example 10 - Basic cue timing examples
+ +
00:00:22.230 --> 00:00:24.606
+00:00:30.739 --> 00:00:34.074
+00:00:34.159 --> 00:00:35.743
+00:00:35.827 --> 00:00:40.122
+ +
Example 11 - Overlapping cue timing examples
+ +
00:00:00.000 --> 00:00:10.000
+00:00:05.000 --> 00:01:00.000
+00:00:30.000 --> 00:00:50.000
+ +
Example 12 - Non-overlapping cue timing examples
+ +
00:00:00.000 --> 00:00:10.000
+00:00:10.000 --> 00:01:00.581
+00:01:00.581 --> 00:02:00.100
+00:02:01.000 --> 00:02:01.000
+ +

Cue settings

+ +

Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.

+ +

The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:

+ + + +
Example 13 - Cue setting examples
+ +

The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.

+ +
00:00:05.000 --> 00:00:10.000
+00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
+
+ +

Cue payload

+ +

The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.

+ +

A cue text payload cannot contain the string "-->", the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.

+ +

In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 6 - Escape sequences
NameCharacterEscape Sequence
Ampersand&&amp;
Less-than<&lt;
Greater-than>&gt;
Left-to-right mark&lrm;
Right-to-left mark&rlm;
Non-breaking space &nbsp;
+ +

Cue payload text tags

+ +

There are a number of tags, such as <bold>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is chapters then you cannot use tags.

+ + + +

The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).

+ + + +

Interfaces

+ +

There are two interfaces or APIs used in WebVTT which are:

+ +

VTTCue interface

+ +

It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.

+ +

Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:

+ +
enum AutoKeyword { "auto" };
+enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
+enum LineAlignSetting { "start", "center", "end" };
+enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
+enum AlignSetting { "start", "center", "end", "left", "right" };
+[Constructor(double startTime, double endTime, DOMString text)]
+interface VTTCue : TextTrackCue {
+  attribute VTTRegion? region;
+  attribute DirectionSetting vertical;
+  attribute boolean snapToLines;
+  attribute (double or AutoKeyword) line;
+  attribute LineAlignSetting lineAlign;
+  attribute (double or AutoKeyword) position;
+  attribute PositionAlignSetting positionAlign;
+  attribute double size;
+  attribute AlignSetting align;
+  attribute DOMString text;
+  DocumentFragment getCueAsHTML();
+};
+ +

VTT Region interface

+ +

This is the second interface in WebVTT API.

+ +

The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:

+ +
enum ScrollSetting { "" /* none */, "up" };
+[Constructor]
+interface VTTRegion {
+  attribute double width;
+  attribute long lines;
+  attribute double regionAnchorX;
+  attribute double regionAnchorY;
+  attribute double viewportAnchorX;
+  attribute double viewportAnchorY;
+  attribute ScrollSetting scroll;
+};
+ +

Methods and properties

+ +

The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:

+ + + +

Tutorial on how to write a WebVTT file

+ +

There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:

+ +
    +
  1. Open a notepad.
    2. +
  2. The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:
    3. +
+ +
WEBVTT
+ +

      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:

+ +
00:01.000 --> 00:05.000
+ +
    +
  1. On the next line you can write the caption for this cue which will run from 1st second to the 5th second, inclusive.
    2. +
  2. Following the similar steps, a complete WebVTT file for specific video or audio file can be made.
    3. +
+ +

CSS pseudo-classes

+ +

CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.

+ +

It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:

+ +
WEBVTT
+
+04:02.500 --> 04:05.000
+J’ai commencé le basket à l'âge de 13, 14 ans
+
+04:05.001 --> 04:07.800
+Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
+ +

In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <i> tag is for italics.

+ +

The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:

+ + + +

Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebVTT")}}{{Spec2("WebVTT")}}Initial definition
+ +

Browser compatibility

+ +

VTTCue interface

+ +
+ + +

{{Compat("api.VTTCue", 0)}}

+ +

TextTrack interface

+ +
+ + +

{{Compat("api.TextTrack", 0)}}

+ +

Notes

+
+
+ +

Prior to Firefox 50, the AlignSetting enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value "middle" instead of "center". This has been corrected.

+ +

WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to true. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to false.

+ +

Prior to Firefox 58, the REGION keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports VTTRegion and its use; however, this feature is disabled by default behind the preference media.webvtt.regions.enabled; set it to true to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).

diff --git a/files/es/web/api/wheelevent/deltay/index.html b/files/es/web/api/wheelevent/deltay/index.html new file mode 100644 index 0000000000..68135cd221 --- /dev/null +++ b/files/es/web/api/wheelevent/deltay/index.html @@ -0,0 +1,95 @@ +--- +title: WheelEvent.deltaY +slug: Web/API/WheelEvent/deltaY +translation_of: Web/API/WheelEvent/deltaY +--- +

{{APIRef("DOM Events")}}

+ +

La propiedad de solo lectura WheelEvent.deltaY es un double que representa la cantidad de deslizamiento vertical en la unidad {{domxref("WheelEvent.deltaMode")}} .

+ +

Sintaxis

+ +
var dY = event.deltaY;
+ +

Ejemplo

+ +
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaY);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM3 Events','#widl-WheelEvent-deltaY','WheelEvent.deltaY')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

Compatibilidad de los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support31{{ CompatGeckoDesktop("17.0") }}{{ CompatIE("9.0") }} [1]189.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("17.0") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
+
+ +

[1] IE9 soporta un viejo boceto de esta propuedad cuyo valor de retorno era un long en vez de un double.

+ +

Ver más

+ + diff --git a/files/es/web/api/wheelevent/index.html b/files/es/web/api/wheelevent/index.html new file mode 100644 index 0000000000..c53bbb87cc --- /dev/null +++ b/files/es/web/api/wheelevent/index.html @@ -0,0 +1,174 @@ +--- +title: WheelEvent +slug: Web/API/WheelEvent +tags: + - API + - DOM + - Interface + - Referencia + - WheelEvent + - eventos +translation_of: Web/API/WheelEvent +--- +

{{APIRef("DOM Events")}}

+ +

El interface WheelEvent retrata los eventos que ocurren cuando el usuario mueve la rueda del ratón o de un dispositivo similar.

+ +
+

Esta es la forma estándar de usar el evento wheel.

+ +

Antiguas versiones de navegadores implementaron dos formas no-estándar y no-compatibles-entre-navegadores, los interfaces {{ domxref("MouseWheelEvent") }} y {{domxref("MouseScrollEvent")}}. Utilice este interfaz y evite los dos últimos.

+
+ +

{{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{domxref("WheelEvent.WheelEvent", "WheelEvent()")}}
+
Crea el objeto WheelEvent.
+
+ +

Propiedades

+ +

Este interfaz hereda propiedades de estos padres, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +
+
{{domxref("WheelEvent.deltaX")}} {{readonlyinline}}
+
Devuelve un doble (número de doble precisión) que representa la cantidad de desplazamiento horizontal.
+
{{domxref("WheelEvent.deltaY")}} {{readonlyinline}}
+
Devuelve un doble que representa la cantidad de desplazamiento vertical.
+
{{domxref("WheelEvent.deltaZ")}} {{readonlyinline}}
+
Devuelve un doble que representa la cantidad de desplazamiento del eje-z.
+
{{domxref("WheelEvent.deltaMode")}} {{readonlyinline}}
+
Devuelve un entero largo sin signo que representa la unidad manejada por los valores de cantidad de desplazamiento delta. Los valores permitidos son: + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
DOM_DELTA_PIXEL0x00Los valores delta están especificados en pixeles.
DOM_DELTA_LINE0x01Los valores delta están especificados en líneas.
DOM_DELTA_PAGE0x02Los valores delta están especificados en páginas.
+
+
+ +

Métodos

+ +

Este interfaz no define ningún método, pero hereda métodos de estos padres, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('DOM3 Events','#interface-WheelEvent','WheelEvent')}}{{Spec2('DOM3 Events')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Implementación básica31{{ CompatVersionUnknown }}{{ CompatGeckoDesktop("17.0") }}{{ CompatIE("9.0") }}187.0
window.WheelEvent{{CompatVersionUnknown}}{{ CompatVersionUnknown }}{{ CompatGeckoDesktop("17.0") }}{{ CompatIE("9.0") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Implementación básica{{CompatVersionUnknown}}{{ CompatGeckoMobile("17.0") }}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
window.WheelEvent{{CompatVersionUnknown}}{{ CompatGeckoMobile("17.0") }}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +

[1] Safari no implementa actualmente WheelEvent actually; sin embargo este devuelve un objeto para window.WheelEvent.

+ +

Ver también

+ + diff --git a/files/es/web/api/window/alert/index.html b/files/es/web/api/window/alert/index.html new file mode 100644 index 0000000000..fd7e9f7d01 --- /dev/null +++ b/files/es/web/api/window/alert/index.html @@ -0,0 +1,69 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +tags: + - Referencia + - metodo +translation_of: Web/API/Window/alert +--- +

{{ APIRef }}

+ +

El método Window.alert() muestra un diálogo de alerta con contenido opcional especificado y un botón OK (Aceptar).

+ +

Sintaxis

+ +
window.alert(message);
+ + + +

Ejemplo

+ +
window.alert("Hello world!");
+
+ +

produce:

+ +

Image:AlertHelloWorld.png

+ +

Más JS:

+ +
alert()
+ +

Notas

+ +

El diálogo alert debe ser usado para mensajes que no requieren respuesta por parte del usuario, otra que la aceptación del mensaje.

+ +

Los cuadros de diálogo son ventanas modales - previenen que el usuario acceda al resto de la interfaz del programa hasta que el diálogo sea cerrado. Por esta razón, no se debe abusar de cualquier función que crea cuadros de diálogo (o ventanas modales).

+ +

Los usuarios de Mozilla Chrome (p.ej. extensiones de Firefox) deben usar preferentemente métodos de {{interface("nsIPromptService")}}.

+ +

A partir de Chrome {{CompatChrome(46.0)}}, este método está bloqueado para los elementos {{htmlelement("iframe")}}, a menos que su atributo sandbox tenga el valor allow-modal.

+ +

{{gecko_minversion_inline("23.0")}} El argumento es ahora opcional, como establece la especificación.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML5 Web application', '#dom-alert', 'alert()')}}{{Spec2('HTML5 Web application')}}Definición inicial
+ +

Véase también

+ + diff --git a/files/es/web/api/window/applicationcache/index.html b/files/es/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..37dac1f769 --- /dev/null +++ b/files/es/web/api/window/applicationcache/index.html @@ -0,0 +1,30 @@ +--- +title: window.applicationCache +slug: Web/API/Window/applicationCache +tags: + - Referencia_DOM_de_Gecko + - páginas_a_traducir +translation_of: Web/API/Window/applicationCache +--- +

{{ ApiRef() }} {{ Fx_minversion_header(3) }}

+ +

Resumen

+ +

Devuelve una referencia al objeto application cache para la ventana.

+ +

Sintaxis

+ +
cache = window.applicationCache
+
+ +

Parámetros

+ + + +

Especificación

+ + diff --git a/files/es/web/api/window/cancelanimationframe/index.html b/files/es/web/api/window/cancelanimationframe/index.html new file mode 100644 index 0000000000..eae485c315 --- /dev/null +++ b/files/es/web/api/window/cancelanimationframe/index.html @@ -0,0 +1,118 @@ +--- +title: window.cancelAnimationFrame() +slug: Web/API/Window/cancelAnimationFrame +translation_of: Web/API/Window/cancelAnimationFrame +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

Resumen

+ +

Cancela la petición de animación previamente programada a través de {{domxref("window.requestAnimationFrame()")}}.

+ +

Sintaxis

+ +
window.cancelAnimationFrame(requestID);
+
+ +
+

Nota: Antes de Firefox 23, la función es independiente del proveedor con el prefijo window.mozCancelAnimationFrame(). Consulte la tabla de compatibilidad, a continuación, para otras implementaciones de navegador.

+
+ +

Parámetros

+ +
+
ID de la petición
+
El valor del ID regresado por la llamada a {{domxref("window.requestAnimationFrame()")}} que solicitó una llamada de vuelta.
+
+ +

Ejemplos

+ +
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().
+
+var myReq;
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress/10, 200) + "px";
+  if (progress < 2000) {
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+
+window.cancelAnimationFrame(myReq);
+
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico21.0 {{property_prefix("webkit")}}
+ 24.0		{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}
+ 23.0		1015.06.0 {{property_prefix("webkit")}}
+ 6.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.433{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}
+ 23.0		10337.1
+
+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/window/close/index.html b/files/es/web/api/window/close/index.html new file mode 100644 index 0000000000..e4a3c910ee --- /dev/null +++ b/files/es/web/api/window/close/index.html @@ -0,0 +1,76 @@ +--- +title: Window.close() +slug: Web/API/Window/close +translation_of: Web/API/Window/close +--- +

{{ ApiRef() }}

+ +

Resumen

+ +

Cierra la ventana actual, o la ventana en la cual fue llamada.

+ +

Sintaxis

+ +
window.close();
+
+ +

Descripción

+ +

Cuando este método es llamado, la ventana referenciada es cerrada.

+ +

Este método solo se permite ser llamado por ventanas que fueron abiertas por un script utilizando el método {{domxref("window.open()")}}. Si la ventana no fue abierta por un script, el siguiente error aparece en la consola de JavaScript: Scripts may not close windows that were not opened by script.

+ +

Ejemplos

+ +

Cerrar una ventana abierta con window.open()

+ +

Este es un ejemplo que demuestra como utilizar este método para cerrar una ventana que fue abierta por un script llamando {{domxref("window.open()")}}.

+ +
<script type="text/javascript">
+//Global var to store a reference to the opened window
+var openedWindow;
+
+function openWindow()
+{
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow()
+{
+  openedWindow.close();
+}
+</script>
+
+ +

Cerrando la ventana actual

+ +

Cuando se llama al método del objeto window close() directamente, en vez de llamar a close() en una instancia de la ventana, el navegador cerrará la ventana que está en primer plano,  independientemente si el script fue creado en la ventana o no. (Firefox 35.0.1: los scripts no pueden cerrar ventanas que ellos no han abierto)

+ +
<script type="text/javascript">
+function closeCurrentWindow()
+{
+  window.close();
+}
+</script>
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}{{Spec2('HTML WHATWG')}} 
+ +

Referencia adicional

+ +

{{Compat("api.Window.close")}}

diff --git a/files/es/web/api/window/closed/index.html b/files/es/web/api/window/closed/index.html new file mode 100644 index 0000000000..b5caf862f3 --- /dev/null +++ b/files/es/web/api/window/closed/index.html @@ -0,0 +1,65 @@ +--- +title: Window.closed +slug: Web/API/Window/closed +tags: + - API + - HTML DOM + - Propiedad + - Referencia + - Ventana +translation_of: Web/API/Window/closed +--- +
{{APIRef}}
+ +

Resumen

+ +

Esta propiedad de solo lectura indica si la ventana referenciada está cerrada o no.

+ +

Syntax

+ +
isClosed = windowRef.closed;
+
+ +
+
isClosed
+
Booleano. Valores posibles: +
    +
  • true: La ventana ha sido cerrada.
    • +
  • false: La ventana está abierta.
    • +
+
+
+ +

Ejemplos

+ +

Cambiar la URL de una ventana desde una ventana emergente

+ +

El siguiente ejemplo demuestra cómo una ventana emergente puede cambiar la URL de la ventana que la abrió. Antes de intentar cambiar la URL, verifica que la ventana actual tiene referencia a la ventana que la abrió usando la propiedad window.opener y que esa ventana no está cerrada:

+ +
// Verifica que opener existe y no esté cerrado
+if (window.opener && !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}
+ +

Nótese que las ventanas emergentes solo pueden acceder a la ventana que las abrió.

+ +

Actualizando una ventana emergente abierta previamente

+ +

En este ejemplo la función refreshPopupWindow() llama al método reload del objeto location de la ventana emergente para actualizar su información. Si la ventana emergente no ha sido abierta o el usuario la cerró una nueva ventana es abierta.

+ +
var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow && !popupWindow.closed) {
+    // popupWindow está abierta, actualízala
+    popupWindow.location.reload(true);
+  } else {
+    // Abre una nueva ventana emergente
+    popupWindow = window.open("popup.html","dataWindow");
+  }
+}
+
+ +

Especificación

+ +

HTML5

diff --git a/files/es/web/api/window/confirm/index.html b/files/es/web/api/window/confirm/index.html new file mode 100644 index 0000000000..a09a6cdb1d --- /dev/null +++ b/files/es/web/api/window/confirm/index.html @@ -0,0 +1,64 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +translation_of: Web/API/Window/confirm +--- +
{{ApiRef("Window")}}
+ +

El método Window.confirm() muestra una ventana de diálogo con un mensaje opcional y dos botones, Aceptar y Cancelar.

+ +

Sintaxis

+ +
result = window.confirm(message);
+
+ + + +

Ejemplo

+ +
if (window.confirm("Do you really want to leave?")) {
+  window.open("exit.html", "Thanks for Visiting!");
+}
+
+ +

Da como resultado:

+ +

firefox confirm
+  

+ +

Notas

+ +

The following text is shared between this article, DOM:window.prompt and DOM:window.alert Las cajas de diálogo son ventanas modales - ello impide al usuario continuar accediendo al resto del interfaz del programa hasta que la ventana modal haya sido cerrada. Por esta razón no se debería usar en exceso funciones que creen cajas de diálogo (o ventanas modales). No obstante, hay muy buenas razones para evitar el uso de cajas de diálogo para confirmaciones.

+ +

Los usuarios de Mozilla Chrome users (e.g. Firefox extensions) deberían usar métodos de {{interface("nsIPromptService")}} en vez de cajas de diálogo.

+ +

A partir de la versión {{CompatChrome(46.0)}} de Chrome este método es bloqueado dentro de un {{htmlelement("iframe")}} a no ser que el atributo sandbox tenga el valor allow-modal.

+ +

{{gecko_minversion_inline("23.0")}} El argumento es opcional y no requerido por la especificación.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML5 Web application', '#dom-confirm', 'confirm()')}}{{Spec2('HTML5 Web application')}}Definición inicial.
+ +

Ver también

+ + diff --git a/files/es/web/api/window/crypto/index.html b/files/es/web/api/window/crypto/index.html new file mode 100644 index 0000000000..49756dfc08 --- /dev/null +++ b/files/es/web/api/window/crypto/index.html @@ -0,0 +1,88 @@ +--- +title: Window.crypto +slug: Web/API/Window/crypto +translation_of: Web/API/Window/crypto +--- +

{{APIRef}}

+ +

La propiedad de sólo lectura {{domxref("Window.crypto")}} devuelve el objeto Crypto asociado a un objeto global. Este objeto permite a las páginas web acceder a ciertos servicios relacionados con criptografía.

+ +

Sintaxis

+ +
var cryptoObj = window.crypto || window.msCrypto; // para IE 11
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API')}}{{Spec2('Web Crypto API')}}Definición Inicial
+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Sporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}11 {{ property_prefix("-ms") }}15{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver También

+ + diff --git a/files/es/web/api/window/devicepixelratio/index.html b/files/es/web/api/window/devicepixelratio/index.html new file mode 100644 index 0000000000..97db13d974 --- /dev/null +++ b/files/es/web/api/window/devicepixelratio/index.html @@ -0,0 +1,91 @@ +--- +title: Window.devicePixelRatio +slug: Web/API/Window/devicePixelRatio +translation_of: Web/API/Window/devicePixelRatio +--- +

{{APIRef}}

+ +

La propiedad de sólo-lectura Window.devicePixelRatio retorna la relación de tamaño (vertical) de un pixel físico en el dispositivo de visualización actual respecto del de un dispositivo de tamaño de pixel independiente (dips).

+ +

No hay retrofunciones o eventos a escuchar cuando este valor cambia (por ejemplo, si usted arrastra la ventana entre displays con diferentes densidades de pixels).

+ +

Sintaxis

+ +
value = window.devicePixelRatio;
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}{{Spec2("CSSOM View")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/window/dialogarguments/index.html b/files/es/web/api/window/dialogarguments/index.html new file mode 100644 index 0000000000..f3f23cb43e --- /dev/null +++ b/files/es/web/api/window/dialogarguments/index.html @@ -0,0 +1,14 @@ +--- +title: Window.dialogArguments +slug: Web/API/Window/dialogArguments +translation_of: Web/API/Window/dialogArguments +--- +

{{APIRef}}

+ +

Resumen

+ +

La propiedad dialogArguments retorna los parámetros que fueron pasados al método {{domxref("window.showModalDialog()")}}. Esto permite determinar qué parámetros fueron especificados cuando el diálogo modal fue creado.

+ +

Sintaxis

+ +
value = window.dialogArguments;
diff --git a/files/es/web/api/window/document/index.html b/files/es/web/api/window/document/index.html new file mode 100644 index 0000000000..d5acd251de --- /dev/null +++ b/files/es/web/api/window/document/index.html @@ -0,0 +1,46 @@ +--- +title: Window.document +slug: Web/API/Window/document +translation_of: Web/API/Window/document +--- +
{{APIRef}}
+ +

Resumen

+ +

Retorna una referencia al documento contenido en la ventana.

+ +
Nota: {{Fx_minversion_inline(3)}} Firefox 3 altera la seguridad para los documentos entre ventanas, de modo que sólo el dominio desde el cual ha sido cargada una ventana puede acceder al documento. A pesar de que esto rompe el funcionamiento de algunos sitios existentes, es una modificación adoptada por Firefox 3 e Internet Explorer 7, que resulta en una mejora de seguridad.
+ +

Sintaxis

+ +
doc = window.document
+
+ +

Parámetros

+ + + +

Example

+ +
<!DOCTYPE html>
+<html>
+<head>
+   <title>Hola, Mundo!</title>
+</head>
+<body>
+
+<script type="text/javascript">
+   var doc = window.document;
+   console.log(doc.title); // Hola, Mundo!
+</script>
+
+</body>
+</html>
+ +

Especificación

+ + diff --git a/files/es/web/api/window/frameelement/index.html b/files/es/web/api/window/frameelement/index.html new file mode 100644 index 0000000000..27f809265c --- /dev/null +++ b/files/es/web/api/window/frameelement/index.html @@ -0,0 +1,106 @@ +--- +title: Window.frameElement +slug: Web/API/Window/frameElement +translation_of: Web/API/Window/frameElement +--- +
{{ ApiRef }}
+ +

Retorna el elemento (como es {{HTMLElement("iframe")}} ó {{HTMLElement("object")}}) en el cual la ventana está incrustada o null si el elemento es bien de nivel superior (top-level) o bien está inrustada en un documento con un origen de diferente; esto es, en situaciones de origen cruzado.

+ +

Sintaxes

+ +
frameEl = window.frameElement;
+
+ + + +
+

A pesar del nombre de esta propiedad, funciona para documentos empotrados en cualquier forma o método de incrustación, incluyendo {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, or {{HTMLElement("embed")}}.

+
+ +

Ejemplo

+ +
var frameEl = window.frameElement;
+// Si estamos empotrados, cambia la URL de elemento contenedor to 'http://mozilla.org/'
+if (frameEl) {
+  frameEl.src = 'http://mozilla.org/';
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{ SpecName('HTML WHATWG', '#dom-frameelement', 'Window.frameElement') }}{{ Spec2('WebRTC 1.0') }}Especificación inicial.
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico4?{{CompatGeckoDesktop("1")}}5.5?12.1?4?
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/window/fullscreen/index.html b/files/es/web/api/window/fullscreen/index.html new file mode 100644 index 0000000000..7662bc7888 --- /dev/null +++ b/files/es/web/api/window/fullscreen/index.html @@ -0,0 +1,43 @@ +--- +title: window.fullScreen +slug: Web/API/Window/fullScreen +tags: + - Referencia_DOM_de_Gecko + - páginas_a_traducir +translation_of: Web/API/Window/fullScreen +--- +
{{APIRef}}
+ +

Resumen

+ +

Esta propiedad indica si la ventana se presenta en modo de pantalla comleta o no. Su funcionamiento es sólo fiable a partir de Gecko 1.9 (Firefox 3), ver Notas más abajo.

+ +

Sintaxis

+ +
var isInFullScreen = windowRef.fullScreen;
+
+ +


+ Con privilegios chrome, el valor de esta propiedad se puede cambiar, de otra forma, es de sólo lectura. Ten en cuenta que si intentas cambiar el valor de esta propiedad sin tener privilegios chrome, no cambiará nada y la propiedad simplemente fallará. Esto se hace para evitar que los programas diseñados para Internet Explorer fallen.

+ +

Valor devuelto

+ +
+
isInFullScreen
+
Un valorbinario . Los valores posibles son:
+
+ + + +

Ejemplos

+ +

Especificaciones

+ +

DOM nivel 0. window.fullScreen no forma parte de ninguna especificación W3C.

+ +

Notas

+ +

El funcionamiento de esta propiedad es fiable sólo en Mozilla 1.9 (Firefox 3) y posteriores. Mozilla 1.8 y versiones anteriores manejan esta propiedad pero el valor devuelto es siempre false, aún cuando la ventana está en modo pantalla completa ({{ Bug(127013) }}).

diff --git a/files/es/web/api/window/getcomputedstyle/index.html b/files/es/web/api/window/getcomputedstyle/index.html new file mode 100644 index 0000000000..3ce1aa1c0b --- /dev/null +++ b/files/es/web/api/window/getcomputedstyle/index.html @@ -0,0 +1,26 @@ +--- +title: Window.getComputedStyle +slug: Web/API/Window/getComputedStyle +translation_of: Web/API/Window/getComputedStyle +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve el estilo computado del elemento. Los estilos computados representan los valores finales computed (en)  de las propiedades CSS del elemento. 

+

Sintaxis

+
var style = window.getComputedStyle(element, pseudoElt);
+
+ +

Ejemplo

+
var element = document.getElementById(“elemId”);
+var style = document.defaultView.getComputedStyle(element, pseudoElt);
+
+

Descripción

+

El objeto devuelto es del mismo tipo que el objeto devuelto por la propiedad style del elemento, sin embargo ambos objetos tienen un propósito distinto. El objeto devuelto por getComputedStyle es de sólo lectura y puede usarse para inspeccionar el estilo del elemento (incluyendo los estilos de una etiqueta <style> o una hoja de estlo).  El objeto elt.style debería usarse para establecerel estilo de un elemento específico.

+

El primer argumento debe ser un Element, no un nodo (como en #texto Node).

+

Especificación

+

DOM Level 2 Style: getComputedStyle

+

{{ languages( { "ja": "ja/DOM/window.getComputedStyle" } ) }}

diff --git a/files/es/web/api/window/getselection/index.html b/files/es/web/api/window/getselection/index.html new file mode 100644 index 0000000000..4e08399ad5 --- /dev/null +++ b/files/es/web/api/window/getselection/index.html @@ -0,0 +1,53 @@ +--- +title: window.getSelection +slug: Web/API/Window/getSelection +tags: + - páginas_a_traducir +translation_of: Web/API/Window/getSelection +--- +
{{ ApiRef() }}
+ +

Resumen

+ +

Devuelve un objeto de selección representando el rango del texto seleccionado por el usuario. NB. this is nothing to do with the DOM selection list object! What the heck is 'selection list object'? -Nickolay

+ +

Sintaxis

+ +
selection =window.getSelection() ;
+
+ + + +

Ejemplo

+ +
function foo() {
+   var selObj = window.getSelection();
+   alert(selObj);
+   var selRange = selObj.getRangeAt(0);
+   // ... Hacer las cosas con el rango ...
+}
+
+ +

Notas

+ +

En JavaScript, cuando un objeto de selección es pasado a una función que espera una cadena de caracteres como parámetro (como {{ Domxref("window.alert") }} o {{ Domxref("document.write") }}), una representación de texto, del objeto de selección (e.j. el texto seleccionado) es pasado en vez del objeto en sí. Esto hace al objeto de selección parecer una cadena de caracteres (texto), cuando realmente es un objeto con sus propios métodos y propiedades. Específicamente, el valor de retorno de llamar al método toString() del objeto de selección es lo que realmente se pasa como parámetro a la función.

+ +

En el ejemplo de arriba, selObj es automaticamente "convertido" cuando pasó a window.alert. Sin embargo, para usar una propiedad String de JavaScript o un método como length o substr, debe llamar manualmente al método toString. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian

+ +

Especificación

+ +

DOM Nivel 0. No es parte de ninguna especificación.

+ +

Ver también

+ +

Selection, Range

+ + + + + +
+ +

{{ languages( { "en": "en/DOM/window.getSelection", "fr": "fr/DOM/window.getSelection", "it": "it/DOM/window.getSelection", "ja": "ja/DOM/window.getSelection", "pl": "pl/DOM/window.getSelection" } ) }}

diff --git a/files/es/web/api/window/hashchange_event/index.html b/files/es/web/api/window/hashchange_event/index.html new file mode 100644 index 0000000000..e0a5be4bbc --- /dev/null +++ b/files/es/web/api/window/hashchange_event/index.html @@ -0,0 +1,194 @@ +--- +title: hashchange +slug: Web/API/Window/hashchange_event +tags: + - Referencia + - URL + - Web +translation_of: Web/API/Window/hashchange_event +--- +

El evento hashchange es ejecutado cuando el fragmento identificador de la URL ha cambiado (la parte de la URL que continúa despues del simbolo #, incluyendo el símbolo #).

+ + + + + + + + + + + + + + + + + + + + + + + + +
BurbujasSi
CancelableNo
Objetivo{{domxref("Window")}}
Interface{{domxref("HashChangeEvent")}}
Acción predeterminadaNinguna
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The browsing context (window).
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.
oldURL {{readonlyInline}}{{jsxref("String")}}The previous URL from which the window was navigated.
newURL {{readonlyInline}}{{jsxref("String")}} 
+ +

En esta página se enlistan algunos scripts de ejemplo. Básicamente estos scripts revisan el location.hash en un intervalo regular. Aquí se muestra una versión que permite que solo un controlador sea ligado a la propiedad window.onhashchange:

+ +
;(function(window) {
+
+  // salir si el navegador implementa el evento
+  if ("onhashchange" in window) { return; }
+
+  var location = window.location,
+    oldURL = location.href,
+    oldHash = location.hash;
+
+  // revisa el hash cada 100ms
+  setInterval(function() {
+    var newURL = location.href,
+      newHash = location.hash;
+
+    // si el hash ha cambiado y un controlador ha sido ligado...
+    if (newHash != oldHash && typeof window.onhashchange === "function") {
+      // ejecuta el controlador
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}{{Spec2('HTML WHATWG')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico5.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}[1]8.0[2]10.65.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico2.2{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}9.011.05.0
+
+ +

[1] Soporte para los atributos oldURL/newURL agregado en Firefox 6.

+ +

[2] Atributos oldURL/newURL no soportados.

+ +

Ver también

+ + diff --git a/files/es/web/api/window/history/index.html b/files/es/web/api/window/history/index.html new file mode 100644 index 0000000000..02fb7a8cab --- /dev/null +++ b/files/es/web/api/window/history/index.html @@ -0,0 +1,39 @@ +--- +title: Window.history +slug: Web/API/Window/history +translation_of: Web/API/Window/history +--- +

{{ APIRef }}

+ +

La propiedad de solo lectura Window.history regresa una referencia al objeto {{domxref("History")}}, quien provee una interfaz para manipular el historial de sesión del navegador (páginas visitadas en el tab o marco de la pagina actual cargada).

+ +

Ver Manipulando el historial del navegador para ejemplos y detalles. En particular, este articulo explica características seguras de los métodos pushState() y replaceState() que debe tener en cuenta antes de usarlos. 

+ +

Sintaxis

+ +
var historyObj = window.history;
+
+ +

Ejemplo

+ +
history.back();     // equivalente a hacer clic en el botón de regresar
+history.go(-1);     // equivalente a history.back();
+
+ +

Notas

+ +

Para las páginas de nivel superior se puede ver la lista de páginas en el historial de la sesión, accesible a través del objeto de la History, en los desplegables de tu navegador junto a los botones de avance y retroceso.

+ +

Por razones de seguridad el objeto History no permite que el código sin privilegio acceda a las URLs de otras páginas en el historial de la sesión, pero permite navegar por el historial de la sesión.

+ +

No hay manera de limpiar el historial de la sesión o desactivar la parte de atrás/adelante desde la navegación de código sin privilegios. La solución más cercana disponible es el método location.replace(), que sustituye al elemento actual de la historia sesión con la URL proporcionada.

+ +

{{Compat("api.Window.history")}}

+ +

+

Especificaciones

+

+ + diff --git a/files/es/web/api/window/index.html b/files/es/web/api/window/index.html new file mode 100644 index 0000000000..c0f8e9aa38 --- /dev/null +++ b/files/es/web/api/window/index.html @@ -0,0 +1,412 @@ +--- +title: window +slug: Web/API/Window +tags: + - API + - DOM + - Window + - páginas_a_traducir +translation_of: Web/API/Window +--- +

{{APIRef}}

+ +

El objeto window representa la ventana que contiene un documento DOM; la propiedad document apunta al DOM document cargado en esa ventana. El objeto window al que pertenece un documento puede ser obtenido usando la propiedad {{Domxref("document.defaultView")}}.

+ +

Esta sección proporciona una pequeña referencia a todos los métodos, propiedades y eventos disponibles a través del objeto DOM window. El objeto window implementa la interfaz Window , que a su vez hereda de la interfaz AbstractView. Algunas funciones como globales adicionales, espacios de nombres, interfaces, y constructores no típicamente asociados con el objeto window pero disponibles en éste, están listados en las Referencia de JavaScript y en el Referencia DOM de Gecko.

+ +

En un navegador con pestañas, como Firefox, cada pestaña contine su propio window object (y si está escribiendo una extensión, la ventana del navegador es una ventana separada también - para más información vea Trabajar con ventanas desde el código chrome). Esto significa que el objeto window no se comparte entre diferentes pestañas de la misma ventana del navegador. Algunos métodos, como {{Domxref("window.resizeTo")}} y {{Domxref("window.resizeBy")}} se aplican sobre toda la ventana del navegador y no sobre una pestaña específica a la que pertenece el objeto window. Generalmente, cualquier cosa que razonablemente no pueda pertenecer a una pestaña, pertenece a la ventana.

+ +

Constructores

+ +

Ver también DOM Interfaces.

+ +
+
{{domxref("Window.DOMParser")}}
+
DOMParser puede traducir una fuente XML o  HTML almacenada en una cadena en un Documento DOM. DOMParser se especifica en DOM Parsing and Serialization.
+
{{domxref("Image")}}
+
Se usa para crear un {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Se usa para crear un {{domxref("HTMLOptionElement")}}
+
+ +
+
{{domxref("StaticRange")}} {{experimental_inline}} {{readonlyinline}}
+
Retorna un constructor {{domxref('StaticRange.StaticRange','StaticRange()')}} que crea un objeto {{domxref('StaticRange')}}.
+
+ +
+
{{domxref("Worker")}}
+
Se usa para crear un Web worker.
+
{{domxref("Window.XMLSerializer")}}
+
Convierte un árbol DOM en una fuente XML o HTML.
+
+ +

Propiedades

+ +

Esta interface hereda propiedades de {{domxref("EventTarget")}} interface e implementa propiedades de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, y {{domxref("WindowEventHandlers")}}.

+ +

Nota que la propiedades que son objetos (por ejemplo para sobreescribir los prototipos de los elementos built-in) son descritos en una sección separada más abajo.

+ +
+
{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
+
An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
Esta propiedad indica si la actual ventana esta cerrada o abierta.
+
Window.Components {{Non-standard_inline}}
+
El punto de acceso a muchas propiedades  XPCOM.  Algunas propiedades, ej. classes, son disponibles solamente a codigo suficientemente privilegiado. El codigo Web no deberia usar esta propiedad.
+
{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}
+
Retorna una referencia al objeto de la consola proveyendo acceso a la consola debugger del navegador.
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the XUL controller objects for the current chrome window.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Returns the browser crypto object.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Gets/sets the status bar text for the given window.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the ratio between physical pixels and device independent pixels in the current display.
+
{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}
+
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Sinonimo de {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Retorna una referencia al documento que esa ventana contiene.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Returns an array of the subframes in the current window.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
Esta propiedad indica si la ventana esta desplegada en pantalla completa o no.
+
{{domxref("window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
+ Was: Multiple storage objects that are used for storing data across multiple pages.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Retorna una referencia a la historia del objeto.
+
{{domxref("Window.innerHeight")}}
+
Obtiene la altura del area de contenido del navegador incluyendo, si es interpretado, la barra de deslizado.
+
{{domxref("window.innerWidth")}}
+
Obtiene el ancho del area de contenido de la ventana del navegador, si es interpretado, la barra de deslizado vertical.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Retorna el numero de marcos en la ventana. Ver tambien {{domxref("window.frames")}}.
+
{{domxref("Window.location")}} {{ReadOnlyInline}}
+
Obtiene/fija la location, o URL actual, del objeto de la ventana.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Retorna el objeto locationbar, cuya visibilidad puede ser fijada en la ventana.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Retorna una referencia al objeto almacenamiento local usado para almacenar datos que pueden ser de accedidos por el origen que los creo.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Retorna el objeto barra de menu, cuya visibilidad puede ser fijada en la ventana.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Retorna el objeto message manager  para esta ventana.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}
+
The time in milliseconds since epoch at which the current animation cycle began.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
+
{{domxref("Window.name")}}
+
Gets/sets the name of the window.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Returns a reference to the navigator object.
+
{{domxref("Window.opener")}}
+
Returns a reference to the window that opened this current window.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Gets the height of the outside of the browser window.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Gets the width of the outside of the browser window.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
An alias for {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("SpeechSynthesisGetter.speechSynthesis")}} {{readOnlyInline}}
+
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Returns a reference to the parent of the current window or subframe.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Provides a hosting area for performance related attributes.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Formerly provided access to install and remove PKCS11 modules.
+
{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}
+
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Returns a reference to the screen object associated with the window.
+
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled vertically.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Returns an object reference to the window object itself.
+
{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}
+
Returns a storage object for storing data within a single page session.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns a reference to the window object of the sidebar.
+
{{domxref("Window.status")}}
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Returns a reference to the topmost window in the window hierarchy. This property is read only.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Returns a reference to the current window.
+
window[0], window[1], etc.
+
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
+
+ +

Methods

+ +

 Esta interfaz hereda metodos de la interfaz {{domxref("EventTarget")}}  e implementa metodos {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, y {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Registra un controlador de eventos a un tipo de evento especifico en la ventana.
+
{{domxref("Window.alert()")}}
+
Muestra una pequeña ventana de alerta.
+
El estilo y posición de la ventana puede variar dependiendo de que navegador este usando.
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Regresa en la ventana de historial.
+
{{domxref("Window.blur()")}}
+
Sets focus away from the window.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("Window.close()")}}
+
Cierra la ventana actual.
+
{{domxref("Window.confirm()")}}
+
Muestra una ventana de comfirmación con dos únicas y posibles respuestas. Confirmar y Cancelar.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Usado para activar un evento.
+
{{domxref("Window.dump()")}}
+
Escribe un mensaje a la consola.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.find()")}}
+
Busca un string dado en una ventana.
+
{{domxref("Window.focus()")}}
+
Fija el enfoque en la ventana actual.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves the window one document forward in the history.
+
{{domxref("Window.getAttention()")}}
+
Flashes the application icon.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaulComputedStyle()")}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Regresa el navegador a la pagina de inicio.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimiza la ventana.
+
{{domxref("Window.moveBy()")}}
+
Mueve la ventana actual por una cantidad especificada.
+
{{domxref("Window.moveTo()")}}
+
Mueve la ventana a una coordenada especificada.
+
{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a MozBeforePaint event to fire before that repaint occurs.
+
{{domxref("Window.open()")}}
+
Abre una nueva ventana.
+
{{domxref("Window.openDialog()")}}
+
Abre una nueva ventana de dialogo.
+
{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("element.removeEventListener","Window.removeEventListener()")}}
+
Removes an event listener from the window.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{domxref("Window.restore()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setCursor()")}}
+
Changes the cursor for the current window
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("Window.setResizable")}}
+
{{todo("NeedsContents")}}
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}
+
Displays a modal dialog.
+
{{domxref("Window.sizeToContent()")}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Controlador de Eventos

+ +

Estas son propiedades del objeto ventana que pueden ser fijadas para establecer controladores de eventos para las diversar cosas que pueden pasar en la ventana que podria ser de interes.

+ +

Esta interfaz hereda controladores de eventos de la interfaz {{domxref("EventTarget")}} e implementa controladores de eventos desde {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, y {{domxref("WindowEventHandlers")}}.

+ +
+

Nota: Empezando en {{Gecko("9.0")}}, se puede usar el sintaxis if ("onabort" in window) para determinar si existe una propiedad dada de controlador de eventos o no. Esto es porque interfazes de controlador de eventos han sido actualizadas al respectivo web IDL interfaz. Ver DOM event handlers para mas detalles.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
An event handler property for abort events on the window.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
An event handler property for blur events on the window.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
An event handler property for click events on the window.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
An event handler property for handling the window close event.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
An event handler property for right-click events on the window.
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
An event handler property for any device orientation changes
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("GlobalEventHandlers.onerror")}}
+
An event handler property for {{event("error")}} events raised on the window.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
An event handler property for {{event("focus")}} events on the window.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
An event handler property for hash change events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
An event handler property for {{event("keydown")}} events on the window.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
An event handler property for {{event("keypress")}} events on the window.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
An event handler property for {{event("keyup")}} events on the window.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
An event handler property for window loading.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
An event handler property for mousedown events on the window.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
An event handler property for mousemove events on the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
An event handler property for mouseout events on the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
An event handler property for mouseover events on the window.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
An event handler property for mouseup events on the window.
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
An event handler property for pageshow events on the window.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
An event handler property for pagehide events on the window.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for popstate events, which are fired when navigating to a session history entry representing a state object.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
An event handler property for reset events on the window.
+
{{domxref("GlobalEventHandlers.onresize")}}
+
An event handler property for window resizing.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
An event handler property for window scrolling.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
An event handler property for window selection.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
An event handler property for submits on window forms.
+
{{domxref("Window.onunload")}}
+
An event handler property for unload events on the window.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events
+
+ +

Constructores

+ +

See also the DOM Interfaces.

+ +
+
{{domxref("Window.DOMParser")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Used for creating a Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Interfaces

+ +

Ver DOM Reference

+ +

Ver Tambien

+ + diff --git a/files/es/web/api/window/innerheight/index.html b/files/es/web/api/window/innerheight/index.html new file mode 100644 index 0000000000..ef563d9e97 --- /dev/null +++ b/files/es/web/api/window/innerheight/index.html @@ -0,0 +1,79 @@ +--- +title: window.innerHeight +slug: Web/API/Window/innerHeight +tags: + - API + - Propiedades + - Referências + - Window +translation_of: Web/API/Window/innerHeight +--- +
//Propiedad solo lectura del objeto window.
+ +

    Representa la altura (en pixeles) del viewport

+ +

Sintaxis

+ +
var alturaDelViewport = window.innerHeight;
+ +

Valor

+ +

Como retorno, la propiedad innerHeight del objeto window nos retornara un valor de tipo entero, que representara (en pixeles) la altura del viewport.

+ +

La propiedad window.innerHeight es solo de lectura; Y no tiene un valor por defecto.

+ +

Notas .                           

+ +

La propiedad innerHeight es soportada por cualquier objeto de ventana. Pudiendo ejectutarse en un conjunto de marcos  (<frameset> </frameset>). O en una ventana secundaria.

+ +

Es un algoritmo para obtener la altura del viewport, excluyendo si se representa la barra de desplazamiento horizontal

+ +

Ejemplo

+ +

Asumiendo un frameset

+ +
var alturaViewport = window.innerHeight;
+
+var alturaViewport = self.innerHeight;
+// self es window
+
+
+
+ +

  //otra forma de obtener la altura (aúnque, no del         viewport, síno de la ventana), es usando  la propiedad outerHeight, del objeto window.

+ +

Ejemplo (Grafica)

+ +

innerHeight vs outerHeight illustration

+ +

Especificacion

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}{{Spec2('CSSOM View')}}Initial definition
+ +


+ Compatibilidad del navegador

+ + + +

Tambien me intersa

+ + diff --git a/files/es/web/api/window/localstorage/index.html b/files/es/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..c93ae93d98 --- /dev/null +++ b/files/es/web/api/window/localstorage/index.html @@ -0,0 +1,148 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Propiedad + - Referencia + - Web Storage + - WindowLocalStorage + - localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

La propiedad de sólo lectura localStorage te permite acceder al objeto local {{DOMxRef("Storage")}}; los datos persisten almacenados entre de las diferentes sesiones de navegación. localStorage es similar a sessionStorage. La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando finaliza la sesion de navegación - lo cual ocurre cuando se cierra la página.

+ +

Con sessionStorage los datos persisten sólo en la ventana/tab que los creó, mientras que con localStorage los datos persisten entre ventanas/tabs con el mismo origen.

+ +

Debe tenerse en cuenta que los datos almacenados tanto en localStorage como en sessionStorage son específicos del protocolo de la página.

+ +

Las claves y los valores son siempre cadenas de texto (ten en cuenta que, al igual que con los objetos, las claves de enteros se convertirán automáticamente en cadenas de texto).

+ +

Sintaxis

+ +
miStorage = window.localStorage;
+ +

Valor

+ +

Un objeto {{DOMxRef("Storage")}} que se puede utilizar para acceder al espacio de almacenamiento local del origen actual.

+ +

Excepciones

+ +
+
SecurityError
+
La solicitud viola una decisión de política, o el origen no es una tupla válida de protocolo/host/puerto (esto puede suceder si el origen usa el protocolo file: o data:, por ejemplo). Por ejemplo, el usuario puede tener su navegador configurado a fin de denegar el permiso para conservar datos al origen especificado.
+
+ +

Ejemplo

+ +

El siguiente código accede al objeto local {{DOMxRef("Storage")}} actual y agrega un ítem al mismo usando {{DOMxRef("Storage.setItem()")}}.

+ +
localStorage.setItem('miGato', 'Juan');
+ +
+

Nota: Por favor ver el articulo Usando la Web Storage API para un ejemplo completo.

+
+ +

La sintaxis para leer el ítem almacenado en localStorage es la siguiente:

+ +
var cat = localStorage.getItem('miGato');
+ +

La sintaxis para eliminar el ítem almacenado en localStorage es la siguiente:

+ +
localStorage.removeItem('miGato');
+ +

La sintaxis para eliminar todos los ítems almacenados en localStorage es la siguiente:

+ +
// Elimina todos los elementos
+localStorage.clear();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
Especificación EstadoComentario
{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}{{Spec2('Web Storage')}} 
+ +

Compatibiliad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatUnknown }}811iOS 3.2
+ +

Todos los navegadores tienen variaciones en los niveles de capacidad de almacenamiento tanto para localStorage como para sessionStorage. He aquí un detalle sobre las distintas capacidades en los diferentes navegadores.

+
+ +
+

Nota: a partir de iOS 5.1, Safari Mobile almacena la data del localStorage en el directorio de cache, lo cual esta sujeto al borrado y perdida ocacional de los datos ante la petición del sistema operativo, tipicamente requerido cuando el dispositivo sufre de falta de espacio de almacenamiento.

+
+ +

Ver  también

+ + diff --git a/files/es/web/api/window/location/index.html b/files/es/web/api/window/location/index.html new file mode 100644 index 0000000000..d1d44a2b84 --- /dev/null +++ b/files/es/web/api/window/location/index.html @@ -0,0 +1,274 @@ +--- +title: Window.location +slug: Web/API/Window/location +tags: + - Location + - contexto + - navegación +translation_of: Web/API/Window/location +--- +

{{APIRef}}

+ +

La propiedad de sólo lectura Window.location retorna un objeto {{domxref("Location")}} con información acerca de la ubicación actual del documento.

+ +

Window.location no sólo es una propiedad de sólo lectura, también se le puede asignar un {{domxref("DOMString")}}. Esto significa que puedes trabajar con location como si fuera una cadena de caracteres en la mayoría de los casos: location = 'http://www.example.com' es un sinónimo de location.href = 'http://www.example.com'.

+ +

Sintaxis

+ +
var oldLocation = location;
+location = newLocation;
+
+ +

Ejemplos

+ +

Ejemplo básico

+ +
alert(location); // alerts "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"
+ +

Ejemplo #1: Navegar a una nueva página

+ +

Cuando un nuevo valor es asignado a un objeto location, un documento será cargado usando la URL como si location.assing() fuera llamada con la URL modificada. Note que configuraciones de seguridad como CORS, esto puede ser prevenido cuando pase.

+ +
location.assign("http://www.mozilla.org"); // o
+location = "http://www.mozilla.org";
+
+ +

Ejemplo #2: Forzar la recarga de una página desde el servidor

+ +
location.reload(true);
+ +

Ejemplo #3

+ +

Considerando el siguiente ejemplo, el cual recargará la página usando el método replace() para insertar un valor de location.pathname dentro del hash:

+ +
function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
+
+ +
Nota: El ejemplo anterior funciona en situaciones cuando location.hash no necesita ser retenido. Sin embargo, en navegadores basados en Gecko, configurar location.pathname en esta manera eliminará cualquier información en location.hash, mientras que en WebKit (y posiblemente en otros navegadores), configurar el pathname no afectará el hash. Si necesitas cambiar el pathname pero mantener el hash como está, usa el método replace(), el cual funcionará consistentemente a través de los navegadores..
+ +

Ejemplo #4: Muestra las propiedades de la URL actual en una ventana emergente:

+ +
function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// in html: <button onclick="showLoc();">Show location properties</button>
+
+ + + +
function sendData (sData) {
+  location.search = sData;
+}
+
+// in html: <button onclick="sendData('Some data');">Send data</button>
+
+ +

La siguiente URL con "?Some%20data" anexa es enviada al servidor (Si no hay ninguna acción tomada por el servidor, el documento actual es recargado con la cadena de caracteres modificada).

+ +

Ejemplo #6: Usando marcadores sin cambiar la propiedad hash:

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+<title>MDN Example</title>
+<script>
+function showNode (oNode) {
+  var nLeft = 0, nTop = 0;
+  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+  document.documentElement.scrollTop = nTop;
+  document.documentElement.scrollLeft = nLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+</script>
+<style>
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+</style>
+</head>
+
+<body>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
+<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p>
+<p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Go to bookmark #2</span>&nbsp;]</p>
+<p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p>
+<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
+<p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+<p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p>
+<p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p>
+<p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p>
+<p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Go to bookmark #1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Go to bookmark #1 without using location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Go to bookmark #3</span>&nbsp;]</p>
+<p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p>
+<p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p>
+<p id="myBookmark3"><em>Here is the bookmark #3</em></p>
+<p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p>
+<p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p>
+<p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p>
+<p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p>
+<p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p>
+<p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p>
+<p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p>
+<p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p>
+<p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p>
+<p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p>
+</body>
+</html>
+
+ +
Nota: La función showNode es también un ejemplo del uso del ciclo for sin una sección de statement. En este caso un punto y coma es siempre puesto inmediatamente después de la declaración de el ciclo.
+ +

…De igual manera pero con un scroll animado:

+ +
var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+       /*
+       * nDuration: the duration in milliseconds of each frame
+       * nFrames: number of frames for each scroll
+       */
+       nDuration = 200, nFrames = 10;
+
+  function _next () {
+    if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+    if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
+    _itFrame++;
+  }
+
+  function _chkOwner () {
+    if (_isBot) { _isBot = false; return; }
+    if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = sBookmark;
+    _useHash = arguments.length === 1 || bUseHash;
+    for (
+      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
+      oNode;
+      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+    );
+    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
+    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
window.location.origin30.0.1599.101 (possibly earlier){{CompatGeckoDesktop("21.0")}}11{{CompatUnknown}}7 (possibly earlier, see webkit bug 46558)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
window.location.origin30.0.1599.101 (possibly earlier){{CompatGeckoMobile("21.0")}}{{CompatUnknown}}{{CompatUnknown}}7 (possibly earlier, see webkit bug 46558)
+
+ +

Ver también

+ + diff --git a/files/es/web/api/window/locationbar/index.html b/files/es/web/api/window/locationbar/index.html new file mode 100644 index 0000000000..8cff663446 --- /dev/null +++ b/files/es/web/api/window/locationbar/index.html @@ -0,0 +1,66 @@ +--- +title: Window.locationbar +slug: Web/API/Window/locationbar +translation_of: Web/API/Window/locationbar +--- +
{{APIRef}}
+ + + +

Devuelve el objeto locationbar, del cual se puede comprobar su visibilidad.

+ +

Sintaxis

+ +
objRef = window.locationbar
+
+ +

Ejemplo

+ +

El siguiente ejemplo completo en HTML, muestra la forma en la que se utiliza la propiedad visible del objeto locationbar.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Various DOM Tests</title>
+
+<script>
+var visible = window.locationbar.visible;
+</script>
+
+</head>
+<body>
+  <p>Various DOM Tests</p>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}{{Spec2('HTML5 W3C')}} 
+ +

Ver también

+ + diff --git a/files/es/web/api/window/matchmedia/index.html b/files/es/web/api/window/matchmedia/index.html new file mode 100644 index 0000000000..eaa7be6dc3 --- /dev/null +++ b/files/es/web/api/window/matchmedia/index.html @@ -0,0 +1,67 @@ +--- +title: Window.matchMedia() +slug: Web/API/Window/matchMedia +tags: + - API + - CSSOM View + - JavaScript + - Media Queries + - Referencia + - Window + - metodo +translation_of: Web/API/Window/matchMedia +--- +
{{APIRef}}
+ +

El método Window.matchMedia() devuelve un nuevo objeto {{domxref("MediaQueryList")}} que representa los analizados de la media query indicada.

+ +

Sintaxis

+ +
mql = window.matchMedia(mediaQueryString)
+ +

Donde mediaQueryString es una cadena de texto que representa la media query de la que devolver un nuevo objeto {{domxref("MediaQueryList")}}.

+ +

Ejemplo

+ +

Este código le permite manejar las cosas de forma diferente cuando la ventana es muy estrecha.

+ +
if (window.matchMedia("(min-width: 400px)").matches) {
+  /* La pantalla tiene al menos 400 píxeles de ancho */
+} else {
+  /* La pantalla tiene menos de 400 píxeles de ancho */
+}
+ +

Consulte Probando media queries para ver ejemplos adicionales.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}{{Spec2("CSSOM View")}}Definición initial
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.Window.matchMedia")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/window/menubar/index.html b/files/es/web/api/window/menubar/index.html new file mode 100644 index 0000000000..a81e1e45ef --- /dev/null +++ b/files/es/web/api/window/menubar/index.html @@ -0,0 +1,42 @@ +--- +title: Window.menubar +slug: Web/API/Window/menubar +translation_of: Web/API/Window/menubar +--- +

{{ APIRef() }}

+ +

Resumen

+ +

Retorna el objeto menubar, cuya visibilidad puede ser examinada.

+ +

Sintaxis

+ +
objRef = window.menubar
+
+ +

Ejemplo

+ +

El siguiente ejemplo HTML completo muestra la forma en que es utilizada la propiedad visible del objeto menubar.

+ +
<html>
+<head>
+  <title>Various DOM Tests</title>
+  <script>
+    var visible = window.menubar.visible;
+  </script>
+</head>
+<body>
+  <p>Various DOM Tests</p>
+</body>
+</html>
+
+ +

Ver también:

+ +

window.locationbar, window.personalbar, window.scrollbars, window.statusbar, window.toolbar

+ +

 

+ +

Especificación

+ +

HTML5

diff --git a/files/es/web/api/window/moveby/index.html b/files/es/web/api/window/moveby/index.html new file mode 100644 index 0000000000..cd8cd4ba9d --- /dev/null +++ b/files/es/web/api/window/moveby/index.html @@ -0,0 +1,70 @@ +--- +title: Window.moveBy() +slug: Web/API/Window/moveBy +translation_of: Web/API/Window/moveBy +--- +
{{APIRef}}
+ +

Resumen

+ +

Mueve la actual ventana a consecuencia de una cantidad especificada.

+ +

Sintaxis

+ +
window.moveBy(deltaX, deltaY)
+
+ +

Parametros

+ + + +

Ejemplo

+ +
function budge() {
+  moveBy(10, -10);
+}
+ +

Notes

+ +

Puedes usar numeros negativos como parametros para esta función. Esta función realiza un movimiento relativo mientras que {{domxref("window.moveTo")}} hace un movimiento absoluto.

+ +

Desde Firefox 7, no es posible para un sitio web mover una ventana en el navegador, deacuerdo con las siguientes reglas:

+ +
    +
  1. No puedes mover una ventana o pestaña que no haya sido creada por window.open.
    2. +
  2. No puedes mover una ventana o pestaña cuando esta en una ventana con más de una sola pestaña.
    3. +
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSSOM View', '#dom-window-moveby', 'window.moveBy()') }}{{ Spec2('CSSOM View') }} 
+ +

Compatilidad de Navegador

+ + + +

{{Compat("api.Window.moveBy")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/window/navigator/index.html b/files/es/web/api/window/navigator/index.html new file mode 100644 index 0000000000..4766713060 --- /dev/null +++ b/files/es/web/api/window/navigator/index.html @@ -0,0 +1,60 @@ +--- +title: Window.navigator +slug: Web/API/Window/navigator +tags: + - API + - DOM + - DOM Reference + - HTML-DOM + - Property + - Reference + - WebAPI + - Window + - Window.navigator +translation_of: Web/API/Window/navigator +--- +
+ {{ApiRef}}
+
+ La propiedad de solo lectura Window.navigator es una referencia al objeto {{domxref("Navigator")}}, el cual puede ser utilizado para obtener información sobre la aplicación que está ejecutando el script.
+

 

+

Sintaxis

+
navigatorObject = window.navigator
+

 

+

Ejemplos

+

Ejemplo #1: Detectar un navegador y retornar un string

+
var sBrowser, sUsrAg = navigator.userAgent;
+
+if(sUsrAg.indexOf("Chrome") > -1) {
+    sBrowser = "Google Chrome";
+} else if (sUsrAg.indexOf("Safari") > -1) {
+    sBrowser = "Apple Safari";
+} else if (sUsrAg.indexOf("Opera") > -1) {
+    sBrowser = "Opera";
+} else if (sUsrAg.indexOf("Firefox") > -1) {
+    sBrowser = "Mozilla Firefox";
+} else if (sUsrAg.indexOf("MSIE") > -1) {
+    sBrowser = "Microsoft Internet Explorer";
+}
+
+alert("Usted está utilizando: " + sBrowser);
+

Ejemplo #2: Detectar un navegador y retornar un índice

+
function obtenerIdNavegador() {
+    var
+        aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+        sUsrAg = navigator.userAgent, nIdx = aKeys.length - 1;
+
+    for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+    return nIdx
+}
+
+console.log(obtenerIdNavegador());
+
+

Especificación

+ +

Vea además

diff --git a/files/es/web/api/window/offline_event/index.html b/files/es/web/api/window/offline_event/index.html new file mode 100644 index 0000000000..7c503b836a --- /dev/null +++ b/files/es/web/api/window/offline_event/index.html @@ -0,0 +1,70 @@ +--- +title: Offline +slug: Web/API/Window/offline_event +tags: + - Event + - Evento + - Reference + - Referencia +translation_of: Web/API/Window/offline_event +--- +
{{APIRef}}
+ +

El evento offline se activa cuando el navegador ha pierdido acceso a la red y el valor de navigator.onLine cambia a false.

+ +

Información General

+ +
+
Especificación
+
HTML5 Offline
+
Interfaz
+
Evento
+
Burbujas
+
No
+
Cancelable
+
No
+
Target
+
DefaultView (<window>)
+
Acción por Defecto
+
Ninguna
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{readonlyInline}}{{domxref("EventTarget")}}Evento target (el objetivo más alto en el árbol DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Tipo de evento.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si el evento normalmente burbujea o no.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si el evento normalmente es cancelable o no.
+ +

Eventos Relacionados

+ + diff --git a/files/es/web/api/window/open/index.html b/files/es/web/api/window/open/index.html new file mode 100644 index 0000000000..8e0376ee75 --- /dev/null +++ b/files/es/web/api/window/open/index.html @@ -0,0 +1,663 @@ +--- +title: Window.open() +slug: Web/API/Window/open +translation_of: Web/API/Window/open +--- +

{{APIRef}}

+ +

Carga un recurso en el contexto de un nuevo navegador (como una ventana) o uno que ya existe, dependiendo de los parametros.

+ +

Sintaxis

+ +
var referencia_objeto_window = window.open([url],[nombre_de_la_ventana],[configuracion_ventana]);
+ +

Parámetros

+ +
+
referencia_objeto_window
+
Una referencia de la ventana creada. La referencia puede ser usada para acceder a propiedades y métodos de la nueva ventana.
+
url (opcional)
+
La URL especifica que página se va cargar en la ventana creada. La URL puede ser una página web (http://www.ejemplo.com.co) o un documento que se encuentre en algun directorio de su PC (html, imagenes y demás). Si no se expecifica una URL, por defecto abrira la ventana en blanco
+
nombre_de_la_ventana (opcional)
+
Un nombre para la nueva ventana. El nombre puede ser usado como el destino de enlaces y formularios usando el atributo de un elemento {{HTMLElement("a")}} ó {{HTMLElement("form")}}. El nombre no debe contener ningun caracter de espacio en blanco. Notese que nombre_de_la_ventana no especifica el titulo de la nueva ventana.
+
strWindowFeatures
+
An optional parameter listing the features (size, position, scrollbars, etc.) of the new window as a string. The string must not contain any whitespace, and each feature name and its value must be separated by a comma. See {{anch("Position and size features")}} below for details.
+
+ +

Descripción

+ +

El metodo open() crea una nueva ventana secundaria del navegador, similar a seleccionar Nueva ventana desde el menú archivo. El parámetro url especifica la URL a ser solicitada y cargada en la nueva ventana. Si url es una cadena de caracteres vacia, entonces se creará una nueva ventana en blanco (URL about:blank) con las barras de herramientas por defecto de la ventana principal.

+ +

Observe que las URLs no cargarán inmediatamente. Cuando window.open() retorna, la ventana siempre contiene about:blank. La solicitud de la URL es diferida y comienza luego de que el bloque actual se termine de ejecutar. La creación de la ventana y la carga de los recursos referenciados suceden de forma asíncrona.

+ +

Ejemplo

+ +
var objeto_window_referencia;
+var configuracion_ventana = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
+
+function abrir_Popup() {
+  objeto_window_referencia = window.open("http://www.cnn.com/", "Pagina_CNN", configuracion_ventana);
+}
+
+// Llamamos a la función
+
+abrir_Popup();
+ + + + + +
var windowObjectReference;
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImageFile.png",
+    "DescriptiveWindowName",
+    "resizable,scrollbars,status"
+  );
+}
+ +

If a window with the name strWindowName already exists, then strUrl is loaded into the existing window. In this case the return value of the method is the existing window and strWindowFeatures is ignored. Providing an empty string for strUrl is a way to get a reference to an open window by its name without changing the window's location. To open a new window on every call of window.open(), use the special value _blank for strWindowName.

+ +

strWindowFeatures is an optional string containing a comma-separated list of requested features of the new window. After a window is opened, JavaScript can't be used to change the features. If strWindowName does not specify an existing window and the strWindowFeatures parameter is not provided (or if the strWindowFeatures parameter is an empty string), then the new secondary window will render the default toolbars of the main window.

+ +

If the strWindowFeatures parameter is used and no size features are defined, then the new window dimensions will be the same as the dimensions of the most recently rendered window.

+ +

If the strWindowFeatures parameter is used and if no position features are defined, then the left and top coordinates of the new window dimension will be 22 pixels from where the most recently rendered window was. An offset is universally implemented by browser manufacturers (it is 29 pixels in MSIE 6 SP2 with the default theme) and its purpose is to help users to notice new windows opening. If the most recently used window was maximized, then there is no offset: the new window will be maximized as well.

+ +

If the strWindowFeatures parameter is used, the features that are not listed will be disabled or removed (except titlebar and close which are by default yes).

+ +
+

Tip: If using the strWindowFeatures parameter, only list the features to be enabled or rendered; the others (except titlebar and close) will be disabled or removed.

+ +

Note that in some browsers, users can override the strWindowFeatures settings and enable (or prevent the disabling of) features.

+
+ +

Firefox Chrome Toolbars Illustration

+ +

Características de posición y tamaño

+ +
{{gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), overriding the position of a window using window features will not change the persisted values saved by the session store feature. That means the next time the window is opened, it will still open in the saved location.")}}
+ +

Note on position and dimension error correction

+ +
{{bug(176320)}}
+ +

Note on precedence

+ +
+
left
+
Specifies the distance the new window is placed from the left side of the work area for applications of the user's operating system to the leftmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
top
+
Specifies the distance the new window is placed from the top side of the work area for applications of the user's operating system to the topmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
height
+
Specifies the height of the content area, viewing area of the new secondary window in pixels. The height value includes the height of the horizontal scrollbar if present. The minimum required value is 100.
+
Note on outerHeight versus height (or innerHeight)
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
width
+
Specifies the width of the content area, viewing area of the new secondary window in pixels. The width value includes the width of the vertical scrollbar if present. The width value does not include the sidebar if it is expanded. The minimum required value is 100.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
screenX
+
Deprecated. Same as left but only supported by Netscape and Mozilla-based browsers.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
screenY
+
Deprecated. Same as top but only supported by Netscape and Mozilla-based browsers.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
centerscreen
+
Centers the window in relation to its parent's size and position. Requires chrome=yes.
+
outerHeight
+
Specifies the height of the whole browser window in pixels. This outerHeight value includes any/all present toolbar, window horizontal scrollbar (if present) and top and bottom window resizing borders. Minimal required value is 100.
+
Note: since titlebar is always rendered, then requesting outerHeight=100 will make the innerHeight of the browser window under the minimal 100 pixels.
+
Note on outerHeight versus height (or innerHeight)
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
outerWidth
+
Specifies the width of the whole browser window in pixels. This outerWidth value includes the window vertical scrollbar (if present) and left and right window resizing borders.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
innerHeight
+
Same as height but only supported by Netscape and Mozilla-based browsers. Specifies the height of the content area, viewing area of the new secondary window in pixels. The innerHeight value includes the height of the horizontal scrollbar if present. Minimal required value is 100.
+
Note on outerHeight versus height (or innerHeight)
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
innerWidth
+
Same as width but only supported by Netscape and Mozilla-based browsers. Specifies the width of the content area, viewing area of the new secondary window in pixels. The innerWidth value includes the width of the vertical scrollbar if present. The innerWidth value does not include the sidebar if it is expanded. Minimal required value is 100.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

Barra de herramienta y características de chrome

+ +
+
NOTE: All features can be set to yes, 1 or just be present to be "on", set to no or 0 or in most cases just not present to be "off"
+
example "status=yes", "status=1" and "status" have identical results
+
+
menubar
+
If this feature is on, then the new secondary window renders the menubar.
+
Mozilla and Firefox users can force new windows to always render the menubar by setting dom.disable_window_open_feature.menubar to true in about:config or in their user.js file.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
toolbar
+
If this feature is on, then the new secondary window renders the Navigation Toolbar (Back, Forward, Reload, Stop buttons). In addition to the Navigation Toolbar, Mozilla-based browsers will render the Tab Bar if it is visible, present in the parent window. (If this feature is set to no all toolbars in the window will be invisible, for example extension toolbars).
+
Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting dom.disable_window_open_feature.toolbar to true in about:config or in their user.js file.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
location
+
If this feature is on, then the new secondary window renders the Location bar in Mozilla-based browsers. MSIE 5+ and Opera 7.x renders the Address Bar.
+
Mozilla and Firefox users can force new windows to always render the location bar by setting dom.disable_window_open_feature.location to true in about:config or in their user.js file. {{Fx_minversion_note(3, "In Firefox 3, dom.disable_window_open_feature.location now defaults to true, forcing the presence of the Location Bar much like in IE7. See bug 337344 for more information.")}}
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
personalbar
+
If this feature is on, then the new secondary window renders the Personal Toolbar in Netscape 6.x, Netscape 7.x and Mozilla browser. It renders the Bookmarks Toolbar in Firefox. In addition to the Personal Toolbar, Mozilla browser will render the Site Navigation Bar if such toolbar is visible, present in the parent window.
+
Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting dom.disable_window_open_feature.personalbar to true in about:config or in their user.js file.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
directories {{obsolete_inline("2")}}
+
Obsolete synonym of personalbar. In IE, it rendered the Links bar. Supported in Gecko up to 1.9.2 and in IE up to 6.
+
status
+
If this feature is on, then the new secondary window has a status bar. Users can force the rendering of status bar in all Mozilla-based browsers, in MSIE 6 SP2 (Note on status bar in XP SP2) and in Opera 6+. The default preference setting in recent Mozilla-based browser releases and in Firefox 1.0 is to force the presence of the status bar.
+
Note on status bar
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ + + +

Características de funcionalidad de window

+ +
+
+
attention {{NonStandardBadge}}
+
If this feature is specified, the window is able to open even if another application is already in the foreground. This feature is for Firefox OS applications only, and is currently restricted to certified applications. See {{SectionOnPage("/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/App_permissions", "Internal (Certified) app permissions")}} for more information.
+
Supported in:
+
dependent
+
If on, the new window is said to be dependent of its parent window. A dependent window closes when its parent window closes. A dependent window is minimized on the Windows task bar only when its parent window is minimized. On Windows platforms, a dependent window does not show on the task bar. A dependent window also stays in front of the parent window.
+
Dependent windows are not implemented on MacOS X, this option will be ignored.
+
The dependent feature is currently under revision to be removed ({{Bug(214867)}})
+
In MSIE 6, the nearest equivalent to this feature is the showModelessDialog() method.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
minimizable
+
This setting can only apply to dialog windows; "minimizable" requires dialog=yes. If minimizable is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. Any non-dialog window is always minimizable and minimizable=no will be ignored.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
fullscreen
+
Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.
+
This feature no longer works in MSIE 6 SP2 the way it worked in MSIE 5.x. The Windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when fullscreen is enabled in MSIE 5.x.
+
fullscreen always upsets users with large monitor screen or with dual monitor screen. Forcing fullscreen onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.
+
Note on fullscreen
+
Supported in: Internet Explorer 5+
+
fullscreen does not really work in MSIE 6 SP2.
+
resizable
+
If this feature is on, the new secondary window will be resizable.
+
Note: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar. +

Starting with Firefox 3, secondary windows are always resizable ({{Bug(177838)}})

+ +
+

Tip: For accessibility reasons, it is strongly recommended to set this feature always on

+
+
+
Mozilla and Firefox users can force new windows to be easily resizable by setting
+ dom.disable_window_open_feature.resizable
+ to true in about:config or in their user.js file.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
scrollbars
+
If this feature is on, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport. +
+

Tip: For accessibility reasons, it is strongly encouraged to set this feature always on.

+
+
+
Mozilla and Firefox users can force this option to be always enabled for new windows by setting
+ dom.disable_window_open_feature.scrollbars
+ to true in about:config or in their user.js file.
+
Note on scrollbars
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

Características que requieren privilegios

+ +

The following features require the UniversalBrowserWrite privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the PrivilegeManager.

+ +
+
chrome
+
Note: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the UniversalBrowserWrite privilege ({{Bug(244965)}}). Without this privilege, it is ignored.
+
If on, the page is loaded as window's only content, without any of the browser's interface elements. There will be no context menu defined by default and none of the standard keyboard shortcuts will work. The page is supposed to provide a user interface of its own, usually this feature is used to open XUL documents (standard dialogs like the JavaScript Console are opened this way).
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
dialog
+
Note: Starting with Firefox 44, this feature can only be used with chrome privileges. If content attempts to toggle this feature, it will be ignored.
+
MenuSystemCommands.pngThe dialog feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. Mozilla 1.2+ and Netscape 7.1 will render the other menu system commands (in FF 1.0 and in NS 7.0x, the command system menu is not identified with the Firefox/NS 7.0x icon on the left end of the titlebar: that's probably a bug. You can access the command system menu with a right-click on the titlebar). Dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. They are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. On Mac systems, dialog windows have a different window border and they may get turned into a sheet.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
modal
+
Note: Starting with Mozilla 1.2.1, this feature requires the UniversalBrowserWrite privilege ({{Bug(180048)}}). Without this privilege, it is ignored.
+
If on, the new window is said to be modal. The user cannot return to the main window until the modal window is closed. A typical modal window is created by the alert() function.
+
The exact behavior of modal windows depends on the platform and on the Mozilla release version. +
+

Note: As of {{Gecko("1.9")}}, the Internet Explorer equivalent to this feature is the {{domxref("window.showModalDialog()")}} method. For compatibility reasons, it's now supported in Firefox. Note also that starting in {{Gecko("2.0")}}, you can use {{domxref("window.showModalDialog()")}} without UniversalBrowserWrite privileges.

+
+
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
titlebar
+
By default, all new secondary windows have a titlebar. If set to no or 0, this feature removes the titlebar from the new secondary window.
+
Mozilla and Firefox users can force new windows to always render the titlebar by setting
+ dom.disable_window_open_feature.titlebar
+ to true in about:config or in their user.js file.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
alwaysRaised
+
If on, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
alwaysLowered
+
If on, the new created window floats below, under its own parent when the parent window is not minimized. alwaysLowered windows are often referred as pop-under windows. The alwaysLowered window can not be on top of the parent but the parent window can be minimized. In NS 6.x, the alwaysLowered window has no minimize system command icon and no restore/maximize system command.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
z-lock
+
Same as alwaysLowered.
+
close
+
When set to no or 0, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (dialog feature set). close=no will override minimizable=yes.
+
Mozilla and Firefox users can force new windows to always have a close button by setting
+ dom.disable_window_open_feature.close
+ to true in about:config or in their user.js file.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a yes or no; you can use 1 instead of yes and 0 instead of no. The toolbar and functionality feature elements also accept the shorthand form: you can turn a feature on by simply listing the feature name in the features string. If you supply the features parameter, then the titlebar and close are still yes by default, but the other features which have a yes/no choice will be no by default and will be turned off.

+ +

Example:

+ +
var windowObjectReference; // global variable
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImgFile.png",
+    "DescriptiveWindowName",
+    "width=420,height=230,resizable,scrollbars=yes,status=1"
+  );
+}
+ +

In this example, the window will be resizable, it will render scrollbar(s) if needed, if the content overflows requested window dimensions and it will render the status bar. It will not render the menubar nor the location bar. Since the author knew about the size of the image (400 pixels wide and 200 pixels high), he added the margins applied to the root element in MSIE 6 which is 15 pixels for top margin, 15 pixels for the bottom margin, 10 pixels for the left margin and 10 pixels for the right margin.

+ +

Buenas prácticas

+ +
<script type="text/javascript">
+var windowObjectReference = null; // global variable
+
+function openFFPromotionPopup() {
+  if(windowObjectReference == null || windowObjectReference.closed)
+  /* if the pointer to the window object in memory does not exist
+     or if such pointer exists but the window was closed */
+
+  {
+    windowObjectReference = window.open("http://www.spreadfirefox.com/",
+   "PromoteFirefoxWindowName", "resizable,scrollbars,status");
+    /* then create it. The new window will be created and
+       will be brought on top of any other window. */
+  }
+  else
+  {
+    windowObjectReference.focus();
+    /* else the window reference must exist and the window
+       is not closed; therefore, we can bring it back on top of any other
+       window with the focus() method. There would be no need to re-create
+       the window or to reload the referenced resource. */
+  };
+}
+</script>
+
+(...)
+
+<p><a
+ href="http://www.spreadfirefox.com/"
+ target="PromoteFirefoxWindowName"
+ onclick="openFFPromotionPopup(); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+>Promote Firefox adoption</a></p>
+
+ +

The above code solves a few usability problems related to links opening secondary window. The purpose of the return false in the code is to cancel default action of the link: if the onclick event handler is executed, then there is no need to execute the default action of the link. But if javascript support is disabled or non-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "PromoteFirefoxWindowName". If no frame nor window has the name "PromoteFirefoxWindowName", then the browser will create a new window and will name it "PromoteFirefoxWindowName".

+ +

More reading on the use of the target attribute:

+ +

HTML 4.01 Target attribute specifications

+ +

How do I create a link that opens a new window?

+ +

You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:

+ +
<script type="text/javascript">
+var windowObjectReference = null; // global variable
+
+function openRequestedPopup(strUrl, strWindowName) {
+  if(windowObjectReference == null || windowObjectReference.closed) {
+    windowObjectReference = window.open(strUrl, strWindowName,
+           "resizable,scrollbars,status");
+  } else {
+    windowObjectReference.focus();
+  };
+}
+</script>
+
+(...)
+
+<p><a
+ href="http://www.spreadfirefox.com/"
+ target="PromoteFirefoxWindow"
+ onclick="openRequestedPopup(this.href, this.target); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+>Promote Firefox adoption</a></p>
+
+ +

You can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner:

+ +
<script type="text/javascript">
+var windowObjectReference = null; // global variable
+var PreviousUrl; /* global variable which will store the
+                    url currently in the secondary window */
+
+function openRequestedSinglePopup(strUrl) {
+  if(windowObjectReference == null || windowObjectReference.closed) {
+    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+         "resizable,scrollbars,status");
+  } else if(PreviousUrl != strUrl) {
+    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+      "resizable=yes,scrollbars=yes,status=yes");
+    /* if the resource to load is different,
+       then we load it in the already opened secondary window and then
+       we bring such window back on top/in front of its parent window. */
+    windowObjectReference.focus();
+  } else {
+    windowObjectReference.focus();
+  };
+
+  PreviousUrl = strUrl;
+  /* explanation: we store the current url in order to compare url
+     in the event of another call of this function. */
+}
+</script>
+
+(...)
+
+<p><a
+ href="http://www.spreadfirefox.com/"
+ target="SingleSecondaryWindowName"
+ onclick="openRequestedSinglePopup(this.href); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+>Promote Firefox adoption</a></p>
+
+<p><a
+ href="http://www.mozilla.org/support/firefox/faq"
+ target="SingleSecondaryWindowName"
+ onclick="openRequestedSinglePopup(this.href); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+>Firefox FAQ</a></p>
+
+ +

FAQ

+ +
+
How can I prevent the confirmation message asking the user whether he wants to close the window?
+
You can not. New windows not opened by javascript can not as a rule be closed by JavaScript. The JavaScript Console in Mozilla-based browsers will report the warning message: "Scripts may not close windows that were not opened by script." Otherwise the history of URLs visited during the browser session would be lost.
+
More on the window.close() method
+
How can I bring back the window if it is minimized or behind another window?
+
First check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the focus() method. There is no other reliable way. You can examine an example explaining how to use the focus() method.
+
How do I force a maximized window?
+
You cannot. All browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users.
+
How do I turn off window resizability or remove toolbars?
+
You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in about:config. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.
+
How do I resize a window to fit its content?
+
You can not reliably because the users can prevent the window from being resized by unchecking the Edit/Preferences/Advanced/Scripts & Plug-ins/Allow Scripts to/ Move or resize existing windows checkbox in Mozilla or Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows checkbox in Firefox or by setting dom.disable_window_move_resize to true in about:config or by editing accordingly their user.js file.
+
In general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scripts that do not abuse such feature are often wrong, inaccurate when resizing the window. 99% of all those scripts disable window resizability and disable scrollbars when in fact they should enable both of these features to allow a cautious and sane fallback mechanism if their calculations are wrong.
+
The window method sizeToContent() is also disabled if the user unchecks the preference Move or resize existing windows checkbox. Moving and resizing a window remotely on the user's screen via script will very often annoy the users, will disorient the user, and will be wrong at best. The web author expects to have full control of (and can decide about) every position and size aspects of the users' browser window ... which is simply not true.
+
How do I open a referenced resource of a link in a new tab? or in a specific tab?
+
To open a resource in a new tab see Tabbed browser. Some Code snippets are available. If you are using the SDK, tabs are handled a bit differently
+
K-meleon 1.1, a Mozilla-based browser, gives complete control and power to the user regarding how links are opened. Only the user can set his advanced preferences to do that. Some advanced extensions also give Mozilla and Firefox a lot of power over how referenced resources are loaded.
+
In a few years, the target property of the CSS3 hyperlink module may be implemented (if CSS3 Hyperlink module as it is right now is approved). And even if and when this happens, you can expect developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages. How to open a link should always be entirely under the control of the user.
+
How do I know whether a window I opened is still open?
+
You can test for the existence of the window object reference which is the returned value in case of success of the window.open() call and then verify that windowObjectReference.closed return value is false.
+
How can I tell when my window was blocked by a popup blocker?
+
With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of window.open(): it will be null if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.
+
What is the JavaScript relationship between the main window and the secondary window?
+
The window.open() method gives a main window a reference to a secondary window; the opener property gives a secondary window a reference to its main window.
+
I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error: uncaught exception: Permission denied to get property <property_name or method_name>. Why is that?
+
It is because of the cross-domain script security restriction (also referred as the "Same Origin Policy"). A script loaded in a window (or frame) from a distinct origin (domain name) cannot get nor set properties of another window (or frame) or the properties of any of its HTML objects coming from another distinct origin (domain name). Therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name.
+
More reading on the cross-domain script security restriction: http://www.mozilla.org/projects/secu...me-origin.html
+
+ +

Problemas de usos

+ +

Avoid resorting to window.open()

+ +

Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:

+ + + + + +

If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:

+ +

Never use this form of code for links: <a href="javascript:window.open(...)" ...>

+ +

"javascript:" links break accessibility and usability of webpages in every browser.

+ + + +

Further reading:

+ + + +

Never use <a href="#" onclick="window.open(...);">

+ +

Such pseudo-link also breaks accessibility of links. Always use a real URL for the href attribute value so that if javascript support is disabled or inexistent or if the user agent does not support opening of secondary window (like MS-Web TV, text browsers, etc), then such user agents will still be able to load the referenced resource according to its default mode of opening/handling a referenced resource. This form of code also interferes with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, Ctrl+Enter on links, "mouse gestures" features.

+ + + +

Identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.

+ +

The purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (Back toolbar button is disabled).

+ +
+

"Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button."
+ quote from The Top Ten New Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, May 1999

+
+ +

When extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not).

+ +

References

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Example "New Window" Icons & Cursors
New window icon from yahoo.comNew window icon from microsoft.comNew window icon from webaim.orgNew window icon from sun.com
New window icon from bbc.co.ukNew window icon from Accessible Internet SolutionsNew window icon from accessify.comNew window icon from webstyleguide.com
New window icon from an unknown sourceNew window icon from an unknown sourceNew window icon from an unknown sourceNew window icon from gtalbot.org
New window cursor from draig.deNew window cursor from mithgol.ru
+ +

Always use the target attribute

+ +

If javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g. some user agents which can not create new windows, like MS Web TV, will fetch the referenced resource and append it at the end of the current document. The goal and the idea is to try to provide - not impose - to the user a way to open the referenced resource, a mode of opening the link. Your code should not interfere with the features of the browser at the disposal of the user and your code should not interfere with the final decision resting with the user.

+ +

Do not use target="_blank"

+ +

Always provide a meaningful name to your target attribute and try to reuse such target attribute in your page so that a click on another link may load the referenced resource in an already created and rendered window (therefore speeding up the process for the user) and therefore justifying the reason (and user system resources, time spent) for creating a secondary window in the first place. Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window which is recycled. On the other hand, using "_blank" as the target attribute value will create several new and unnamed windows on the user's desktop which can not be recycled, reused. In any case, if your code is well done, it should not interfere with the user's final choice but rather merely offer him more choices, more ways to open links and more power to the tool he's using (a browser).

+ +

Glosario

+ +
+
Opener window, parent window, main window, first window
+
Terms often used to describe or to identify the same window. It is the window from which a new window will be created. It is the window on which the user clicked a link which lead to the creation of another, new window.
+
Sub-window, child window, secondary window, second window
+
Terms often used to describe or to identify the same window. It is the new window which was created.
+
Unrequested popup windows
+
Script-initiated windows opening automatically without the user's consent.
+
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'browsers.html#dom-open', 'Window.open()')}}{{Spec2('HTML WHATWG')}}
{{ SpecName('CSSOM View', '#the-features-argument-to-the-open()-method', 'The features argument to the open() method') }}{{ Spec2('CSSOM View') }}Defines the effect of the features argument
+ +

Notas

+ +

Nota sobre la precedencia

+ +

In cases where left and screenX (and/or top and screenY) have conflicting values, then left and top have precedence over screenX and screenY respectively. If left and screenX (and/or top and screenY) are defined in the features list, then left (and/or top) will be honored and rendered. In the following example the new window will be positioned at 100 pixels from the left side of the work area for applications of the user's operating system, not at 200 pixels.

+ +
windowObjectReference = window.open(
+  "http://news.bbc.co.uk/",
+  "BBCWorldNewsWindowName",
+  "left=100,screenX=200,resizable,scrollbars,status"
+);
+ +

If left is set but top has no value and screenY has a value, then left and screenY will be the coordinate positioning values of the secondary window.

+ +

outerWidth has precedence over width and width has precedence over innerWidth. outerHeight has precedence over height and height has precedence over innerHeight. In the following example, Mozilla-browsers will create a new window with an outerWidth of 600 pixels wide and will ignore the request of a width of 500 pixels and will also ignore the request of an innerWidth of 400 pixels.

+ +
windowObjectReference = window.open(
+  "http://www.wwf.org/",
+  "WWildlifeOrgWindowName",
+  "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status"
+);
+ +

Note on position and dimension error correction

+ +

Requested position and requested dimension values in the features list will not be honored and will be corrected if any of such requested value does not allow the entire browser window to be rendered within the work area for applications of the user's operating system. No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.

+ +

MSIE 6 SP2 has a similar error correction mechanism but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.

+ +

Note on scrollbars

+ +

When content overflows window viewport dimensions, then scrollbar(s) (or some scrolling mechanism) are necessary to ensure that content can be accessed by users. Content can overflow window dimensions for several reasons which are outside the control of web authors:

+ + + +

Note on status bar

+ +

You should assume that a large majority of users' browsers will have the status bar or that a large majority of users will want to force the status bar presence: best is to always set this feature to yes. Also, if you specifically request to remove the status bar, then Firefox users will not be able to view the Site Navigation toolbar if it is installed. In Mozilla and in Firefox, all windows with a status bar have a window resizing grippy at its right-most side. The status bar also provides info on http connection, hypertext resource location, download progress bar, encryption/secure connection info with SSL connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.

+ +

Note on security issues of the status bar presence

+ +

In MSIE 6 for XP SP2: For windows opened using window.open():

+ +
+

"For windows opened using window.open():
+ Expect the status bar to be present, and code for it. The status bar will be on by default and is 20-25 pixels in height. (...)"
+ quote from Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2

+
+ +
+

"(...) windows that are created using the window.open() method can be called by scripts and used to spoof a user interface or desktop or to hide malicious information or activity by sizing the window so that the status bar is not visible.
+ Internet Explorer windows provide visible security information to the user to help them ascertain the source of the Web page and the security of the communication with that page. When these elements are not in view, the user might think they are on a more trusted page or interacting with a system process when they are actually interacting with a malicious host. (...)
+ Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar. (...)
+ Script management of Internet Explorer status bar
+ Detailed description
+ Internet Explorer has been modified to not turn off the status bar for any windows. The status bar is always visible for all Internet Explorer windows. (...) Without this change, windows that are created using the window.open() method can be called by scripts and spoof a user interface or desktop or hide malicious information or activity by hiding important elements of the user interface from the user.
+ The status bar is a security feature of Internet Explorer windows that provides Internet Explorer security zone information to the user. This zone cannot be spoofed (...)"
+ quote from Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions

+
+ +

Note on fullscreen

+ +

In MSIE 6 for XP SP2:

+ + + +

References:

+ + + +

Note on outerHeight versus height

+ +

innerHeight vs outerHeight illustration

+ +

Note on refreshing vs. opening a new window/tab

+ +

If the strWindowName parameter is omitted, a new window or tab is opened. If a window with the same name already exists, the existing window is refreshed.

+ +
//Always opens a new window/tab
+window.open("map.php");
+
+//Refreshes an existing window/tab that was opened with the same name, if one exists
+window.open("map.php", "BiggerMap");
+ +

Tutoriales

+ + + +

Referencias

+ + diff --git a/files/es/web/api/window/opener/index.html b/files/es/web/api/window/opener/index.html new file mode 100644 index 0000000000..531eb6d2e4 --- /dev/null +++ b/files/es/web/api/window/opener/index.html @@ -0,0 +1,28 @@ +--- +title: Window.opener +slug: Web/API/Window/opener +translation_of: Web/API/Window/opener +--- +
{{APIRef}}
+ +

Resumen

+ +

Devuelve una referencia de, la ventana que abrió la ventana actuál.

+ +

Sintaxis

+ +
objRef = window.opener;
+
+ +

Ejemplo

+ +
if (window.opener != indexWin) {
+  referToTop(window.opener);
+}
+
+ +

Notas

+ +

Cuando una ventana es abierta desde otra utilizando "Window.open()", esta, mantiene una referencia a la primera mediante "window.opener".  Si la ventana actuál no fué abierta, el metodo retorna NULL.

+ +

El navegador de Windows Phone no soporta window.opener. Tampoco es soportado en Internet Explorer si la ventana nueva se encuentra en una zona de seguridad distinta.

diff --git a/files/es/web/api/window/outerheight/index.html b/files/es/web/api/window/outerheight/index.html new file mode 100644 index 0000000000..cb77c574f4 --- /dev/null +++ b/files/es/web/api/window/outerheight/index.html @@ -0,0 +1,114 @@ +--- +title: Window.outerHeight +slug: Web/API/Window/outerHeight +tags: + - API + - Propiedad + - Referencia +translation_of: Web/API/Window/outerHeight +--- +
{{APIRef}}
+ +

Sumario

+ +

Window.outerHeight obtiene la altura en pixeles de toda la ventana del navegador. Representa el alto de toda la ventana, incluyendo la barra de notificaciones (si se encuentra) y los bordes.

+ +

Esta propiedad es de sólo lectura, no tiene valor por defecto

+ +

Sintaxis

+ +
outWindowHeight = window.outerHeight;
+
+ +

Al obtener, outWindowHeight contiene el alto de la ventana.

+ +

Notas

+ +

Para cambiar el tamaño de una ventana, ver {{domxref("window.resizeBy()")}} y {{domxref("window.resizeTo()")}}.

+ +

Para obtener la altura interna de una ventana, por ejemplo, el alto de una página siendo desplegada, ver {{domxref("window.innerHeight")}}.

+ +

Ejemplo gráfico

+ +

La siguiente figura muestra la diferencia entre innerHeight y outerHeight.

+ +

innerHeight vs outerHeight illustration

+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatGeckoDesktop(1.0)}}993
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1{{CompatGeckoMobile(1.0)}}993
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }}{{ Spec2('CSSOM View') }} 
+ +

Ver también

+ + diff --git a/files/es/web/api/window/outerwidth/index.html b/files/es/web/api/window/outerwidth/index.html new file mode 100644 index 0000000000..b0b91a9beb --- /dev/null +++ b/files/es/web/api/window/outerwidth/index.html @@ -0,0 +1,105 @@ +--- +title: Window.outerWidth +slug: Web/API/Window/outerWidth +translation_of: Web/API/Window/outerWidth +--- +
{{APIRef}}
+ +

Sumario

+ +

Window.outerWidth obtiene el ancho exterior del navegador. Representa el ancho total de la ventana incluyendo las barras laterales (si es expandida), interfaz grafíca y los de elementos para redimencionado de bordes.

+ +

Esta propiedad es de sólo lectura; no tiene valores por default.

+ +

Sintaxis

+ +
outWindowWidth = window.outerWidth;
+
+ +

Lo que retorna outWindowWidth es el ancho exterior del navegador.

+ +

Notas

+ +

Para cambiar el tamaño de la ventana, ver {{domxref("window.resizeBy()")}} y {{domxref("window.resizeTo()")}}.

+ +

Para obtener el ancho exterior de la ventana, i.e. el ancho de la pagina desplegada, ver {{domxref("window.innerWidth")}}.

+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}993
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}993
+
+ +

Specificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}{{ Spec2('CSSOM View') }}Initial definition.
+ +

Ver también

+ + diff --git a/files/es/web/api/window/print/index.html b/files/es/web/api/window/print/index.html new file mode 100644 index 0000000000..7ab8bdb63f --- /dev/null +++ b/files/es/web/api/window/print/index.html @@ -0,0 +1,58 @@ +--- +title: Window.print() +slug: Web/API/Window/print +tags: + - API + - Compatibilidad + - Compatibilidad en móviles + - DOM + - Referencia + - Window + - metodo +translation_of: Web/API/Window/print +--- +

{{ ApiRef() }}

+ +

Abre el diálogo para imprimir el documento actual.

+ +

En la mayoría de navegadores, este método bloquea mientras el díalogo de impresión esté abierto, sin embargo, en algunas versiones recientes de Safari podría retornar de inmediato.

+ +

Resumen

+ +

Abre el Diálogo de Impresión para imprimir el documento actual.

+ +

Sintaxis

+ +
window.print()
+
+ +

Notas

+ +

Empezando con Chrome {{CompatChrome(46.0)}} este método esta bloqueado dentro de un {{htmlelement("iframe")}} a menos que el atributo del contenedor tenga el valor allow-modal.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}{{Spec2('HTML5 Web application')}}Initial definition.
+ +

Ver también

+ + + +

{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}

diff --git a/files/es/web/api/window/prompt/index.html b/files/es/web/api/window/prompt/index.html new file mode 100644 index 0000000000..f05be58868 --- /dev/null +++ b/files/es/web/api/window/prompt/index.html @@ -0,0 +1,82 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +tags: + - Referencia + - metodo +translation_of: Web/API/Window/prompt +--- +
{{ApiRef("Window")}}
+ +

El método Window.prompt() muestra un diálogo con mensaje opcional, que solicita al usuario que introduzca un texto.

+ +

Sintaxis

+ +
result = window.prompt(message, default);
+
+ + + +

Ejemplo

+ +
var sign = prompt("What's your sign?");
+
+if (sign.toLowerCase() == "scorpio") {
+  alert("Wow! I'm a Scorpio too!");
+}
+
+// there are many ways to use the prompt feature
+var sign = window.prompt(); // open the blank prompt window
+var sign = prompt();       //  open the blank prompt window
+var sign = window.prompt('Are you feeling lucky'); // open the window with Text "Are you feeling lucky"
+var sign = window.prompt('Are you feeling lucky', 'sure'); // open the window with Text "Are you feeling lucky" and default value "sure"
+ +

Cuando el usuario hace clic en el botón OK, el valor introducido en el campo de texto es devuelto por el método. Si el usuario da clic al botón OK sin introducir algun texto, se devuelve una cadena vacía. Si el usuario presiona el botón Cancel, la función devuelve null.

+ +

El ejemplo anterior muestra el siguiente cuadro de diálogo (en Chrome en OS X):

+ +

prompt() dialog in Chrome on OS X

+ +

Notas

+ +

Un diálogo prompt contiene un cuadro de texto de una línea, un botón Cancel (Cancelar)  un botón OK (Aceptar), y devuelve el texto (posiblemente vacío) que el usuario introdujo en el cuadro de texto.

+ +

The following text is shared between this article, DOM:window.confirm and DOM:window.alertLos cuadros de diálogo son ventanas modales; previenen que el usuario acceda al resto de la interfaz del programa hasta que el cuadro de diálogo es cerrado. Por esta razón, no se debe abusar de cualquier función que crea un cuadro de diálogo (o ventana modal).

+ +

Nótese que el resultado es una cadena de texto. Esto significa que a veces se deberá hacer una conversión al valor introducido por el usuario. Por ejemplo, si la respuesta debe ser un valor numérico, se debe hacer la conversión del valor a tipo Number. var aNumber = Number(window.prompt("Type a number", "")); 

+ +

Usuarios de Mozilla Chrome (p.ej. extensiones de Firefox) deben usar preferentemente métodos de {{interface("nsIPromptService")}}.

+ +

A partir de Chrome {{CompatChrome(46.0)}} este método está bloqueado para los elementos {{htmlelement("iframe")}}, , a menos que su atributo sandbox tenga el valor allow-modal.

+ +

En Safari, si el usuario presiona el botón Cancel, la función devuelve una cadena vacía. Por lo tanto, no se puede diferenciar si canceló o si mandó una cadena de texto vacía como valor del cuadro de texto.

+ +

Esta función no tiene efecto en la versión Modern UI/Metro de Internet Explorer para Windows 8. No se muestra un diálogo al usuario, y siempre devuelve undefined. No está claro si esto es un bug o un comportamiento previsto. Las versiones de escritorio de IE sí implementan esta función

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML5 Web application', '#dom-prompt', 'prompt()')}}{{Spec2('HTML5 Web application')}}Definición inicial
+ +

Véase también

+ + diff --git a/files/es/web/api/window/requestanimationframe/index.html b/files/es/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..2f3ae5342b --- /dev/null +++ b/files/es/web/api/window/requestanimationframe/index.html @@ -0,0 +1,153 @@ +--- +title: Window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +
{{APIRef}}
+ +
El método window.requestAnimationFrame informa al navegador que quieres realizar una animación y solicita que el navegador programe el repintado de la ventana para el próximo ciclo de animación. El método acepta como argumento una función a la que llamar antes de efectuar el repintado.
+ +
+ +
Nota: Si no quieres que tu animación se detenga, debes asegurarte de  llamar a su vez a requestAnimationFrame() desde tu callback.
+ +

Debes llamar a este método cuando estés preparado para actualizar tu animación en la pantalla para pedir que se programe el repintado. Ésto puede suceder hasta 60 veces por segundo en pestañas en primer plano, pero se puede ver reducido a velocidades inferiores en pestañas en segundo plano.

+ +

El método indicado como callback recibe un único argumento que indica el tiempo en el que está programado que se ejecute el ciclo de animación.

+ +

Sintaxis

+ +
requestID = window.mozRequestAnimationFrame(callback);   // Firefox
+window.msRequestAnimationFrame(callback);                // IE 10 PP2+
+window.webkitRequestAnimationFrame(callback[, element]); // Chrome/Webkit
+
+ +

Parámetros

+ +
+
callback
+
Parámetro que especifica la función a la cual llamar llegado el momento de actualizar tu animación para el próximo repintado.
+
+ +

Valor devuelto

+ +

Un valor entero long, es un entero de tipo long que identifica de manera exclusiva la entrada en la lista de callbacks. Es siempre un distinto de cero, pero no debes realizar ninguna otra suposición acerca de su valor. Puedes pasar este valor a {{ domxref("window.cancelAnimationFrame()") }} para cancelar la petición de actualización del callback.

+ +

Ejemplo

+ +
(function() {
+  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+  window.requestAnimationFrame = requestAnimationFrame;
+})();
+
+var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
+  if (progress < 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+ +

Compatibilidad entre Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support21.0 {{ property_prefix("webkit") }}14.0 {{ property_prefix("moz") }}10.0{{ CompatNo() }}6.0 {{ property_prefix("webkit") }}
requestID return value{{ CompatUnknown() }}{{ CompatGeckoDesktop("11.0") }} {{ property_prefix("moz") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidBlackBerry BrowserChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}10.0 {{ property_prefix("webkit") }} +

0.16 {{ property_prefix("webkit") }}

+ 		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}6.0 {{ property_prefix("webkit") }}
requestID return value{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("11.0") }} {{ property_prefix("moz") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Notas para Gecko

+ +

Antes que Gecko 11.0 {{ geckoRelease("11.0") }}, mozRequestAnimationFrame() se podía llamar sin parámetros. Esta opción ya no está soportada ya que no es probable que se convierta en parte del estándar.

+ +

Notas para Chrome

+ +

En estos momentos, la llamada correcta en Chrome para cancelar la petición es window.webkitCancelAnimationFrame(). La antigua versión, window.webkitCancelRequestAnimationFrame(), está obsoleta se sigue soportando por ahora.

+ +

Especificaciones

+ +

{{ spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD") }}

+ +

Véase también

+ + diff --git a/files/es/web/api/window/requestidlecallback/index.html b/files/es/web/api/window/requestidlecallback/index.html new file mode 100644 index 0000000000..ba4351f818 --- /dev/null +++ b/files/es/web/api/window/requestidlecallback/index.html @@ -0,0 +1,126 @@ +--- +title: requestIdleCallback +slug: Web/API/Window/requestIdleCallback +translation_of: Web/API/Window/requestIdleCallback +--- +
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+ +

El método window.requestIdleCallback() encola la función que será ejecutada en periodos de inactividad del navegador permitiendo a los desarrolladores ejecutar en segundo plano tareas de baja prioridad del bucle de eventos, sin perjudicar la latencia de eventos principales como animaciones o respuestas a entradas. La funciones son ejecutadas normalmente en orden FIFO (primero en entrar primero en salir) salvo que se alcance el timeout definido de la función antes de que el navegador la ejecute.

+ +

Sintaxis

+ +
var handle = window.requestIdleCallback(callback[, options])
+ +

Valor devuelto

+ +

Un entero largo sin signo (unsigned long integer) que puede utilizarse para cancelar el callback a través del método {{domxref("Window.cancelIdleCallback()")}}.

+ +

Parámetros

+ +
+
callback
+
La referencia a la función que debe ser ejecutada en un futuro inmediato. La función callback toma un argumento con las siguientes propiedades: +
    +
  • timeRemaining: Referencia a un metodo que devuelve un {{domxref("DOMHighResTimeStamp")}}.
    • +
  • didTimeout: Booleano que se devuelve a false si el callback fue invocado por el navegador durante su inactividad, y true en otro caso (por ejemplo, si se definió timeout y expiró antes de que hubiera suficiente tiempo de inactividad).
    • +
+
+
options {{optional_inline}}
+
+ +

Contiene parametros opcionales de configuración. Contiene la siguiente propiedad:

+ + + + + +

Ejemplos

+ +

Ver ejemplo en el artículo Planificación Cooperativa de la API de Tareas en segundo plano.

+ +

Especificaciones

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

Especificación

+ 		EstadoComentarios
{{SpecName('Background Tasks')}}{{Spec2('Background Tasks')}}Definición Inicial.
+ +

Compatibilidad en Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + +
CaracterísticaChrome Firefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatChrome(47)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidWebview AndroidFirefox para Móvil (Gecko)Firefox OSIE para MóvilOpera para MóvilSafari para MóvilChrome para Android
Soporte Básico{{CompatNo}}{{CompatChrome(47)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(47)}}
+
+ +

Vease también

+ + diff --git a/files/es/web/api/window/scroll/index.html b/files/es/web/api/window/scroll/index.html new file mode 100644 index 0000000000..ec2c61ab41 --- /dev/null +++ b/files/es/web/api/window/scroll/index.html @@ -0,0 +1,84 @@ +--- +title: Window.scroll() +slug: Web/API/Window/scroll +tags: + - API + - CSSOM View + - Referencia + - metodo +translation_of: Web/API/Window/scroll +--- +
{{APIRef}}
+ +

El método Window.scroll() desplaza la ventana a un lugar particular en el documento.

+ +

Sintaxis

+ +
window.scroll(x-coord, y-coord)
+window.scroll(options)
+
+ +

Parámetros

+ + + +

- o -

+ + + +

Ejemplo

+ +
<!-- poner el pixel 100º verticalmente en el tope superior de la ventana -->
+
+<button onClick="scroll(0, 100);">Clic para desplazarse hacia abajo 100 pixeles</button>
+
+ +

Utilizando options:

+ +
window.scroll({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});
+ +

Notas

+ +

{{domxref("Window.scrollTo()")}} es efectivamente idéntico a este método. Para desplazamiento relativo, mira {{domxref("Window.scrollBy()")}}, {{domxref("Window.scrollByLines()")}} y {{domxref("Window.scrollByPages()")}}.

+ +

Para desplazarse sobre elementos, mira {{domxref("Element.scrollTop")}} y {{domxref("Element.scrollLeft")}}.

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}{{ Spec2('CSSOM View') }}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.Window.scroll")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/window/scrollby/index.html b/files/es/web/api/window/scrollby/index.html new file mode 100644 index 0000000000..e07da04b65 --- /dev/null +++ b/files/es/web/api/window/scrollby/index.html @@ -0,0 +1,85 @@ +--- +title: Window.scrollBy() +slug: Web/API/Window/scrollBy +tags: + - API + - CSSOM View + - Método(2) + - NeedsCompatTable + - NeedsSpecTable + - Referencia +translation_of: Web/API/Window/scrollBy +--- +

{{ APIRef() }}

+ +

Resumen

+ +

Desplaza el documento el número de pixels proporcionados.

+ +

Sintaxis

+ +
window.scrollBy(X, Y);
+window.scrollBy(opciones)
+ +

Parámetros

+ + + +

Si X o Y son positivos, desplazarán la página hacia la derecha o hacia abajo respectivamente. Si son negativos, la desplazarán hacia la izquierda o hacia arriba respectivamente.

+ +

- or -

+ + + +

Ejemplo

+ +
// Desplazarse la longitud de una página
+window.scrollBy(0, window.innerHeight);
+
+ +

Para hacer scroll hacia arriba:

+ +
window.scrollBy(0, -window.innerHeight);
+ +

Utilizando opciones:

+ +
window.scrollBy({
+  top: 100,
+  left: 100,
+  behaviour: 'smooth'
+})
+ +

Notas

+ +

window.scrollBy desplaza el documento una cantidad determinada, mientras que window.scroll lo hace hacia una posición absoluta en el documento. Vea también window.scrollByLines, window.scrollByPages

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}{{ Spec2('CSSOM View') }}Definición inicial.
diff --git a/files/es/web/api/window/scrollto/index.html b/files/es/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..ec20698673 --- /dev/null +++ b/files/es/web/api/window/scrollto/index.html @@ -0,0 +1,50 @@ +--- +title: Window.scrollTo() +slug: Web/API/Window/scrollTo +translation_of: Web/API/Window/scrollTo +--- +
{{ APIRef }}
+ +

Resumen

+ +

Desplaza el visor a un conjunto específico de coodenadas en el documento.

+ +

Sintaxis

+ +
window.scrollTo(x-coord, y-coord)
+ +

Parámetros

+ + + +

Ejemplo

+ +
window.scrollTo( 0, 1000 );
+ +

Notas

+ +

Esta función es en efecto la misma que window.scroll. Para desplazamiento relativo, ver window.scrollBy, window.scrollByLines, y window.scrollByPages.

+ +

Para desplazar el visor dentro de elementos, ver Element.scrollTop and Element.scrollLeft.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}{{ Spec2('CSSOM View') }}Definición inicial.
diff --git a/files/es/web/api/window/scrollx/index.html b/files/es/web/api/window/scrollx/index.html new file mode 100644 index 0000000000..71b0df1338 --- /dev/null +++ b/files/es/web/api/window/scrollx/index.html @@ -0,0 +1,124 @@ +--- +title: Window.scrollX +slug: Web/API/Window/scrollX +translation_of: Web/API/Window/scrollX +--- +
{{ APIRef() }}
+ +

Resumen

+ +

Retorna el número de pixels que el documento ha sido desplazado horizontalmente.

+ +

Sintaxis

+ +
var x = window.scrollX;
+ +

Parámetros

+ + + +

Ejemplo

+ +
// Si scrollX es mayor que 400, reinicia la posición de desplazxamiento al inicio supuerior-izquierdo del documento.
+if (window.scrollX > 400) {
+  window.scroll(0,0);
+}
+ +

Notas

+ +

La propiedad pageXOffset es un alias de la propiedad scrollX:

+ +
window.pageXOffset == window.scrollX; // siempre true
+ +

Para compatibilidad cruzada entre navegadores, use window.pageXOffset en lugar de window.scrollX. Adicionalmente, versiones más antiguas de Internet Explorer (< 9) no soportan ninguna de las dos propiedades y deben ser sorteadas examinando otras propiedade no estandar. Un ejemplo totalmente compatible:

+ +
var x = (window.pageXOffset !== undefined)
+  ? window.pageXOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
+
+var y = (window.pageYOffset !== undefined)
+  ? window.pageYOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{ SpecName('CSSOM View', '#dom-window-scrollx', 'window.scrollX') }}{{ Spec2('CSSOM View') }} 
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/window/scrolly/index.html b/files/es/web/api/window/scrolly/index.html new file mode 100644 index 0000000000..81b8275746 --- /dev/null +++ b/files/es/web/api/window/scrolly/index.html @@ -0,0 +1,61 @@ +--- +title: Window.scrollY +slug: Web/API/Window/scrollY +tags: + - API + - Propiedad + - Rerencia + - Scroll Vertical +translation_of: Web/API/Window/scrollY +--- +
{{APIRef}}
+ +

Sumario

+ +

Retorna el número de píxeles que han sido desplazados en el documento mediante el scroll vertical.

+ +

Sintaxis

+ +
var y = window.scrollY;
+ + + +

Ejemplo

+ +
// Asegurate de bajar a la segunda página
+if (window.scrollY) {
+  window.scroll(0, 0);  // Restablece la posición de desplazamiento en la parte superior izquierda del documento
+}
+
+window.scrollByPages(1);
+ +

Notas

+ +

Usa esta propiedad para verificar que al documento no se le ha hecho scroll, si estás usando funciones relativas de scroll como {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, o {{domxref("window.scrollByPages")}}.

+ +

La propiedad pageYOffset es un alias para la propiedad scrollY:

+ +
window.pageYOffset == window.scrollY; // Siempre verdadero
+ +

Para compatibilidad entre navegadores, es recomendable usar window.pageYOffset en vez de window.scrollY. Adicionalmente, tener en cuenta que versiones más viejas de Internet Explorer (<9) no soportan del todo la propiedad y debe ser solucionado usando propiedades no estandarizadas . Un ejemplo totalmente compatible entre navegadores:

+ +
var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+
+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/window/sessionstorage/index.html b/files/es/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..870cb2dbd8 --- /dev/null +++ b/files/es/web/api/window/sessionstorage/index.html @@ -0,0 +1,143 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - Almacenaje + - Propiedad + - Referencia + - Sesion +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef()}}

+ +

La propiedad sessionStorage permite acceder a un objeto {{domxref("Storage")}} asociado a la sesión actual. La propiedad sessionStorage es similar a localStorage, la única diferencia es que la información almacenada en localStorage no posee tiempo de expiración, por el contrario la información almacenada en sessionStorage es eliminada al finalizar la sesion de la página. La sesión de la página perdura mientras el navegador se encuentra abierto, y se mantiene por sobre las recargas y reaperturas de la página. Abrir una página en una nueva pestaña o ventana iniciará una nueva sesión, lo que difiere en la forma en que trabajan las cookies de sesión.

+ +

Sintaxis

+ +
// Almacena la información en sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Obtiene la información almacenada desde sessionStorage
+var data = sessionStorage.getItem('key');
+ +

Valor 

+ +

Un objeto de tipo {{domxref("Storage")}}.

+ +

Ejemplo

+ +

El siguiente código accede al objeto {{domxref("Storage")}} del la sesión actual del domino y le añade un elemento utilizando {{domxref("Storage.setItem()")}}.

+ +
sessionStorage.setItem('myCat', 'Tom');
+ +

El siguiente ejemplo graba de forma automática el contenido de un campo de texto, y si el navegador es actualizado accidentalmente, restaura el contenido del campo de texto para no perder lo escrito.

+ +
// Obtiene el campo de texto que vamos a moniterear
+var field = document.getElementById("field");
+
+// Verificamos si tenemos algún valor auto guardado
+// (esto solo ocurrirá si la página es recargada accidentalmente)
+if (sessionStorage.getItem("autosave")) {
+  // Restaura el contenido al campo de texto
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Espera por cambios en el campo de texto
+field.addEventListener("change", function() {
+  // Almacena el resultado en el objeto de almacenamiento de sesión
+  sessionStorage.setItem("autosave", field.value);
+});
+ +

 

+ +
+

Nota: Por favor diríjase al artículo Usando la API de Web Storage para un ejemplo completo.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen distintos niveles de capacidad para localStorage y para sessionStorage. Aquí encontraras un resumen detallado de todas las capacidades de almacenamiento para diversos navegadores.

+ +
+

Nota: desde iOS 5.1, Safari Mobile almacena los datos de localStorage en un directorio de cache, el cual esta sujeto a limpezas ocacionales, por orden del sistema operativo, generalmente si el espacio es reducido.

+
+ +

Vea También

+ + diff --git a/files/es/web/api/window/showmodaldialog/index.html b/files/es/web/api/window/showmodaldialog/index.html new file mode 100644 index 0000000000..1e0f24f2a3 --- /dev/null +++ b/files/es/web/api/window/showmodaldialog/index.html @@ -0,0 +1,95 @@ +--- +title: Window.showModalDialog() +slug: Web/API/Window/showModalDialog +translation_of: Web/API/Window/showModalDialog +--- +
{{ Fx_minversion_header(3) }} {{ deprecated_header() }}{{APIRef}}
+ +

El método Window.showModalDialog() crea y visualiza una caja de diálogo modal, conteniendo el documento HTML especificado.

+ +
+

Esta prestación va a desaparecer. Por favor ajuste sus sitios Web y aplicaciones.

+ +

El soporte ha sido eliminado en Chrome 37. Pero se añadió temporalmente un ajuste de Política Coporativa para rehabilitar showModalDialog. Este método showModalDialog() fue eliminado definitivamente en Chrome 43.

+ +

Mozilla ha anunciado que eliminará el soporte para este método ({{bug(981796)}}). Sin plazo específico, debería ser antes de Firefox 46. Esto quiere decir que la función estará fuera de uso sobre mediados de junio de 2016. Una revisión ESR podría soportarla aun por algunas meses más.

+
+ +

Sintaxis

+ +
valRetorno = window.showModalDialog(uri[, argumentos][, opciones]);
+
+ +

donde

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SintaxisDescripción
center: {on | off | yes | no | 1 | 0 }Si el valor de este argumento es  on, yes, ó 1, la ventana de diálogo será centrada en el escritorio; en caso contrario será oculta. El valor por defecto es yes.
dialogheight: heightEspecifica la altura de la caja de diálogo; por defecto, el tamaño es especificado en pixels.
dialogleft: leftEspecifica la posición horizontal de la caja de diálogo respecto de la esquina superior izquierda del escritorio.
dialogwidth: widthEspecifica la anchura de la caja de diálogo; por defecto el tamaño es especificado en pixels.
dialogtop: topEspecifica la posición vertical de la caja de diálogo, respcto de la esquina superior izquierda del escritorio.
resizable: {on | off | yes | no | 1 | 0 }Si el valor de este argumentoes  on, yes, ó 1, la ventana de diálogo podrá ser redimensionada por el usuario; en caso controario su tamaño será fijo. El valor por defecto es no.
scroll: {on | off | yes | no | 1 | 0 }Si el valor de este argumento es on, yes, ó 1, la ventana de diálogo tendrá barras de desplazamiento; en caso contrario su tamaño será fijo. El valor por defecto es no.
+ +

{{Note("Firefox no implementa los argumentos dialogHide, edge, status, ó unadorned.")}}

+ +

Compatibilidad con navegadores

+ +

Introducido por Microsoft Internet Explorer 4. Soporte añadido a Firefox en Firefox 3 (desaconsejado en Fx 28), y a Safari en Safari 5.1. Ver WebKit bug 151885 para posible futura eliminación de Safari.

+ +

Ejemplos

+ +

Probar showModalDialog().

+ +

Notas

+ +

showModalDialog() está siendo estandarizado actualmente como parte de HTML5. El tercer argumento (para opciones adicionales) no está presente en la versión HTML5, y es (seguramente) ignorado por Safari and Chrome.

+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/window/sidebar/index.html b/files/es/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..280b5dcce3 --- /dev/null +++ b/files/es/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/es/web/api/window/statusbar/index.html b/files/es/web/api/window/statusbar/index.html new file mode 100644 index 0000000000..bd0b2eaa6c --- /dev/null +++ b/files/es/web/api/window/statusbar/index.html @@ -0,0 +1,72 @@ +--- +title: Window.statusbar +slug: Web/API/Window/statusbar +translation_of: Web/API/Window/statusbar +--- +
{{APIRef}}
+ +

Resumen

+ +

Retorna el objeto statusbar, la visibilidad se puede alternar en la ventana.

+ +

Sintaxis

+ +
objRef = window.statusbar
+
+ +

Ejemplo

+ +

El siguiente ejemplo HTML muestra una forma de utilizar la propiedad visible de los diversos objetos de "bar", y tambien el cambio de privilegios nesesarios para escribir en la propiedad visible para cada una de las ventanas existentes.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Various DOM Tests</title>
+
+<script>
+// cambia el estado de la barra en la ventana existente
+netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
+window.statusbar.visible=!window.statusbar.visible;
+</script>
+
+</head>
+<body>
+  <p>Various DOM Tests</p>
+</body>
+</html>
+
+ +

Notas

+ +

Al cargar la pagina del ejemplo anterior se muestra el siguiente cuadro de dialogo:

+ +

Para alternar la visibilidad de las barras,  debe de firmar sus scripts o abilitar los privilegios apropiados, como en el ejemplo anterior. Tenga en cuenta que cambiar la visibilidad de manera dinamica de las barras de herramientas puede cambiar el tamaño de la ventana de forma dramatica y afectando de manera significativa el rendimiento de su pagina.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'browsers.html#dom-window-statusbar', 'Window.statusbar')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-statusbar', 'Window.statusbar')}}{{Spec2('HTML5 W3C')}} 
+ +

Ver tambien

+ + diff --git a/files/es/web/api/window/url/index.html b/files/es/web/api/window/url/index.html new file mode 100644 index 0000000000..7758a161b9 --- /dev/null +++ b/files/es/web/api/window/url/index.html @@ -0,0 +1,101 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +tags: + - API + - DOM + - Propiedad + - Referencia + - Referência DOM + - WebAPI +translation_of: Web/API/URL +--- +

{{ApiRef("Window")}}{{SeeCompatTable}}

+ +

La propiedad Window.URL devuelve un objeto que proporciona métodos estáticos usados para crear y gestionar objetos de URLs. Además puede ser llamado como un constructor para construir objetos {{domxref("URL")}}.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +

Llamando a un método estático:

+ +
img.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(blob);
+ +

Construyendo un nuevo objeto:

+ +
var url = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico8.0[2]{{CompatGeckoDesktop("2.0")}}[1]
+ {{CompatGeckoDesktop("19.0")}}		10.015.0[2]6.0[2]
+ 7.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("14.0")}}[1]
+ {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
+
+ +

[1] Desde Gecko 2 (Firefox 4) hasta Gecko 18 incluidos, Gecko devuelve un objeto con el tipo interno no estandar nsIDOMMozURLProperty. En la práctica, esto no hace ninguna diferencia.

+ +

[2] Implementado bajo el nombre no estandar webkitURL.

diff --git a/files/es/web/api/windowbase64/atob/index.html b/files/es/web/api/windowbase64/atob/index.html new file mode 100644 index 0000000000..aa9eeead07 --- /dev/null +++ b/files/es/web/api/windowbase64/atob/index.html @@ -0,0 +1,111 @@ +--- +title: WindowBase64.atob() +slug: Web/API/WindowBase64/atob +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +

{{APIRef}}

+ +

La función WindowBase64.atob() descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.

+ +

For use with Unicode or UTF-8 strings, see this note at Base64 encoding and decoding and this note at window.btoa().

+ +

Syntax

+ +
var decodedData = window.atob(encodedData);
+ +

Example

+ +
var encodedData = window.btoa("Hello, world"); // encode a string
+var decodedData = window.atob(encodedData); // decode the string
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1][2]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

+ +

[2] Starting with Firefox 27, this atob() method ignores all space characters in the argument to comply with the latest HTML5 spec. ({{ bug(711180) }})

+ +

See also

+ + diff --git a/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html b/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html new file mode 100644 index 0000000000..c8747777cd --- /dev/null +++ b/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html @@ -0,0 +1,345 @@ +--- +title: Base64 codificando y decodificando +slug: Web/API/WindowBase64/Base64_codificando_y_decodificando +translation_of: Glossary/Base64 +--- +

Base64 es un grupo de esquemas de codificación de binario a texto que representa los datos binarios mediante una cadena ASCII, traduciéndolos en una representación radix-64. El término Base64 se origina de un sistema de codificación de transmisión de contenido MIME específico.

+ +

Los esquemas de codificación Base64 son comúnmente usados cuando se necesita codificar datos binarios para que sean almacenados y transferidos sobre un medio diseñado para tratar con datos textuales. Esto es para asegurar que los datos se mantienen intactos y sin modificaciones durante la transmisión. Base64 es comúnmente usado en muchas aplicaciones, incluyendo la escritura de emails vía MIME y el almacenamiento de datos complejos en XML.

+ +

En JavaScript hay dos funciones para decodificar y codificar cadenas base64, respectivamente:

+ + + +

La función atob() decodifica una cadena de datos que ha sido codificada usando la codificación en base 64. Por el contrario, la función btoa() crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.

+ +

Ambas funciones trabajan sobre cadenas de texto. Si desea trabajar con ArrayBuffers, lea este párrafo.

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

Documentación

+ +
+
data URIs
+
Los URIs de datos, definidos por RFC 2397, permiten a los creadores de contenido introducir pequeños ficheros en línea en documentos.
+
Base64
+
Artículo en Wikipedia sobre el sistema de codificación Base64.
+
{{domxref("WindowBase64.atob","atob()")}}
+
Decodifica una cadena de datos que ha sido codificada utilizando base-64.
+
{{domxref("WindowBase64.btoa","btoa()")}}
+
Crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.
+
The "Unicode Problem"
+
En la mayoría de navegadores, llamar a btoa() con una cadena Unicode causará una excepción Character Out Of Range. Este párrafo muestra algunas soluciones.
+
URIScheme
+
Lista de esquemas URI soportados por Mozilla.
+
StringView
+
En este artículo está publicada una librería hecha por nosotros con los siguientes objetivos:
+
+
    +
  • crear una interfaz al estilo de C para cadenas (es decir, arrays de códigos de caracteres — ArrayBufferView en JavaScript) basada en la interfaz  ArrayBuffer de JavaScript.
    • +
  • crear una colección de métodos para los que los objetos parecidos a cadenas (de ahora en adelante, stringViews) funcionen estrictamente en arrays de números más que en cadenas JavaScript inmutables.
    • +
  • trabajar con otras codificaciones Unicode diferentes de las DOMStrings UTF-16 por defecto de JavaScript.
    • +
+
+
+ +

Ver todo...

+ 		+

Herramientas

+ + + + + + +
+ + + +

El "Problema Unicode"

+ +

Como las DOMStrings son cadenas codificadas en 16 bits, en la mayoría de navegadores llamar a window.btoa sobre una cadena Unicode resultará en una excepción Character Out Of Range si un carácter excede el rango de los caracteres ASCII de 8 bits. Hay dos posibles métodos para resolver este problema:

+ + + +

Aquí están los dos posibles métodos:

+ +

Solución #1 – escapar la cadena antes de codificarla

+ +
function utf8_to_b64( str ) {
+  return window.btoa(unescape(encodeURIComponent( str )));
+}
+
+function b64_to_utf8( str ) {
+  return decodeURIComponent(escape(window.atob( str )));
+}
+
+// Uso:
+utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+ +

Esta solución ha sido propuesta por Johan Sundström.

+ +

Otra posible solución sin utilizar las funciones 'unscape' y 'escape', ya obsoletas.

+ +
function b64EncodeUnicode(str) {
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
+        return String.fromCharCode('0x' + p1);
+    }));
+}
+ b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+
+ +

Solución #2 – reescribir atob() y btoa() usando TypedArrays y UTF-8

+ +
Nota: El siguiente código también es útil para obtener un ArrayBuffer a partir de una cadena Base64 y/o viceversa (véase abajo). Para una librería completa de arrays tipados, vea este artículo.
+ +
"use strict";
+
+/*\
+|*|
+|*|  Base64 / binary data / UTF-8 strings utilities
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
+|*|
+\*/
+
+/* Decodificación de cadena base64 en array de bytes */
+
+function b64ToUint6 (nChr) {
+
+  return nChr > 64 && nChr < 91 ?
+      nChr - 65
+    : nChr > 96 && nChr < 123 ?
+      nChr - 71
+    : nChr > 47 && nChr < 58 ?
+      nChr + 4
+    : nChr === 43 ?
+      62
+    : nChr === 47 ?
+      63
+    :
+      0;
+
+}
+
+function base64DecToArr (sBase64, nBlocksSize) {
+
+  var
+    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
+    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen);
+
+  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
+    nMod4 = nInIdx & 3;
+    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
+    if (nMod4 === 3 || nInLen - nInIdx === 1) {
+      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
+        taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
+      }
+      nUint24 = 0;
+
+    }
+  }
+
+  return taBytes;
+}
+
+/* Codificación de array en una cadena Base64 */
+
+function uint6ToB64 (nUint6) {
+
+  return nUint6 < 26 ?
+      nUint6 + 65
+    : nUint6 < 52 ?
+      nUint6 + 71
+    : nUint6 < 62 ?
+      nUint6 - 4
+    : nUint6 === 62 ?
+      43
+    : nUint6 === 63 ?
+      47
+    :
+      65;
+
+}
+
+function base64EncArr (aBytes) {
+
+  var nMod3 = 2, sB64Enc = "";
+
+  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
+    nMod3 = nIdx % 3;
+    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
+    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
+    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
+      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
+      nUint24 = 0;
+    }
+  }
+
+  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
+
+}
+
+/* De array UTF-8 a DOMString y viceversa */
+
+function UTF8ArrToStr (aBytes) {
+
+  var sView = "";
+
+  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
+    nPart = aBytes[nIdx];
+    sView += String.fromCharCode(
+      nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */
+        /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */
+        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */
+        (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */
+        (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */
+        (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */
+        (nPart - 192 << 6) + aBytes[++nIdx] - 128
+      : /* nPart < 127 ? */ /* one byte */
+        nPart
+    );
+  }
+
+  return sView;
+
+}
+
+function strToUTF8Arr (sDOMStr) {
+
+  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
+
+  /* mapeando... */
+
+  for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
+    nChr = sDOMStr.charCodeAt(nMapIdx);
+    nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6;
+  }
+
+  aBytes = new Uint8Array(nArrLen);
+
+  /* transcripción... */
+
+  for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) {
+    nChr = sDOMStr.charCodeAt(nChrIdx);
+    if (nChr < 128) {
+      /* un byte */
+      aBytes[nIdx++] = nChr;
+    } else if (nChr < 0x800) {
+      /* dos bytes */
+      aBytes[nIdx++] = 192 + (nChr >>> 6);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x10000) {
+      /* tres bytes */
+      aBytes[nIdx++] = 224 + (nChr >>> 12);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x200000) {
+      /* cuatro bytes */
+      aBytes[nIdx++] = 240 + (nChr >>> 18);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x4000000) {
+      /* cinco bytes */
+      aBytes[nIdx++] = 248 + (nChr >>> 24);
+      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else /* if (nChr <= 0x7fffffff) */ {
+      /* seis bytes */
+      aBytes[nIdx++] = 252 + (nChr >>> 30);
+      aBytes[nIdx++] = 128 + (nChr >>> 24 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    }
+  }
+
+  return aBytes;
+
+}
+
+ +

Tests

+ +
/* Tests */
+
+var sMyInput = "Base 64 \u2014 Mozilla Developer Network";
+
+var aMyUTF8Input = strToUTF8Arr(sMyInput);
+
+var sMyBase64 = base64EncArr(aMyUTF8Input);
+
+alert(sMyBase64);
+
+var aMyUTF8Output = base64DecToArr(sMyBase64);
+
+var sMyOutput = UTF8ArrToStr(aMyUTF8Output);
+
+alert(sMyOutput);
+ +

Apéndice: Decodificar una cadena Base64 en Uint8Array o ArrayBuffer

+ +

Estas funciones nos permiten crear también uint8Arrays o arrayBuffers a partir de cadenas codificadas en base 64:

+ +
var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
+
+var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
+
+alert(myBuffer.byteLength);
+ +
Nota: La función base64DecToArr(sBase64[, nBlocksSize]) devuelve un uint8Array de bytes. Si tu objetivo es construir un búfer de datos crudos de 16, 32 o 64 bits, usa el argumento nBlocksSize, que es el número de bytes de los que la propiedad uint8Array.buffer.bytesLength debe devolver un múltiplo (1 u omitido para ASCII, cadenas binarias o cadenas UTF-8 codificacas, 2 para cadenas UTF-16, 4 para cadenas UTF-32).
+ +

Para una librería más completa, véase StringView, una representación parecida a C de cadenas basadas en arrays tipados.

+ +

Véase también

+ + diff --git a/files/es/web/api/windowbase64/index.html b/files/es/web/api/windowbase64/index.html new file mode 100644 index 0000000000..bdce1f982f --- /dev/null +++ b/files/es/web/api/windowbase64/index.html @@ -0,0 +1,108 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +

{{APIRef}}

+

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+

Properties

+

This helper neither defines nor inherits any properties.

+

Methods

+

This helper does not inherit any methods.

+
+
+ {{domxref("WindowBase64.atob()")}}
+
+ Decodes a string of data which has been encoded using base-64 encoding.
+
+ {{domxref("WindowBase64.btoa()")}}
+
+ Creates a base-64 encoded ASCII string from a string of binary data.
+
+

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+

Browser compatibility

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+

See also

+ diff --git a/files/es/web/api/windoweventhandlers/index.html b/files/es/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..9a1ab057e9 --- /dev/null +++ b/files/es/web/api/windoweventhandlers/index.html @@ -0,0 +1,184 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API +translation_of: Web/API/WindowEventHandlers +--- +
{{APIRef("HTML DOM")}}
+ +

WindowEventHandlers describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement more event handlers.

+ +

WindowEventHandlers is a not an interface and no object of this type can be created.

+ +

Properties

+ +

The events properties, of the form onXYZ, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.
+
{{domxref("WindowEventHandlers.onresize")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onlanguage since the {{SpecName("HTML 5")}} snapshot.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoDesktop(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoDesktop(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoMobile(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/windoweventhandlers/onbeforeunload/index.html b/files/es/web/api/windoweventhandlers/onbeforeunload/index.html new file mode 100644 index 0000000000..308096a56a --- /dev/null +++ b/files/es/web/api/windoweventhandlers/onbeforeunload/index.html @@ -0,0 +1,81 @@ +--- +title: Window.onbeforeunload +slug: Web/API/WindowEventHandlers/onbeforeunload +translation_of: Web/API/WindowEventHandlers/onbeforeunload +--- +
+ {{ApiRef}}
+

Introducción

+

Evento que se ejecuta antes de abandonar la página, justo antes de que se ejecute {{domxref("window.onunload","window.onunload")}}. El documento aún está visible y {{domxref("event.preventDefault","el evento aún se puede cancelar")}}.

+

Sintaxis

+
window.onbeforeunload = funcRef
+ +

Ejemplo

+
window.onbeforeunload = function(e) {
+  return 'Texto de aviso';
+};
+
+

Notas

+

Cuando este evento devuelve un valor que no sea nulo, se solicita al usuario que confirme que quiere abandonar la página. En la mayoría de los navegadores, el valor de retorno del evento se muestra en este cuadro de diálogo.

+

Desde el 25 de mayo de 2011, los estados de la especificación HTML5 que llaman a los métodos {{domxref("window.showModalDialog()")}}, {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} y {{domxref("window.prompt()")}} pueden ser ignorados en este evento.

+

Se puede y se debería controlar este evento con {{domxref("EventTarget.addEventListener","window.addEventListener()")}} y el evento beforeunload (más información en los enlaces).

+

Compatibilidad con los navegadores

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico114123
+
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+

Especificación

+

Este evento fue introducido originalmente por Microsoft en Internet Explorer 4 y estandarizado en la especificación HTML5.

+ +

Ver también

+ diff --git a/files/es/web/api/windoweventhandlers/onhashchange/index.html b/files/es/web/api/windoweventhandlers/onhashchange/index.html new file mode 100644 index 0000000000..282176df2b --- /dev/null +++ b/files/es/web/api/windoweventhandlers/onhashchange/index.html @@ -0,0 +1,165 @@ +--- +title: WindowEventHandlers.onhashchange +slug: Web/API/WindowEventHandlers/onhashchange +tags: + - HTML-DOM + - JavaScript + - Propiedades + - Referencia + - WindowEventHandlers + - eventos +translation_of: Web/API/WindowEventHandlers/onhashchange +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

El evento hashchange se dispara cuando la almohadilla ha cambiado (ver {{domxref("Window.location", "location.hash")}}).

+ +

Sintaxis

+ +
window.onhashchange = funcRef;
+
+ +

ó

+ +
<body onhashchange="funcRef();">
+
+ +

ó

+ +
window.addEventListener("hashchange", funcRef, false);
+
+ +

Parámetros

+ +
+
funcRef
+
Una referencia a una función.
+
+ +

Ejemplo

+ +
if ("onhashchange" in window) {
+    alert("¡El navegador soporta el evento hashchange!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#somecoolfeature") {
+        somecoolfeature();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+
+ +

El evento hashchange

+ +

El evento hashchange enviado, tiene los siguientes campos:

+ + + + + + + + + + + + + + + + + + + +
CampoTipoDescripción
newURL {{gecko_minversion_inline("6.0")}}DOMStringLa URL nueva hacia la cual la ventana está navegando.
oldURL {{gecko_minversion_inline("6.0")}}DOMStringLa URL anterior desde la cual la ventana navegó.
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Basico5.0{{CompatGeckoDesktop("1.9.2")}} +

8.0

+ +

los atributos oldURL/newURL no estan soportados.

+ 		10.65.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Basico2.2{{CompatGeckoMobile("1.9.2")}}9.011.05.0
+
+ + diff --git a/files/es/web/api/windoweventhandlers/onpopstate/index.html b/files/es/web/api/windoweventhandlers/onpopstate/index.html new file mode 100644 index 0000000000..5ee8539dbd --- /dev/null +++ b/files/es/web/api/windoweventhandlers/onpopstate/index.html @@ -0,0 +1,74 @@ +--- +title: WindowEventHandlers.onpopstate +slug: Web/API/WindowEventHandlers/onpopstate +translation_of: Web/API/WindowEventHandlers/onpopstate +--- +
{{APIRef}}
+ +

La propiedad onpopstate del mixin {{domxref("WindowEventHandlers")}} es el {{domxref("EventHandler")}} para procesar eventos popstate de la ventana.

+ +

Se evnía un evento popstate a la ventana cada vez que la entrada activa de la historia cambia entre otra otras dos entradas del mismo documento. Si la entrada de la historia fue creada al llamar a history.pushState(), o fue afectada por una llamada a history.replaceState(), la propiedad state del evento popstate contendrá una copia del objeto de estado de la entrada de la hisotria.

+ +
+

Nota: Llamar a history.pushState() o a history.replaceState() no dispararán un evento popstate. El evento popstate solamente se dispará realizando una acción de navegador, tal como pulsar el botón volver (o llamando a history.back() en JavaScript), mientras se navega entre dos entradas de la historia de un mismo documento.

+
+ +

Sintaxis

+ +
window.onpopstate = funcRef;
+
+ + + +

El evento popstate

+ +

Por ejemplo, la página en http://example.com/example.html ejecutando el código siguiente, generará alertas como se indica.:

+ +
window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+
+ +

Tenga en cuenta que, a pesar de que la entrada original (para http://example.com/example.html) no tiene un objeto de estado asociado, el evento popstate se dispara igualemente cuando se activa la entrada después de la segunda llamada a history.back().

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onpopstate', 'onpopstate')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.WindowEventHandlers.onpopstate")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/caches/index.html b/files/es/web/api/windoworworkerglobalscope/caches/index.html new file mode 100644 index 0000000000..c8d3a71b97 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/caches/index.html @@ -0,0 +1,127 @@ +--- +title: WindowOrWorkerGlobalScope.caches +slug: Web/API/WindowOrWorkerGlobalScope/caches +translation_of: Web/API/WindowOrWorkerGlobalScope/caches +--- +

{{APIRef()}}{{SeeCompatTable}}

+ +

La propiedad de sólo-lectura caches, de la interfaz {{domxref("WindowOrWorkerGlobalScope")}}, devuelve el objeto {{domxref("CacheStorage")}} asociado al contexto actual. Este objeto habilita funcionalidades como guardar assets para su utilización offline, y generar respuestas personalizadas a las peticiones.

+ +

Sintaxis

+ +
var myCacheStorage = self.caches; // or just caches
+
+ +

Valor

+ +

Un objeto {{domxref("CacheStorage")}}.

+ +

Ejemplo

+ +

El siguiente ejemplo muestra la forma en la que utilizarías una cache en un contexto de service worker para guardar assets offline.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll(
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      );
+    })
+  );
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Definido en un WindowOrWorkerGlobalScope parcial en la última especificación.
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico40.0{{CompatGeckoDesktop(42)}}
+ {{CompatGeckoDesktop(52)}}[1]		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(42)}}
+ {{CompatGeckoMobile(52)}}[1]		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] las caches se definen ahora en el mixin {{domxref("WindowOrWorkerGlobalScope")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html new file mode 100644 index 0000000000..e24e4b11f4 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html @@ -0,0 +1,108 @@ +--- +title: self.createImageBitmap() +slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +tags: + - API + - Canvas + - DOM + - Referencia + - WindowOrWorkerGlobalScope + - createImageBitmap + - metodo +translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +--- +
{{APIRef("Canvas API")}}
+ +

El método createImageBitmap() crea un bitmap a partir de un recurso especificado, opcionalmente recortado para mostrar únicamente una porción de este. El método existe a nivel global como parte, tanto de las ventanas (window), como de los workers. Este admite una variedad de tipos de entrada, y devuelve una {{domxref("Promise")}} que es resuelta con un {{domxref("ImageBitmap")}}.

+ +

Sintaxis

+ +
createImageBitmap(image[, options]).then(function(response) { ... });
+createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ... });
+ +

Parámetros

+ +
+
image
+
Un recurso/imagen origen, que puede uno de los siguientes elementos: {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, o {{domxref("OffscreenCanvas")}}.
+
sx
+
La coordenada x del rectángulo que será usado para la extracción del ImageBitmap.
+
sy
+
La coordenada y del rectángulo que será usado para la extracción del ImageBitmap.
+
sw
+
La anchura del rectángulo que será usado para extraer el ImageBitmap. El valor podría ser negativo.
+
sh
+
La altura del rectángulo que será usado para extraer el ImageBitmap. El valor podría ser negativo.
+
options {{optional_inline}}
+
Un objeto que proporciona opciones para la extracción de la imagen. Las opciones posibles son: +
    +
  • imageOrientation: Especifica si la imagen debe ser extraida tal y como se muestra, o debe ser volteada verticalmente. Las valores posibles: none (por defecto) o flipY.
    • +
  • premultiplyAlpha: Especifica si los canales de color del mapa de bits generado deben premultiplicarse por el canal alpha. Uno de: none, premultiply, o default (por defecto).
    • +
  • colorSpaceConversion: Especifica si la imagen debe ser decodificada usando conversión del espacio de color. Uno de: none o default (por defecto). El valor default indica que se usará la implementación que haya disponible.
    • +
  • resizeWidth: Un entero largo que especifica la anchura final.
    • +
  • resizeHeight: Un entero largo que especifica la altura final.
    • +
  • resizeQuality: Especifica que algorítmo debe ser usado en el redimensionado para alcanzar las dimensiones deseadas. Uno de estos valores: pixelated, low (por defecto), medium, o high.
    • +
+
+
+ +

Valor devuelto

+ +

Una {{domxref("Promise")}} que es resuelta con un objeto {{domxref("ImageBitmap")}}, el cual contiene los datos del mapa de bits generado para el rectángulo dado.

+ +

Ejemplo

+ +

Creando sprites desde un sprite sheet

+ +

El siguiente ejemplo carga un sprite sheet, extrae los sprites, y muestra cada uno de ellos en el canvas. Un sprite sheet es una imagen que contiene multiples imágenes más pequeñas, que finalmente son utilizadas de manera individual.

+ +
var canvas = document.getElementById('myCanvas'),
+ctx = canvas.getContext('2d'),
+image = new Image();
+
+// Esperar que el sprite sheet se cargue
+image.onload = function() {
+  Promise.all([
+    // Recortar dos sprites del conjunto
+    createImageBitmap(image, 0, 0, 32, 32),
+    createImageBitmap(image, 32, 0, 32, 32)
+  ]).then(function(sprites) {
+    // Pintar cada uno de los sprites en el canvas
+    ctx.drawImage(sprites[0], 0, 0);
+    ctx.drawImage(sprites[1], 32, 32);
+  });
+}
+
+// Cargar el sprite sheet desde un archivo de imagen
+image.src = 'sprites.png';
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstado Comentario
{{SpecName('HTML WHATWG', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.createImageBitmap")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/fetch/index.html b/files/es/web/api/windoworworkerglobalscope/fetch/index.html new file mode 100644 index 0000000000..9540fe5d05 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/fetch/index.html @@ -0,0 +1,177 @@ +--- +title: WindowOrWorkerGlobalScope.fetch() +slug: Web/API/WindowOrWorkerGlobalScope/fetch +tags: + - API + - Experimental + - Fetch + - Fetch API + - GlobalFetch + - Petición + - Referencia + - metodo + - solicitud +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +--- +
{{APIRef("Fetch API")}}
+ +

El método fetch() del mixin {{domxref("WindowOrWorkerGlobalScope")}} lanza el proceso de solicitud de un recurso de la red. Esto devuelve una promesa que resuelve al objeto {{domxref("Response")}} que representa la respuesta a la solicitud realizada.

+ +

Tanto {{domxref("Window")}} como {{domxref("WorkerGlobalScope")}} implementan WorkerOrGlobalScope, por lo que el método fetch() está disponible en prácticamente cualquier contexto desde el que se pueda necesitar solicitar un recurso.

+ +

Una promesa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} se rechaza con un {{jsxref("TypeError")}} cuando sucede un error en la red, aunque normalmente significa un tema de permisos o similar. Una comprobación más precisa de una solicitud con fetch() debería comprobar que la promesa se resuelve, y que la propiedad {{domxref("Response.ok")}} tiene valor true. Un estatus HTTP 404 no constituye un error de red.

+ +

El método fetch() es controlado por la directiva connect-src de la Política de Seguridad de Contenido (Content Security Policy) en lugar de la directiva del recurso que se solicita.

+ +
+

Nota: Los parámetros del método fetch() son indénticos a los del constructor de {{domxref("Request.Request","Request()")}}.

+
+ +

Sintaxis

+ +
Promise<Response> fetch(input[, init]);
+ +

Parámetros

+ +
+
input
+
Define el recurso que se quiere solicitar. Puede ser: +
    +
  • Un {{domxref("USVString")}} con la URL del recurso a solicitar. Algunos navegadores aceptan los esquemas blob: y data:.
    • +
  • Un objeto {{domxref("Request")}}.
    • +
+
+
init {{optional_inline}}
+
Objeto de opciones que contiene configuraciones para personalizar la solicitud. Estas opciones pueden ser: +
    +
  • method: El método de solicitud, p.ej., GET, POST.
    • +
  • headers: Cualquier cabecera que se quiera añadir a la solicitud, contenidas en un objeto {{domxref("Headers")}} o un objeto literal con valores {{domxref("ByteString")}}.
    • +
  • body: Cualquier cuerpo que se quiera añadir a la solicitud: puede ser un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, u objeto {{domxref("USVString")}}. Nótese que las solicitudes con métodos GET o HEAD no pueden tener cuerpo.
    • +
  • mode: El modo a usar en la solicitud, p.ej., cors, no-cors, o same-origin.
    • +
  • credentials: Las credenciales que se quieran utilizar para la solicitud: omit, same-origin, o include. Para enviar automáticamente las cookies del dominio actual, debe indicarse esta opción. Desde Chrome 50, esta propiedad también acepta una instancia de {{domxref("FederatedCredential")}} o de {{domxref("PasswordCredential")}}.
    • +
  • cache: El modo de caché a utilizar en la solicitud: default, no-store, reload, no-cache, force-cache, o only-if-cached.
    • +
  • redirect: El modo de redirección a usar: follow (seguir redirecciones automáticamente), error (abortar si sucede un error durante la redirección), o manual (gestionar redirecciones manualmente). El valor por defecto en Chrome es follow (hasta la versión 46 era manual).
    • +
  • referrer: Un {{domxref("USVString")}} que especifique no-referrer, client, o una URL. El valor por defecto es client.
    • +
  • referrerPolicy: Especifica el valor de la cabecera HTTP referer. Puede ser no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
    • +
  • integrity: Contiene el valor de integridad de subrecurso (subresource integrity) de la solicitud (p.ej., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
    • +
  • keepalive: La opción keepalive se puede usar para permitir que recurso dure más que la página. Las solicitudes con el indicador keepalive son un reemplazo de la API {{domxref("Navigator.sendBeacon()")}}. 
    • +
  • signal: Una instancia de objeto {{domxref("AbortSignal")}}; permite comunicarse con con una solicitud vigente y abortarla si se desea via {{domxref("AbortController")}}.
    • +
+
+
+ +

Return value

+ +

Una {{domxref("Promise")}} que resuelve a un objeto {{domxref("Response")}}.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + +
TipoDescriptción
AbortErrorSe abortó la solicitud (mediante {{domxref("AbortController.abort()")}}).
TypeErrorDesde Firefox 43, fetch() lanza un TypeError si la URL tiene credenciales, como en http://usuario:clave@ejemplo.com.
+ +

Ejemplo

+ +

En el ejemplo de solicitud con Request (ver Fetch Request live) creamos un nuevo objeto {{domxref("Request")}} usando el constructor pertinente, y realizamos una solicitud usando fetch(). Dado que estamos solicitando una imagen, ejecutamos {{domxref("Body.blob()")}} en la respuesta para darle el tipo MIME correspondiente para que sea gestionada apropiadamente, luego creamos un objeto URL de ella para mostrarla en un elemento {{htmlelement("img")}}.

+ +
var miImagen = document.querySelector('img');
+
+var miSolicitud = new Request('flores.jpg');
+
+fetch(miSolicitud).then(function(respuesta) {
+  return respuesta.blob();
+}).then(function(respuesta) {
+  var objeto = URL.createObjectURL(respuesta);
+  miImagen.src = objeto;
+});
+ +

En el ejemplo de solicitud con inicializador y Request (ver Fetch Request init live) hacemos lo mismo pero además pasamos un objeto inicializador cuando invocamos el fetch():

+ +
var miImagen = document.querySelector('img');
+
+var misCabeceras = new Headers();
+misCabeceras.append('Content-Type', 'image/jpeg');
+
+var miInicializador = { method: 'GET',
+                        headers: misCabeceras,
+                        mode: 'cors',
+                        cache: 'default' };
+
+var miSolicitud = new Request('flores.jpg');
+
+fetch(miSolicitud,miInicializador).then(function(respuesta) {
+  ...
+});
+ +

Nótese que también podríamos pasar el objeto inicializador con el constructor de Request para conseguir el mismo efecto, p.ej.:

+ +
var miSolicitud = new Request('flores.jpg', miInicializador);
+ +

También se puede usar un objeto literal a modo de headers en init.

+ +
var miInicializador = { method: 'GET',
+                        headers: {
+                            'Content-Type': 'image/jpeg'
+                        },
+                        mode: 'cors',
+                        cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', miInicializador);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definida parcialmente en WindowOrWorkerGlobalScope en la especificación más reciente.
{{SpecName('Fetch','#dom-global-fetch','fetch()')}}{{Spec2('Fetch')}}Definición inicial
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Añade una instancia de {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} como valor posible para init.credentials.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/index.html b/files/es/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..b45747a2b3 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,169 @@ +--- +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()}}
+ +

El mixin WindowOrWorkerGlobalScope describe diversas características comunes a las interfaces {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}. Cada una de estas interfaces pueden, por supuesto, añadir más funcionalidades sobre las listadas a continuación.

+ +
+

Nota: WindowOrWorkerGlobalScope es un mixin y no una interface; no se puede crear un objeto de tipo WindowOrWorkerGlobalScope.

+
+ +

Propiedades

+ +

Estas propiedades se definen en el mixin {{domxref("WindowOrWorkerGlobalScope")}}, y son implementadas por {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}.

+ +
+
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Devuelve el objeto {{domxref("CacheStorage")}}, asociado al contexto actual. Este objeto habilita funcionalidades como guardar assets para su utilización offline, y generar respuestas personalizadas a las peticiones.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Proporciona un mecanismo para que las aplicaciones puedan acceder asíncronamente a las capacidades de las bases de datos indexadas.; devuelve un objeto {{domxref("IDBFactory")}}.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Devuelve un booleano indicando si el contexto actual es seguro (true)  o no (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Devuelve el origen del objeto global, serializado como un string. (Esto no parece estar implementado todavía en ningun navegador).
+
+
+ +

Métodos

+ +

Estas propiedades se definen en el mixin {{domxref("WindowOrWorkerGlobalScope")}}, y son implementadas por {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}.

+ +
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Decodifica un string de datos que ha sido codificado utlizando codificación en base-64.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Crea un string ASCII codificado en base-64 desde un string de datos binarios.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Procesa el set de ejecución repetida utilizando {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Cancela el retraso del set de ejecuión utilizando {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Acepta variedad de recursos de imagen, y devuelve una {{domxref("Promise")}} que se resuelve como un {{domxref("ImageBitmap")}}. Opcionalmente, la fuente se recorta como un rectángulo de pixels con origen en (sx, sy) con ancho sw, y altura sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Comienza el proceso de búsqueda de un recurso desde la red.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Programa la repetición de la ejecución de una función dado un número de lapsos en milisegundos.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Programa la ejecución de una función dada una cantidad de tiempo.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', 'WindowOrWorkerGlobalScope mixin')}}{{Spec2('HTML WHATWG')}}Aquí es donde se define el mixin principal.
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definición del método fetch().
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Definición de la propiedad caches.
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Definición de la propiedad indexedDB.
{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}{{Spec2('Secure Contexts')}}Definición de la propiedad isSecureContext.
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari MobileChrome para Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html new file mode 100644 index 0000000000..e6ef3fe5cd --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html @@ -0,0 +1,141 @@ +--- +title: WindowOrWorkerGlobalScope.indexedDB +slug: Web/API/WindowOrWorkerGlobalScope/indexedDB +translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB +--- +

{{ APIRef() }}

+ +

La propiedad indexedDB del mixin {{domxref("WindowOrWorkerGlobalScope")}} proporciona un mecanismo para que las aplicaciones puedan acceder asíncronamente a las capacidades de las bases de datos indexadas.

+ +

Sintaxis

+ +
var DBOpenRequest = self.indexedDB.open('toDoList');
+ +

Valor

+ +

Un objeto {{domxref("IDBFactory")}}.

+ +

Ejemplo

+ +
var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open('toDoList');
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ }
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Definido en un WindowOrWorkerGlobalScope parcial en la última especificación.
{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}{{Spec2('IndexedDB')}}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico23{{property_prefix("webkit")}}
+ 24		{{CompatVersionUnknown}}10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}
+ {{CompatGeckoDesktop("52.0")}}[1]		10, parcial157.1
Disponible en los workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico4.4{{CompatVersionUnknown}}{{CompatGeckoMobile("22.0")}}
+ {{CompatGeckoMobile("52.0")}}[1]		1.0.110228
Disponible en los workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +

[1] indexedDB se define ahora en el mixin {{domxref("WindowOrWorkerGlobalScope")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html new file mode 100644 index 0000000000..a99c499c7c --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html @@ -0,0 +1,86 @@ +--- +title: WindowOrWorkerGlobalScope.isSecureContext +slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext +translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext +--- +

{{APIRef()}}{{SeeCompatTable}}

+ +

La propiedad de sólo-lectura isSecureContext, de la interface  {{domxref("WindowOrWorkerGlobalScope")}} Devuelve un booleano indicando si el contexto actual es seguro (true) or not (false).

+ +

Sintaxis

+ +
var isItSecure = self.isSecureContext; // or just isSecureContext
+
+ +

Valor

+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.isSecureContext')}}{{Spec2('Secure Contexts')}}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome(55)}}{{CompatGeckoDesktop(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatChrome(55)}}{{CompatChrome(55)}}{{CompatGeckoMobile(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/windowtimers/clearinterval/index.html b/files/es/web/api/windowtimers/clearinterval/index.html new file mode 100644 index 0000000000..14a1b0d1b8 --- /dev/null +++ b/files/es/web/api/windowtimers/clearinterval/index.html @@ -0,0 +1,43 @@ +--- +title: WindowTimers.clearInterval() +slug: Web/API/WindowTimers/clearInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Cancela una acción reiterativa que se inició mediante una llamada a {{domxref("window.setInterval", "setInterval")}}.

+ +

Sintaxis

+ +
window.clearInterval(intervalID)
+
+ +

intervalID es el identificador de la acción reiterativa que se desea cancelar. Este ID se obtiene a partir de setInterval().

+ +

Ejemplo

+ +

Vea el ejemplo de setInterval().

+ +

Especificación

+ + + + + + + + +
{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}{{Spec2('HTML WHATWG')}}
+ +

Vea también

+ + diff --git a/files/es/web/api/windowtimers/cleartimeout/index.html b/files/es/web/api/windowtimers/cleartimeout/index.html new file mode 100644 index 0000000000..0df5242672 --- /dev/null +++ b/files/es/web/api/windowtimers/cleartimeout/index.html @@ -0,0 +1,63 @@ +--- +title: window.clearTimeout +slug: Web/API/WindowTimers/clearTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +
{{ApiRef}}
+ +

Resumen

+ +

Borra el retraso asignado por {{domxref("window.setTimeout","window.setTimeout()")}}.

+ +

Sintaxis

+ +
window.clearTimeout(timeoutID)
+
+ + + +

Ejemplo

+ +

Ejecute el script de abajo en el contexto de una página web y haga clic en la página una vez. Verá un mensaje emergente en un segundo. Si permanece haciendo clic en la página cada segundo, la alerta nunca aparece.

+ +
var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    this.cancel();
+    var self = this;
+    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+  },
+
+  cancel: function() {
+    if(typeof this.timeoutID == "number") {
+      window.clearTimeout(this.timeoutID);
+      delete this.timeoutID;
+    }
+  }
+};
+window.onclick = function() { alarm.setup() };
+ +

Notas

+ +

Pasar un ID inválido a clearTimeout no tiene ningún efecto (y no lanza una excepción).

+ +

Especificación

+ +

DOM Nivel 0. Especificado en HTML5.

+ +

Vea también

+ + diff --git a/files/es/web/api/windowtimers/index.html b/files/es/web/api/windowtimers/index.html new file mode 100644 index 0000000000..3516b78c0d --- /dev/null +++ b/files/es/web/api/windowtimers/index.html @@ -0,0 +1,118 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API +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 do not define any property, nor inherit any.

+ +

Methods

+ +

This interface do not inherit any method.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated 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/es/web/api/windowtimers/setinterval/index.html b/files/es/web/api/windowtimers/setinterval/index.html new file mode 100644 index 0000000000..fe41612dd6 --- /dev/null +++ b/files/es/web/api/windowtimers/setinterval/index.html @@ -0,0 +1,692 @@ +--- +title: WindowTimers.setInterval() +slug: Web/API/WindowTimers/setInterval +tags: + - API + - DOM + - Gecko + - Intervalos + - Method + - Temporizadores + - Temporizadores de JavaScript + - WindowTimers + - setInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +
{{APIRef("HTML DOM")}}
+ +
Ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.
+ +
+ +

Sintaxis

+ +
var procesoID = window.setInterval(función, intervaloDeTiempo[, parámetro1, parámetro2, ... , parámetroN]);
+var procesoID = window.setInterval(código, intervaloDeTiempo);
+
+ +

Parámetros

+ +
+
función
+
La {{jsxref("function")}} que será ejecutada cada intervaloDeTiempo milisegundos.
+
código
+
Una sintaxis opcional permite introducir una cadena en lugar de una función, la cual es evaluada y ejecutada cada intervaloDeTiempo milisegundos. Se recomienda evitar esta sintaxis por la misma razón por la que el comando {{jsxref("eval", "eval()")}} conlleva problemas de seguridad.
+
intervaloDeTiempo
+
El tiempo en milisegundos (1/1000 de segundo, ms) que se debe esperar entre cada ejecución de la función o del código. Si el valor es menor que 10, se usará 10 en su lugar. El tiempo entre cada ejecución puede ser mayor al que indicamos, para mayor información puedes revisar el siguiente artículo: {{SectionOnPage("/en-US/docs/Web/API/WindowTimers/setTimeout", "Reasons for delays longer than specified")}}.
+
+
El parámetro intervaloDeTiempo es convertido en un entero de 32 bits con signo en el IDL, por lo que el valor más grande que puede tener es 2,147,483,647 milisegundos, aproximadamente 24.8 días.
+
+
parámetro1, ..., parámetroN {{optional_inline}}
+
Parámetros adicionales que se pasan a la función a ejecutar.
+
+ +
+

En Internet Explorer 9 y anteriores no es posible pasar más parámetros mediante esta sintaxis. Si quieres activar esta funcionalidad en dichos navegadores deberás usar un polyfill (entra en la sección Callback arguments).

+
+ +

Valor de Retorno

+ +

El valor de retorno procesoID es un valor numérico distinto de cero que identifica al temporizador que fue creado al llamar setInterval(); este valor puede ser usado como parámetro en la función {{domxref("Window.clearInterval()")}} para detener el temporizador. Las funciones setInterval() y {{domxref("WindowTimers.setTimeout", "setTimeout()")}} comparten la misma pila de IDs, por lo que, técnicamente, los comandos clearInterval() y {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} pueden usarse indiscriminadamente. Sin embargo, por motivos de claridad y mantenimiento, es importante usarlos como corresponde.

+ +
+

Nota: El argumento intervaloDeTiempo se convierte aun entero con signo de 32 bits. Esto limita efectivamente al intervaloDeTiempo a valores de 2147483647 ms, ya que se especifica como entero con signo en el IDL.

+
+ +

Ejemplos

+ +

Ejemplo 1: Sintaxis básica

+ +

El siguiente ejemplo muestra la sintaxis básica.

+ +
var intervalID = window.setInterval(miFuncion, 500, 'Parametro 1', 'Parametro 2');
+
+function miFuncion(a,b) {
+  // Aquí va tu código
+  // Los parámetros son opcionales completamente
+  console.log(a);
+  console.log(b);
+}
+
+ +

Ejemplo 2: Alternando dos colores

+ +

El siguiente ejemplo se llama a la función flashtext() una vez por segundo hasta que se presiona el botón Detener.

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Ejemplo de setInterval/clearInterval</title>
+  <script>
+     var nIntervId;
+
+     function cambiaDeColor() {
+        nIntervId = setInterval(flasheaTexto, 1000);
+     }
+
+     function flasheaTexto() {
+        var oElem = document.getElementById('mi_mensaje');
+        oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+        //oElem.style.color ... es un operador ternario o condicional
+     }
+
+     function detenerCambioDeColor() {
+        clearInterval(nIntervId);
+     }
+  </script>
+</head>
+<body onload="cambiaDeColor();">
+  <div id="mi_mensaje">
+    <p>¡Hola mundo!</p>
+  </div>
+  <button onclick="detenerCambioDeColor();">Detener</button>
+</body>
+</html>
+
+ +

Ejemplo 3: Simulando una máquina de escribir

+ +

El siguiente ejemplo simula una máquina de escribir, primero borra el contenido de una lista de nodos (NodeList) que coinciden con un grupo de selectores y después lo escribe lentamente.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>Máquina de Escribir con JavaScript</title>
+<script>
+  function maquinaEscribir (sSelector, nRate) {
+
+      function limpiar () {
+        clearInterval(nIntervId);
+        bTyping = false;
+        bStart = true;
+        oCurrent = null;
+        aSheets.length = nIdx = 0;
+      }
+
+      function desplazarse (oSheet, nPos, bEraseAndStop) {
+        if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { return true; }
+
+        var oRel, bExit = false;
+
+        if (aMap.length === nPos) { aMap.push(0); }
+
+        while (aMap[nPos] < oSheet.parts.length) {
+          oRel = oSheet.parts[aMap[nPos]];
+
+          desplazarse(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+          if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) {
+            bExit = true;
+            oCurrent = oRel.ref;
+            sPart = oCurrent.nodeValue;
+            oCurrent.nodeValue = "";
+          }
+
+          oSheet.ref.appendChild(oRel.ref);
+          if (bExit) { return false; }
+        }
+
+        aMap.length--;
+        return true;
+      }
+
+      function mecanografear () {
+        if (sPart.length === 0 && desplazarse(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { limpiar(); return; }
+
+        oCurrent.nodeValue += sPart.charAt(0);
+        sPart = sPart.slice(1);
+      }
+
+      function Hoja (oNode) {
+        this.ref = oNode;
+        if (!oNode.hasChildNodes()) { return; }
+        this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+        for (var nChild = 0; nChild < this.parts.length; nChild++) {
+          oNode.removeChild(this.parts[nChild]);
+          this.parts[nChild] = new Hoja(this.parts[nChild]);
+        }
+      }
+
+      var
+        nIntervId, oCurrent = null, bTyping = false, bStart = true,
+        nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+      this.rate = nRate || 100;
+
+      this.ejecuta = function () {
+        if (bTyping) { return; }
+        if (bStart) {
+          var aItems = document.querySelectorAll(sSelector);
+
+          if (aItems.length === 0) { return; }
+          for (var nItem = 0; nItem < aItems.length; nItem++) {
+            aSheets.push(new Hoja(aItems[nItem]));
+            /* Uncomment the following line if you have previously hidden your elements via CSS: */
+            // aItems[nItem].style.visibility = "visible";
+          }
+
+          bStart = false;
+        }
+
+        nIntervId = setInterval(mecanografear, this.rate);
+        bTyping = true;
+      };
+
+      this.pausa = function () {
+        clearInterval(nIntervId);
+        bTyping = false;
+      };
+
+      this.finaliza = function () {
+        oCurrent.nodeValue += sPart;
+        sPart = "";
+        for (nIdx; nIdx < aSheets.length; desplazarse(aSheets[nIdx++], 0, false));
+        limpiar();
+      };
+  }
+
+    /* usage: */
+    var oTWExample1 = new maquinaEscribir(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
+
+    /* default frame rate is 100: */
+    var oTWExample2 = new maquinaEscribir("#controls");
+
+    /* you can also change the frame rate value modifying the "rate" property; for example: */
+    // oTWExample2.rate = 150;
+
+    onload = function () {
+      oTWExample1.ejecuta();
+      oTWExample2.ejecuta();
+    };
+</script>
+<style type="text/css">
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+</style>
+</head>
+
+<body>
+
+<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p>
+<p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.ejecuta();">Ejecutar</span> | <span class="intLink" onclick="oTWExample1.pausa();">Pausar</span> | <span class="intLink" onclick="oTWExample1.finaliza();">Terminar</span>&nbsp;]</p>
+<div id="info">
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+</div>
+<h1>Maquina de Escribir en JavaScript </h1>
+
+<div id="article">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
+<form>
+<p>Phasellus ac nisl lorem: <input type="text" /><br />
+<textarea style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p>
+<p><input type="submit" value="Send" />
+</form>
+<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p>
+<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
+</div>
+</body>
+</html>
+
+ +

Observa este ejemplo en acción. Ver más: clearInterval().

+ +

Argumentos de Callback

+ +

Como se mencionó previamente Internet Explorer version 9 y anteriores no soportan el pasar argumentos a la función Callback en setTimeout() ni en setInterval(). El siguiente código específico de Internet Explorer muestra un método de superar esta limitante. Para usarlo basta añadir el código marcado al inicio de tu script.

+ +
/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all && !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all && !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+
+ +

Otra posible solución es el usar funciones anónimas para llamar al Callback, aunque esta solución es un poco más cara. Ejemplo:

+ +
var intervalID = setInterval(function() { myFunc("one", "two", "three"); }, 1000);
+ +

También puedes hacer uso de function's bind. Ejemplo:

+ +
var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
+ +

{{h3_gecko_minversion("Inactive tabs", "5.0")}}

+ +

A partir de Gecko 5.0 {{geckoRelease("5.0")}}, los intervalos no se disparan más de una vez por segundo en las pestañas inactivas.

+ +

Problemas usando "this"

+ +

Cuando pasas el método de un objeto a la función setInterval() éste es invocado fuera de su contexto. Esto puede crear un valor de this que puede no ser el esperado. Este problema es abordado en detalle en JavaScript reference.

+ +

Explicación

+ +

Cuando setInterval() o setTimeOut() ejecuta un determinado código o función, ésta corre en un contexto de ejecución separado al de la función en la que se creó dicho temporizador. Por esta razón a la palabra clave this se le asigna el valor del objeto window (o el objeto global), no es igual que usar this dentro de una fuinción que invoque a setTimeOut(). Observa el siguiente ejemplo (que utiliza setTimeOut() en lugar de setInterval() – el problema, de hecho, es el mismo para ambos temporizadores):

+ +
miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sPropiedad) {
+    alert(arguments.length > 0 ? this[sPropiedad] : this);
+};
+
+miArreglo.miMetodo(); // imprime "cero,uno,dos"
+miArreglo.miMetodo(1); // imprime "uno"
+setTimeout(miArreglo.miMetodo, 1000); // imprime "[object Window]" despues de 1 segundo
+setTimeout(miArreglo.miMetodo, 1500, "1"); // imprime "undefined" despues de 1,5 segundos
+// tratemos de pasar el objeto 'this'
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // same error
+ +

Como puedes ver no hay forma de pasar el objeto this a la función de Callback en la versión anterior de JavaScript.

+ +

Una posible solución

+ +

Una posible alternativa para resolver ésto es reemplazar las dos funciones globales nativas setTimeout() y setInterval() con las siguientes funciones no nativas que permiten su ejecución a través del método Function.prototype.call. El siguiente ejemplo muestra una posible sustitución:

+ +
// Permite el pase del objeto 'this' a través de temporizadores JavaScript
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentoAPasar1, argumentuAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentoAPasar1, argumentoAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+ +
Estos dos reemplazos también permiten el camino estándar en HTML5 de pasar argumentos arbitrarios a las funciones de Callback de los temporizadores dentro de IE. Por lo tanto, pueden utilizarse como rellenos (polyfills) no estándar. Para más información vea callback arguments paragraph.
+ +

Prueba de nueva funcionalidad:

+ +
miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hola Mundo!"); // la utilizacion estandar de setTimeout y de setInterval se mantiene, pero...
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // imprime "cero,uno,dos" despues de 2 segundos
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // imprime "dos" despues de 2,5 segundos
+
+ +

Otra solución más compleja está en la siguiente liga de framework.

+ +
JavaScript 1.8.5 introduce el método Function.prototype.bind(), el cual permite especificar el valor de this para todas sus llamadas en una determinada función. Esto permite sobrellevar facilmente diferentes problemas de contexto con el uso de la palabra this. También, ES2015 soporta arrow functions, dentro del lenguaje nos permite escribir cosas como setInterval( () => this.myMethod) si estamos dentro del método de miArreglo .
+ +

MiniDaemon - Un framework para administrar temporizadores

+ +

En proyectos que requieren muchos temporizadores puede volverse complicado el seguimiento de todos los eventos generados. Una forma de facilitar la administración de timers es guardando sus estados en un objeto. El siguiente ejemplo muestra este tipo de abstracción, la arquitectura del constructor evita explicitamente el uso de cerraduras. También ofrece un camino alternativo para pasar el objeto this a la función de Callback (observa la sección Problemas usando "this" para más detalles). Puedes consultar también el siguiente código en GitHub.

+ +
Para una versión más modular de este (Daemon)puedes verlo en JavaScript Daemons Management. Aquí encontrarás una versión mas complicada que se reduce a una colección escalable de métodos para el constructor Daemon. Éste constructor no es más que un clon del  MiniDaemon con soporte para las funciones init y onstart declarables durante la instanciación del mismo. Por esto el MiniDaemon framework se mantiene como el camino recomendado para realizar animaciones simples.
+ +

minidaemon.js

+ +
/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this && this instanceof MiniDaemon)) { return; }
+  if (arguments.length < 2) { throw new TypeError("MiniDaemon - not enough arguments"); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); }
+  if (nLen > 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+
+ +
MiniDaemon pasa argumentos a la función callback. Si quieres trabajar con ellos en navegadores que no soportan nativamente esta característica, usa uno de los métodos propuestos arriba.
+ +

Sintaxis

+ +

var myDaemon = new MiniDaemon(thisObject, callback[, rate[, length]]);

+ +

Descripción

+ +

Regresa un Objecto que contiene la información necesaria para una animación (como el objeto this, la función de Callback, la duración y el frame-rate).

+ +

Parámetros

+ +
+
thisObject
+
El valor de la palabra this sobre el cual funcionará la función de Callback. Puede ser un objecto o null.
+
callback
+
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
+
rate (optional)
+
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omisión es 100.
+
length (optional)
+
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omisión es Infinity.
+
+ +

Propiedades de la intancia MiniDaemon 

+ +
+
myDaemon.owner
+
El objeto this sobre el cual se ejecuta el daemon (lectura/escritura). Puede ser un objecto o null.
+
myDaemon.task
+
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
+
myDaemon.rate
+
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omición es 100 (lectura/escritura).
+
myDaemon.length
+
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omición es Infinity (lectura/escritura).
+
+ +

MiniDaemon instances methods

+ +
+
myDaemon.isAtEnd()
+
Regresa un valor boleano que expresa cuando el daemon está en posición de inicio/fin o no.
+
myDaemon.synchronize()
+
Sincroniza el tiempo de un deamon iniciado con el tiempo de su invocación.
+
myDaemon.pause()
+
Pausa el deamon.
+
myDaemon.start([reverse])
+
Inicia el daemon hacia adelante "forward" (el indice de cada invocación se incrementa) o hacia atrás "backwards" (el índice de cada invocación se decrementa).
+
+ +

Métodos del objeto global del MiniDaemon

+ +
+
MiniDaemon.forceCall(minidaemon)
+
Fuerza una sola función callback a la función minidaemon.task  en lugar del hecho de que se ha alcanzado el final o no. En cualquier caso la propiedad INDEX interna crece o decrece según la dirección del proceso.
+
+ +

Ejemplo de uso

+ +

Tu página HTML:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>MiniDaemin Example - MDN</title>
+  <script type="text/javascript" src="minidaemon.js"></script>
+  <style type="text/css">
+    #sample_div {
+      visibility: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <p>
+    <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" />
+    <input type="button" onclick="fadeInOut.start(true);" value="fade out">
+    <input type="button" onclick="fadeInOut.pause();" value="pause" />
+  </p>
+
+  <div id="sample_div">Some text here</div>
+
+  <script type="text/javascript">
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? "hidden" : "visible";
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById("sample_div"), opacity, 300, 8);
+  </script>
+</body>
+</html>
+ +

Prueba este ejemplo

+ +

Notas

+ +

La función setInterval() es usada frecuentemente para asignar una pausa para ejecutar funciones recurrentes, como por ejemplo pintar el siguiente cuadro de una animación.

+ +

Puedes cancelar el ciclo iniciado por un setInterval() usando el comando window.clearInterval().

+ +

Si solo deseas ejecutar el ciclo una sola vez despues de una pausa usa en su lugar la función window.setTimeout().

+ +

Asegúrate que el tiempo de ejecución sea menor que la frecuencia

+ +

Si existe la posibilidad de que tu función o el código a ejecutarse una y otra vez exeda el tiempo marcado en cada intervalo es recomendado que uses recursivamente el nombre de tu función usando window.setTimeout. Por ejemplo, si usas setInterval para hacer llamadas a un servidor remoto cada 5 segundos, la latencia en la red, un servidor que no responde, o cualquier otro tipo de contratiempo puede generar una pausa mayor a la que indicaste. De esta forma terminarás con solicitudes XHR apiladas que no se resolverán necesariamente en orden.

+ +

En estos casos llamadas con un patrón de setTimeout() recursivo es preferible:

+ +
(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+
+ +

En este fragmento de código, la función loop() es declarada y es ejecutada inmediatamente. La función loop() es invocada de forma recursiva dentro de setTimeout() despues de cada ejecución. Si bien este patrón no garantiza una ejecución a intervalos fijos, si garantiza que nunca se ejecutará un paso sin que se haya finalizado el anterior. 

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstatusComentarios
{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}{{Spec2("HTML WHATWG")}}Definición inicial (DOM Level 0)
+ +

Compatibilidad

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)[2]Internet ExplorerOperaSafari
Soporte básico1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Soporta parámetros para callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Soporta parámetros para callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Whether it supports the optional parameters when in its first form or not.

+ +

[2] Anterior a Firefox 13, Firefox pasaba un parametro adicional al callback, indicando el "actual lateness" del timeout en milisegundos. Este parámetro no estandar dejó de usarse en versiones posteriores a Firefox 13. No es recomendable que extensiones basadas en XPCOM para Firefox usen setInterval(), ya que las actualizaciones pueden causar el que el objeto {{domxref("Window")}} se actualice perdiendo los temporizadores. Deberás usar en su lugar {{interface("nsITimer")}}.

+ +

Ver más

+ + diff --git a/files/es/web/api/windowtimers/settimeout/index.html b/files/es/web/api/windowtimers/settimeout/index.html new file mode 100644 index 0000000000..1180d9f8af --- /dev/null +++ b/files/es/web/api/windowtimers/settimeout/index.html @@ -0,0 +1,340 @@ +--- +title: WindowOrWorkerGlobalScope.setTimeout +slug: Web/API/WindowTimers/setTimeout +tags: + - API + - HTML DOM + - WindowOrWorkerGlobalScope + - setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

El método setTimeout() del mixin {{domxref("WindowOrWorkerGlobalScope")}} establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido.

+ + +

Sintaxis

+ +
var idTemporizador = scope.setTimeout(funcion[, retraso, parametro1, parametro2, ...]);
+var idTimeout = scope.setTimeout(funcion[, retraso]);
+var idTimeout = scope.setTimeout(codigo[, retraso]);
+
+ +

Parámetros

+ +
+
funcion
+
Una {{jsxref("function")}} para ejecutar después de que expire el temporizador.
+
codigo
+
Una sintaxis opcional que le permite incluir una cadena en lugar de una función, la cual es compilada y ejecutada cuando el temporizador expira. Esta sintaxis no se recomienda por las mismas razones que hacen del uso de {{jsxref("Global_Objects/eval", "eval()")}} un riesgo de seguridad.
+
retraso {{optional_inline}}
+
Tiempo, en milisegundos  (milésimas de segundo), que el temporizador debe esperar antes de ejecutar la función o el código. Si se omite este parámetro se usa el valor 0. Tenga en cuenta que el retraso real puede ser más prolongado; ver más abajo {{anch("Reasons for delays longer than specified")}}.
+
param1, ..., paramN {{optional_inline}}
+
Parámetros adicionales que se pasan a la función especificada por  func una vez el temporizador expira.
+
+ +
Nota: Pasar parámetros adicionales a la función en la primera sintaxis no funciona en Internet Explorer 9 o inferior. Si quiere habilitar esta funcionalidad en ese navegador,  debe usar un código de compatibilidad (vea la sección Callback arguments).
+ +

Valor retornado

+ +

El valor retornado IDtemporizador es númerico y no es cero; identifica el temporizador creado con la llamada a setTimeout(); este valor puede pasarse a {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}} para cancelar el temporizador.

+ +

Puede ser útil advertir que  setTimeout() y {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} comparten la misma piscina de IDs, y que tanto clearTimeout() como {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} pueden intercambiarse.  Por claridad, sin embargo,  debe hacerlos coincidir para evitar confusiones cuando mantenga su código.

+ +

Ejemplo

+ +

El siguiente ejemplo establece dos botenes simples en una página web y los engancha a las rutinas setTimeout() y clearTimeout(). Presionando el primer botón establecerá un temporizador que llama un diálogo de alerta después de dos segundos y guarda el id del temporizador para usarlo con clearTimeout(). Opcionalmente puede cancelar este temporizador presionando el segundo botón.

+ +

Contenido HTML

+ +
<p>Ejemplo funcional</p>
+<button onclick="delayedAlert();">Muestra una caja de alerta después de dos segundos</button>
+<p></p>
+<button onclick="clearAlert();">Cancela la alerta antes de que ocurra</button>
+
+ +

Contenido JavaScript

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

Vea también clearTimeout() example.

+ +

Callback arguments

+ +

Si necesita pasar un argumento a su función callback, pero necesita que funcione en Internet Explorer, que no soporta el envío de parámetros adicionales (ni con setTimeout() o setInterval()) usted puede incluir este código de compatibilidad IE-specific que habilitará la funcionalidad estándar de HTML5 para pasar los parámetros adicionales en ese navegador para ambos temporizadores solamente insertandolo al inicio de sus scripts.

+ +
/*\
+|*|
+|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all && !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all && !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+
+ +

Arreglo solo para IE

+ +

Si quiere una solución completamente no intrusiva con otros navegadores móviles o de escritorio, incluyendo IE 9 y superior, puede usar los comentarios condicionales de JavaScript:

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 6)
+  (function(f){
+     window.setTimeout =f(window.setTimeout);
+     window.setInterval =f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
+  @end
+@*/
+
+ +

O usar un enfoque más limpio basado en el condicional para IE de HTML:

+ +
<!--[if lt IE 9]><script>
+(function(f){
+window.setTimeout =f(window.setTimeout);
+window.setInterval =f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
+});
+</script><![endif]-->
+
+ +

Otra posibilidad es usar una función anónima para llamar el callback, pero esta solución es un poco más costosa. Ejemplo:

+ +
var intervalID = setTimeout(function() { myFunc("uno", "dos", "tres"); }, 1000);
+
+ +

Sin embargo, otra posibilidad es usar function's bind. Ejemplo:

+ +
setTimeout(function(arg1){}.bind(undefined, 10));
+
+ +

El problema "this"

+ +

Cuando pasa un método a setTimeout() (o cualquier otra función , por el estilo), podría ser invocada con el valor de this equivocado. Este problema es explicado en detalle en la referencia de JavaScript.

+ +

Explicación

+ +

El código ejecutado por setTimeout() corre en un contexto de ejecución diferente al de la función por la que fue llamado. Como consecuencia, la palabra clave this para la función llamada será asignado al objeto window (o global); no tendrá el mismo valor del this de la función que llamó al setTimeout. Vea el siguiente ejemplo:

+ +
myArray = ["cero", "uno", "dos"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // imprime "cero,uno,dos"
+myArray.myMethod(1); // imprime "uno"
+setTimeout(myArray.myMethod, 1000); // imprime "[object Window]" después de 1 segundo
+setTimeout(myArray.myMethod, 1500, "1"); // imprime "undefined" después de 1.5 segundos
+// intentemos pasar el objeto 'this'
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // mismo error
+ +

Como puedes ver no hay forma de pasar el objeto this a la función callback.

+ +

Una posible solución

+ +

Una posible forma de resolver el problema del "this" es reemplazar las dos funciones globales nativas setTimeout() or setInterval()por dos no-nativas  que permitan su invocación a través del método Function.prototype.call. El siguiente ejemplo muestra un posible reemplazo:

+ +
// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
Nota: Estos dos reemplazos habilitarán el estándar HTML5 para el paso de argumentos arbitrarios a las funciones callback de los temporizadores en IE. Pueden usarse como polyfills también. Vea el párrafo Callback arguments.
+ +

Prueba de la nueva característica:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+
+ +

No hay soluciones nativas ad hoc a este problema.

+ +
Nota: JavaScript 1.8.5 introduce el método Function.prototype.bind(, que permite especificar el valor que debería usarse como this para todas las llamadas a una función dada. Esto permite evitar fácilmente los problemas en los que no es claro que será, dependiendo del contexto desde el cual la función sea llamada.
+ +

Notas

+ +

Puede cancelar el temporizador usando window.clearTimeout(). Si desea tener una función llamada repetidamente (p.e., cada N milisegundos), considere usar window.setInterval().

+ +

Es importante notar que la función o fragmento de código no puede ser ejecutado hasta que el hilo que llamó setTimeout()haya terminado.

+ +

Pasando cadenas literales

+ +

Pasando una cadena en vez de una función a setTimeout()pasa lo mismo que al usar eval.

+ +
// Correcto
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrecto
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+
+ +

Las cadenas literales son evaluadas en el contexto global, así que los símbolos locales en el contexto donde setTimeout() fue llamado no estarán disponibles cuando la cadena es evaluada como código.

+ +

Minimum/ maximum delay and timeout nesting

+ +

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5ms.

+ +

In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.

+ +

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.

+ +

To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as described here.

+ +

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

+ +

Inactive tabs

+ +

In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatGeckoDesktop("1") }}4.04.01.0
Soporta parámetros para callback*1{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}10.0{{ CompatVersionUnknown }}{{ CompatUnknown }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{ CompatGeckoMobile("1") }}6.06.01.0
Soporta parámetros para callback*1{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
+
+ +

*1 Whether it supports the optional parameters when in its first form or not.

+ +

Especificación

+ +

Parte del DOM nivel 0, como se especifica en HTML5.

+ +

Vea también

+ + diff --git a/files/es/web/api/worker/index.html b/files/es/web/api/worker/index.html new file mode 100644 index 0000000000..4be8325629 --- /dev/null +++ b/files/es/web/api/worker/index.html @@ -0,0 +1,155 @@ +--- +title: Worker +slug: Web/API/Worker +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Workers + - Worker + - Workers +translation_of: Web/API/Worker +--- +

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

+ +

The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread.

+ +

Workers may in turn spawn new workers as long as those workers are hosted within the same origin as the parent page (Note: nested workers are currently not implemented in Blink).  In addition workers may use XMLHttpRequest for network I/O, with the stipulation that the responseXML and channel attributes on XMLHttpRequest always return null.

+ +

Not all interfaces and functions are available to the script associated with a Worker.

+ +

In Firefox, if you want to use workers in extensions and would like to have access to js-ctypes, you should use the {{ domxref("ChromeWorker") }} object instead.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.

+ +

Event handlers

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
An {{ domxref("EventListener") }} called whenever an {{domxref("ErrorEvent")}} of type error bubbles through to the worker. This is inherited from {{domxref("AbstractWorker")}}.
+
{{domxref("Worker.onmessage")}}
+
An {{ domxref("EventListener") }} called whenever a {{domxref("MessageEvent")}} of type message bubbles through the worker — i.e. when a message is sent to the parent document from the worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. The message is stored in the event's {{domxref("MessageEvent.data", "data")}} property.
+
+ +

Constructors

+ +
+
{{domxref("Worker.Worker", "Worker()")}}
+
Creates a dedicated web worker that executes the script at the specified URL. Workers can also be constructed using Blobs.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("Worker.postMessage()")}}
+
Sends a message — which can consist of any JavaScript object — to the worker's inner scope.
+
{{domxref("Worker.terminate()")}}
+
Immediately terminates the worker. This does not offer the worker an opportunity to finish its operations; it is simply stopped at once. ServiceWorker instances do not support this method.
+
+ +

Example

+ +

The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor and usage of the object:

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+ +

For a full example, see ourBasic dedicated worker example (run dedicated worker).

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#worker", "Worker")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers', "#worker", "Worker")}}{{Spec2('Web Workers')}}Initial definition.
+ +

Browser compatibility

+ +

Support varies for different types of workers. See each worker type's page for specifics.

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support43.510.010.64
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support4.43.51.0.110.011.55.1{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/worker/postmessage/index.html b/files/es/web/api/worker/postmessage/index.html new file mode 100644 index 0000000000..c47fe400fc --- /dev/null +++ b/files/es/web/api/worker/postmessage/index.html @@ -0,0 +1,206 @@ +--- +title: Worker.postMessage() +slug: Web/API/Worker/postMessage +translation_of: Web/API/Worker/postMessage +--- +

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

+ +

Web Workers API posee un metodo llamado postMessage() el cual envia un mensaje al ambito del worker. Este metodo acepta un parametro, el cual es un dato enviado al worker. El dato puede ser un valor o objeto controlado por el algoritmo strctured clone (incluye referencias ciclicas).

+ +

El Worker puede enviar de vuelta información al hilo que lo genero usando el metodo {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.

+ +

Syntax

+ +
myWorker.postMessage(aMessage, transferList);
+ +

Parameters

+ +
+
aMessage
+
The object to deliver to the worker; this will be in the data field in the event delivered to the {{domxref("DedicatedWorkerGlobalScope.onmessage")}} handler. This may be any value or JavaScript object handled by the structured clone algorithm, which includes cyclical references.
+
transferList {{optional_inline}}
+
An optional array of {{domxref("Transferable")}} objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable (neutered) in the context it was sent from and it becomes available only to the worker it was sent to.
+
Only {{domxref("MessagePort")}} and {{domxref("ArrayBuffer")}} objects can be transferred.
+
+ +

Returns

+ +

Void.

+ +

Example

+ +

The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor. When either of two form inputs (first and second) have their values changed, {{event("change")}} events invoke postMessage() to send the value of both inputs to the current worker.

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+ +

For a full example, see ourBasic dedicated worker example (run dedicated worker).

+ +
+

Note: postMessage() can only send a single object at once. As seen above, if you want to pass multiple values you can send an array.

+
+ +

Transfer Example

+ +

This example is of a Firefox addon that transfers an ArrayBuffer from the main thread to the ChromeWorker, and then the ChromeWorker trasnfers it back to the main thread.

+ +

Main thread code:

+ +
var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+
+function handleMessageFromWorker(msg) {
+    console.log('incoming message from worker, msg:', msg);
+    switch (msg.data.aTopic) {
+        case 'do_sendMainArrBuff':
+            sendMainArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+myWorker.addEventListener('message', handleMessageFromWorker);
+
+// Ok lets create the buffer and send it
+var arrBuf = new ArrayBuffer(8);
+console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength);
+
+myWorker.postMessage(
+    {
+        aTopic: 'do_sendWorkerArrBuff',
+        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below
+    },
+    [
+        arrBuf // The array buffer we created 9 lines above
+    ]
+);
+
+console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
+
+ +

Worker code

+ +
self.onmessage = function (msg) {
+    switch (msg.data.aTopic) {
+        case 'do_sendWorkerArrBuff':
+                sendWorkerArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+function sendWorkerArrBuff(aBuf) {
+    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
+
+    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+
+    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
+}
+
+ +

Output logged

+ +
arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
+arrBuf.byteLength post transfer: 0                             bootstrap.js:42
+
+from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
+
+incoming message from worker, msg: message { ... }             bootstrap.js:20
+got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
+
+from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2
+ +

We see that byteLength goes to 0 as it is trasnferred. To see a fully working example of this Firefox demo addon see here: GitHub :: ChromeWorker - demo-transfer-arraybuffer

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers', "#dom-worker-postmessage", "Worker.postMessage()")}}{{Spec2('Web Workers')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0 [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0 [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer does not support {{domxref("Transferable")}} objects.

+ +

See also

+ + diff --git a/files/es/web/api/worker/terminate/index.html b/files/es/web/api/worker/terminate/index.html new file mode 100644 index 0000000000..d557989f25 --- /dev/null +++ b/files/es/web/api/worker/terminate/index.html @@ -0,0 +1,107 @@ +--- +title: Worker.terminate() +slug: Web/API/Worker/terminate +translation_of: Web/API/Worker/terminate +--- +

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

+ +

El método terminate() de la interfaz {{domxref("Worker")}} termina inmediatamente el {{domxref("Worker")}}. Esto no ofrece la oportunidad de finalizar las operaciones que estuviera realizando el worker, termina la ejecución por completo.

+ +

Sintaxis

+ +
myWorker.terminate();
+ +

Parámetros

+ +

Ninguno.

+ +

Retorna

+ +

Nada.

+ +

Ejemplo

+ +

El siguiente extracto de código muestra la creación de un objeto {{domxref("Worker")}} usando el constructor de  {{domxref("Worker.Worker", "Worker()")}} y éste es inmediatamente terminado.

+ +
var myWorker = new Worker('worker.js');
+
+myWorker.terminate();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.postMessage()")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers', "#dom-worker-terminate", "Worker.postMessage()")}}{{Spec2('Web Workers')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico43.510.010.64
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.43.51.0.110.011.55.1
+
+ +

Mirar también

+ +

La interfaz {{domxref("Worker")}} a la que pertenece.

diff --git a/files/es/web/api/xmlhttprequest/abort/index.html b/files/es/web/api/xmlhttprequest/abort/index.html new file mode 100644 index 0000000000..de73cb1a5d --- /dev/null +++ b/files/es/web/api/xmlhttprequest/abort/index.html @@ -0,0 +1,120 @@ +--- +title: XMLHttpRequest.abort() +slug: Web/API/XMLHttpRequest/abort +tags: + - AJAX + - API + - HTTP + - HttpRequest + - Referencia + - XHR + - XMLHttpRequest + - abortar + - metodo +translation_of: Web/API/XMLHttpRequest/abort +--- +

{{APIRef('XMLHttpRequest')}}

+ +

El método XMLHttpRequest.abort() aborta la petición si ha sido enviada. Cuando una petición se aborta, readyState se asigna a 0 (UNSENT), pero el evento readystatechange no se lanza.

+ +

Sintaxis

+ +
xhrInstance.abort();
+ +

Parámetros

+ +

Ninguno.

+ +

Valor de retorno

+ +

Vacío.

+ +

Ejemplo

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+xhr.open(method,url,true);
+
+xhr.send();
+
+xhr.abort();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('XMLHttpRequest', '#the-abort()-method')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
MejoraChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome(1)}}{{CompatUnknown}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MejoraAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] This feature was implemented via ActiveXObject(). Internet Explorer implementa el estándar XMLHttpRequest desde la versión 7.

+ +

Ver también

+ + diff --git a/files/es/web/api/xmlhttprequest/formdata/index.html b/files/es/web/api/xmlhttprequest/formdata/index.html new file mode 100644 index 0000000000..2ca830daf7 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/formdata/index.html @@ -0,0 +1,84 @@ +--- +title: FormData +slug: Web/API/XMLHttpRequest/FormData +tags: + - API + - FormData + - Interfaz + - Referencia + - XMLHttpRequest +translation_of: Web/API/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La interfaz FormData proporciona una manera sencilla de construir un conjunto de parejas clave/valor que representan los campos de un formulario y sus valores, que pueden ser enviados fácilmente con el método {{domxref("XMLHttpRequest.send()")}}. Utiliza el mismo formato que usaría un formulario si el tipo de codificación fuera "multipart/form-data".

+ +

También puede pasarse directamente al constructor de {{domxref("URLSearchParams")}} si se quieren generar parámetros de consulta de la misma forma en que lo haría un {{HTMLElement("form")}} si usara un envío GET simple.

+ +

Un objeto que implementa FormData puede usarse directamente en una estructura {{jsxref("Statements/for...of", "for...of")}}, en lugar de {{domxref('FormData.entries()', 'entries()')}}: for (var p of myFormData) es equivalente a for (var p of myFormData.entries()).

+ +
+

Nota: Esta característica está disponible en Web Workers.

+
+ +

Constructor

+ +
+
{{domxref("FormData.FormData","FormData()")}}
+
Crea un nuevo objeto FormData.
+
+ +

Métodos

+ +
+
{{domxref("FormData.append()")}}
+
Agrega un nuevo valor a una clave existente dentro de un objeto FormData, o añade la clave si aún no existe.
+
{{domxref("FormData.delete()")}}
+
Elimina una pareja clave/valor de un objeto FormData.
+
{{domxref("FormData.entries()")}}
+
Devuelve un {{jsxref("Iteration_protocols","iterator")}} que permite recorrer todas las parejas clave/valor contenidas en este objeto.
+
{{domxref("FormData.get()")}}
+
Devuelve el primer valor asociado con una clave dada en un objeto FormData.
+
{{domxref("FormData.getAll()")}}
+
Devuelve un array con todos los valores asociados con una clave dada en un objeto FormData.
+
{{domxref("FormData.has()")}}
+
Devuelve un booleano que indica si un objeto FormData contiene una clave determinada.
+
{{domxref("FormData.keys()")}}
+
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todas las claves de las parejas clave/valor contenidas en este objeto.
+
{{domxref("FormData.set()")}}
+
Establece un nuevo valor para una clave existente dentro de un objeto FormData, o agrega la clave/valor si aún no existe.
+
{{domxref("FormData.values()")}}
+
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todos los valores contenidos en este objeto.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData definido en XHR spec
+ +

Compatibilidad con navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/xmlhttprequest/index.html b/files/es/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..243b3220e6 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/index.html @@ -0,0 +1,428 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - Todas_las_Categorías + - XMLHttpRequest + - páginas_a_traducir +translation_of: Web/API/XMLHttpRequest +--- +

XMLHttpRequest es un objeto JavaScript que fue diseñado por Microsoft y adoptado por Mozilla, Apple y Google. Actualmente es un estándar de la W3C. Proporciona una forma fácil de obtener información de una URL sin tener que recargar la página completa. Una página web puede actualizar sólo una parte de la página sin interrumpir lo que el usuario está haciendo. XMLHttpRequest es ampliamente usado en la programación AJAX.

+ +

A pesar de su nombre, XMLHttpRequest puede ser usado para recibir cualquier tipo de dato, no solo XML, y admite otros formatos además de HTTP (incluyendo file y ftp).

+ +

Para crear una instancia de XMLHttpRequest, debes hacer lo siguiente:

+ +
var req = new XMLHttpRequest();
+
+ +

Para obtener más información de cómo usar XMLHttpRequest, mira Usar XMLHttpRequest.

+ +
Nota: De forma predeterminada, Firefox 3 limita la cantidad de conexiones de XMLHttpRequest por servidor a 6 (las versiones previas limitan a 2 conexiones por servidor). Algunos sitios web interactivos pueden mantener una conexión XMLHttpRequest abierta, así que abrir múltiples sesiones a esos sitios puede derivar en congelamientos del navegador de una forma que la ventana no se actualiza y los controles no responden. Este valor puede ser cambiado al editar la preferencia network.http.max-persistent-connections-per-server en about:config.
+ +

Resumen del método

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
void abort();
string getAllResponseHeaders();
ACString getResponseHeader(in AUTF8String header);
[noscript] void init(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);
void open(in AUTF8String method, in AUTF8String url);
[noscript] void openRequest(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);
void overrideMimeType(in AUTF8String mimetype);
void send([optional] in nsIVariant body);
void sendAsBinary(in DOMString body); {{ fx_minversion_inline(3) }}
void setRequestHeader(in AUTF8String header, in AUTF8String value);
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
channel{{ Interface("nsIChannel") }}El canal es usado por el objeto cuando se produce el pedido. Esto da null si el canal aún no fue creado. En el caso de un pedido de múltiples partes, este es el canal inicial, no las diferentes partes del pedido múltiple. Es necesario tener privilegios elevados para acceder; sólo lectura. {{ Non-standard_inline() }}
mozBackgroundRequestbooleano +

Indica si el objeto representa o no un pedido de un servicio de fondo. Si es true, no se asocia una carga de grupo con el pedido, y los diálogos de seguridad no se muestran al usuario. Es necesario tener privilegios elevados para acceder. {{ Non-standard_inline() }}

+ +

En los casos en que un diálogo de seguridad debe ser mostrado (como en una autentficación o la notificación de un certificado no válido), el pedido simplemente falla.

+
mozResponseArrayBuffer  {{ non-standard_inline() }}ArrayBufferLa respuesta al pedido en la forma de un arreglo de JavaScript. Esto es NULL si el pedido no fue exitoso o si todavía no ha sido enviado. Sólo lectura.
multipartbooleano +

Indica cuando se espera que la respuesta sea o no una serie de mútiples documentos XML. Si se define como true, el tipo de contenido de la respuesta inicial debe ser multipart/x-mixed-replace u ocurrirá un error. Todos los pedidos deben ser asincrónicos.

+ +

Esto permite el uso del push del servidor; para cada documento XML que se escribe para este pedido, se crea un nuevo XMLDOMdocument y se llama al manejador onload entre cada documento.

+ +
Nota: Cuando esto se elige, el manejador onload y otros manejadores de eventos no son reiniciados después de que el primer XMLdocument es cargado, y el manejador onload es llamado después de que cada parte de la respuesta es recibida.
+
+

onreadystatechange

+ 		{{ Interface("nsIDOMEventListener") }} +

Una función del objeto JavaScript que se llama cuando el atributo readyState cambia. El callback se llama desde la interfaz del usuario.

+ +
Aviso: Esto no debe ser usado desde código nativo. Tampoco debes usarlo con pedidos sincrónicos.
+
readyStatelong +

El estado del pedido:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValorEstadoDescripción
0UNINITIALIZEDtodavía no se llamó a open().
1LOADINGtodavía no se llamó a send().
2LOADEDsend() ya fue invocado, y los encabezados y el estado están disponibles.
3INTERACTIVEDescargando; responseText contiene información parcial.
4COMPLETEDLa operación está terminada.
+
responseTextAStringLa respuesta al pedido como texto, o null si el pedido no fue exitoso o todavía no se envió. Sólo lectura.
responseXMLnsIDOMDocument +

La respuesta al pedido como un objeto DOMDocument, o null si el pedido no fue exitoso, aún no fue enviado o no puede ser analizado como XML. La respuesta es analizada como si fuera text/xml. Sólo lectura.

+ +
Nota: Si el servidor no aplica el encabezado de tipo de contenido text/xml, puedes usar overrideMimeType() para forzar a XMLHttpRequest a analizarlo como XML igualmente.
+
statusunsigned longEl estado de la respuesta al pedido. Éste es el código HTTPresult (por ejemplo, status es 200 por un pedido exitoso). Sólo lectura.
statusTextAUTF8StringLa cadena de respuesta que devuelve el HTTPserver. A diferencia de status, este incluye el texto completo del mensaje de respuesta ("200 OK", por ejemplo). Sólo lectura.
upload{{ Interface("nsIXMLHttpRequestUpload") }}El proceso de subida puede ser rastreado al agregar un registro de evento a upload. {{ fx_minversion_inline(3.5) }}
withCredentialsbooleano +

Indica cuando el pedido de Access-Control entre sitios debe o no ser realizado usando credenciales como cookies o encabezados de autorización. {{ fx_minversion_inline(3.5) }}

+ +
Nota: Esto nunca afecta los pedidos en para el propio sitio.
+ +

El valor predeterminado es false.

+
+ +

Métodos

+ +

abort()

+ +

Aborta el pedido si éste ya fue enviado.

+ +
void abort();
+
+ +
Parámetros
+ +

Ninguno.

+ +

getAllResponseHeaders()

+ +

Devuelve todos los encabezados de respuesta como una cadena.

+ +
Nota: Para pedidos multi partes, esto devuelve los encabezados de la parte actual del pedido, no del canal original.
+ +
string getAllResponseHeaders();
+
+ +
Parámetros
+ +

Ninguno.

+ +
Valor devuelto
+ +

El texto de todos los encabezados de respuesta, o null si no se ha recibido ninguna respuesta.

+ +

getResponseHeader()

+ +

Devuelve el texto de un encabezado específico.

+ +
ACString getResponseHeader(
+ in AUTF8String header
+);
+
+ +
Parámetros
+ +
+
header
+
El nombre del encabezado buscado.
+
+ +
Valor devuelto
+ +

Una cadena que contiene el texto de un encabezado específico, o null tanto si la respuesta no se ha recibido o el encabezado no existe en la respuesta.

+ +

init()

+ +

Inicializa el objeto para que sea usado desde código C++.

+ +
Aviso: Este método no debe ser llamado desde JavaScript.
+ +
[noscript] void init(
+ in nsIPrincipal principal,
+ in nsIScriptContext scriptContext,
+ in nsPIDOMWindow ownerWindow
+);
+
+ +
Parámetros
+ +
+
principal
+
El principal para usar en el pedido; no debe ser null.
+
scriptContext
+
El contexto del programa que usará en el pedido; no debe ser null.
+
ownerWindow
+
La ventana asociada con el pedido; puede ser null.
+
+ +

open()

+ +

Inicializa el pedido. Este método es para ser usado desde código JavaScript, para inicializar un pedido desde código nativo, debes usar openRequest().

+ +
Nota: Llamar a este método en un pedido activo (uno para el cual open() o openRequest() ya han sido llamados) es equivalente a usar abort().
+ +
void open(
+ in AUTF8String method,
+ in AUTF8String url,
+ [optional] in boolean async,
+ [optional] in AString user,
+ [optional] in AString password
+);
+
+ +
Parámetros
+ +
+
method
+
El método HTTP a usar: tanto "POST" o "GET". Se ignora para urls que no son de HTTP.
+
url
+
La URL a la que se envía el pedido.
+
async
+
Un parámetro booleano opcional, predeterminado es true, que indica si se debe o no realizar la operación de forma asíncrona. Si este valor es false, el método send() no se devuelve hasta que se reciba la respuesta completa. Si es true, la notificación de una transacción completada se proporciona mediante los oyentes de eventos. Esto debe ser true si el atributo multipart es verdadero o se lanzará una excepción.
+
user
+
El nombre de usuario es opcional solo es usado con fines de autenticación, de forma predeterminada es una cadena vacía.
+
password
+
La contraseña es opcional solo es usado con fines de autenticación, de forma predeterminada es una cadena vacía.
+
+ +

openRequest()

+ +

Inicia la peticion, este metodo est

+ +

Inicializa la peticion. Este método se utiliza desde el código nativo, para inicializar una solicitud desde el código JavaScript, utilice open () en su lugar.

+ +
Nota: Calling this method an already active request (one for which open()or openRequest()has already been called) is the equivalent of calling abort().
+ +
void open(
+ in AUTF8String method,
+ in AUTF8String url,
+ in boolean async,
+ in AString user,
+ in AString password
+);
+
+ +
Parameters
+ +
+
method
+
The HTTPmethod to use; either "POST"or "GET". Ignored for non-HTTPURLs.
+
url
+
The URLto which to send the request.
+
async
+
An optional boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send()method does not return until the response is received. If true, notification of a completed transaction is provided using event listeners. This must be true if the multipart attribute is true, or an exception will be thrown.
+
user
+
The optional user name to use for authentication purposes; by default, this is an empty string.
+
password
+
The optional password to use for authentication purposes; by default, this is an empty string.
+
+ +

overrideMimeType()

+ +

Overrides the MIMEtype returned by the server.

+ +
Note: This method must be called before send().
+ +
void overrideMimeType(
+ in AUTF8String mimetype
+);
+
+ +
Parameters
+ +
+
mimetype
+
The type that should be used instead of the one returned by the server, if any.
+
+ +

send()

+ +

Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent. If the request is synchronous, this method doesn't return until the response has arrived.

+ +
Note: Any event listeners you wish to set must be set before calling send().
+ +
void send(
+ [optional] in nsIVariant body
+);
+
+ +
Parameters
+ +
+
body
+
This may be an nsIDocument, nsIInputStream, or a string (an nsISupportsString if called from native code) that is used to populate the body of a POST request. Starting with Gecko 1.9.2, you may also specify an DOM{{ domxref("File") }} , and starting with Gecko 2.0 {{ geckoRelease("2.0") }} you may also specify a FormData object.
+
+ +
Notes
+ +

If the body is an nsIDOMDocument, it is serialized before being sent.

+ +

If it's an nsIInputStream, it must be compatible with nsIUploadChannel's setUploadStream()method. In that case, a Content-Length header is added to the request, with its value obtained using nsIInputStream's available()method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the setRequestHeader()method prior to calling send().

+ +

sendAsBinary()

+ +

A variant of the send()method that sends binary data.

+ +
void sendAsBinary(
+ in DOMString body
+);
+
+ +
Parameters
+ +
+
body
+
The request body as a DOMstring. This data is converted to a string of single-byte characters by truncation (removing the high-order byte of each character).
+
+ +

setRequestHeader()

+ +

Sets the value of an HTTPrequest header.

+ +
Note: You must call open()before using this method.
+ +
void setRequestHeader(
+ in AUTF8String header,
+ in AUTF8String value
+);
+
+ +
Parameters
+ +
+
header
+
The name of the header whose value is to be set.
+
value
+
The value to set as the body of the header.
+
+ +

Implementation notes

+ +

XMLHttpRequest is implemented in Gecko using the {{ interface("nsIJSXMLHttpRequest") }} and {{ interface("nsIXMLHttpRequest") }} interfaces.

+ +

See also

+ + + +

{{ languages( { "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "ko": "ko/XMLHttpRequest", "pl": "pl/XMLHttpRequest", "zh-cn": "cn/XMLHttpRequest" } ) }}

diff --git a/files/es/web/api/xmlhttprequest/onreadystatechange/index.html b/files/es/web/api/xmlhttprequest/onreadystatechange/index.html new file mode 100644 index 0000000000..7f35ad3e88 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/onreadystatechange/index.html @@ -0,0 +1,109 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +
{{APIRef}}
+ +

Un EventHandler que es invocado cada vez que cambia el atributo readyState. La retrollamada (callback) es invocada desde el hilo (thread) perteneciente a la interfaz de usuario. La propiedad XMLHttpRequest.onreadystatechange contiene el manejador del evento que es invocado cuando se dispara el evento {{event("readystatechange")}}, lo cual sucede cada vez que cambia el valor de la propiedad {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}}. La retrollamada (callback) es invocada desde el hilo perteneciente a la interfaz de usuario.

+ +
+

Aviso: No debería ser usado con peticiones síncronas ni tampoco en código nativo.

+
+ +

El evento readystatechange no se disparará cuando una petición XMLHttpRequest sea cancelada mediante el método abort().

+ +

Sintaxis

+ +
XMLHttpRequest.onreadystatechange = callback;
+ +

Valores

+ + + +

Ejemplo

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

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilidad con navegadores Web

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1)}}{{CompatGeckoDesktop(1.0)}}{{CompatIe(7)}}[1]{{CompatVersionUnknown}}{{CompatSafari(1.2)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Las versiones 5 y 6 admiten llamadas AJAX usando ActiveXObject().

diff --git a/files/es/web/api/xmlhttprequest/responsetext/index.html b/files/es/web/api/xmlhttprequest/responsetext/index.html new file mode 100644 index 0000000000..d119565243 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/responsetext/index.html @@ -0,0 +1,104 @@ +--- +title: XMLHttpRequest.responseText +slug: Web/API/XMLHttpRequest/responseText +translation_of: Web/API/XMLHttpRequest/responseText +--- +
{{draft}}
+ +
{{APIRef('XMLHttpRequest')}}
+ +

La propiedad XMLHttpRequest.responseText  devuelve un DOMString que contiene la  respuesta a la consulta como un texto o null si la consulta  no tuvo exito o  aun no ha sido completada. la propiedad responseText  tendra una respuesta parcial como retorno aunque la consulta no haya sido  completada. si responseType contiene algo que no sea un string vacio o un "text", el acceso a responseText sera throw InvalidStateError exception.

+ +

Ejemplo. Lanza  una excepción InvalidStateError

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// If specified, responseType must be empty string or "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesestadoComentarios
{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Anteriores a  IE 10, El valo de  XMLHttpRequest.responseText debe ser leido una vez que la consulta fuera completada.

diff --git a/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html new file mode 100644 index 0000000000..28675abd79 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html @@ -0,0 +1,232 @@ +--- +title: Solicitudes síncronas y asíncronas +slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +--- +

XMLHttpRequest soporta solicitudes síncronas y asíncronas, pero la mas preferida es la asíncrona por razones de rendimiento

+ +

Las solicitudes síncronas bloquean la ejecución del código, mientras se procesa la solicitud, dejando a la pantalla congelada y dando una experiencia de usuario poco agradable

+ +

Peticiones asíncronas

+ +

Si se utiliza XMLHttpRequest de forma asíncrona, recibirá una devolución de llamada cuando los datos se hayan recibido . Esto permite que el navegador continúe funcionando de forma normal mientras se procesa la solicitud.

+ +

Ejemplo: Enviar un archivo a la consola

+ +

Este es el uso más simple de la asíncronia XMLHttpRequest.

+ +
var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null);
+ +

En la linea 2, el ultimo parametro de open() , especifica true para indicar que la solicitud se tratara de forma asíncrona

+ +

Line 3 creates an event handler function object and assigns it to the request's onload attribute.  This handler looks at the request's readyState to see if the transaction is complete in line 4, and if it is, and the HTTP status is 200, dumps the received content.  If an error occurred, an error message is displayed.

+ +

Line 15 actually initiates the request.  The callback routine is called whenever the state of the request changes.

+ +

Ejemplo: Creando una funcion estandar para leer archivos externos.

+ +

In some cases you must read many external files. This is a standard function which uses the XMLHttpRequest object asynchronously in order to switch the content of the read file to a specified listener.

+ +
function xhrSuccess () { this.callback.apply(this, this.arguments); }
+
+function xhrError () { console.error(this.statusText); }
+
+function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oReq = new XMLHttpRequest();
+  oReq.callback = fCallback;
+  oReq.arguments = Array.prototype.slice.call(arguments, 2);
+  oReq.onload = xhrSuccess;
+  oReq.onerror = xhrError;
+  oReq.open("get", sURL, true);
+  oReq.send(null);
+}
+
+ +

Usage:

+ +
function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+
+ +

The signature of the utility function loadFile declares (i) a target URL to read (via HTTP GET), (ii) a function to execute on successful completion of the XHR operation, and (iii) an arbitrary list of additional arguments that are "passed through" the XHR object to the success callback function.

+ +

Line 1 declares a function invoked when the XHR operation completes successfully.  It, in turn, invokes the callback function specified in the invocation of the loadFile function (in this case, the function showMessage) which has been assigned to a property of the XHR object (Line 7). The additional arguments (if any) supplied to the invocation of function loadFile are "applied" to the running of the callback function.

+ +

Line 3 declares a function invoked when the XHR operation fails to complete successfully.

+ +

Line 7 stores on the XHR object the success callback function given as the second argument to loadFile.

+ +

Line 8 slices the arguments array given to the invocation of loadFile. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable oReq, passed to the success callback function xhrSuccess., and ultimately supplied to the callback function (in this case, showMessage) which is invoked by function xhrSuccess.

+ +

Line 9 designates the function xhrSuccess as the callback to be invoked when the onload event fires, that is, when the XHR sucessfully completes.  

+ +

Line 10 designates the function xhrError as the callback to be invoked when the XHR requests fails to complete.

+ +

Line 11 specifies true for its third parameter to indicate that the request should be handled asynchronously.

+ +

Line 12 actually initiates the request.

+ +

Example: using a timeout

+ +

You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the timeout property on the XMLHttpRequest object, as shown in the code below:

+ +
function loadFile(sUrl, timeout, callback){
+
+    var args = arguments.slice(3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}
+ +

Notice the addition of code to handle the "timeout" event by setting the ontimeout handler.

+ +

Usage:

+ +
function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+
+ +

Here, we're specifying a timeout of 2000 ms.

+ +
+

Note: Support for timeout was added in {{Gecko("12.0")}}.

+
+ +

Synchronous request

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

In rare cases, the use of a synchronous method is preferable to an asynchronous one.

+ +

Example: HTTP synchronous request

+ +

This example demonstrates how to make a simple synchronous request.

+ +
var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+
+ +

Line 3 sends the request.  The null parameter indicates that no body content is needed for the GET request.

+ +

Line 5 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.

+ +

Example: Synchronous HTTP request from a Worker

+ +

One of the few cases in which a synchronous request does not usually block execution is the use of XMLHttpRequest within a Worker.

+ +

example.html (the main page):

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+</script>
+</head>
+<body></body>
+</html>
+
+ +

myFile.txt (the target of the synchronous XMLHttpRequest invocation):

+ +
Hello World!!
+
+ +

myTask.js (the Worker):

+ +
self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+
+ +
Note: The effect, because of the use of the Worker, is however asynchronous.
+ +

It could be useful in order to interact in background with the server or to preload some content. See Using web workers for examples and details.

+ +

Adapting Sync XHR usecases to the Beacon API

+ +

There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the window.onunload and window.onbeforeunload events.  The navigator.sendBeacon API can support these usecases typically while delivering a good UX.

+ +

The following example (from the sendBeacon docs) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+
+ +

Using the sendBeacon() method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation.

+ +

The following example shows a theoretical analytics code pattern that submits data to a server using the by using the sendBeacon() method.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

See also

+ + + +

{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}

diff --git a/files/es/web/api/xmlhttprequest/timeout/index.html b/files/es/web/api/xmlhttprequest/timeout/index.html new file mode 100644 index 0000000000..a9fec94792 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/timeout/index.html @@ -0,0 +1,67 @@ +--- +title: XMLHttpRequest.timeout +slug: Web/API/XMLHttpRequest/timeout +tags: + - AJAX + - Propiedad + - Referencia + - XHR + - XHR asincrónico + - XMLHttpRequest + - XMLHttpRequest asincrónico + - tiempo de espera + - timeout +translation_of: Web/API/XMLHttpRequest/timeout +--- +
{{APIRef('XMLHttpRequest')}}
+ +

La propiedad XMLHttpRequest.timeout es un unsigned long que representa el número de milisegundos que puede tomar una solicitud antes de que se finalice automáticamente. El valor por defecto es 0, lo que significa que no hay tiempo de espera (timeout). Timeout no debe utilizarse para solicitudes XMLHttpRequests sincrónicas usadas en un {{Glossary('document environment')}}, pues generará una excepción InvalidAccessError. Cuando ocurre un tiempo de espera, se dispara un evento timeout. {{gecko_minversion_inline("12.0")}}

+ +
+
+
Nota: No puede usar un timeout para solicitudes sincrónicas con una ventana propietaria (owning window).
+
+
Uso de timeout con una solicitud asincrónica
+
+ +

En Internet Explorer, la propiedad timeout se puede establecer solo después de llamar al método open() y antes de llamar al método send().

+ +

Ejemplo

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // tiempo en milisegundos
+
+xhr.onload = function () {
+  // Solicitud finalizada. Haz el procesamiento aquí.
+};
+
+xhr.ontimeout = function (e) {
+  // Tiempo de espera del XMLHttpRequest agotado. Haz algo aquí.
+};
+
+xhr.send(null);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.XMLHttpRequest.timeout")}}

diff --git a/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..c3d2b48e7f --- /dev/null +++ b/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,447 @@ +--- +title: Using XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

{{APIRef("XMLHttpRequest")}}

+ +

En esta guía le echaremos un vistazo a cómo usar {{domxref("XMLHttpRequest")}} para enviar solicitudes HTTP con el objetivo de intercambiar datos entre el sitio web y el servidor. Se incluyen ejemplos, tanto para los casos de uso comunes de XMLHttpRequest, como para los más inusuales.

+ +

Para enviar una solicitud HTTP, cree un objeto XMLHttpRequest, abra una URL y envíe la solicitud. Una vez que la transacción haya sido completada, el objeto contendrá información útil tal como el cuerpo de la respuesta y el estado HTTP del resultado.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.addEventListener("load", reqListener);
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

Solicitudes Síncronas y Asíncronas

+ +

XMLHttpRequest soporta tanto comunicaciones síncronas como asíncronas.

+ +
Nota: No deberias usar XMLHttpRequests síncronas porque, dada la naturaleza inherentemente asíncrona del intercambio de datos en las redes, hay multiples formas en que la memoria y eventos se puedan perder usando solicitudes síncronas.
+ +

En versiones de Firefox anteriores a Firefox 3, (solicitudes) XMLHttpRequest síncronas bloqueaban la interfaz de usuario.  Con tal de permitirle al usuario terminar solicitudes congeladas, Firefox 3 ya no lo hace.

+ +

Ejemplo: Solicitud síncrona

+ +

Este ejemplo demuestra como hacer una solicitud síncrona.

+ +
var req = new XMLHttpRequest();
+req.open('GET', 'http://www.mozilla.org/', false);
+req.send(null);
+if (req.status == 200)
+  dump(req.responseText);
+ +

En la línea 1 se instancia un objeto XMLHttpRequest.  Después en la línea 2 se abre una nueva solicitud, especificando que una solicitud GET se utilizará para extraer la pagina de inicio de Mozilla.org, y que la operación no debe ser asíncrona.

+ +

En la línea 3 se envía la solicitud.  El parámetro null indica que la solicitud GET no necesita contenido en el cuerpo.

+ +

En la línea 4 se verifica el código de estatus después de que la transacción se completa.  Si el resultado es 200 -- El código HTTP para resultado "OK"-- el contenido de texto del documento se escribe en la consola.

+ +

Ejemplo: Solicitudes síncronas no-HTTP

+ +

A pesar de su nombre, XMLHttpRequest se puede usar para hacer solicitudes que no sean de HTTP.  Este ejemplo muestra como usarlo para extraer un archivo del sistemas de archivos local.

+ +
var req = new XMLHttpRequest();
+req.open('GET', 'file:///home/user/file.json', false);
+req.send(null);
+if(req.status == 0)
+  dump(req.responseText);
+ +

La clave aqui es notar que el estado del resultado se compara con 0 en lugar de 200.  Esto es porque los esquemas file y ftp no usan los codigos de resultado de HTTP.

+ +

Ejemplo: Solicitudes asíncronas

+ +

Si usas XMLHttpRequest desde una extensión, deberias usarla asíncronamente.  En este caso, recibiras una llamada de regreso cuando se hallan recibido los datos, lo cual permite al navegador continuar trabajando con normalidad mientras se maneja tu solicitud.

+ +
var req = new XMLHttpRequest();
+req.open('GET', 'http://www.mozilla.org/', true);
+req.onreadystatechange = function (aEvt) {
+  if (req.readyState == 4) {
+     if(req.status == 200)
+      dump(req.responseText);
+     else
+      dump("Error loading page\n");
+  }
+};
+req.send(null);
+ +

La linea 2 especifica true en su tercer parametro indicando que la solicitud debe manejarse asíncronamente.

+ +

Line 3 crea un objeto función para manejar eventos y lo asigna al atributo de la solicitud onreadystatechange.  Este manejador observa el readyState de la solicitud verificando si la transacción se ha completado en la linea 4, si así es, y el estatus HTTP es 200, imprime el contenido recibido.  Si ocurrió un error, se muestra un mensaje de error.

+ +

La linea 11 de hecho inicia la solicitud.  La función onreadystatechange es llamada siempre que el estado de una solicitud cambia.

+ +

Analizando y Manipulando el Texto de Respuesta HTML

+ +

Si usas XMLHttpRequest para obtener el contenido de una página HTML remota, el responseText (texto de la respuesta) sera una cadena que contenga una "sopa" de etiquetas HTML, lo que puede ser dificil de analizar y manipular. Existen tres maneras principales de analizar estas cadenas HTML

+ +
    +
  1. Analizar con nsIScriptableUnescapeHTML repidamente convertira la cadena HTML en DOM, al mismo tiempo que tira javascript y otros elementos avanzados, incluyendo la etiqueta <head> de la página.
    2. +
  2. RegExp se puede usar si de antemano conoces el HTML que vendra en el responseText. Quizas quieras remover los saltos de linea, si usas RegExp para escanear considerandolos. Sin embargo, este metodo es un "ultimo recurso" ya que si el HTML cambia ligeramente, posiblemente fallara.
    3. +
  3. Usar un hidden chrome o un content-level iframe para cargar toda la pagina también se puede hacer para manipularla luego como DOM, sin embargo existen riesgos de seguridad al dar a código remoto este nivel de acceso privilegiado, que puede causar problemas en la revisión de tu addon. Por ejemplo, si una pagina ejecuta el comando común "document.location = redirecttothispage.html" para cargar, esto se interpretara como cambiar la locación del navegador (document.location en una extensión) en contraposición a la locación de una página web (content.document.location en una extensión), y en consecuecia destruir todos los componentes del navegador. Alternativamente, y de algun modo mas seguro, una cadena responseText adquirida mediante XMLHttpRequest se puede analizar con RegExp para remover problemas de javascript, luego cargada en un iframe oculto previamente  establecido:
    4. +
+ +
document.getElementById('hiddenXULiframe').contentWindow.document.body.innerHTML = req.responseText
+
+ +

Using FormData objects

+ +

{{ gecko_minversion_header("2") }}

+ +

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It's primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data".

+ +

Creating a FormData object from scratch

+ +

You can build a FormData object yourself, instantiating it then appending fields to it by calling its append() method, like this:

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456);
+formData.append("afile", fileInputElement.files[0]);
+
+var xhr = new XMLHttpRequest();
+xhr.open("POST", "http://foo.com/submitform.php");
+xhr.send(formData);
+
+ +

This example builds a FormData object containing values for fields named "username" and "accountnum", then uses the XMLHttpRequest method send() to send the form's data.

+ +

Retrieving a FormData object from an HTML form

+ +

To construct a FormData object that contains the data from an existing {{ HTMLElement("form") }}, specify that form element when creating the FormData object:

+ +
newFormData = new FormData(someFormElement);
+
+ +

For example:

+ +
var formElement = document.getElementById("myFormElement");
+var xhr = new XMLHttpRequest();
+xhr.open("POST", "submitform.php");
+xhr.send(new FormData(formElement));
+
+ +

You can also add data to the FormData object between retrieving it from a form and sending it, like this:

+ +
var formElement = document.getElementById("myFormElement");
+formData = new FormData(formElement);
+formData.append("serialnumber", serialNumber++);
+xhr.send(formData);
+
+ +

This lets you augment the form's data before sending it along, to include additional information that's not necessarily user editable on the form.

+ +

Sending files using a FormData object

+ +

You can also send files using FormData. Simply include an {{ HTMLElement("input") }} element of type "file":

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64"><br />
+  <label>Custom file ID:</label>
+  <input type="text" name="fileid" size="12" maxlength="32"><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required>
+</form>
+<div id="output"></div>
+<a href="javascript:sendForm()">Stash the file!</a>
+
+ +

Then you can send it using code like the following:

+ +
function sendForm() {
+  var output = document.getElementById("output");
+  var data = new FormData(document.getElementById("fileinfo"));
+
+  data.append("CustomField", "This is some extra data");
+
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "stash.pl", false)
+  xhr.send(data);
+  if (xhr.status == 200) {
+    output.innerHTML += "Uploaded!<br />";
+  } else {
+    output.innerHTML += "Error " + xhr.status + " occurred uploading your file.<br />";
+  }
+}
+
+ +

Note that this example is directing the output to a Perl CGI script running on the server, and handles HTTP errors, although not prettily.

+ +

Handling binary data

+ +

Although XMLHttpRequest is most commonly used to send and receive textual data, it can be used to send and receive binary content.

+ +

Receiving binary data

+ +

The load_binary_resource() function shown below loads binary data from the specified URL, returning it to the caller.

+ +
function load_binary_resource(url) {
+  var req = new XMLHttpRequest();
+  req.open('GET', url, false);
+  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
+  req.overrideMimeType('text/plain; charset=x-user-defined');
+  req.send(null);
+  if (req.status != 200) return '';
+  return req.responseText;
+}
+
+ +

The magic happens in line 5, which overrides the MIME type, forcing Firefox to treat it as plain text, using a user-defined character set.  This tells Firefox not to parse it, and to let the bytes pass through unprocessed.

+ +
var filestream = load_binary_resource(url);
+var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
+ +

The example above fetches the byte at offset x within the loaded binary data.  The valid range for x is from 0 to filestream.length-1.

+ +

See downloading binary streams with XMLHttpRequest for a detailed explanation. See also downloading files.

+ +

Receiving binary data using JavaScript typed arrays

+ +

{{ gecko_minversion_header("2.0") }}

+ +

Gecko 2.0 {{ geckoRelease("2.0") }} adds a Gecko-specific mozResponseArrayBuffer property to the XMLHttpRequest object, which contains a JavaScript typed array representing the raw binary contents of the response from the server. This lets you read the binary data without taking any special steps.

+ +
var xhr = new XMLHttpRequest();
+xhr.open("GET", "binary_file", false);
+xhr.send(null);
+
+buffer = xhr.mozResponseArrayBuffer;
+if (buffer) {
+  var byteArray = new UInt8Array(buffer);
+  for (var i=0; i<byteArray.byteLength; i++) {
+    // do something with each byte in the array
+  }
+}
+
+ +

This example reads a binary file and interprets it as 8-bit unsigned integers.

+ +

Sending binary data

+ +

This example transmits binary content asynchronously, using the POST method.

+ +
var req = new XMLHttpRequest();
+req.open("POST", url, true);
+// set headers and mime-type appropriately
+req.setRequestHeader("Content-Length", 741);
+req.sendAsBinary(aBody);
+ +

Line 4 sets the Content-Length header to 741, indicating that the data is 741 bytes long.  Obviously you need to change this value based on the actual size of the data being sent.

+ +

Line 5 uses the sendAsBinary() method to initiate the request.

+ +

You can also send binary content by passing an instance of the {{ interface("nsIFileInputStream") }} to send().  In that case, you don't have to set the Content-Length header yourself, as the information is fetched from the stream automatically:

+ +
// Make a stream from a file.
+var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                       .createInstance(Components.interfaces.nsIFileInputStream);
+stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance
+
+// Try to determine the MIME type of the file
+var mimeType = "text/plain";
+try {
+  var mimeService = Components.classes["@mozilla.org/mime;1"]
+          .getService(Components.interfaces.nsIMIMEService);
+  mimeType = mimeService.getTypeFromFile(file); // file is an nsIFile instance
+}
+catch(e) { /* eat it; just use text/plain */ }
+
+// Send
+var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.open('PUT', url, false); /* synchronous! */
+req.setRequestHeader('Content-Type', mimeType);
+req.send(stream);
+
+ +

Monitoring progress

+ +

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

+ +

In Firefox 3.5 and later

+ +

Firefox 3.5 adds support for DOM progress event monitoring of XMLHttpRequest transfers; this follows the Web API specification for progress events.

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

Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using XMLHttpRequest.  See {{ interface("nsIDOMProgressEvent") }} and {{ interface("nsIXMLHttpRequestEventTarget") }} for details on these events.

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

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

+ +

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

+ +
var req = new XMLHttpRequest();
+
+req.upload.addEventListener("progress", updateProgress, false);
+req.upload.addEventListener("load", transferComplete, false);
+req.upload.addEventListener("error", transferFailed, false);
+req.upload.addEventListener("abort", transferCanceled, false);
+
+req.open();
+ +
Note: Progress events are not available for the file: protocol.
+ +

In Firefox 3 and earlier

+ +

If, for example, you wish to provide progress information to the user while the document is being received, you can use code like this:

+ +
function onProgress(e) {
+  var percentComplete = (e.position / e.totalSize)*100;
+  // ...
+}
+
+function onError(e) {
+  alert("Error " + e.target.status + " occurred while receiving the document.");
+}
+
+function onLoad(e) {
+  // ...
+}
+// ...
+var req = new XMLHttpRequest();
+req.onprogress = onProgress; // or req.addEventListener("progress", onProgress, false);
+req.open("GET", url, true);
+req.onload = onLoad; // or req.addEventListener("load", onLoad, false);
+req.onerror = onError; // or req.addEventListener("error", onError, false);
+req.send(null);
+
+ +

The onprogress event's attributes, position and totalSize, indicate the current number of bytes received and the total number of bytes expected, respectively.

+ +

All of these events have their target attribute set to the XMLHttpRequest they correspond to.

+ +
Note: Firefox 3 properly ensures that the values of the target, currentTarget, and this fields of the event object are set to reference the correct objects when calling event handlers for XML documents represented by XMLDocument. See {{ Bug(198595) }} for details.
+ +

Cross-site XMLHttpRequest

+ +
+

Este artículo cubre características introducidas en Firefox 3.5.

+
+ +

Firefox 3.5 supports 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

+ +

Normally, XMLHttpRequest tries to retrieve content from the cache, if it's available.  To bypass this, do the following:

+ +
var req = new XMLHttpRequest();
+req.open('GET', url, false);
+req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;
+req.send(null);
+ +
Note: This approach will only work in Gecko-based software, as the channel attribute is Gecko-specific.
+ +

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

+ +
http://foo.com/bar.html
+ +

becomes

+ +
http://foo.com/bar.html?12345
+ +

and

+ +
http://foo.com/bar.html?foobar=baz
+ +

becomes

+ +
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 req = new XMLHttpRequest();
+req.open("GET", url += (url.match(/\?/) == null ? "?" : "&") + (new Date()).getTime(), false);
+req.send(null); 
+ +

Security

+ +

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

+ +

Downloading JSON and JavaScript from extensions

+ +

For security reasons, extensions should never use eval() to parse JSON or JavaScript code downloaded from the web.  See Downloading JSON and JavaScript in extensions for details.

+ +

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. You'll need to create and use it using a different syntax.

+ +

Instead of this:

+ +
var req = new XMLHttpRequest();
+req.onprogress = onProgress;
+req.onload = onLoad;
+req.onerror = onError;
+req.open("GET", url, true);
+req.send(null);
+
+ +

Do this:

+ +
var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.onprogress = onProgress;
+req.onload = onLoad;
+req.onerror = onError;
+req.open("GET", url, true);
+req.send(null);
+
+ +

For C++ code you would need to QueryInterface the component to an nsIEventTarget in order to add event listeners, but chances are in C++ using a channel directly would be better.

+ +

See also

+ +
    +
  1. MDC 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 Working Draft
    9. +
  9. Web Progress Events specification
    10. +
  10. Reading Ogg files with JavaScript (Chris Double)
    11. +
diff --git a/files/es/web/api/xmlhttprequesteventtarget/index.html b/files/es/web/api/xmlhttprequesteventtarget/index.html new file mode 100644 index 0000000000..f53063d82b --- /dev/null +++ b/files/es/web/api/xmlhttprequesteventtarget/index.html @@ -0,0 +1,68 @@ +--- +title: XMLHttpRequestEventTarget +slug: Web/API/XMLHttpRequestEventTarget +tags: + - AJAX + - API + - NeedsBrowserCompatibility + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequestEventTarget +--- +

{{APIRef("XMLHttpRequest")}}

+ +

XMLHttpRequestEventTarget is the interface that describes the event handlers you can implement in an object that will handle events for an {{ domxref("XMLHttpRequest") }}.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +
+
{{ domxref("XMLHttpRequestEventTarget.onabort") }}
+
Contains the function to call when a request is aborted and the {{event('abort')}} event is received by this object.
+
{{ domxref("XMLHttpRequestEventTarget.onerror") }}
+
Contains the function to call when a request encounters an error and the {{event('error')}} event is received by this object.
+
{{ domxref("XMLHttpRequestEventTarget.onload") }}
+
Contains the function to call when an HTTP request returns after successfully fetching content and the {{event('load')}} event is received by this object.
+
{{ domxref("XMLHttpRequestEventTarget.onloadstart") }}
+
Contains the function that gets called when the HTTP request first begins loading data and the {{event('loadstart')}} event is received by this object.
+
{{ domxref("XMLHttpRequestEventTarget.onprogress") }}
+
Contains the function that is called periodically with information about the progress of the request and the {{event('progress')}} event is received by this object.
+
{{ domxref("XMLHttpRequestEventTarget.ontimeout") }}
+
Contains the function that is called if the event times out and the {{event("timeout")}} event is received by this object; this only happens if a timeout has been previously established by setting the value of the XMLHttpRequest object's timeout attribute.
+
{{ domxref("XMLHttpRequestEventTarget.onloadend") }}
+
Contains the function that is called when the load is completed, even if the request failed, and the {{event('loadend')}} event is received by this object.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/xmlhttprequesteventtarget/onload/index.html b/files/es/web/api/xmlhttprequesteventtarget/onload/index.html new file mode 100644 index 0000000000..c6d6f78974 --- /dev/null +++ b/files/es/web/api/xmlhttprequesteventtarget/onload/index.html @@ -0,0 +1,55 @@ +--- +title: XMLHttpRequestEventTarget.onload +slug: Web/API/XMLHttpRequestEventTarget/onload +translation_of: Web/API/XMLHttpRequestEventTarget/onload +--- +
{{APIRef("XMLHttpRequest")}}
+ +

El evento XMLHttpRequestEventTarget.onload es la función que se llama cuando una transacción del {{domxref("XMLHttpRequest")}} es ejecutada correctamente.

+ +

Sintaxis

+ +
XMLHttpRequest.onload = callback;
+ +

 Valores

+ + + +

Ejemplo

+ +
var xmlhttp = new XMLHttpRequest(),
+  method = 'GET',
+  url = 'https://developer.mozilla.org/';
+
+xmlhttp.open(method, url, true);
+xmlhttp.onload = function () {
+  // Hacer algo con la información recivida ( found in xmlhttp.response )
+};
+xmlhttp.send();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onload')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ + + +

{{Compat("api.XMLHttpRequestEventTarget.onload")}}

-- cgit v1.2.3-54-g00ecf