From 162cc93d5b4ae66cd950b3b2d64bf47c06f4c7b6 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Fri, 28 Jul 2023 11:14:56 -0700 Subject: [PATCH] pt-br: Format /web/api using Prettier (part 3) --- .../web/api/history_api/example/index.md | 417 ++++++----- files/pt-br/web/api/history_api/index.md | 7 +- .../file_drag_and_drop/index.md | 19 +- .../web/api/html_drag_and_drop_api/index.md | 34 +- .../api/htmlcanvaselement/getcontext/index.md | 18 +- .../web/api/htmlcanvaselement/height/index.md | 10 +- .../pt-br/web/api/htmlcanvaselement/index.md | 11 +- .../api/htmlcanvaselement/todataurl/index.md | 47 +- files/pt-br/web/api/htmldivelement/index.md | 13 +- .../web/api/htmlelement/change_event/index.md | 10 +- .../pt-br/web/api/htmlelement/click/index.md | 8 +- .../api/htmlelement/contenteditable/index.md | 8 +- files/pt-br/web/api/htmlelement/index.md | 12 +- .../web/api/htmlelement/innertext/index.md | 10 +- .../web/api/htmlelement/input_event/index.md | 16 +- files/pt-br/web/api/htmlelement/lang/index.md | 10 +- .../web/api/htmlelement/offsetheight/index.md | 12 +- .../web/api/htmlelement/offsetleft/index.md | 8 +- .../web/api/htmlelement/offsetparent/index.md | 10 +- .../web/api/htmlelement/offsettop/index.md | 14 +- .../web/api/htmlelement/offsetwidth/index.md | 12 +- .../api/htmlformelement/submit_event/index.md | 10 +- files/pt-br/web/api/htmlinputelement/index.md | 1 + .../web/api/htmlinputelement/select/index.md | 10 +- .../setselectionrange/index.md | 42 +- .../api/htmlmediaelement/abort_event/index.md | 14 +- .../pt-br/web/api/htmloptionelement/index.md | 31 +- .../web/api/htmloptionelement/option/index.md | 32 +- .../htmlselectelement/checkvalidity/index.md | 9 +- .../pt-br/web/api/htmlselectelement/index.md | 17 +- files/pt-br/web/api/htmlslotelement/index.md | 8 +- files/pt-br/web/api/htmlspanelement/index.md | 10 +- files/pt-br/web/api/idbcursor/index.md | 10 +- files/pt-br/web/api/idbfactory/index.md | 33 +- files/pt-br/web/api/imagecapture/index.md | 80 ++- .../indexeddb_api/using_indexeddb/index.md | 678 +++++++++--------- files/pt-br/web/api/location/assign/index.md | 11 +- files/pt-br/web/api/location/index.md | 7 +- files/pt-br/web/api/location/search/index.md | 10 +- files/pt-br/web/api/mediadevices/index.md | 76 +- files/pt-br/web/api/mediastreamtrack/index.md | 10 +- files/pt-br/web/api/messagechannel/index.md | 12 +- files/pt-br/web/api/messageport/index.md | 8 +- .../web/api/messageport/postmessage/index.md | 14 +- .../pt-br/web/api/mouseevent/clientx/index.md | 22 +- .../pt-br/web/api/mouseevent/clienty/index.md | 14 +- files/pt-br/web/api/mouseevent/index.md | 25 +- files/pt-br/web/api/mutationobserver/index.md | 36 +- .../web/api/navigator/cookieenabled/index.md | 6 +- .../web/api/navigator/devicememory/index.md | 6 +- .../web/api/navigator/geolocation/index.md | 6 +- .../web/api/navigator/getusermedia/index.md | 61 +- files/pt-br/web/api/navigator/share/index.md | 29 +- .../web/api/network_information_api/index.md | 8 +- files/pt-br/web/api/node/baseuri/index.md | 11 +- files/pt-br/web/api/node/childnodes/index.md | 16 +- files/pt-br/web/api/node/clonenode/index.md | 14 +- files/pt-br/web/api/node/contains/index.md | 10 +- files/pt-br/web/api/node/firstchild/index.md | 15 +- files/pt-br/web/api/node/index.md | 17 +- .../pt-br/web/api/node/insertbefore/index.md | 26 +- files/pt-br/web/api/node/isconnected/index.md | 41 +- files/pt-br/web/api/node/lastchild/index.md | 2 +- files/pt-br/web/api/node/nextsibling/index.md | 27 +- files/pt-br/web/api/node/parentnode/index.md | 13 +- files/pt-br/web/api/node/textcontent/index.md | 40 +- files/pt-br/web/api/nodelist/index.md | 36 +- files/pt-br/web/api/notification/index.md | 18 +- .../web/api/offlineaudiocontext/index.md | 50 +- files/pt-br/web/api/origin/index.md | 7 +- .../web/api/page_visibility_api/index.md | 61 +- files/pt-br/web/api/path2d/index.md | 6 +- files/pt-br/web/api/performance/index.md | 16 +- files/pt-br/web/api/performance/now/index.md | 7 +- .../pt-br/web/api/performance/tojson/index.md | 6 +- .../web/api/processinginstruction/index.md | 9 +- files/pt-br/web/api/push_api/index.md | 4 +- files/pt-br/web/api/pushmanager/index.md | 8 +- files/pt-br/web/api/request/index.md | 26 +- files/pt-br/web/api/request/request/index.md | 46 +- files/pt-br/web/api/response/index.md | 22 +- files/pt-br/web/api/rtccertificate/index.md | 8 +- files/pt-br/web/api/rtcdatachannel/index.md | 7 +- files/pt-br/web/api/rtcicetransport/index.md | 8 +- .../connectionstate/index.md | 8 +- .../pt-br/web/api/rtcpeerconnection/index.md | 50 +- files/pt-br/web/api/selection/index.md | 17 +- files/pt-br/web/api/sensor/index.md | 8 +- .../using_server-sent_events/index.md | 14 +- .../pt-br/web/api/service_worker_api/index.md | 8 +- .../web/api/serviceworkercontainer/index.md | 43 +- .../serviceworkercontainer/register/index.md | 40 +- .../serviceworkerglobalscope/clients/index.md | 8 +- .../web/api/serviceworkerglobalscope/index.md | 37 +- files/pt-br/web/api/setinterval/index.md | 669 ++++++++++------- files/pt-br/web/api/sharedworker/index.md | 40 +- .../pt-br/web/api/sharedworker/port/index.md | 9 +- files/pt-br/web/api/speechgrammar/index.md | 10 +- files/pt-br/web/api/speechsynthesis/index.md | 44 +- .../web/api/speechsynthesisutterance/index.md | 34 +- 100 files changed, 1876 insertions(+), 1792 deletions(-) diff --git a/files/pt-br/web/api/history_api/example/index.md b/files/pt-br/web/api/history_api/example/index.md index 1f50627b1cb71d..93e0e1e1005c99 100644 --- a/files/pt-br/web/api/history_api/example/index.md +++ b/files/pt-br/web/api/history_api/example/index.md @@ -147,22 +147,22 @@ Esse é um exemplo de um web site em AJAX web site composto por apenas três pá ```css #ajax-loader { - position: fixed; - display: table; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: fixed; + display: table; + top: 0; + left: 0; + width: 100%; + height: 100%; } #ajax-loader > div { - display: table-cell; - width: 100%; - height: 100%; - vertical-align: middle; - text-align: center; - background-color: #000000; - opacity: 0.65; + display: table-cell; + width: 100%; + height: 100%; + vertical-align: middle; + text-align: center; + background-color: #000000; + opacity: 0.65; } ``` @@ -199,38 +199,40 @@ Esse é um exemplo de um web site em AJAX web site composto por apenas três pá "use strict"; const ajaxRequest = new (function () { - - function closeReq () { - oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); - bIsLoading = false; - } - - function abortReq () { - if (!bIsLoading) { return; } - oReq.abort(); - closeReq(); - } - - function ajaxError () { - alert("Unknown error."); + function closeReq() { + oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); + bIsLoading = false; + } + + function abortReq() { + if (!bIsLoading) { + return; } - - function ajaxLoad () { - var vMsg, nStatus = this.status; - switch (nStatus) { - case 200: - vMsg = JSON.parse(this.responseText); - document.title = oPageInfo.title = vMsg.page; - document.getElementById(sTargetId).innerHTML = vMsg.content; - if (bUpdateURL) { - history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); - bUpdateURL = false; - } - break; - default: - vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); - switch (Math.floor(nStatus / 100)) { - /* + oReq.abort(); + closeReq(); + } + + function ajaxError() { + alert("Unknown error."); + } + + function ajaxLoad() { + var vMsg, + nStatus = this.status; + switch (nStatus) { + case 200: + vMsg = JSON.parse(this.responseText); + document.title = oPageInfo.title = vMsg.page; + document.getElementById(sTargetId).innerHTML = vMsg.content; + if (bUpdateURL) { + history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); + bUpdateURL = false; + } + break; + default: + vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); + switch (Math.floor(nStatus / 100)) { + /* case 1: // Informational 1xx console.log("Information code " + vMsg); @@ -244,163 +246,190 @@ const ajaxRequest = new (function () { console.log("Redirection code " + vMsg); break; */ - case 4: - /* Client Error 4xx */ - alert("Client Error #" + vMsg); - break; - case 5: - /* Server Error 5xx */ - alert("Server Error #" + vMsg); - break; - default: - /* Unknown status */ - ajaxError(); - } + case 4: + /* Client Error 4xx */ + alert("Client Error #" + vMsg); + break; + case 5: + /* Server Error 5xx */ + alert("Server Error #" + vMsg); + break; + default: + /* Unknown status */ + ajaxError(); } - closeReq(); } - - function filterURL (sURL, sViewMode) { - return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, ""); + closeReq(); + } + + function filterURL(sURL, sViewMode) { + return ( + sURL.replace(rSearch, "") + + ( + "?" + + sURL + .replace(rHost, "&") + .replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "") + .slice(1) + ).replace(rEndQstMark, "") + ); + } + + function getPage(sPage) { + if (bIsLoading) { + return; } - - function getPage (sPage) { - if (bIsLoading) { return; } - oReq = new XMLHttpRequest(); - bIsLoading = true; - oReq.onload = ajaxLoad; - oReq.onerror = ajaxError; - if (sPage) { oPageInfo.url = filterURL(sPage, null); } - oReq.open("get", filterURL(oPageInfo.url, "json"), true); - oReq.send(); - oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); + oReq = new XMLHttpRequest(); + bIsLoading = true; + oReq.onload = ajaxLoad; + oReq.onerror = ajaxError; + if (sPage) { + oPageInfo.url = filterURL(sPage, null); } - - function requestPage (sURL) { - if (history.pushState) { - bUpdateURL = true; - getPage(sURL); - } else { - /* Ajax navigation is not supported */ - location.assign(sURL); - } - } - - function processLink () { - if (this.className === sAjaxClass) { - requestPage(this.href); - return false; - } - return true; + oReq.open("get", filterURL(oPageInfo.url, "json"), true); + oReq.send(); + oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); + } + + function requestPage(sURL) { + if (history.pushState) { + bUpdateURL = true; + getPage(sURL); + } else { + /* Ajax navigation is not supported */ + location.assign(sURL); } + } - function init () { - oPageInfo.title = document.title; - history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url); - for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink); + function processLink() { + if (this.className === sAjaxClass) { + requestPage(this.href); + return false; } - - const - - /* customizable constants */ - sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav", - - /* not customizable constants */ - rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/, - oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(), - oPageInfo = { - title: null, - url: location.href - }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { - 100: "Continue", - 101: "Switching Protocols", - 102: "Processing", - 200: "OK", - 201: "Created", - 202: "Accepted", - 203: "Non-Authoritative Information", - 204: "No Content", - 205: "Reset Content", - 206: "Partial Content", - 207: "Multi-Status", - 208: "Already Reported", - 226: "IM Used", - 300: "Multiple Choices", - 301: "Moved Permanently", - 302: "Found", - 303: "See Other", - 304: "Not Modified", - 305: "Use Proxy", - 306: "Reserved", - 307: "Temporary Redirect", - 308: "Permanent Redirect", - 400: "Bad Request", - 401: "Unauthorized", - 402: "Payment Required", - 403: "Forbidden", - 404: "Not Found", - 405: "Method Not Allowed", - 406: "Not Acceptable", - 407: "Proxy Authentication Required", - 408: "Request Timeout", - 409: "Conflict", - 410: "Gone", - 411: "Length Required", - 412: "Precondition Failed", - 413: "Request Entity Too Large", - 414: "Request-URI Too Long", - 415: "Unsupported Media Type", - 416: "Requested Range Not Satisfiable", - 417: "Expectation Failed", - 422: "Unprocessable Entity", - 423: "Locked", - 424: "Failed Dependency", - 425: "Unassigned", - 426: "Upgrade Required", - 427: "Unassigned", - 428: "Precondition Required", - 429: "Too Many Requests", - 430: "Unassigned", - 431: "Request Header Fields Too Large", - 500: "Internal Server Error", - 501: "Not Implemented", - 502: "Bad Gateway", - 503: "Service Unavailable", - 504: "Gateway Timeout", - 505: "HTTP Version Not Supported", - 506: "Variant Also Negotiates (Experimental)", - 507: "Insufficient Storage", - 508: "Loop Detected", - 509: "Unassigned", - 510: "Not Extended", - 511: "Network Authentication Required" - }; - - var - - oReq, bIsLoading = false, bUpdateURL = false; - - oLoadingBox.id = "ajax-loader"; - oCover.onclick = abortReq; - oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; - oCover.appendChild(oLoadingImg); - oLoadingBox.appendChild(oCover); - - onpopstate = function (oEvent) { - bUpdateURL = false; - oPageInfo.title = oEvent.state.title; - oPageInfo.url = oEvent.state.url; - getPage(); - }; - - window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init); - - // Public methods - - this.open = requestPage; - this.stop = abortReq; - this.rebuildLinks = init; - + return true; + } + + function init() { + oPageInfo.title = document.title; + history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url); + for ( + var oLink, nIdx = 0, nLen = document.links.length; + nIdx < nLen; + document.links[nIdx++].onclick = processLink + ); + } + + const /* customizable constants */ + sTargetId = "ajax-content", + sViewKey = "view_as", + sAjaxClass = "ajax-nav", + /* not customizable constants */ + rSearch = /\?.*$/, + rHost = /^[^\?]*\?*&*/, + rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), + rEndQstMark = /\?$/, + oLoadingBox = document.createElement("div"), + oCover = document.createElement("div"), + oLoadingImg = new Image(), + oPageInfo = { + title: null, + url: location.href, + }, + oHTTPStatus = + /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { + 100: "Continue", + 101: "Switching Protocols", + 102: "Processing", + 200: "OK", + 201: "Created", + 202: "Accepted", + 203: "Non-Authoritative Information", + 204: "No Content", + 205: "Reset Content", + 206: "Partial Content", + 207: "Multi-Status", + 208: "Already Reported", + 226: "IM Used", + 300: "Multiple Choices", + 301: "Moved Permanently", + 302: "Found", + 303: "See Other", + 304: "Not Modified", + 305: "Use Proxy", + 306: "Reserved", + 307: "Temporary Redirect", + 308: "Permanent Redirect", + 400: "Bad Request", + 401: "Unauthorized", + 402: "Payment Required", + 403: "Forbidden", + 404: "Not Found", + 405: "Method Not Allowed", + 406: "Not Acceptable", + 407: "Proxy Authentication Required", + 408: "Request Timeout", + 409: "Conflict", + 410: "Gone", + 411: "Length Required", + 412: "Precondition Failed", + 413: "Request Entity Too Large", + 414: "Request-URI Too Long", + 415: "Unsupported Media Type", + 416: "Requested Range Not Satisfiable", + 417: "Expectation Failed", + 422: "Unprocessable Entity", + 423: "Locked", + 424: "Failed Dependency", + 425: "Unassigned", + 426: "Upgrade Required", + 427: "Unassigned", + 428: "Precondition Required", + 429: "Too Many Requests", + 430: "Unassigned", + 431: "Request Header Fields Too Large", + 500: "Internal Server Error", + 501: "Not Implemented", + 502: "Bad Gateway", + 503: "Service Unavailable", + 504: "Gateway Timeout", + 505: "HTTP Version Not Supported", + 506: "Variant Also Negotiates (Experimental)", + 507: "Insufficient Storage", + 508: "Loop Detected", + 509: "Unassigned", + 510: "Not Extended", + 511: "Network Authentication Required", + }; + + var oReq, + bIsLoading = false, + bUpdateURL = false; + + oLoadingBox.id = "ajax-loader"; + oCover.onclick = abortReq; + oLoadingImg.src = + "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; + oCover.appendChild(oLoadingImg); + oLoadingBox.appendChild(oCover); + + onpopstate = function (oEvent) { + bUpdateURL = false; + oPageInfo.title = oEvent.state.title; + oPageInfo.url = oEvent.state.url; + getPage(); + }; + + window.addEventListener + ? addEventListener("load", init, false) + : window.attachEvent + ? attachEvent("onload", init) + : (onload = init); + + // Public methods + + this.open = requestPage; + this.stop = abortReq; + this.rebuildLinks = init; })(); ``` diff --git a/files/pt-br/web/api/history_api/index.md b/files/pt-br/web/api/history_api/index.md index b1ab8e9ed66227..fc76437188945d 100644 --- a/files/pt-br/web/api/history_api/index.md +++ b/files/pt-br/web/api/history_api/index.md @@ -143,11 +143,8 @@ Para um exemplo completo de um web site AJAX, veja: [Exemplo de navegação Ajax ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------ | -| {{SpecName('HTML WHATWG', "browsers.html#history", "History")}} | {{Spec2('HTML WHATWG')}} | Nenhuma alteração do {{SpecName("HTML5 W3C")}}. | -| {{SpecName('HTML5 W3C', "browsers.html#history", "History")}} | {{Spec2('HTML5 W3C')}} | Definição inicial | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.History")}} +{{Compat}} diff --git a/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md b/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md index b9494d4be2dcc6..9644d46c390244 100644 --- a/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md +++ b/files/pt-br/web/api/html_drag_and_drop_api/file_drag_and_drop/index.md @@ -25,7 +25,10 @@ O elemento de destino do evento {{event("drop")}} precisa de um event handler gl Normalmente, um aplicativo inclui um event handler {{event("dragover")}} no elemento de destino do drop e esse manipulador desativará o comportamento de arraste padrão do navegador. Para adicionar esse handler, você precisa incluir um event handler global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}: ```html -
+

Drag one or more files to this Drop Zone ...

``` @@ -35,7 +38,7 @@ Por fim, um aplicativo pode querer estilizar o elemento da drop zone para indica ```css #drop_zone { border: 5px solid blue; - width: 200px; + width: 200px; height: 100px; } ``` @@ -52,7 +55,7 @@ Observe que neste exemplo, Qualquer item de arrasto que não seja um arquivo é ```js function dropHandler(ev) { - console.log('File(s) dropped'); + console.log("File(s) dropped"); // Impedir o comportamento padrão (impedir que o arquivo seja aberto) ev.preventDefault(); @@ -61,15 +64,17 @@ function dropHandler(ev) { // Use a interface DataTransferItemList para acessar o (s) arquivo (s) for (var i = 0; i < ev.dataTransfer.items.length; i++) { // Se os itens soltos não forem arquivos, rejeite-os - if (ev.dataTransfer.items[i].kind === 'file') { + if (ev.dataTransfer.items[i].kind === "file") { var file = ev.dataTransfer.items[i].getAsFile(); - console.log('... file[' + i + '].name = ' + file.name); + console.log("... file[" + i + "].name = " + file.name); } } } else { // Use a interface DataTransfer para acessar o (s) arquivo (s) for (var i = 0; i < ev.dataTransfer.files.length; i++) { - console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name); + console.log( + "... file[" + i + "].name = " + ev.dataTransfer.files[i].name, + ); } } } @@ -81,7 +86,7 @@ O seguinte event handler {{event("dragover")}} chama {{domxref("Event.preventDef ```js function dragOverHandler(ev) { - console.log('File(s) in drop zone'); + console.log("File(s) in drop zone"); // Impedir o comportamento padrão (impedir que o arquivo seja aberto) ev.preventDefault(); diff --git a/files/pt-br/web/api/html_drag_and_drop_api/index.md b/files/pt-br/web/api/html_drag_and_drop_api/index.md index 0fc35c7d7b5b24..32686be4b6cee6 100644 --- a/files/pt-br/web/api/html_drag_and_drop_api/index.md +++ b/files/pt-br/web/api/html_drag_and_drop_api/index.md @@ -20,16 +20,16 @@ O drag and drop em HTML usa o {{domxref("Event","modelo de eventos DOM")}} e os Todos os [tipos de evento drag](/pt-BR/docs/Web/API/DragEvent#Event_types) são associados a um [manipulador global de eventos](/pt-BR/docs/Web/API/DragEvent#GlobalEventHandlers). Cada tipo de evento drag e cada atributo drag global tem um documento de referência que o descreve. A tabela a seguir descreve brevemente os tipos de evento e um link de referência para seu documento. -| Event | On Event Handler | Description | -| ---------------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{event('drag')}} | {{domxref('GlobalEventHandlers.ondrag','ondrag')}} | Acionado quando um elemento ou seleção de texto está sendo arrastado. | -| {{event('dragend')}} | {{domxref('GlobalEventHandlers.ondragend','ondragend')}} | Acionado quando uma operação de arrastar está terminando (por eexmplo, ao soltar o botão do mouse ou pressionar a tecla esc). (Veja [Terminando um evento Drag](/pt-BR/docs/DragDrop/Drag_Operations#dragend).) | -| {{event('dragenter')}} | {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} | Acionado quando um elemento arrastável ou seleção de texto entra em um ponto de soltura (drop target). (Veja [Determinando Drop Targets](/pt-BR/docs/DragDrop/Drag_Operations#droptargets).) | -| {{event('dragexit')}} | {{domxref('GlobalEventHandlers.ondragexit','ondragexit')}} | Acionado quando um elemento não é mais o ponto de seleção imediata da operação drag. | -| {{event('dragleave')}} | {{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} | Acionado quando um elemento arrastável ou seleção de texto abandona um ponto de soltura (drop target) válido. | -| {{event('dragover')}} | {{domxref('GlobalEventHandlers.ondragover','ondragover')}} | Acionado quando um elemento ou seleção de texto está sendo arrastado sobre um ponto de soltura válido (a cada aproximadamente 100 milisegundos). | -| {{event('dragstart')}} | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | Acionado quando o usuário começa a arrastar um elemento válido ou seleção de texto. (Veja [Começando uma Operação Drag](/pt-BR/docs/DragDrop/Drag_Operations#dragstart).) | -| {{event('drop')}} | {{domxref('GlobalEventHandlers.ondrop','ondrop')}} | Acionado quando um elemento ou seleção de texto é solta em um ponto d soltura (drop target) válido. (Veja [Realizando um Drop](/pt-BR/docs/DragDrop/Drag_Operations#drop).) | +| Event | On Event Handler | Description | +| ---------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{event('drag')}} | {{domxref('GlobalEventHandlers.ondrag','ondrag')}} | Acionado quando um elemento ou seleção de texto está sendo arrastado. | +| {{event('dragend')}} | {{domxref('GlobalEventHandlers.ondragend','ondragend')}} | Acionado quando uma operação de arrastar está terminando (por eexmplo, ao soltar o botão do mouse ou pressionar a tecla esc). (Veja [Terminando um evento Drag](/pt-BR/docs/DragDrop/Drag_Operations#dragend).) | +| {{event('dragenter')}} | {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} | Acionado quando um elemento arrastável ou seleção de texto entra em um ponto de soltura (drop target). (Veja [Determinando Drop Targets](/pt-BR/docs/DragDrop/Drag_Operations#droptargets).) | +| {{event('dragexit')}} | {{domxref('GlobalEventHandlers.ondragexit','ondragexit')}} | Acionado quando um elemento não é mais o ponto de seleção imediata da operação drag. | +| {{event('dragleave')}} | {{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} | Acionado quando um elemento arrastável ou seleção de texto abandona um ponto de soltura (drop target) válido. | +| {{event('dragover')}} | {{domxref('GlobalEventHandlers.ondragover','ondragover')}} | Acionado quando um elemento ou seleção de texto está sendo arrastado sobre um ponto de soltura válido (a cada aproximadamente 100 milisegundos). | +| {{event('dragstart')}} | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | Acionado quando o usuário começa a arrastar um elemento válido ou seleção de texto. (Veja [Começando uma Operação Drag](/pt-BR/docs/DragDrop/Drag_Operations#dragstart).) | +| {{event('drop')}} | {{domxref('GlobalEventHandlers.ondrop','ondrop')}} | Acionado quando um elemento ou seleção de texto é solta em um ponto d soltura (drop target) válido. (Veja [Realizando um Drop](/pt-BR/docs/DragDrop/Drag_Operations#drop).) | Note que eventos `dragstart` e `dragend` não são acionados ao arrastar um arquivo vindo do sistema operacional para o navegador. @@ -59,13 +59,15 @@ Esta seção dispõe de um resumo das etapas básicas para adicionar a funcional Para fazer um elemento se tornar arrastável, é necessária a adição de um atributo [`draggable`](/pt-BR/docs/Web/HTML/Global_attributes#draggable) além da adição do manipulador de eventos global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}}, conforme descrito no exemplo a seguir -``` +```js function dragstart_handler(ev) { console.log("dragStart"); // Adiciona o id do elemento em questão ao objeto de transferência de dados (dataTransfer) ev.dataTransfer.setData("text/plain", ev.target.id); } +``` +```html

Este elemento é arrastável.

@@ -79,7 +81,7 @@ A aplicação é livre para incluir qualquer quantidade de dados do item em uma Cada {{domxref("DragEvent","evento drag")}} tem uma propriedade {{domxref("DragEvent.dataTransfer","dataTransfer")}} que _segura_ os dados do evento. Essa propridade (que é um objeto {{domxref("DataTransfer")}}) também tem um método para _gerenciar_ os dados do arraste (drag). O método {{domxref("DataTransfer.setData","setData()")}} é usado para adicionar um item aos dados do arraste, como demonstrado no exemplo a seguir. -``` +```js function dragstart_handler(ev) { // Adiciona os dados do arraste (drag) ev.dataTransfer.setData("text/plain", ev.target.id); @@ -94,7 +96,7 @@ Para uma lista de tipos de dados mais comuns utilizados pelo drag and drop (como Por padrão, o navegador provê uma imagem que aparece por trás do ponteiro do mouse durante uma operação de arraste. Entretanto, uma aplicação pode definir uma imagem customizada utilizando o método {{domxref("DataTransfer.setDragImage","setDragImage()")}} como demonstrado no exemplo a seguir. -``` +```js function dragstart_handler(ev) { // Cria uma imagem e então a utiliza como a "drag image". // NOTA: mude "example.gif" como uma imagem existente, caso contrário @@ -123,7 +125,7 @@ Durante a operação de arraste, os efeitos do arraste (drag) podem ser modifica O exemplo a seguir mostra como utilizar essa propriedade. -``` +```js function dragstart_handler(ev) { // Determina o efeito de arraste para copy ev.dataTransfer.dropEffect = "copy"; @@ -136,7 +138,7 @@ Veja [Efeitos do Arraste (Drag Effects)](/pt-BR/docs/Web/Guide/HTML/Drag_operati Por padrão, o navegador previne tudo que possa acontecer ao soltar alguma coisa em um elemento HTML. Para mudar esse comportamento de forma que um elemento se torne uma zona de soltura (d*rop zone)* ou que seja soltável _(droppable)_, o elemento precisa ter ambos os atributos {{domxref("GlobalEventHandlers.ondragover","ondragover")}} e {{domxref("GlobalEventHandlers.ondrop","ondrop")}}. O exemplo a seguir mostra como utilizar esses atributos e inclui manipuladores básicos de evento para cada um. -``` +```js function dragover_handler(ev) { ev.preventDefault(); // Define o dropEffect para ser do tipo move @@ -163,7 +165,7 @@ O manipulador do evento {{event("drop")}} é livre para processar os dados do ar O exemplo a seguir mostra o manipulador de soltura (drop handler) pegando o id do elemento de origem atráves dos dados de drag (drag data) e então usando o id para mover o elemento de sua origem para o elemento de soltura (drop element). -``` +```js function dragstart_handler(ev) { // Adiciona o id do elemento alvo para o objeto de transferência de dados ev.dataTransfer.setData("text/plain", ev.target.id); diff --git a/files/pt-br/web/api/htmlcanvaselement/getcontext/index.md b/files/pt-br/web/api/htmlcanvaselement/getcontext/index.md index ff8916e3cbb755..ee7cf5a6b15734 100644 --- a/files/pt-br/web/api/htmlcanvaselement/getcontext/index.md +++ b/files/pt-br/web/api/htmlcanvaselement/getcontext/index.md @@ -31,9 +31,7 @@ canvas.getContext(contextType, contextAttributes); - : Você pode usar alguns atributos de contexto quando criar o seu contexto de renderização, por exemplo: ```js - canvas.getContext('webgl', - { antialias: false, - depth: false }); + canvas.getContext("webgl", { antialias: false, depth: false }); ``` Atributos de contexto 2d: @@ -74,24 +72,20 @@ Dado este elemento {{HTMLElement("canvas")}}: Você pega um contexto `2d` do canvas com o código a seguir: ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); console.log(ctx); // CanvasRenderingContext2D { ... } ``` Agora você tem [contexto de renderização 2d](/pt-BR/docs/Web/API/CanvasRenderingContext2D) para o canvas e você pode desenhar nele. -## Specifications +## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------ | -| {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML WHATWG')}} | Nenhuma mudança desde o ultimo 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 do {{SpecName('HTML WHATWG')}} contendo a definição inicial. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLCanvasElement.getContext")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/htmlcanvaselement/height/index.md b/files/pt-br/web/api/htmlcanvaselement/height/index.md index 1fcf9538ffafb5..434c41b1bdfe3f 100644 --- a/files/pt-br/web/api/htmlcanvaselement/height/index.md +++ b/files/pt-br/web/api/htmlcanvaselement/height/index.md @@ -27,21 +27,17 @@ Dado este elemento {{HTMLElement("canvas")}}: Você pode capturar a altura do canvas com o seguinte código: ```js -var canvas = document.getElementById('canvas'); +var canvas = document.getElementById("canvas"); console.log(canvas.height); // 300 ``` ## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML WHATWG')}} | No change since the latest snapshot, {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5.1')}} | | -| {{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5 W3C')}} | Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLCanvasElement.height")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/htmlcanvaselement/index.md b/files/pt-br/web/api/htmlcanvaselement/index.md index 5b010a68b179ee..775878eb5c1872 100644 --- a/files/pt-br/web/api/htmlcanvaselement/index.md +++ b/files/pt-br/web/api/htmlcanvaselement/index.md @@ -39,18 +39,13 @@ _Inherits methods from its parent,_ _{{domxref("HTMLElement")}}._ - {{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}} - : Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified `name`. If `type` is not specified, the image type is `image/png`. -## Specifications +## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}} | {{Spec2('Media Capture DOM Elements')}} | Adds the method `captureStream()`. | -| {{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}} | {{Spec2('HTML WHATWG')}} | The method `getContext()` now returns a {{domxref("RenderingContext")}} rather than an opaque `object`. The methods `probablySupportsContext()`, `setContext()` and `transferControlToProxy()`have been added. | -| {{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')}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLCanvasElement")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md b/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md index 54087873003bb4..fb22b6b172aa28 100644 --- a/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md +++ b/files/pt-br/web/api/htmlcanvaselement/todataurl/index.md @@ -40,7 +40,7 @@ Dado este elemento {{HTMLElement("canvas")}}: Você poderá capturar a data-URL do canvas com as seguintes linhas: ```js -var canvas = document.getElementById('canvas'); +var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL(); console.log(dataURL); // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby @@ -50,10 +50,10 @@ console.log(dataURL); ### Defindo a qualidade de imagens jpeg ```js -var fullQuality = canvas.toDataURL('image/jpeg', 1.0); +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); +var mediumQuality = canvas.toDataURL("image/jpeg", 0.5); +var lowQuality = canvas.toDataURL("image/jpeg", 0.1); ``` ### Exemplo: Alterando imagens dinamicamente @@ -69,24 +69,28 @@ Você poderá utilizar esta técnica em associação com os eventos do mouse par #### JavaScript ```js -window.addEventListener('load', removeColors); +window.addEventListener("load", removeColors); function showColorImg() { - this.style.display = 'none'; - this.nextSibling.style.display = 'inline'; + this.style.display = "none"; + this.nextSibling.style.display = "inline"; } function showGrayImg() { - this.previousSibling.style.display = 'inline'; - this.style.display = 'none'; + this.previousSibling.style.display = "inline"; + this.style.display = "none"; } function removeColors() { - var aImages = document.getElementsByClassName('grayscale'), - 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 aImages = document.getElementsByClassName("grayscale"), + 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++ + ) { oColorImg = aImages[nImgId]; nWidth = oColorImg.offsetWidth; nHeight = oColorImg.offsetHeight; @@ -97,7 +101,10 @@ function removeColors() { 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; + 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(); @@ -113,11 +120,11 @@ function removeColors() { ## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML WHATWG')}} | No change since the latest 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 of the {{SpecName('HTML WHATWG')}} containing the initial definition. | +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------ | +| {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}} | {{Spec2('HTML WHATWG')}} | No change since the latest 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 of the {{SpecName('HTML WHATWG')}} containing the initial definition. | ## Compatibilidade com navegadores diff --git a/files/pt-br/web/api/htmldivelement/index.md b/files/pt-br/web/api/htmldivelement/index.md index 927f3bfe143ab3..ed0f619558ad94 100644 --- a/files/pt-br/web/api/htmldivelement/index.md +++ b/files/pt-br/web/api/htmldivelement/index.md @@ -13,8 +13,8 @@ A interface `HTMLDivElement` fornece propriedades especiais ( além da interface _As propriedades são herdadas de seu pai, {{domxref("HTMLElement")}}._ -| Nome | Tipo | Descrição | -| -------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Nome | Tipo | Descrição | +| ------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `align` | {{domxref("DOMString")}} | Propriedade enumerada indicando alinhamento dos conteúdos do elemento, respeitando ao contexto geral. Os valores possíveis são `"left"`, `"right"`, `"justify"`, e`"center"`. | ## Métodos @@ -23,16 +23,11 @@ _Nenhum método específico; os métodos são herdados de seu pai, {{domxref ("H ## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ | -| {{SpecName('HTML WHATWG', "grouping-content.html#the-div-element", "HTMLDivElement")}} | {{Spec2('HTML WHATWG')}} | No change from {{SpecName("HTML5 W3C")}}. | -| {{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}} | {{Spec2('HTML5 W3C')}} | No change from {{SpecName("DOM2 HTML")}}. | -| {{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}} | {{Spec2('DOM2 HTML')}} | No change from {{SpecName("DOM1")}}. | -| {{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}} | {{Spec2('DOM1')}} | Initial definition. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLDivElement")}} +{{Compat}} ## Ver também diff --git a/files/pt-br/web/api/htmlelement/change_event/index.md b/files/pt-br/web/api/htmlelement/change_event/index.md index b34a342f1b308e..e8edb599d9d522 100644 --- a/files/pt-br/web/api/htmlelement/change_event/index.md +++ b/files/pt-br/web/api/htmlelement/change_event/index.md @@ -23,8 +23,10 @@ Veja a página do [manipulador de eventos do DOM](/pt-BR/docs/Web/Guide/Events/E Veja a documentação do evento {{event("change")}} para informações sobre o evento. -## Especificação +## Especificações -| Especificação | Status | Comentários | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} + +## Compatibilidade com navegadores + +{{Compat}} diff --git a/files/pt-br/web/api/htmlelement/click/index.md b/files/pt-br/web/api/htmlelement/click/index.md index 8c529c6510ae0f..0ea899d644f8c3 100644 --- a/files/pt-br/web/api/htmlelement/click/index.md +++ b/files/pt-br/web/api/htmlelement/click/index.md @@ -15,12 +15,10 @@ Quando clique é usado com elementos que o suportam (por exemplo, um dos {{HTMLE elt.click() ``` -## Especificação +## Especificações -| Specification | Status | Comentário | -| ---------------------------------------------------------------- | ---------------------------- | ------------------ | -| {{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} | {{Spec2('DOM2 HTML')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLElement.click")}} +{{Compat}} diff --git a/files/pt-br/web/api/htmlelement/contenteditable/index.md b/files/pt-br/web/api/htmlelement/contenteditable/index.md index b5f799b1e509eb..a07fc0d769ba3a 100644 --- a/files/pt-br/web/api/htmlelement/contenteditable/index.md +++ b/files/pt-br/web/api/htmlelement/contenteditable/index.md @@ -19,15 +19,13 @@ Você pode usar a propriedade {{domxref( "HTMLElement.isContentEditable")}} para editable = element.contentEditable element.contentEditable= "true" ``` -## Especificação +## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ | -| {{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}} | {{Spec2('HTML WHATWG')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLElement.contentEditable")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/htmlelement/index.md b/files/pt-br/web/api/htmlelement/index.md index 93b39c98614e94..2a3dc02a4658b2 100644 --- a/files/pt-br/web/api/htmlelement/index.md +++ b/files/pt-br/web/api/htmlelement/index.md @@ -104,19 +104,13 @@ _Inherits methods from its parent, {{domxref("Element")}}._ - {{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}} - : Makes the spell checker runs on the element. -## Specifications +## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{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. | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLElement")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/htmlelement/innertext/index.md b/files/pt-br/web/api/htmlelement/innertext/index.md index 8af2db4772e504..cccf52f4da912b 100644 --- a/files/pt-br/web/api/htmlelement/innertext/index.md +++ b/files/pt-br/web/api/htmlelement/innertext/index.md @@ -12,15 +12,13 @@ original_slug: Web/API/Node/innerText {{domxref("Node.textContent")}} é uma alternativa similar, embora existam diferenças significativas entre as duas. -## Especificação +## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}} | {{Spec2('HTML WHATWG')}} | Introduzida, baseado no [rascunho da especifição de innerText](https://github.com/rocallahan/innerText-spec). Ver [whatwg/html#465](https://github.com/whatwg/html/issues/465) e [whatwg/compat#5](https://github.com/whatwg/compat/issues/5) para histórico. | +{{Specifications}} -## Compatibilidade de navegadores +## Compatibilidade com navegadores -{{Compat("api.HTMLElement.innerText")}} +{{Compat}} ## Ver também diff --git a/files/pt-br/web/api/htmlelement/input_event/index.md b/files/pt-br/web/api/htmlelement/input_event/index.md index a69482b90bd933..7c2bfff295ca44 100644 --- a/files/pt-br/web/api/htmlelement/input_event/index.md +++ b/files/pt-br/web/api/htmlelement/input_event/index.md @@ -23,16 +23,20 @@ O evento `input` do DOM é disparado sincronicamente quando o valor de um elemen ## Propriedades -| Propriedade | Tipo | Descrição | -| ------------------------------------- | ------------------------------------ | -------------------------------------------------- | +| Propriedade | Tipo | Descrição | +| ------------------------------- | -------------------------- | -------------------------------------------------- | | `target` {{readonlyInline}} | {{domxref("EventTarget")}} | O alvo do evento (o alvo mais alto na árvore DOM). | -| `type` {{readonlyInline}} | {{domxref("DOMString")}} | Tipo do evento. | -| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Se o evento borbulha ou não. | -| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Se o evento é cancelável, ou não. | +| `type` {{readonlyInline}} | {{domxref("DOMString")}} | Tipo do evento. | +| `bubbles` {{readonlyInline}} | {{jsxref("Boolean")}} | Se o evento borbulha ou não. | +| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}} | Se o evento é cancelável, ou não. | + +## Especificações + +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLElement.input_event")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/htmlelement/lang/index.md b/files/pt-br/web/api/htmlelement/lang/index.md index d94ddbb1d2c3e1..bc0c04f786a60e 100644 --- a/files/pt-br/web/api/htmlelement/lang/index.md +++ b/files/pt-br/web/api/htmlelement/lang/index.md @@ -32,8 +32,10 @@ if (document.documentElement.lang === "en") { } ``` -## Especificação +## Especificações -| Especificação | Status | Comentário | -| ---------------------------------------------------------------------------- | ---------------------------- | ---------- | -| {{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'lang')}} | {{Spec2('DOM2 HTML')}} | | +{{Specifications}} + +## Compatibilidade com navegadores + +{{Compat}} diff --git a/files/pt-br/web/api/htmlelement/offsetheight/index.md b/files/pt-br/web/api/htmlelement/offsetheight/index.md index 7b96d4c81d6dd4..a18a632fdd1dae 100644 --- a/files/pt-br/web/api/htmlelement/offsetheight/index.md +++ b/files/pt-br/web/api/htmlelement/offsetheight/index.md @@ -27,19 +27,13 @@ _intElemOffsetHeight_ is a variable storing an integer corresponding to the offs The example image above shows a scrollbar and an offsetHeight which fits on the window. However, non-scrollable elements may have large offsetHeight values, much larger than the visible content. These elements are typically contained within scrollable elements; consequently these non-scrollable elements may be completely or partly invisible, depending on the scrollTop setting of the scrollable container. -## Specification +## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}} | {{Spec2('CSSOM View')}} | | - -### Notes - -`offsetHeight` is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box height. +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLElement.offsetHeight")}} +{{Compat}} ## See Also diff --git a/files/pt-br/web/api/htmlelement/offsetleft/index.md b/files/pt-br/web/api/htmlelement/offsetleft/index.md index a2bd2464e5e0f8..28cdd0538a07b1 100644 --- a/files/pt-br/web/api/htmlelement/offsetleft/index.md +++ b/files/pt-br/web/api/htmlelement/offsetleft/index.md @@ -55,15 +55,13 @@ Esse exemplo mostra uma frase 'longa' envolvida por uma div com uma borda azul, ``` -## Especificação +## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------- | -| {{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}} | {{Spec2('CSSOM View')}} | | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLElement.offsetLeft")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/htmlelement/offsetparent/index.md b/files/pt-br/web/api/htmlelement/offsetparent/index.md index ffe541c26468d2..2c7ca08e0695dd 100644 --- a/files/pt-br/web/api/htmlelement/offsetparent/index.md +++ b/files/pt-br/web/api/htmlelement/offsetparent/index.md @@ -13,12 +13,10 @@ parentObj = element.offsetParent; - _parentObj_ é uma referência de objeto ao elemento no qual o elemento corrente é offset. -## Especificação +## Especificações -| Specification | Status | Comment | -| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}} | {{Spec2('CSSOM View')}} | | +{{Specifications}} -## Compatibilidade do Navegador +## Compatibilidade com navegadores -{{Compat("api.HTMLElement.offsetParent")}} +{{Compat}} diff --git a/files/pt-br/web/api/htmlelement/offsettop/index.md b/files/pt-br/web/api/htmlelement/offsettop/index.md index 217e300d113882..6b6f6289d0ee28 100644 --- a/files/pt-br/web/api/htmlelement/offsettop/index.md +++ b/files/pt-br/web/api/htmlelement/offsettop/index.md @@ -29,16 +29,10 @@ if (topPos > 10) { } ``` -## Especificação +## Especificações -| Especificação | Status | Comentário | -| -------------------------------------------------------------------------------------------- | -------------------------------- | ---------- | -| {{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}} | {{Spec2('CSSOM View')}} | | +{{Specifications}} -## Compatibilidade do navegador +## Compatibilidade com navegadores -{{Compat("api.HTMLElement.offsetTop")}} - -Em conformidade com a especificação, essa propriedade retornará `null` no Webkit se o elemento não estiver sendo exibido (o `style.display` desse elemento ou ancestral estiver como `"none"`) ou se o `style.position` do elemento estiver setado como `"fixed"`. - -Essa propriedade retornará `null` no Internet Explorer (9) se o `style.position` do elemento estiver setado como `"fixed"`. (Ter `display:none` não afeta esse browser.) +{{Compat}} diff --git a/files/pt-br/web/api/htmlelement/offsetwidth/index.md b/files/pt-br/web/api/htmlelement/offsetwidth/index.md index 1b4695e4666ebb..a430fafe80c153 100644 --- a/files/pt-br/web/api/htmlelement/offsetwidth/index.md +++ b/files/pt-br/web/api/htmlelement/offsetwidth/index.md @@ -21,19 +21,13 @@ var offsetWidth =element.offsetWidth; ![Image:Dimensions-offset.png](/@api/deki/files/186/=Dimensions-offset.png) -## Especificação +## Especificações -| Especificação | Situação | Comentário | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------- | -| {{SpecName('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}} | {{Spec2('CSSOM View')}} | | - -### Notas - -`offsetWidth` é uma propriedade do modelo de objeto DHTML que foi primeiro apresentado pelo MSIE. Algumas vezes referenciado como as dimensões físicas/gráficas do elemento, ou a largura do border-box. +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLElement.offsetWidth")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/htmlformelement/submit_event/index.md b/files/pt-br/web/api/htmlformelement/submit_event/index.md index efab9489277429..a78700f59f5311 100644 --- a/files/pt-br/web/api/htmlformelement/submit_event/index.md +++ b/files/pt-br/web/api/htmlformelement/submit_event/index.md @@ -1,5 +1,5 @@ --- -title: 'HTMLFormElement: submit event' +title: "HTMLFormElement: submit event" slug: Web/API/HTMLFormElement/submit_event --- @@ -57,9 +57,9 @@ function logSubmit(event) { event.preventDefault(); } -const form = document.getElementById('form'); -const log = document.getElementById('log'); -form.addEventListener('submit', logSubmit); +const form = document.getElementById("form"); +const log = document.getElementById("log"); +form.addEventListener("submit", logSubmit); ``` ### Resultado @@ -70,7 +70,7 @@ form.addEventListener('submit', logSubmit); {{Specifications}} -## Compatibilidade com os navegadores +## Compatibilidade com navegadores {{Compat}} diff --git a/files/pt-br/web/api/htmlinputelement/index.md b/files/pt-br/web/api/htmlinputelement/index.md index 188c47e4f94cb0..67e820871d6c13 100644 --- a/files/pt-br/web/api/htmlinputelement/index.md +++ b/files/pt-br/web/api/htmlinputelement/index.md @@ -102,6 +102,7 @@ Algumas propriedades se aplicam apenas a tipos de elemento de entrada que suport - {{domxref("HTMLInputElement.autofocus", "autofocus")}} - : `boolean`: **Retorna / Define** o atributo [`autofocus`](/pt-BR/docs/Web/HTML/Element/Input#autofocus) do elemento, que especifica que um controle de formulário deve ter foco de entrada quando a página é carregada, a menos que o usuário a substitua, por exemplo, digitando um controle diferente. Apenas um elemento de formulário em um documento pode ter o atributo [`autofocus`](/pt-BR/docs/Web/HTML/Element/Input#autofocus). + - {{domxref("HTMLInputElement.disabled", "disabled")}} - : `boolean`: **Retorna / Define** o atributo [`disabled`](/pt-BR/docs/Web/HTML/Element/Input#disabled) do elemento, indicando que o controle não está disponível para interação. Os valores de entrada não serão enviados com o formulário. Veja também [`readonly`](/pt-BR/docs/Web/HTML/Element/Input#readonly). diff --git a/files/pt-br/web/api/htmlinputelement/select/index.md b/files/pt-br/web/api/htmlinputelement/select/index.md index 5d4083952d5b32..12355ab60b34dc 100644 --- a/files/pt-br/web/api/htmlinputelement/select/index.md +++ b/files/pt-br/web/api/htmlinputelement/select/index.md @@ -13,11 +13,13 @@ O método **`HTMLInputElement.select()`** seleciona todo o texto em um elemento element.select() ``` -## Especificação +## Especificações -| Especificação | Estado | Comentário | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- | -| {{SpecName('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}} | {{Spec2('HTML WHATWG')}} | | +{{Specifications}} + +## Compatibilidade com navegadores + +{{Compat}} ## Notas diff --git a/files/pt-br/web/api/htmlinputelement/setselectionrange/index.md b/files/pt-br/web/api/htmlinputelement/setselectionrange/index.md index 608115382d5531..39b14388f297e9 100644 --- a/files/pt-br/web/api/htmlinputelement/setselectionrange/index.md +++ b/files/pt-br/web/api/htmlinputelement/setselectionrange/index.md @@ -31,23 +31,23 @@ inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectio The following code: ```html - + - - -JS Bin - - - -

-

- + input.focus(); + input.setSelectionRange(2, 5); + } + + + +

+

+ ``` @@ -55,17 +55,13 @@ will produce the following: ![example.png](/@api/deki/files/6104/=example.png) -## Specifications +## Especificações -| Specification | Status | Comment | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ | -| {{SpecName("HTML WHATWG", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}} | {{Spec2("HTML WHATWG")}} | No change | -| {{SpecName("HTML5.1", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}} | {{Spec2("HTML5.1")}} | No change | -| {{SpecName("HTML5 W3C", "forms.html#dom-textarea/input-setselectionrange", "HTMLInputElement.setSelectionRange()")}} | {{Spec2("HTML5 W3C")}} | Initial definition | +{{Specifications}} -## Browser compatibility +## Compatibilidade com navegadores -{{Compat("api.HTMLInputElement.setSelectionRange")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/htmlmediaelement/abort_event/index.md b/files/pt-br/web/api/htmlmediaelement/abort_event/index.md index 3ed103617e840a..23246dadcf1ad2 100644 --- a/files/pt-br/web/api/htmlmediaelement/abort_event/index.md +++ b/files/pt-br/web/api/htmlmediaelement/abort_event/index.md @@ -23,11 +23,11 @@ O evento **`abort`** é disparado quando o carregamento de um recurso foi interr ## Propriedades -| Propriedade | Tipo | Descrição | -| ------------------------------------- | -------------------------------------- | -------------------------------------------------------------------------- | -| `target` {{readOnlyInline}} | `{{domxref("EventTarget")}}` | O evento alvo (O mais elevado da árvore DOM). | -| `type` {{readOnlyInline}} | `{{domxref("DOMString")}}` | O tipo de evento. | -| `bubbles` {{readOnlyInline}} | `{{domxref("Boolean")}}` | O evento é normalmente _bubble_? | -| `cancelable` {{readOnlyInline}} | `{{domxref("Boolean")}}` | É possível cancelar o evento? | +| Propriedade | Tipo | Descrição | +| ------------------------------- | ---------------------------- | ------------------------------------------------------------- | +| `target` {{readOnlyInline}} | `{{domxref("EventTarget")}}` | O evento alvo (O mais elevado da árvore DOM). | +| `type` {{readOnlyInline}} | `{{domxref("DOMString")}}` | O tipo de evento. | +| `bubbles` {{readOnlyInline}} | `{{domxref("Boolean")}}` | O evento é normalmente _bubble_? | +| `cancelable` {{readOnlyInline}} | `{{domxref("Boolean")}}` | É possível cancelar o evento? | | `view` {{readOnlyInline}} | `{{domxref("WindowProxy")}}` | `{{domxref("document.defaultView")}}` (`window` do documento) | -| `detail` {{readOnlyInline}} | `long` (`float`) | 0. | +| `detail` {{readOnlyInline}} | `long` (`float`) | 0. | diff --git a/files/pt-br/web/api/htmloptionelement/index.md b/files/pt-br/web/api/htmloptionelement/index.md index a2037863ac79f7..27491a2190c17f 100644 --- a/files/pt-br/web/api/htmloptionelement/index.md +++ b/files/pt-br/web/api/htmloptionelement/index.md @@ -13,16 +13,16 @@ The **`HTMLOptionElement`** interface represents {{HTMLElement("option")}} eleme _Inherits properties from its parent, {{domxref("HTMLElement")}}._ -| Name | Type | Description | -| ------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `defaultSelected` | {{domxref("Boolean")}} | Contains the initial value of the [`selected`](/pt-BR/docs/Web/HTML/Element/option#selected) HTML attribute, indicating whether the option is selected by default or not. | -| `disabled` | {{domxref("Boolean")}} | Reflects the value of the [`disabled`](/pt-BR/docs/Web/HTML/Element/option#disabled) HTML attribute, which indicates that the option is unavailable to be selected. An option can also be disabled if it is a child of an {{HTMLElement("optgroup")}} element that is disabled. | -| `form`{{readonlyInline}} | {{domxref("HTMLFormElement")}} | If the option is a descendent of a {{HTMLElement("select")}} element, then this property has the same value as the `form` property of the corresponding {{DomXref("HTMLSelectElement")}} object; otherwise, it is `null`. | -| `index`{{readonlyInline}} | `long` | The position of the option within the list of options it belongs to, in tree-order. If the option is not part of a list of options, like when it is part of the {{HTMLElement("datalist")}} element, the value is `0`. | -| `label` | {{domxref("DOMString")}} | Reflects the value of the [`label`](/pt-BR/docs/Web/HTML/Element/option#label) HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's text content. | -| `selected` | {{domxref("Boolean")}} | Indicates whether the option is currently selected. | -| `text` | {{domxref("DOMString")}} | Contains the text content of the element. | -| `value` | {{domxref("DOMString")}} | Reflects the value of the [`value`](/pt-BR/docs/Web/HTML/Element/option#value) HTML attribute, if it exists; otherwise reflects value of the {{domxref("Node.textContent")}} property. | +| Name | Type | Description | +| ------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `defaultSelected` | {{domxref("Boolean")}} | Contains the initial value of the [`selected`](/pt-BR/docs/Web/HTML/Element/option#selected) HTML attribute, indicating whether the option is selected by default or not. | +| `disabled` | {{domxref("Boolean")}} | Reflects the value of the [`disabled`](/pt-BR/docs/Web/HTML/Element/option#disabled) HTML attribute, which indicates that the option is unavailable to be selected. An option can also be disabled if it is a child of an {{HTMLElement("optgroup")}} element that is disabled. | +| `form`{{readonlyInline}} | {{domxref("HTMLFormElement")}} | If the option is a descendent of a {{HTMLElement("select")}} element, then this property has the same value as the `form` property of the corresponding {{DomXref("HTMLSelectElement")}} object; otherwise, it is `null`. | +| `index`{{readonlyInline}} | `long` | The position of the option within the list of options it belongs to, in tree-order. If the option is not part of a list of options, like when it is part of the {{HTMLElement("datalist")}} element, the value is `0`. | +| `label` | {{domxref("DOMString")}} | Reflects the value of the [`label`](/pt-BR/docs/Web/HTML/Element/option#label) HTML attribute, which provides a label for the option. If this attribute isn't specifically set, reading it returns the element's text content. | +| `selected` | {{domxref("Boolean")}} | Indicates whether the option is currently selected. | +| `text` | {{domxref("DOMString")}} | Contains the text content of the element. | +| `value` | {{domxref("DOMString")}} | Reflects the value of the [`value`](/pt-BR/docs/Web/HTML/Element/option#value) HTML attribute, if it exists; otherwise reflects value of the {{domxref("Node.textContent")}} property. | ## Methods @@ -31,18 +31,13 @@ _Inherits methods from its parent, {{domxref("HTMLElement")}}._ - Option() - : Is a constructor creating an `HTMLOptionElement` object. It has four values: the text to display, `text`, the value associated, `value`, the value of `defaultSelected`, and the value of `selected`. The last three values are optional. -## Specifications +## Especificações -| Specification | Status | Comment | -| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "#htmloptionelement", "HTMLOptionElement")}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}} | {{Spec2('HTML5 W3C')}} | A constructor, `Option()`, has been added. The `form` property can be the `null` value. | -| {{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}} | {{Spec2('DOM2 HTML')}} | The `selected` property changed its meaning: it now indicates if the option is currently selected and no longer if it was initally selected. The `defaultSelected` property is no longer read-only. | -| {{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}} | {{Spec2('DOM1')}} | Initial definition | +{{Specifications}} ## Compatibilidade com navegadores -{{Compat("api.HTMLOptionElement")}} +{{Compat}} ## See also diff --git a/files/pt-br/web/api/htmloptionelement/option/index.md b/files/pt-br/web/api/htmloptionelement/option/index.md index 9365f123a4b801..a0b790d37221d0 100644 --- a/files/pt-br/web/api/htmloptionelement/option/index.md +++ b/files/pt-br/web/api/htmloptionelement/option/index.md @@ -29,20 +29,20 @@ var optionElementReference = new Option(text, value, defaultSelected, selected); ### Adicionando novas tags options ```js - /* assumindo que temos este HTML +/* assumindo que temos este HTML */ -var s = document.getElementById('s'); +var s = document.getElementById("s"); var options = [Quatro, Cinco, Seis]; -options.forEach(function(elemento, chave) { - s.appendChild(new Option(elemento, chave)); +options.forEach(function (elemento, chave) { + s.appendChild(new Option(elemento, chave)); }); - /* Resultado +/* Resultado */ -var s = document.getElementById('s'); -var options = [ 'zero', 'um', 'dois' ]; +var s = document.getElementById("s"); +var options = ["zero", "um", "dois"]; -options.forEach(function(elemento, chave) { - if (elemento == 'zero') { +options.forEach(function (elemento, chave) { + if (elemento == "zero") { s[s.options.length] = new Option(elemento, s.options.length, false, false); } - if (elemento == 'um') { + if (elemento == "um") { s[s.options.length] = new Option(elemento, s.options.length, true, false); // Adicionando atributo "selected" } - if (elemento == 'dois') { + if (elemento == "dois") { s[s.options.length] = new Option(elemento, s.options.length, false, true); // Apenas irá selecionar a opção na visualização } }); @@ -85,8 +85,10 @@ options.forEach(function(elemento, chave) { */ ``` -## Especificação +## Especificações + +{{Specifications}} + +## Compatibilidade com navegadores -| Especificação | Status | Comentário | -| ----------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ---------- | -| [HTML5 The definition of 'Option' in that specification.](https://www.w3.org/TR/2012/WD-html5-20121025/the-option-element.html#dom-option) | Recomendado | | +{{Compat}} diff --git a/files/pt-br/web/api/htmlselectelement/checkvalidity/index.md b/files/pt-br/web/api/htmlselectelement/checkvalidity/index.md index 5928d5062f1884..03a1bdba843e1a 100644 --- a/files/pt-br/web/api/htmlselectelement/checkvalidity/index.md +++ b/files/pt-br/web/api/htmlselectelement/checkvalidity/index.md @@ -15,14 +15,11 @@ var resultado = selectElt.checkValidity(); ## Especificações -| Especificação | Status | Comentário | -| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', '#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}} | {{Spec2('HTML WHATWG')}} | No change since the latest snapshot, {{SpecName('HTML5 W3C')}}. | -| {{SpecName('HTML5 W3C', 'forms.html#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}} | {{Spec2('HTML5 W3C')}} | Initial definition, snapshot of {{SpecName('HTML WHATWG')}} | +{{Specifications}} -## Browser compatibilidade +## Compatibilidade com navegadores -{{Compat("api.HTMLSelectElement.checkValidity")}} +{{Compat}} ## Veja também diff --git a/files/pt-br/web/api/htmlselectelement/index.md b/files/pt-br/web/api/htmlselectelement/index.md index c7516bf29ce3eb..71f7d57569a656 100644 --- a/files/pt-br/web/api/htmlselectelement/index.md +++ b/files/pt-br/web/api/htmlselectelement/index.md @@ -82,29 +82,24 @@ _This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{dom */ -var select = document.getElementById('s'); +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 +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 ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
- - -
- - - - - - - - - - - -
- - - -
- - - -
-
- - -
-
- -
-
- -
-
- -
-
-
-
-
-
    -
-
+ + +

IndexedDB Demo: storing blobs, e-publication example

+
+

Works and tested with:

+
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ +
+ + +
+
+ +
+ + + + + + + + + + + +
+ + + +
+ + + +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+
+
    +
    ``` ### CSS Content @@ -807,20 +826,22 @@ input { ```js (function () { var COMPAT_ENVS = [ - ['Firefox', ">= 16.0"], - ['Google Chrome', - ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"] + ["Firefox", ">= 16.0"], + [ + "Google Chrome", + ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support", + ], ]; - var compat = $('#compat'); + var compat = $("#compat"); compat.empty(); compat.append(''); - COMPAT_ENVS.forEach(function(val, idx, array) { - $('#compat-list').append('
  • ' + val[0] + ': ' + val[1] + '
    • '); + COMPAT_ENVS.forEach(function (val, idx, array) { + $("#compat-list").append("
  • " + val[0] + ": " + val[1] + "
    • "); }); - const DB_NAME = 'mdn-demo-indexeddb-epublications'; + 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'; + const DB_STORE_NAME = "publications"; var db; @@ -843,12 +864,14 @@ input { 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 }); + 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 }); }; } @@ -862,9 +885,9 @@ input { } function clearObjectStore(store_name) { - var store = getObjectStore(DB_STORE_NAME, 'readwrite'); + var store = getObjectStore(DB_STORE_NAME, "readwrite"); var req = store.clear(); - req.onsuccess = function(evt) { + req.onsuccess = function (evt) { displayActionSuccess("Store cleared"); displayPubList(store); }; @@ -876,10 +899,9 @@ input { function getBlob(key, store, success_callback) { var req = store.get(key); - req.onsuccess = function(evt) { + req.onsuccess = function (evt) { var value = evt.target.result; - if (value) - success_callback(value.blob); + if (value) success_callback(value.blob); }; } @@ -889,12 +911,12 @@ input { function displayPubList(store) { console.log("displayPubList"); - if (typeof store == 'undefined') - store = getObjectStore(DB_STORE_NAME, 'readonly'); + if (typeof store == "undefined") + store = getObjectStore(DB_STORE_NAME, "readonly"); - var pub_msg = $('#pub-msg'); + var pub_msg = $("#pub-msg"); pub_msg.empty(); - var pub_list = $('#pub-list'); + var pub_list = $("#pub-list"); pub_list.empty(); // Resetting the iframe so that it doesn't display previous content newViewerFrame(); @@ -905,18 +927,21 @@ input { // 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('

    There are ' + evt.target.result + - ' record(s) in the object store.

    '); + req.onsuccess = function (evt) { + pub_msg.append( + "

    There are " + + evt.target.result + + " record(s) in the object store.

    ", + ); }; - req.onerror = function(evt) { + req.onerror = function (evt) { console.error("add error", this.error); displayActionFailure(this.error); }; var i = 0; req = store.openCursor(); - req.onsuccess = function(evt) { + req.onsuccess = function (evt) { var cursor = evt.target.result; // If the cursor is pointing at something, ask for the data @@ -925,21 +950,31 @@ input { req = store.get(cursor.key); req.onsuccess = function (evt) { var value = evt.target.result; - var list_item = $('
  • ' + - '[' + cursor.key + '] ' + - '(biblioid: ' + value.biblioid + ') ' + - value.title + - '
    • '); - if (value.year != null) - list_item.append(' - ' + value.year); - - if (value.hasOwnProperty('blob') && - typeof value.blob != 'undefined') { + var list_item = $( + "
  • " + + "[" + + cursor.key + + "] " + + "(biblioid: " + + value.biblioid + + ") " + + value.title + + "
    • ", + ); + if (value.year != null) list_item.append(" - " + value.year); + + if ( + value.hasOwnProperty("blob") && + typeof value.blob != "undefined" + ) { var link = $('File'); - link.on('click', function() { return false; }); - link.on('mouseenter', function(evt) { - setInViewer(evt.target.getAttribute('href')); }); - list_item.append(' / '); + 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"); @@ -959,9 +994,9 @@ input { } function newViewerFrame() { - var viewer = $('#pub-viewer'); + var viewer = $("#pub-viewer"); viewer.empty(); - var iframe = $('