diff options
Diffstat (limited to 'files/pt-pt/web/api')
105 files changed, 0 insertions, 23366 deletions
diff --git a/files/pt-pt/web/api/ambient_light_events/index.html b/files/pt-pt/web/api/ambient_light_events/index.html deleted file mode 100644 index 0605b2098a..0000000000 --- a/files/pt-pt/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Eventos de Luz Ambiente -slug: Web/API/Ambient_Light_Events -tags: - - Luz Ambiente -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Eventos_de_Luz_Ambiente ---- -<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div> - -<p>Os eventos de luz ambiente são uma maneira prática de tornar uma página da Web ou um aplicação ciente de qualquer alteração na intensidade da luz. Isto permite-lhes reagir a essa alteração, por exemplo, alterando o contraste da cor da interface do utilizador (IU) ou alterando a exposição necessária para tirar uma fotografia.</p> - -<h2 id="Eventos_de_Luz">Eventos de Luz</h2> - -<p>When the light sensor of a device detects a change in the light level, it notifies the browser of that change. When the browser gets such a notification, it fires a {{domxref("DeviceLightEvent")}} event that provides information about the exact light intensity.</p> - -<p>This event can be captured at the <code>window</code> object level by using the {{domxref("EventTarget.addEventListener","addEventListener")}} method (using the {{event("devicelight")}} event name) or by attaching an event handler to the {{domxref("window.ondevicelight")}} property.</p> - -<p>Once captured, the event object gives access to the light intensity expressed in <a href="http://en.wikipedia.org/wiki/Lux">lux</a> through the {{domxref("DeviceLightEvent.value")}} property.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js">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'); -} -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("AmbientLight", "", "Ambient Light Events")}}</td> - <td>{{Spec2("AmbientLight")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - - - -<p>{{Compat("api.DeviceLightEvent")}}</p> - -<p> </p> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li>{{domxref("DeviceLightEvent")}}</li> - <li>{{event("devicelight")}}</li> -</ul> diff --git a/files/pt-pt/web/api/animation/index.html b/files/pt-pt/web/api/animation/index.html deleted file mode 100644 index 3921533613..0000000000 --- a/files/pt-pt/web/api/animation/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Animation -slug: Web/API/Animation -tags: - - API - - Animations - - Animações da Web - - Experimental - - Interface - - Referencia - - api de animações da web - - waapi -translation_of: Web/API/Animation ---- -<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div> - -<p>The <strong><code>Animation</code></strong> interface of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> represents a single animation player and provides playback controls and a timeline for an animation node or source.</p> - -<h2 id="Construtor">Construtor</h2> - -<dl> - <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt> - <dd>Creates a new <code>Animation</code> object instance.</dd> -</dl> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt>{{domxref("Animation.currentTime")}}</dt> - <dd>The current time value of the animation in milliseconds, whether running or paused. If the animation lacks a {{domxref("AnimationTimeline", "timeline")}}, is inactive or hasn't been played yet, its value is <code>null</code>.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.effect")}}</dt> - <dd>Gets and sets the {{domxref("AnimationEffectReadOnly")}} associated with this animation. This will usually be a {{domxref("KeyframeEffect")}} object.</dd> - <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt> - <dd>Returns the current finished Promise for this animation.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.id")}}</dt> - <dd>Gets and sets the <code>String</code> used to identify the animation.</dd> - <dt>{{domxref("Animation.pending")}} {{readonlyinline}}</dt> - <dd>Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.</dd> - <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt> - <dd>Returns an enumerated value describing the playback state of an animation.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.playbackRate")}}</dt> - <dd>Gets or sets the playback rate of the animation.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt> - <dd>Returns the current ready Promise for this animation.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.startTime")}}</dt> - <dd>Gets or sets the scheduled time when an animation's playback should begin.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.timeline")}}</dt> - <dd>Gets or sets the {{domxref("AnimationTimeline", "timeline")}} associated with this animation.</dd> -</dl> - -<h3 id="Manipuladores_de_evento">Manipuladores de evento</h3> - -<dl> - <dt>{{domxref("Animation.oncancel")}}</dt> - <dd>Gets and sets the event handler for the <code>cancel</code> event.</dd> - <dt>{{domxref("Animation.onfinish")}}</dt> - <dd>Gets and sets the event handler for the <code>finish</code> event.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{domxref("Animation.cancel()")}}</dt> - <dd>Clears all {{domxref("KeyframeEffect", "keyframeEffects")}} caused by this animation and aborts its playback.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.finish()")}}</dt> - <dd>Seeks either end of an animation, depending on whether the animation is playing or reversing.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.pause()")}}</dt> - <dd>Suspends playing of an animation.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.play()")}}</dt> - <dd>Starts or resumes playing of an animation, or begins the animation again if it previously finished.</dd> -</dl> - -<dl> - <dt>{{domxref("Animation.reverse()")}}</dt> - <dd>Reverses playback direction, stopping at the start of the animation. If the animation is finished or unplayed, it will play from end to beginning.</dd> - <dt>{{domxref("Animation.updatePlaybackRate()")}}</dt> - <dd>Sets the speed of an animation after first synchronizing its playback position.</dd> -</dl> - -<h2 id="Preocupações_de_acessibilidade">Preocupações de acessibilidade</h2> - -<p>Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p> - -<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p> - -<ul> - <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li> - <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li> - <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td> - <td>{{Spec2("Web Animations")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - - - -<p>{{Compat("api.Animation")}}</p> diff --git a/files/pt-pt/web/api/audionode/index.html b/files/pt-pt/web/api/audionode/index.html deleted file mode 100644 index df63de86c6..0000000000 --- a/files/pt-pt/web/api/audionode/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: AudioNode -slug: Web/API/AudioNode -tags: - - API - - AudioNode - - Interface - - NeedsTranslation - - Reference - - TopicStub - - Web Audio API -translation_of: Web/API/AudioNode ---- -<p>{{ APIRef("Web Audio API") }}</p> - -<p>The <strong><code>AudioNode</code></strong> interface is a generic interface for representing an audio processing module like an audio source (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element, an {{domxref("OscillatorNode")}}, etc.), the audio destination, intermediate processing module (e.g. a filter like {{domxref("BiquadFilterNode")}} or {{domxref("ConvolverNode")}}), or volume control (like {{domxref("GainNode")}}).</p> - -<p>{{InheritanceDiagram}}</p> - -<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p> - -<p>An <code>AudioNode</code> has inputs and outputs, each with a given amount of <em>channels</em>.<em> </em>An <code>AudioNode</code> with zero inputs and one or multiple outputs is called a <em>source node</em>. The exact processing done varies from one <code>AudioNode</code> 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).</p> - -<p>Different nodes can be linked together to build a <em>processing graph</em>. Such a graph is contained in an {{domxref("AudioContext")}}. Each <code>AudioNode</code> participates in exactly one such context. In general, processing nodes inherit the properties and methods of <code>AudioNode</code>, but also define their own functionality on top. See the individual node pages for more details, as listed on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> homepage.</p> - -<div class="note"> -<p><strong>Note</strong>: An <code>AudioNode</code> can be target of events, therefore it implements the {{domxref("EventTarget")}} interface.</p> -</div> - -<h2 id="Properties" style="">Properties</h2> - -<dl> - <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt> - <dd>Returns the associated {{domxref("AudioContext")}}, that is the object representing the processing graph the node is participating in.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt> - <dd>Returns the number of inputs feeding the node. Source nodes are defined as nodes having a <code>numberOfInputs</code> property with a value of <code>0</code>.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt> - <dd>Returns the number of outputs coming out of the node. Destination nodes — like {{ domxref("AudioDestinationNode") }} — have a value of <code>0</code> for this attribute.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.channelCount")}}</dt> - <dd>Represents an integer used to determine how many channels are used when <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.channelCountMode")}}</dt> - <dd>Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.</dd> - <dt>{{domxref("AudioNode.channelInterpretation")}}</dt> - <dd>Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> will happen.<br> - The possible values are <code>"speakers"</code> or <code>"discrete"</code>.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p> - -<dl> - <dt>{{domxref("AudioNode.connect()")}}</dt> - <dd>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")}}.</dd> - <dt>{{domxref("AudioNode.disconnect()")}}</dt> - <dd>Allows us to disconnect the current node from another one it is already connected to.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p> - -<pre class="brush: js;highlight[8,9,11,12,13,14]">var AudioContext = window.AudioContext || window.webkitAudioContext; - -var audioCtx = new AudioContext(); - -var oscillator = audioCtx.createOscillator(); -var gainNode = audioCtx.createGain(); - -oscillator.connect(gainNode); -gainNode.connect(audioCtx.destination); - -oscillator.context; -oscillator.numberOfInputs; -oscillator.numberOfOutputs; -oscillator.channelCount;</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(25.0)}}</td> - <td>{{CompatNo}}</td> - <td>15.0{{property_prefix("webkit")}}<br> - 22 (unprefixed)</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>channelCount</code> <code>channelCountMode</code></td> - <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>connect</code><code>(AudioParam)</code></td> - <td>{{CompatVersionUnknown}} {{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>25.0</td> - <td>1.2</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>channelCount</code><br> - <code>channelCountMode</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>connect</code><code>(AudioParam)</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> -</ul> diff --git a/files/pt-pt/web/api/battery_status_api/index.html b/files/pt-pt/web/api/battery_status_api/index.html deleted file mode 100644 index 3b9bf25ab6..0000000000 --- a/files/pt-pt/web/api/battery_status_api/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: API do Estado da Bateria -slug: Web/API/Battery_Status_API -tags: - - API - - API de Bateria - - API do Estado da Bateria - - Aplicações - - Apps - - Firefox OS - - Guía - - Movel - - Resumo - - Sinopse -translation_of: Web/API/Battery_Status_API -original_slug: Web/API/API_do_Estado_da_Bateria ---- -<div>{{obsolete_header}}</div> - -<div>{{DefaultAPISidebar("Battery API")}}</div> - -<p>A <em>API do Estado da Bateria</em>, mais conhecida como <strong>API de Bateria</strong>, fornece informação sobre o nível de carga da bateria do sistema e permite-lhe que seja notificado por eventos que são enviados quando o nível da bateria ou o estado de carregamento é alterado. Isto pode ser utilizado para ajustar a utilização de recursos da aplicação para reduzir o consumo de bateria quando a bateria estiver fraca ou para guardar as alterações antes que a bateria acabe para evitar a perda de dados.</p> - -<p>The Battery Status API extends {{domxref("window.navigator")}} with a {{domxref("navigator.getBattery()")}} method returning a battery promise, which is resolved in a {{domxref("BatteryManager")}} object providing also some new events you can handle to monitor the battery status.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<p>In this example, we watch for changes both to the charging status (whether or not we're plugged in and charging) and for changes to the battery level and timing. This is done by listening for the {{event("chargingchange")}}, {{event("levelchange")}}, {{event("chargingtimechange")}}, {{event("dischargingtimechange")}} events.</p> - -<pre class="brush: js">navigator.getBattery().then(function(battery) { - function updateAllBatteryInfo(){ - updateChargeInfo(); - updateLevelInfo(); - updateChargingInfo(); - updateDischargingInfo(); - } - updateAllBatteryInfo(); - - battery.addEventListener('chargingchange', function(){ - updateChargeInfo(); - }); - function updateChargeInfo(){ - console.log("Battery charging? " - + (battery.charging ? "Yes" : "No")); - } - - battery.addEventListener('levelchange', function(){ - updateLevelInfo(); - }); - function updateLevelInfo(){ - console.log("Battery level: " - + battery.level * 100 + "%"); - } - - battery.addEventListener('chargingtimechange', function(){ - updateChargingInfo(); - }); - function updateChargingInfo(){ - console.log("Battery charging time: " - + battery.chargingTime + " seconds"); - } - - battery.addEventListener('dischargingtimechange', function(){ - updateDischargingInfo(); - }); - function updateDischargingInfo(){ - console.log("Battery discharging time: " - + battery.dischargingTime + " seconds"); - } - -}); -</pre> - -<p>See also <a class="external" href="http://www.w3.org/TR/battery-status/#examples">the example in the specification</a>.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Battery API")}}</td> - <td>{{Spec2("Battery API")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(39.0)}}</td> - <td>{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}<br> - {{CompatGeckoDesktop("16")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("43")}}<sup>[3]</sup><br> - {{CompatGeckoDesktop("52")}}<sup>[4]</sup></td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td> - <p>{{CompatGeckoMobile("10")}} {{property_prefix("moz")}}<br> - {{CompatGeckoMobile("16")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("43")}}<sup>[3]</sup><br> - {{CompatGeckoMobile("52")}}<sup>[3]</sup></p> - </td> - <td>{{CompatNo}}</td> - <td>25<sup>[2]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(42.0)}}<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Disabled by default in Firefox 10.0, but can be enabled setting the preference <code>dom.battery.enabled</code> to <code>true</code>. Starting with Firefox 11.0, <code>mozBattery</code> is enabled by default. The Battery API is currently supported on Android, Windows, and Linux with UPower installed. Support for MacOS is available starting with Gecko 18.0 {{geckoRelease("18.0")}}. Firefox also provides support for the deprecated {{domxref("navigator.battery")}}.</p> - -<p>[2] Values for {{domxref("BatteryManager.chargingTime")}} and {{domxref("BatteryManager.dischargingTime")}} are always equal to <code>Infinity</code>.</p> - -<p>[3] The new promise-based syntax for {{domxref("Navigator.getBattery()")}} is supported from Firefox 43 onwards.</p> - -<p>[4] From Firefox 52 onwards, the Battery Status API is only available in chrome/privileged code.</p> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li><a href="/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information">Retrieving battery status information - demo & article</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Using the Battery API</a></li> -</ul> diff --git a/files/pt-pt/web/api/blob/blob/index.html b/files/pt-pt/web/api/blob/blob/index.html deleted file mode 100644 index a00a527076..0000000000 --- a/files/pt-pt/web/api/blob/blob/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Blob() -slug: Web/API/Blob/Blob -tags: - - API - - Blob - - Construtor - - File API - - Referencia -translation_of: Web/API/Blob/Blob ---- -<div>{{APIRef("File API")}}</div> - -<p><span class="seoSummary">O construtor <code>Blob()</code> devolve um novo objeto {{domxref("Blob")}}. O conteúdo do objeto <code>Blob</code> consiste na concatenação dos valores na matriz do primeiro parâmetro.</span></p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">var <var>novoBlob</var> = new Blob(<var>array</var>, <var>options</var>); -</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code><var>array</var></code></dt> - <dd>Uma {{jsxref("Array")}} de {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("USVString")}}, {{domxref("USVString")}}, ou uma mistura de quaisquer desses objetos, que serão colocados dentro do objeto {{domxref("Blob")}}. Os objetos <code>USVString</code> são codificados como UTF-8.</dd> - <dt><code><var>options</var></code> {{optional_inline}}</dt> - <dd> - <p>Um objeto opcional do tipo {{domxref("BlobPropertyBag")}} que pode especificar qualquer uma das seguintes propriedades:</p> - - <dl> - <dt><code>type</code> {{optional_inline}}</dt> - <dd>O {{Glossary("MIME type", "tipo MIME")}} dos dados que serão armazenados no <em>blob</em>. O valor predefinido é uma string vazia, (<code>""</code>).</dd> - <dt><code>endings</code> {{optional_inline}} {{non-standard_inline}}</dt> - <dd>Como interpretar os caracteres de nova linha (<code>\n</code>), se os dados são textos. O valor predefinido, <code>transparent</code>, copia os caracteres da nova linha para o <em>blob</em> sem os alterar. Para converter as novas linhas para a convenção nativa do sistema anfitrião, use o valor <code>native</code>.</dd> - </dl> - </dd> -</dl> - -<h3 id="Valor_devolvido">Valor devolvido</h3> - -<p>Um novo objeto {{domxref("Blob")}} que contém os dados especificados.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js language-js notranslate">var dadosParaFicheiro = ['<a id="a"><b id="b">hey!</b></a>']; // uma matriz constituída por uma única DOMString -var oMeuBlob = new Blob(dadosParaFicheiro, {type : 'text/html'}); // o <em>blob</em></pre> - -<h2 id="Specification" name="Specification">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API', '#constructorBlob', 'Blob()')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.Blob.Blob")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>A interface obsoleta {{domxref("BlobBuilder")}} que este construtor substitui.</li> -</ul> diff --git a/files/pt-pt/web/api/blob/index.html b/files/pt-pt/web/api/blob/index.html deleted file mode 100644 index 878bc85e5e..0000000000 --- a/files/pt-pt/web/api/blob/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Blob -slug: Web/API/Blob -tags: - - API - - Blob - - File API - - Interface - - NeedsTranslation - - Raw - - Reference - - TopicStub - - data -translation_of: Web/API/Blob ---- -<div>{{APIRef("File API")}}</div> - -<p>The <strong><code>Blob</code></strong> object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a {{DOMxRef("ReadableStream")}} so its methods can be used for processing the data.</p> - -<p>Blobs can represent data that isn't necessarily in a JavaScript-native format. The {{DOMxRef("File")}} interface is based on <code>Blob</code>, inheriting blob functionality and expanding it to support files on the user's system.</p> - -<h2 id="Using_blobs">Using blobs</h2> - -<p>To construct a <code>Blob</code> from other non-blob objects and data, use the {{DOMxRef("Blob.Blob", "Blob()")}} constructor. To create a blob that contains a subset of another blob's data, use the {{DOMxRef("Blob.slice()", "slice()")}} method. To obtain a <code>Blob</code> object for a file on the user's file system, see the {{DOMxRef("File")}} documentation.</p> - -<p>The APIs accepting <code>Blob</code> objects are also listed in the {{DOMxRef("File")}} documentation.</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{DOMxRef("Blob.Blob", "Blob()")}}</dt> - <dd>Returns a newly created <code>Blob</code> object which contains a concatenation of all of the data in the array passed into the constructor.</dd> -</dl> - -<h2 id="Instance_properties">Instance properties</h2> - -<dl> - <dt>{{DOMxRef("Blob.prototype.size")}} {{readonlyinline}}</dt> - <dd>The size, in bytes, of the data contained in the <code>Blob</code> object.</dd> - <dt>{{DOMxRef("Blob.prototype.type")}} {{readonlyinline}}</dt> - <dd>A string indicating the MIME type of the data contained in the <code>Blob</code>. If the type is unknown, this string is empty.</dd> -</dl> - -<h2 id="Instance_methods">Instance methods</h2> - -<dl> - <dt>{{DOMxRef("Blob.prototype.arrayBuffer()")}}</dt> - <dd>Returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}} containing the entire contents of the <code>Blob</code> as binary data.</dd> - <dt>{{DOMxRef("Blob.prototype.slice()")}}</dt> - <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the blob on which it's called.</dd> - <dt>{{DOMxRef("Blob.prototype.stream()")}}</dt> - <dd>Returns a {{DOMxRef("ReadableStream")}} that can be used to read the contents of the <code>Blob</code>.</dd> - <dt>{{DOMxRef("Blob.prototype.text()")}}</dt> - <dd>Returns a promise that resolves with a {{DOMxRef("USVString")}} containing the entire contents of the <code>Blob</code> interpreted as UTF-8 text.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Creating_a_blob">Creating a blob</h3> - -<p>The {{DOMxRef("Blob.Blob", "Blob()")}} constructor can create blobs from other objects. For example, to construct a blob from a JSON string:</p> - -<pre class="brush: js notranslate">const obj = {hello: 'world'}; -const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre> - -<h3 id="Creating_a_URL_representing_the_contents_of_a_typed_array">Creating a URL representing the contents of a typed array</h3> - -<p>The following code creates a JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> and creates a new <code>Blob</code> containing the typed array's data. It then calls {{DOMxRef("URL.createObjectURL()")}} to convert the blob into a {{glossary("URL")}}.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><p>This example creates a typed array containing the ASCII codes - for the space character through the letter Z, then converts it - to an object URL. A link to open that object URL is created. - Click the link to see the decoded object URL.</p></pre> - -<h4 id="JavaScript">JavaScript</h4> - -<p>The main piece of this code for example purposes is the <code>typedArrayToURL()</code> function, which creates a <code>Blob</code> from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the {{HTMLElement("img")}} element's {{htmlattrxref("src", "img")}} attribute (assuming the data contains an image, of course).</p> - -<pre class="brush: js notranslate">function typedArrayToURL(typedArray, mimeType) { - return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType})) -} - -const bytes = new Uint8Array(59); - -for(let i = 0; i < 59; i++) { - bytes[i] = 32 + i; -} - -const url = typedArrayToURL(bytes, 'text/plain'); - -const link = document.createElement('a'); -link.href = url; -link.innerText = 'Open the array URL'; - -document.body.appendChild(link);</pre> - -<h4 id="Result">Result</h4> - -<p>Click the link in the example to see the browser decode the object URL.</p> - -<p>{{EmbedLiveSample("Creating_a_URL_representing_the_contents_of_a_typed_array", 600, 200)}}</p> - -<h3 id="Extracting_data_from_a_blob">Extracting data from a blob</h3> - -<p>One way to read content from a <code>Blob</code> is to use a {{DOMxRef("FileReader")}}. The following code reads the content of a <code>Blob</code> as a typed array:</p> - -<pre class="brush: js notranslate">const reader = new FileReader(); -reader.addEventListener('loadend', () => { - // reader.result contains the contents of blob as a typed array -}); -reader.readAsArrayBuffer(blob);</pre> - -<p>Another way to read content from a <code>Blob</code> is to use a {{domxref("Response")}}. The following code reads the content of a <code>Blob</code> as text:</p> - -<pre class="brush: js notranslate">const text = await (new Response(blob)).text(); -</pre> - -<p>Or by using {{DOMxRef("Blob.prototype.text()")}}:</p> - -<pre class="brush: js notranslate">const text = await blob.text();</pre> - -<p>By using other methods of <code>FileReader</code>, it is possible to read the contents of a Blob as a string or a data URL.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('File API', '#blob-section', 'The <code>Blob</code> interface')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Blob")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{DOMxRef("BlobBuilder")}}</li> - <li>{{DOMxRef("FileReader")}}</li> - <li>{{DOMxRef("File")}}</li> - <li>{{DOMxRef("URL.createObjectURL")}}</li> - <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li> -</ul> diff --git a/files/pt-pt/web/api/blob/size/index.html b/files/pt-pt/web/api/blob/size/index.html deleted file mode 100644 index fc6423a199..0000000000 --- a/files/pt-pt/web/api/blob/size/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Blob.size -slug: Web/API/Blob/size -tags: - - API - - Blob - - Bytes - - Ficheiros - - File API - - Propriedade - - Referencia - - length - - size -translation_of: Web/API/Blob/size ---- -<div>{{APIRef("File API")}}</div> - -<p>A propriedade <strong><code>size</code></strong> da interface do {{domxref("Blob")}} retorna o tamanho do {{domxref("Blob")}} ou {{domxref("File")}} em <em>bytes</em>.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">var <em>sizeInBytes</em> = <em>blob</em>.size -</pre> - -<h3 id="Valor">Valor</h3> - -<p>O número de <em>bytes</em> de dados contidos dentro do <code>Blob</code> (ou do objeto baseado em <code>Blob</code>, como um {{domxref("File")}}).</p> - -<h2 id="Exemplo">Exemplo</h2> - -<p>Este exemplo usa um {{HTMLElement("input")}} com os atributos <code>type="file"</code> e <code>multiple</code> para receber do utilizador um grupo de ficheiros, e depois um iterar sobre os ficheiros que emitem os seus nomes e comprimentos em <em>bytes</em>.</p> - -<pre class="brush:js notranslate">// fileInput is a HTMLInputElement: <input type="file" multiple id="myfileinput"> -var fileInput = document.getElementById("myfileinput"); - -// files is a FileList object (simliar to NodeList) -var files = fileInput.files; - -for (var i = 0; i < files.length; i++) { - console.log(files[i].name + " has a size of " + files[i].size + " Bytes"); -}</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('File API', '#dfn-size', 'Blob.size')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - -<div> - - -<p>{{Compat("api.Blob.size")}}</p> -</div> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("Blob")}}</li> - <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Usar ficheiros de aplicações web</a></li> -</ul> diff --git a/files/pt-pt/web/api/blob/type/index.html b/files/pt-pt/web/api/blob/type/index.html deleted file mode 100644 index 5744a80a5b..0000000000 --- a/files/pt-pt/web/api/blob/type/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Blob.type -slug: Web/API/Blob/type -tags: - - API - - Blob - - DOM - - File - - File API - - Formato - - MIME - - MIME Type - - Propriedade - - Referencia - - tipo -translation_of: Web/API/Blob/type ---- -<div>{{APIRef("File API")}}</div> - -<p><span class="seoSummary">A propriade <strong><code>type</code></strong> do objeto {{domxref("Blob")}} devolve o {{Glossary("MIME type")}} do ficheiro.</span></p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">var <em>mimetype</em> = <em>blob</em>.type</pre> - -<h3 id="Valor">Valor</h3> - -<p>Uma {{domxref("DOMString")}} que contem o MIME do ficheiro, ou uma <em>string</em> vazia se o tipo não consegue ser determinado.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<p>Este exemplo pede ao utilizador que selecione uma série de ficheiros, depois verifica cada ficheiro para se certificar de que é um de um determinado conjunto de tipos de ficheiros de imagem.</p> - -<pre class="brush:js notranslate">var i, fileInput, files, allowedFileTypes; - -// fileInput é um HTMLInputElement: <input type="file" multiple id="myfileinput"> -fileInput = document.getElementById("myfileinput"); - -// files é um objeto FileList (parecido ao NodeList) -files = fileInput.files; - -// a nossa aplicação só aceita imagens GIF, PNG, e JPEG -allowedFileTypes = ["image/png", "image/jpeg", "image/gif"]; - -for (i = 0; i < files.length; i++) { - // Testar se file.type é um dos MIME types permitidos. - if (allowedFileTypes.indexOf(<strong>files[i].type</strong>) > -1) { - // file.type é válido - } -}); -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('File API', '#dfn-type', 'Blob.type')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - -<div> - - -<p>{{Compat("api.Blob.type")}}</p> -</div> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("Blob")}}</li> - <li><em><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></em></li> -</ul> diff --git a/files/pt-pt/web/api/canvas_api/index.html b/files/pt-pt/web/api/canvas_api/index.html deleted file mode 100644 index 2118f051c5..0000000000 --- a/files/pt-pt/web/api/canvas_api/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: API de Canvas -slug: Web/API/Canvas_API -translation_of: Web/API/Canvas_API -original_slug: Web/API/API_de_canvas ---- -<div>{{CanvasSidebar}}</div> - -<p class="summary">Added in <a href="/en-US/docs/HTML/HTML5">HTML5</a>, the <strong>HTML {{HTMLElement("canvas")}} element</strong> can be used to draw graphics via scripting in <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.</p> - -<p>Mozilla applications gained support for <code><canvas></code> starting with Gecko 1.8 (i.e. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <code><canvas></code> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <code><canvas></code> by including a script from Google's <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> project. Google Chrome and Opera 9 also support <code><canvas></code>.</p> - -<p>The <code><canvas></code> element is also used by <a href="/en-US/docs/Web/WebGL">WebGL</a> to draw hardware-accelerated 3D graphics on web pages.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<p>This is just a simple code snippet which uses the {{domxref("CanvasRenderingContext2D.fillRect()")}} method.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); - -ctx.fillStyle = 'green'; -ctx.fillRect(10, 10, 100, 100); -</pre> - -<p>Edit the code below and see your changes update live in the canvas:</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><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> -</pre> - -<pre class="brush: js">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); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> - -<h2 id="Referência">Referência</h2> - -<div class="index"> -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasImageSource")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("ImageBitmap")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("RenderingContext")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li> - <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li> -</ul> -</div> - -<p>The interfaces related to the <code>WebGLRenderingContext</code> are referenced under <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> - -<p>{{domxref("CanvasCaptureMediaStream")}} is related.</p> - -<h2 id="Guias_e_tutoriais">Guias e tutoriais</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt> - <dd>A comprehensive tutorial covering both the basic usage of <code><canvas></code> and its advanced features.</dd> - <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Code snippets: Canvas</a></dt> - <dd>Some extension developer-oriented code snippets involving <code><canvas></code>.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt> - <dd>A demo of ray-tracing animation using canvas.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Drawing DOM objects into a canvas</a></dt> - <dd>How to draw DOM content, such as HTML elements, into a canvas.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt> - <dd>Combining {{HTMLElement("video")}} and {{HTMLElement("canvas")}} to manipulate video data in real time.</dd> -</dl> - -<h2 id="Recursos">Recursos</h2> - -<h3 id="Genérico">Genérico</h3> - -<ul> - <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li> - <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></li> -</ul> - -<h3 id="Bibliotecas">Bibliotecas</h3> - -<ul> - <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li> - <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li> - <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li> - <li><a href="http://origamijs.com/docs/">Origami.js</a> is an open source lightweight canvas library.</li> - <li><a href="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework.</li> - <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language.</li> - <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li> - <li><a href="http://www.pixijs.com/">Pixi.js</a> is an open source game engine.</li> - <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a charting and graphing library.</li> - <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation key-framing API for Canvas.</li> - <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li> - <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li> - <li><a href="http://www.createjs.com/easeljs">EaselJS</a> is a free/open source library to make it easier to use canvas for games and art</li> - <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> is another open-source javascript library for creating and manipulating 2d canvas elements</li> - <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> is an open source library to create canvas based heatmaps</li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Epecificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/WebGL_API">WebGL </a> (Biblioteca de Gráficos da Web)</li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/canvas_api/tutorial/index.html b/files/pt-pt/web/api/canvas_api/tutorial/index.html deleted file mode 100644 index cad5f41e2b..0000000000 --- a/files/pt-pt/web/api/canvas_api/tutorial/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Tutorial de Canvas -slug: Web/API/Canvas_API/Tutorial -tags: - - Canvas - - Guía - - HTML - - HTML5 - - Intermediário - - Web - - graficos -translation_of: Web/API/Canvas_API/Tutorial -original_slug: Web/API/API_de_canvas/Tutorial ---- -<div>{{CanvasSidebar}}</div> - -<div><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></div> - -<div class="summary"> -<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> is an <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> element which can be used to draw graphics via scripting (usually <a href="/en-US/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>). This can, for instance, be used to draw graphs, make photo composition or simple (and <a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">not so simple</a>) animations. The images on this page show examples of <a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> implementations which will be created in this tutorial.</p> -</div> - -<p><span class="seoSummary">This tutorial describes how to use the <code><canvas></code> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.</span></p> - -<p>First introduced in WebKit by Apple for the OS X Dashboard, <code><canvas></code> has since been implemented in browsers. Today, all major browsers support it.</p> - -<h2 id="Before_you_start" name="Before_you_start">Antes de começar</h2> - -<p>Using the <code><canvas></code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code><canvas></code> element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML <code>height</code> and <code>width</code> property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p> - -<h2 id="In_this_tutorial" name="In_this_tutorial">Neste tutorial</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Basic usage</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Drawing shapes</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Applying styles and colors</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Using images</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing and clipping</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Basic animations</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions and accessibility</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimizing the canvas</a></li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Finale</a></li> -</ul> - -<h2 id="See_also" name="See_also">Consulte também:</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas topic page</a></li> - <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li> - <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> -</ul> - -<h2 id="Uma_nota_para_os_colaboradores">Uma nota para os colaboradores</h2> - -<p>Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.</p> - -<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div> diff --git a/files/pt-pt/web/api/client/index.html b/files/pt-pt/web/api/client/index.html deleted file mode 100644 index 267c1fafc4..0000000000 --- a/files/pt-pt/web/api/client/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Client -slug: Web/API/Client -tags: - - API - - Client - - Experimental - - Interface - - Referencia - - Service Workers - - Service worker API - - ServiceWorkerClient - - ServiceWorkers -translation_of: Web/API/Client ---- -<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p> - -<p>A interface de <em>Client</em> representa um contexto executável, tal como um<span class="seoSummary"> {{domxref("Worker")}}, ou um {{domxref("SharedWorker")}}. Os {{domxref("Window")}} <em>clients</em> </span>são representados pelo mais específico <span class="seoSummary">{{domxref("WindowClient")}}. Pode obter os objetos <em><code>Client</code>/<code>WindowClient</code></em> a partir dos métodos, tais como {{domxref("Clients.matchAll","Clients.matchAll()")}} e {{domxref("Clients.get","Clients.get()")}}.</span></p> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{domxref("Client.postMessage()")}}</dt> - <dd>Sends a message to the client.</dd> -</dl> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt>{{domxref("Client.id")}} {{readonlyInline}}</dt> - <dd>The universally unique identifier of the client as a string.</dd> - <dt>{{domxref("Client.type")}} {{readonlyInline}}</dt> - <dd>The client's type as a string. It can be "<code>window"</code>, "<code>worker"</code>, or "<code>sharedworker"</code>.</dd> - <dt>{{domxref("Client.url")}} {{readonlyInline}}</dt> - <dd>The URL of the client as a string.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('Service Workers', '#client', 'Client')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Definitição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2> - - - -<p>{{Compat("api.Client")}}</p> - -<h2 id="Consulte_também">Consulte também:</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> -</ul> diff --git a/files/pt-pt/web/api/closeevent/closeevent/index.html b/files/pt-pt/web/api/closeevent/closeevent/index.html deleted file mode 100644 index b12c9d211e..0000000000 --- a/files/pt-pt/web/api/closeevent/closeevent/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: CloseEvent() -slug: Web/API/CloseEvent/CloseEvent -tags: - - API - - CloseEvent - - Construtor - - Referencia -translation_of: Web/API/CloseEvent/CloseEvent ---- -<div>{{APIRef("Websockets API")}}</div> - -<p>O construtor <strong><code>CloseEvent()</code></strong> cria um novo {{domxref("CloseEvent")}}.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">var <em>event</em> = new CloseEvent(<em>typeArg</em>, <em>closeEventInit</em>);</pre> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code>typeArg</code></dt> - <dd>É uma {{domxref("DOMString")}} que representa o nome do evento.</dd> - <dt><code>closeEventInit</code> {{optional_inline}}</dt> -</dl> - -<dl> - <dd>É um dicionário <code>CloseEventInit</code>, com os seguintes<em> </em>campos: - - <ul> - <li><code>"wasClean"</code>, opcional e pré-definido como <code>false</code>, do tipo <code>long</code>, indica se a conexão foi terminada de forma limpa ou não.</li> - <li><code>"code"</code>, opcional e pré-definido como <code>0</code>, do tipo <code>unsigned short</code>, é o código de estado do encerrar da conexão enviada pelo servidor.</li> - <li><code>"reason"</code>, opcional e pré-definido como <code>''</code>, do tipo {{domxref("DOMString")}}, é a razão por qual o servidor terminou a conexão escrita para humanos.</li> - </ul> - - <div class="note"> - <p>O dicionário <code>CloseEventInit</code> também aceita campos do dicionário {{domxref("Event.Event", "EventInit")}}.</p> - </div> - </dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table" style="height: 49px; width: 1000px;"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG','comms.html#closeevent','CloseEvent()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.CloseEvent.CloseEvent")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("CloseEvent")}}, a interface dos objetos criados pelo construtor.</li> -</ul> diff --git a/files/pt-pt/web/api/closeevent/index.html b/files/pt-pt/web/api/closeevent/index.html deleted file mode 100644 index 5cece5fd2b..0000000000 --- a/files/pt-pt/web/api/closeevent/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: CloseEvent -slug: Web/API/CloseEvent -tags: - - API - - Interface - - Referencia - - Web - - WebSocket - - WebSockets -translation_of: Web/API/CloseEvent ---- -<div>{{APIRef("Websockets API")}}</div> - -<p>Um <code>CloseEvent</code> é enviado a clientes usando {{Glossary("WebSockets")}} quando a conexão é terminada. É enviado ao <em>listner</em> indicado pelo atributo <code>onclose</code> de objeto <code>WebSocket</code>.</p> - -<h2 id="Construtor">Construtor</h2> - -<dl> - <dt>{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}</dt> - <dd>Cria um novo <code>CloseEvent</code>.</dd> -</dl> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em>Esta interface também herda propriedades do {{domxref("Event")}} de qual se deriva.</em></p> - -<dl> - <dt>{{domxref("CloseEvent.code")}} {{readOnlyInline}}</dt> - <dd>Devolve uma <code>unsigned short</code> que contem o código enviado pelo servidor. Os seguintes valores são os códigos de estado permitidos, as definições foram traduzidas a partir do <a href="https://www.iana.org/assignments/websocket/websocket.xml#close-code-number">site da IANA</a>. Note que os códigos 1xxx são só usados internamente pelo WebSocket e não para uso com os dados transportados (como quando o protocolo da aplicação é invalido). Os únicos códigos que podem ser especificados no Firefox são o código 1000 e a série de 3000 a 4999 inclusivo [<a href="https://searchfox.org/mozilla-central/rev/bf81d741ff5dd11bb364ef21306da599032fd479/dom/websocket/WebSocket.cpp#2533">Fonte</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1467107">Bug</a>].</dd> - <dd> - <table class="standard-table" id="Status_codes"> - <tbody> - <tr> - <td class="header">Código</td> - <td class="header">Nome</td> - <td class="header">Descrição</td> - </tr> - <tr> - <td><code>0</code>–<code>999</code></td> - <td></td> - <td><strong>Reservado e não utilizado.</strong></td> - </tr> - <tr> - <td><code>1000</code></td> - <td>Normal Closure</td> - <td> - <p>Encerramento normal; a conexão completou a tarefa para qual foi criada.</p> - </td> - </tr> - <tr> - <td><code>1001</code></td> - <td>Going Away</td> - <td> - <p>O terminal está a desaparecer, seja devido a uma falha do servidor ou porque o navegador está a navegar para longe da página que abriu a ligação.</p> - </td> - </tr> - <tr> - <td><code>1002</code></td> - <td>Protocol Error</td> - <td>O terminal está a terminar a conexão devido a um erro de protocolo.</td> - </tr> - <tr> - <td><code>1003</code></td> - <td>Unsupported Data</td> - <td>A conexão está a ser terminada porque o terminal recebeu dados num formato que não aceita (por exemplo um terminal de texto receber dados binarios).</td> - </tr> - <tr> - <td><code>1004</code></td> - <td></td> - <td><strong>Reservado.</strong> Uma definição pode ser atribuída no futuro.</td> - </tr> - <tr> - <td><code>1005</code></td> - <td>No Status Received</td> - <td><strong>Reservado.</strong> Indica que nenhum código de estado foi oferecido, apesar de ser esperado um código.</td> - </tr> - <tr> - <td><code>1006</code></td> - <td>Abnormal Closure</td> - <td><strong>Reservado.</strong> Usado para indicar que a conexão fechou anormalmente (isto é, sem uma <em>close frame</em> ser enviada) quando um código era esperado.</td> - </tr> - <tr> - <td><code>1007</code></td> - <td>Invalid frame payload data</td> - <td>O terminal está a terminar a conexão porque a mensagem continha dados inconsistentes (e.x. dados não codificados em UTF-8 numa mensagem de texto).</td> - </tr> - <tr> - <td><code>1008</code></td> - <td>Policy Violation</td> - <td>O terminal está a terminar a conexão porque recebeu uma mensagem que viola a sua política. Isto é um código genérico, usado quando os códigos 1003 e 1009 não são apropriados à situação.</td> - </tr> - <tr> - <td><code>1009</code></td> - <td>Message too big</td> - <td>O terminal está a terminar a conexão porque o <em>data frame</em> recebido é demasiado grande.</td> - </tr> - <tr> - <td><code>1010</code></td> - <td>Missing Extension</td> - <td>O cliente está a terminar a conexão porque esperava que o servidor negociasse uma ou mais extensões, mas não o fez.</td> - </tr> - <tr> - <td><code>1011</code></td> - <td>Internal Error</td> - <td>O servidor está a terminar a conexão porque encontrou uma condição inesperada que a impede de completar o pedido.</td> - </tr> - <tr> - <td><code>1012</code></td> - <td>Service Restart</td> - <td>O servidor está a terminar a conexão porque está a reiniciar. [<a href="https://www.ietf.org/mail-archive/web/hybi/current/msg09670.html">Ref</a>]</td> - </tr> - <tr> - <td><code>1013</code></td> - <td>Try Again Later</td> - <td>O servidor está a terminar a conexão devido a uma condição temporária, por exemplo está sobrecarregado e está a reduzir o número de clientes. [<a href="https://www.ietf.org/mail-archive/web/hybi/current/msg09670.html">Ref</a>]</td> - </tr> - <tr> - <td><code>1014</code></td> - <td>Bad Gateway</td> - <td>O servidor está a agir como uma <em>gateway</em> ou <em>proxy</em> e recebeu uma resposta inválida dum servidor mais adiante na conexão. Isto é parecido com o código de estado HTTP 502.</td> - </tr> - <tr> - <td><code>1015</code></td> - <td>TLS Handshake</td> - <td><strong>Reservado.</strong> Indica que a conexão foi terminada devido a uma falha na execução de um aperto de mão TLS (por exemplo, o certificado do servidor não pode ser verificado).</td> - </tr> - <tr> - <td><code>1016</code>–<code>1999</code></td> - <td></td> - <td><strong>Reservado para o futuro uso de padrões WebSocket.</strong></td> - </tr> - <tr> - <td><code>2000</code>–<code>2999</code></td> - <td></td> - <td><strong>Reservado para uso de extensões de WebSocket.</strong></td> - </tr> - <tr> - <td><code>3000</code>–<code>3999</code></td> - <td></td> - <td>Disponivel para uso por bibliotecas e <em>frameworks</em>. <strong>Não</strong> é para ser utilizado por aplicações. Disponível para registo através da IANA de forma de primeiro a chegar primeiro servido.</td> - </tr> - <tr> - <td><code>4000</code>–<code>4999</code></td> - <td></td> - <td>Disponível para uso por aplicações.</td> - </tr> - </tbody> - </table> - </dd> - <dt>{{domxref("CloseEvent.reason")}} {{readOnlyInline}}</dt> - <dd>Devolve uma {{domxref("DOMString")}} a indicar a razão por qual o servidor terminou a conexão. Isto é específico ao servidor e sub-protocolo.</dd> - <dt>{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}</dt> - <dd>Devolve um {{jsxref("Boolean")}} que indica se a conexão não foi terminada de forma limpa.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p><em>Esta interface também herda métodos de {{domxref("Event")}} de qual se deriva.</em></p> - -<dl> - <dt>{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}</dt> - <dd>Inicializa o valor de um <code>CloseEvent</code>. Se o evento já foi enviado, o método não faz nada. Este método é obsoleto, use antes o construtor {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('HTML WHATWG', 'web-sockets.html#the-closeevent-interface', 'CloseEvent') }}</td> - <td>{{ Spec2('HTML WHATWG') }}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.CloseEvent")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("WebSocket")}}</li> -</ul> diff --git a/files/pt-pt/web/api/document/alinkcolor/index.html b/files/pt-pt/web/api/document/alinkcolor/index.html deleted file mode 100644 index 790a1cda4a..0000000000 --- a/files/pt-pt/web/api/document/alinkcolor/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: document.alinkColor -slug: Web/API/Document/alinkColor -tags: - - DOM - - DOM 0 - - Gecko - - Referência_do_DOM_Gecko -translation_of: Web/API/Document/alinkColor -original_slug: DOM/document.alinkColor ---- -<div id="page-top"> - <div class="pageText" id="pageText"> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en">« <a href="/en/Gecko_DOM_Reference" rel="internal" style="text-decoration: none; color: rgb(4, 121, 167);">Referência do DOM Gecko</a></span></p> - <div id="section_1"> - <h3 class="editable" id="Sumário" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;">Sumário</h3> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> - <div style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-color: rgb(185, 185, 255); font-weight: bold; text-align: center; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px;"> - <p style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Obsoleto</p> - </div> - Retorna ou define a cor de um link ativo no corpo do documento. Um link é ativo durante o tempo entre <code style="color: inherit; font-weight: inherit;">mousedown </code>e <code style="color: inherit; font-weight: inherit;">mouseup </code>eventos. - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> - </div> - <div id="section_2"> - <h3 class="editable" id="Sintaxe" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Sintaxe</span></h3> - <pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);"><em><code>document.alinkColor</code> = </em><em>cor</em> -</pre> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><em><code>color</code></em> é uma string contendo<span style="font-family: Verdana;"> o no</span>me da cor (em inglês), (por exemplo, "blue", "darkblue", etc) ou o valor <span style="font-family: Verdana;">em</span> hexadecimal (por exemplo, <em><span style="font-family: 'Courier New';"><code style="color: inherit; font-weight: inherit;">#0000FF</code></span></em>)</p> - </div> - <div id="section_3"> - <h3 class="editable" id="Notas" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Notas </span></h3> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">O valor padrão para essa propriedade no Mozilla Firefox é o vermelho (<code style="color: inherit; font-weight: inherit;"><span style="font-family: 'Courier New';">#ee0000</span> </code>em hexadecimal).</p> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><code style="color: inherit; font-weight: inherit;"><em><span style="font-family: 'Courier New';">document.alinkColor</span></em> </code>é substituído no <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" rel="external nofollow" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Nível 2 HTML </a>. Uma alternativa é o seletor CSS <code style="color: inherit; font-weight: inherit;"><a href="/en/CSS/%3aactive" rel="custom nofollow" style="text-decoration: none; color: rgb(4, 121, 167);">:active</a></code>.</p> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Outra alternativa é document.body.aLink, embora isso seja <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">obsoleto em HTML 4.01</a>, em favor da alternativa de CSS.</p> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Gecko suporta tanto <code><span style="font-family: 'Courier New';">alinkColor / :activ</span></code><span style="font-family: 'Courier New';"><code>e</code></span> e <code>:focus</code>. Internet Explorer 6 e 7 suportam <code>alinkColor / :active</code> apenas para âncora HTML (<code><a></code>) links e o comportamento é o mesmo que <span style="font-family: 'Courier New';"><code>:focus</code></span> em Gecko. Não há suporte para <code>:focus</code> no IE.</p> - </div> - <div id="section_4"> - <h3 class="editable" id="Especificação" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Especificação</span></h3> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en">DOM Nível 0. Não faz parte do padrão.</span></p> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533071(VS.85).aspx" rel="external nofollow" title="http://msdn.microsoft.com/en-us/library/ms533071(VS.85).aspx">MSDN - propriedade :alinkColor</a></span></p> - </div> - </div> -</div> -<p> </p> diff --git a/files/pt-pt/web/api/document/bgcolor/index.html b/files/pt-pt/web/api/document/bgcolor/index.html deleted file mode 100644 index db838f4f96..0000000000 --- a/files/pt-pt/web/api/document/bgcolor/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: document.bgColor -slug: Web/API/Document/bgColor -tags: - - DOM - - DOM 0 - - Gecko - - Referência_do_DOM_Gecko -translation_of: Web/API/Document/bgColor -original_slug: DOM/document.bgColor ---- -<div id="page-top"> - <div class="pageText" id="pageText"> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en">« <a href="/en/Gecko_DOM_Reference" rel="internal" style="text-decoration: none; color: rgb(4, 121, 167);">Referência do DOM Gecko</a></span></p> - <div id="section_1"> - <h3 class="editable" id="Sumário" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;">Sumário</h3> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> - <div style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-color: rgb(185, 185, 255); font-weight: bold; text-align: center; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px;"> - <p style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Obsoleto</p> - </div> - <code style="color: inherit; font-weight: inherit;">bgColor</code> obtém / define a cor de fundo do documento atual. - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> - </div> - <div id="section_2"> - <h3 class="editable" id="Sintaxe" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Sintaxe</span></h3> - <pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);"><em>document.bgColor = </em><em>cor</em> -</pre> - </div> - <div id="section_3"> - <h3 class="editable" id="Parâmetros" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Parâmetros</span></h3> - <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> - <li style="margin-bottom: 0.25em;"><code style="color: inherit; font-weight: inherit;">color é</code> uma seqüência que representa a cor como uma palavra (em inglês) (por exemplo, "red") ou valor em hexadecimal (por exemplo, "<code style="color: inherit; font-weight: inherit;">#Ff0000</code>").</li> - </ul> - </div> - <div id="section_4"> - <h3 class="editable" id="Exemplo" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Exemplo</span></h3> - <pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);"><code>document.bgColor = "darkblue"; </code> -</pre> - </div> - <div id="section_5"> - <h3 class="editable" id="Notas" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Notas</span></h3> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">O valor padrão para essa propriedade no Mozilla Firefox é branco (<code style="color: inherit; font-weight: inherit;">#ffffff </code>em hexadecimal).</p> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><code style="color: inherit; font-weight: inherit;">document.bgColor </code>é substituído no <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" rel="external nofollow" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Nível 2 HTML </a>. A alternativa recomendada é o uso do estilo CSS <code><a href="/pt/CSS/background-color" title="https://developer.mozilla.org/pt/CSS/background-color">background-color</a></code> que pode ser acessada através do DOM com <code>document.body.style.backgroundColor</code>. Outra alternativa é document.body.bgColor, embora este também seja obsoleto em HTML 4.01 em favor da alternativa de CSS.</p> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> - </div> - <div id="section_6"> - <h3 class="editable" id="Especificação" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Especificação</span></h3> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en">DOM Nível 0. Não faz parte do padrão .</span></p> - <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533506(VS.85).aspx" rel="external nofollow" title="http://msdn.microsoft.com/en-us/library/ms533506(VS.85).aspx">MSDN: Propriedade bgColor</a></span></p> - </div> - </div> -</div> -<div class="collapsed" id="languages" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: absolute; top: 0px; right: 15px;"> - <h5 id="Idiomas">Idiomas</h5> -</div> -<p> </p> diff --git a/files/pt-pt/web/api/document/cookie/index.html b/files/pt-pt/web/api/document/cookie/index.html deleted file mode 100644 index 97525e2e5a..0000000000 --- a/files/pt-pt/web/api/document/cookie/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: document.cookie -slug: Web/API/Document/cookie -translation_of: Web/API/Document/cookie -original_slug: DOM/document.cookie ---- -<div id="page-top"> -<div class="pageText" id="pageText"> -<p>« <a href="/pt-PT/Gecko_DOM_Reference">Referência do DOM Gecko</a></p> - -<div id="section_1"> -<h3 id="Sumário">Sumário</h3> - -<p>Obter e definir os cookies associados com o documento atual.</p> -</div> - -<div id="section_2"> -<h3 id="Sintaxe">Sintaxe</h3> - -<pre class="eval"><em>allCookies </em>= <em>document.</em>cookie;</pre> - -<ul> - <li><code>allCookies </code>é uma string contendo uma lista separada por vírgula de "cookies" (isto é, <code><em>chave </em>= <em>valor </em></code>pares).</li> -</ul> - -<pre class="eval"><em>updatedCookie = document.cookie;</em></pre> - -<ul> - <li> - <div><code>updatedCookie é uma string de forma </code><code><em>chave </em>= <em>valor</em></code>. Observe que você só pode definir / atualizar um cookie de cada vez usando esse método.</div> - </li> -</ul> - -<ul> - <li>Qualquer um dos seguintes valores de atributo cookie pode, opcionalmente, seguir o valor-chave par, especificando o cookie para definir / atualizar, e precedido por um ponto e vírgula : - <ul> - <li><code>;path = caminho<em> </em></code>(Por exemplo, '/' , '/meuDiretorio' ). Se não for especificado, o padrão é o caminho atual do local do documento atual.</li> - <li><code>;domain = <em>domínio </em></code>(por ex, 'exemplo1.com ', '.exemplo1.com', (inclui todos os subdomínios ), 'subdominio.exemplo1.com'). Se não for especificado, o padrão é a parte do host local do documento atual.</li> - <li><code>;max-age = maxima-idade-<em>em-segundos</em></code> (Por exemplo, 60 * 60 * 24 * 365 para um ano)</li> - <li><code>;expires = <em>data-em-formato-GMTString </em>(</code>Poderia usar <a href="/pt-PT/Core_JavaScript_1.5_Reference/Global_Objects/Date/toGMTString">Date.toGMTString</a>, agora obsoleto). Se não for especificado ele expira no final da sessão.</li> - <li><code>;secure</code> (cookie só podem ser transmitidos através do protocolo seguro como https)</li> - </ul> - </li> -</ul> - -<ul> - <li>A cadeia de valor do cookie pode usar <a href="/pt-PT/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent()</a> para garantir que a cadeia não contenha nenhuma vírgula, ponto-e-vírgula, ou espaços em branco (que não são permitidos nos valores de cookie).</li> -</ul> -</div> - -<div id="section_3"> -<h3 id="Exemplo">Exemplo</h3> - -<div class="dp-highlighter"> -<ol class="dp-c" start="1"> - <li class="alt">document.cookie = "nome = Italo";</li> - <li>document.cookie = "comida_favorita = lasanha";</li> - <li class="alt">alert(document.cookie);</li> - <li>// Mostra: nome = Italo; comida_favorita = lasanha</li> -</ol> -</div> -</div> - -<div id="section_4"> -<h3 id="Segurança">Segurança</h3> - -<p>É importante notar que o path<code> </code><strong>não</strong> protege contra a leitura não autorizada do cookie de um caminho diferente<strong>. </strong>Ele pode ser facilmente contornado com DOM simples (por exemplo, a criação de um elemento iframe oculto com o caminho do cookie, e depois aceder a este iframe <code>contentDocument.cookie</code>propriedade). Ele pode ser facilmente (por exemplo, a criação de um elemento o caminho do cookie, e depois aceder a este A única maneira de proteger o acesso "cookie" é usando um domínio ou subdomínio diferente , devido à política de mesma origem.</p> -</div> - -<div id="section_5"> -<h3 id="Notas">Notas</h3> - -<div class="editIcon"><a href="/pt-PT/DOM/document.cookie#"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></a></div> - -<p>Começando com o Firefox 2, a melhor mecanismo para o lado de armazenamento do cliente está disponível - <a href="/pt-PT/DOM/Storage">WHATWG DOM Storage com o Firefox 2, a para o lado de armazenamento do cliente está disponível</a>.</p> -</div> - -<div id="section_6"> -<h3 id="Especificação">Especificação</h3> - -<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-8747038">DOM Level 2: HTMLDocument.cookie</a></p> -</div> -</div> -</div> - -<p> </p> diff --git a/files/pt-pt/web/api/document/dir/index.html b/files/pt-pt/web/api/document/dir/index.html deleted file mode 100644 index a4001b4322..0000000000 --- a/files/pt-pt/web/api/document/dir/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Document.dir -slug: Web/API/Document/dir -tags: - - API - - DOM - - HTML - - dir - - ltr - - rtl -translation_of: Web/API/Document/dir -original_slug: Web/API/Document.dir ---- -<p>{{Apiref("Document")}}{{non-standard_header}}</p> -<p>A propriedade <code><strong>Document.dir</strong></code> é uma {{domxref("DOMString")}} que representa a direccionalidade do texto do documento, quer seja da esquerda para a direita (por omissão) ou da direita para a esquerda. Os valores possíveis são <code>'rtl'</code>, da direita para a esquerda e <code>'ltr'</code>, da esquerda para a direita.</p> -<h2 id="Síntaxe">Síntaxe</h2> -<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir; -<em>document.dir</em> = <em>dirStr;</em> -</pre> -<h2 id="Especificações">Especificações</h2> -<p>Este atributo, apesar de implementado por diversos browsers não faz parte de nenhuma especificação.</p> -<h2 id="Compatibilidade_por_browser">Compatibilidade por browser</h2> -<p>{{ CompatibilityTable() }}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatVersionUnknown}} [1]</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> - </table> -</div> -<p>[1] Antes do Firefox 23, a propriedade <code>document.dir</code> retornava "ltr" independentemente do valor atribuido a dir na raiz do elemento {{htmlelement("html")}}. Caso a direcção fosse definida no nó <code><html></code>, <code>document.dir</code> não teria qualquer efeito em alterá-la visivelmente (apesar disto, a obtenção da propriedade <code>document.dir</code> iria indicar que a direcção teria sido alterada). Contudo, se o atributo dir estiver definido no element<code>o <html></code> e for alterado, quer a direccionalidade do documento quer a propriedade <code>document.dir</code> irão reflectir a mudança.</p> -<h2 id="Ver_também">Ver também</h2> -<ul> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li> -</ul> diff --git a/files/pt-pt/web/api/document/getelementsbyclassname/index.html b/files/pt-pt/web/api/document/getelementsbyclassname/index.html deleted file mode 100644 index 84b663c83b..0000000000 --- a/files/pt-pt/web/api/document/getelementsbyclassname/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: document.getElementsByClassName -slug: Web/API/Document/getElementsByClassName -tags: - - Referência_do_DOM_Gecko -translation_of: Web/API/Document/getElementsByClassName -original_slug: DOM/document.getElementsByClassName ---- -<p>{{ ApiRef() }}</p> - -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>Retorna um conjunto de elementos com o nome de classe fornecido. Quando chamado no objeto document, todo o documento é pesquisado incluindo o nó raiz. Você pode chamar também getElementsByClassName em qualquer elemento; isso retornará apenas elementos sob o elemento raiz especificado com o nome de classe fornecido.</p> - -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> - -<pre class="eval"><em>elementos</em> = document.getElementsByClassName(<em>nome</em>) // ou:<em>elementos</em> = elementoRaiz.getElementsByClassName(<em>nome</em>) -</pre> - -<ul> - <li><code>elementos</code> é um <code>NodeList</code> vivo de elementos encontrados na ordem que aparecem na árvore.</li> - <li><code>nome</code> é uma<em>string</em> representando um nome de classe dos elementos.</li> - <li><code>getElementsByClassName</code> pode ser chamado em qualquer elemento, não apenas no <code>document</code>. O elemento em que é chamado será usado como a raiz da pesquisa.</li> -</ul> - -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> - -<p>Devolve todos os elementos que têm a classe 'teste':</p> - -<pre class="eval"> document.getElementsByClassName('teste') -</pre> - -<p>Devolve todos os elementos que têm as classes 'vermelho' e 'teste':</p> - -<pre class="eval"> document.getElementsByClassName('vermelho teste') -</pre> - -<p>Devolve todos os elementos que têm a classe 'teste', dentro de um elemento que tem o ID 'principal':</p> - -<pre class="eval"> document.getElementById('principal').getElementsByClassName('teste') -</pre> - -<p>E se formos adiante e adicionarmos extras do Array do <a href="pt/New_in_JavaScript_1.6">JavaScript 1.6</a>, podemos fazer algumas combinações realmente boas.</p> - -<p>Encontre todos os elementos div que têm a classe 'teste'</p> - -<pre class="eval"> Array.filter( document.getElementsByClassName('teste'), function(elem){ - return elem.nodeName == 'DIV'; - }); -</pre> - -<p>Encontre todos os elementos que têm a classe 'teste' (como faz seu elemento pai)</p> - -<pre class="eval"> var teste = document.getElementsByClassName('teste'); - Array.filter( teste, function(elem){ - return Array.indexOf( teste, elem.parentNode ) > -1; - }); -</pre> - -<p><span class="comment">XXX escreva-me == Notas == Um método similar existe em <code>Element</code></span></p> - -<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> - -<p><a class="external" href="http://whatwg.org/specs/web-apps/current-work/#getelementsbyclassname">WHATWG Web Applications 1.0: getElementsByClassName</a></p> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> - -<p>{{ languages( { "en": "en/DOM/document.getElementsByClassName", "fr": "fr/DOM/document.getElementsByClassName" } ) }}</p> diff --git a/files/pt-pt/web/api/document/index.html b/files/pt-pt/web/api/document/index.html deleted file mode 100644 index c6c9e72b47..0000000000 --- a/files/pt-pt/web/api/document/index.html +++ /dev/null @@ -1,458 +0,0 @@ ---- -title: Document -slug: Web/API/Document -tags: - - API - - DOM - - Documento - - Interface - - Referencia -translation_of: Web/API/Document ---- -<div>{{APIRef}}</div> - -<div> </div> - -<p><span class="seoSummary">A interface <strong><code>Document</code></strong> representa qualquer página da <em>Web </em>carregada no navegador e serve como um ponto de entrada para um conteúdo da página da <em>Web</em>, que é <a href="/pt-PT/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">árvore DOM</a>.</span> A árvore DOM inclui elementos, tais como {{HTMLElement("body")}} e {{HTMLElement("table")}}, entre <a href="/pt-PT/docs/Web/HTML/Elemento">muitos outros</a>. Este fornece funcionalidade globalmente para o documento, tal como obter o URL da página e criar novos elementos no documento.</p> - -<p>{{inheritanceDiagram}}</p> - -<p>The <code>Document</code> interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/XML" title="XML">XML</a>, SVG, …), a larger API is available: HTML documents, served with the <code>text/html</code> content type, also implement the {{domxref("HTMLDocument")}} interface, whereas XML and SVG documents implement the {{domxref("XMLDocument")}} interface.</p> - -<h2 id="Properties" name="Properties">Construtor</h2> - -<dl> - <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt> - <dd>Cria um novo objeto <code>Document</code>.</dd> -</dl> - -<h2 id="Properties" name="Properties">Propriedades</h2> - -<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> - -<dl> - <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> - <dd>Provides access to all elements in the document. This is a legacy, non-standard interface and should not be used.</dd> - <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> - <dd>Used with {{domxref("Document.load")}} to indicate an asynchronous request.</dd> - <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt> - <dd>Returns the character set being used by the document.</dd> - <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt> - <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> - <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Indicates whether the document is rendered in <em>quirks</em> or <em>strict</em> mode.</dd> - <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Returns the Content-Type from the MIME Header of the current document.</dd> - <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> - <dd>Returns the Document Type Definition (DTD) of the current document.</dd> - <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> - <dd>Returns the {{domxref("Element")}} that is a direct child of the document. For HTML documents, this is normally the {{HTMLElement("html")}} element.</dd> - <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> - <dd>Returns the document location as a string.</dd> - <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> - <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd> - <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> - <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> - <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> - <dd>…</dd> - <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> - <dd>Returns the DOM implementation associated with the current document.</dd> - <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> - <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> - <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> - <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> - <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> - <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> only if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> - <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> - <dd>The element that's currently in full screen mode for this document.</dd> - <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> - <dd><code>true</code> if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the curent document.</dd> - <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> - <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> - <dd>Returns the preferred style sheet set as specified by the page author.</dd> - <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt> - <dd>Returns a reference to the {{domxref("Element")}} that scrolls the document.</dd> - <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> - <dd>Returns which style sheet set is currently in use.</dd> - <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt> - <dd>Returns a list of the style sheet objects on the current document.</dd> - <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt> - <dd>Returns a list of the style sheet sets available on the document.</dd> - <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> - <dd>…</dd> - <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>…</dd> - <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> - <dd> - <p>Returns a <code>string</code> denoting the visibility state of the document. Possible values are <code>visible</code>, <code>hidden</code>, <code>prerender</code>, and <code>unloaded</code>.</p> - </dd> - <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> - <dd>Returns the encoding as determined by the XML declaration.</dd> - <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> - <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> - <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> - <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> -</dl> - -<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> - -<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> - -<h3 id="Extensão_para_o_documento_HTML">Extensão para o documento HTML</h3> - -<p><em>The <code>Document</code> interface for HTML documents inherits from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents.</em></p> - -<dl> - <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt> - <dd>Returns the currently focused element.</dd> - <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> - <dd>Returns or sets the color of active links in the document body.</dd> - <dt>{{domxref("Document.anchors")}}</dt> - <dd>Returns a list of all of the anchors in the document.</dd> - <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> - <dd>Returns an ordered list of the applets within a document.</dd> - <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> - <dd>Gets/sets the background color of the current document.</dd> - <dt>{{domxref("Document.body")}}</dt> - <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd> - <dt>{{domxref("Document.cookie")}}</dt> - <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> - <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> - <dd>Returns a reference to the window object.</dd> - <dt>{{domxref("Document.designMode")}}</dt> - <dd>Gets/sets the ability to edit the whole document.</dd> - <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt> - <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> - <dt>{{domxref("Document.domain")}}</dt> - <dd>Gets/sets the domain of the current document.</dd> - <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> - <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> - <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt> - <dd>Gets/sets the foreground color, or text color, of the current document.</dd> - <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> - <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> - <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> - <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> - <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Gets/sets the height of the current document.</dd> - <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> - <dd>Returns a list of the images in the current document.</dd> - <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> - <dd>Returns the date on which the document was last modified.</dd> - <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> - <dd>Gets/sets the color of hyperlinks in the document.</dd> - <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> - <dd>Returns a list of all the hyperlinks in the document.</dd> - <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> - <dd>Returns the URI of the current document.</dd> - <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> - <dd>Returns a list of the available plugins.</dd> - <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Returns loading status of the document.</dd> - <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> - <dd>Returns the URI of the page that linked to this page.</dd> - <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> - <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> - <dt>{{domxref("Document.title")}}</dt> - <dd>Sets or gets the title of the current document.</dd> - <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> - <dd>Returns<span style="line-height: 19.0909080505371px;"> the document location as a string.</span></dd> - <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> - <dd>Gets/sets the color of visited hyperlinks.</dd> - <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Returns the width of the current document.</dd> -</dl> - -<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd> - <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd> - <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("copy")}} event.</dd> - <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("cut")}} event.</dd> - <dt>{{domxref("Document.onfullscreenchange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> - <dt>{{domxref("Document.onfullscreenerror")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> - <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("paste")}} event.</dd> - <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> - <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd> - <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> - <dd>Represetnts the event handling code for the {{event("pointerlockerror")}} event.</dd> - <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd> - <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> - <dt>{{domxref("Document.onvisibilitychange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.</dd> - <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt> - <dd>Represents the event handling code for the {{event("wheel")}} event.</dd> -</dl> - -<p>The <code>Document</code> interface is extended with the {{domxref("GlobalEventHandlers")}} interface:</p> - -<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}</p> - -<h2 id="Methods" name="Methods">Methods</h2> - -<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> - -<dl> - <dt>{{domxref("Document.adoptNode()")}}</dt> - <dd>Adopt node from an external document.</dd> - <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> - <dd>See {{domxref("Window.captureEvents")}}.</dd> - <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt> - <dd>Gets the {{domxref("CaretPosition")}} at or near the specified coordinates.</dd> - <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> - <dd>Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.</dd> - <dt>{{domxref("Document.createAttribute()")}}</dt> - <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> - <dt>{{domxref("Document.createAttributeNS()")}}</dt> - <dd>Creates a new attribute node in a given namespace and returns it.</dd> - <dt>{{domxref("Document.createCDATASection()")}}</dt> - <dd>Creates a new CDATA node and returns it.</dd> - <dt>{{domxref("Document.createComment()")}}</dt> - <dd>Creates a new comment node and returns it.</dd> - <dt>{{domxref("Document.createDocumentFragment()")}}</dt> - <dd>Creates a new document fragment.</dd> - <dt>{{domxref("Document.createElement()")}}</dt> - <dd>Creates a new element with the given tag name.</dd> - <dt>{{domxref("Document.createElementNS()")}}</dt> - <dd>Creates a new element with the given tag name and namespace URI.</dd> - <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> - <dd>Creates a new entity reference object and returns it.</dd> - <dt>{{domxref("Document.createEvent()")}}</dt> - <dd>Creates an event object.</dd> - <dt>{{domxref("Document.createNodeIterator()")}}</dt> - <dd>Creates a {{domxref("NodeIterator")}} object.</dd> - <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> - <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> - <dt>{{domxref("Document.createRange()")}}</dt> - <dd>Creates a {{domxref("Range")}} object.</dd> - <dt>{{domxref("Document.createTextNode()")}}</dt> - <dd>Creates a text node.</dd> - <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt> - <dd>Creates a {{domxref("Touch")}} object.</dd> - <dt>{{domxref("Document.createTouchList()")}}</dt> - <dd>Creates a {{domxref("TouchList")}} object.</dd> - <dt>{{domxref("Document.createTreeWalker()")}}</dt> - <dd>Creates a {{domxref("TreeWalker")}} object.</dd> - <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt> - <dd>Returns the topmost element at the specified coordinates. </dd> - <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt> - <dd>Returns an array of all elements at the specified coordinates.</dd> - <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> - <dd>Enables the style sheets for the specified style sheet set.</dd> - <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> - <dd>Release the pointer lock.</dd> - <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> - <dd>Returns an array of all {{domxref("Animation")}} objects currently in effect, whose target elements are descendants of the <code>document</code>.</dd> - <dt>{{domxref("Document.getElementsByClassName()")}}</dt> - <dd>Returns a list of elements with the given class name.</dd> - <dt>{{domxref("Document.getElementsByTagName()")}}</dt> - <dd>Returns a list of elements with the given tag name.</dd> - <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> - <dd>Returns a list of elements with the given tag name and namespace.</dd> - <dt>{{domxref("Document.importNode()")}}</dt> - <dd>Returns a clone of a node from an external document.</dd> - <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> - <dd>Replaces entities, normalizes text nodes, etc.</dd> - <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt> - <dd>Registers a web component.</dd> - <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Releases the current mouse capture if it's on an element in this document.</dd> - <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> - <dd>See {{domxref("Window.releaseEvents()")}}.</dd> - <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> - <dd>See {{domxref("Window.routeEvent()")}}.</dd> - <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> -</dl> - -<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> - -<dl> - <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt> - <dd>Returns an object reference to the identified element.</dd> - <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> - <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> - <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> - <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> -</dl> - -<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> - -<dl> - <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> - <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> - <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt> - <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> - <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> - <dd>Evaluates an XPath expression.</dd> -</dl> - -<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3> - -<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> - -<dl> - <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> - <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> - <dt>{{domxref("document.close()")}}</dt> - <dd>Closes a document stream for writing.</dd> - <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> - <dd>On an editable document, executes a formating command.</dd> - <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt> - <dd>Returns a list of elements with the given name.</dd> - <dt>{{domxref("document.getSelection()")}}</dt> - <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd> - <dt>{{domxref("document.hasFocus()")}}</dt> - <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> - <dt>{{domxref("document.open()")}}</dt> - <dd>Opens a document stream for writing.</dd> - <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt> - <dd>Returns true if the formating command can be executed on the current range.</dd> - <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt> - <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> - <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt> - <dd>Returns true if the formating command has been executed on the current range.</dd> - <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt> - <dd>Returns true if the formating command is supported on the current range.</dd> - <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt> - <dd>Returns the current value of the current range for a formating command.</dd> - <dt>{{domxref("document.write","document.write(String text)")}}</dt> - <dd>Writes text in a document.</dd> - <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt> - <dd>Writes a line of text in a document.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td>Adds <code>onvisibility</code><code>change</code>.</td> - </tr> - <tr> - <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td> - <td>{{Spec2('Selection API')}}</td> - <td>Adds <code>onselectstart</code> and <code>onselectionchange</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1','#i-Document','Document')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition for the interface</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>Supersede DOM 1</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Supersede DOM 2</td> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Intend to supersede DOM 3</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> - <td>{{Spec2('DOM3 XPath')}}</td> - <td>Define the {{domxref("XPathEvaluator")}} interface which extend document.</td> - </tr> - <tr> - <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes</td> - </tr> - <tr> - <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> - <td>{{Spec2('HTML Editing')}}</td> - <td>Extend the <code>Document</code> interface</td> - </tr> - <tr> - <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Extend the <code>Document</code> interface</td> - </tr> - <tr> - <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> - <td>{{Spec2('CSSOM')}}</td> - <td>Extend the <code>Document</code> interface</td> - </tr> - <tr> - <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> - <td>{{Spec2('Pointer Lock')}}</td> - <td>Extend the <code>Document</code> interface</td> - </tr> - </tbody> -</table> - -<h2 id="Notas_de_compatibilidade_do_navegador">Notas de compatibilidade do navegador</h2> - -<h3 id="Notas_do_Firefox">Notas do Firefox</h3> - -<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> - -<dl> - <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> - <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> - <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> - <dt>{{domxref("document.popupNode")}}</dt> - <dd>Returns the node upon which a popup was invoked.</dd> - <dt>{{domxref("document.tooltipNode")}}</dt> - <dd>Returns the node which is the target of the current tooltip.</dd> -</dl> - -<p>Mozilla also define some non-standard methods:</p> - -<dl> - <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> - <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> - <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> - <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> - <dt>{{domxref("document.loadOverlay")}}</dt> - <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> - <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> - <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> -</dl> - -<h3 id="Notas_do_Internet_Explorer">Notas do Internet Explorer</h3> - -<p>Microsoft defines some non-standard properties:</p> - -<dl> - <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> - <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> -</dl> - -<dl> - <dt>{{domxref("document.contains")}}</dt> - <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> -</dl> - -<p> </p> diff --git a/files/pt-pt/web/api/document/queryselector/index.html b/files/pt-pt/web/api/document/queryselector/index.html deleted file mode 100644 index e979e285d3..0000000000 --- a/files/pt-pt/web/api/document/queryselector/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Document.querySelector() -slug: Web/API/Document/querySelector -tags: - - API - - DOM - - Document - - Elementos DOM - - Referencia - - Selector API - - Seletores CSS - - Seletors - - metodo - - querySelector -translation_of: Web/API/Document/querySelector ---- -<div>{{ApiRef("DOM")}}</div> - -<p>O método <code><strong>querySelector()</strong></code> de {{domxref("Document")}} retorna o primeiro {{domxref("Element")}} dentro do documento que corresponde ao seletor, ou grupo de seleteores especificados. Se não há elementos que correspondem, <code>null</code> é devolvido como resultado.</p> - -<div class="note"> -<p><strong>Nota</strong>: A correspondência é feita através de uma travessia <em>pre-order</em> em profundidade dos nódulos do documento, a começar com o primeiro elemento da marcação do documento e iterando através de nódulos sequenciais por ordem do número de nódulos filhos.</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox notranslate"><var>element</var> = document.querySelector(<var>selectors</var>); -</pre> - -<h3 id="Parameteros">Parameteros</h3> - -<dl> - <dt><var>selectors</var></dt> - <dd>Um {{domxref("DOMString")}} a conter um ou mais seletores para com que corresponder. Esta string tem de ser um seletor de CSS valido; se não é, uma <em>exception</em> <code>SYNTAX_ERR</code> é lançada. Veja <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizar elementos do DOM a usar seletores</a> para saber mais sobre seletor e como os gerir.</dd> -</dl> - -<div class="note"> -<p><strong>Nota:</strong> Os carateres que não fazem parte da sintaxe padrão do CSS devem ser evitados ao usar um caráter de barra invertida. Uma vez que o JavaScript também usa barra invertida para escapar, deve ter especial cuidado ao escrever <em>string literals</em> usando estes carateres. Veja {{anch("Escapar carateres especiais")}} para obter mais informação.</p> -</div> - -<h3 id="Resultado">Resultado</h3> - -<p>Um objeto {{domxref("HTMLElement")}} a representar o primeiro elemento no documento que corresponde aos <a href="/en-US/docs/Web/CSS/CSS_Selectors">seletores de CSS</a>, ou <code>null</code> se não há elementos correspondentes.</p> - -<p>Se precisar de uma lista de todos os elementos que correspondem ao seletores especificados, deve usar {{domxref("Document.querySelectorAll", "querySelectorAll()")}}.</p> - -<h3 id="Exeções">Exeções</h3> - -<dl> - <dt><code>SYNTAX_ERR</code></dt> - <dd>O syntaxe dos <em>selectors</em> especificados está incorrecto.</dd> -</dl> - -<h2 id="Notas_de_uso">Notas de uso</h2> - -<p>Se o seletor especificado corresponde a um ID que é incorretamente utilizado mais que uma vez num documento, o primeiro elemento com esse ID será devolvido.</p> - -<p><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudoelementos de CSS</a> não devolvem elementos, como é especificado na <a href="http://www.w3.org/TR/selectors-api/#grammar">API de seletores</a>.</p> - -<h3 id="Escapar_carateres_especiais">Escapar carateres especiais</h3> - -<p>Para corresponder a um ID ou seletor que não segue a sintaxe de CSS padrão (ao usar o caráter de dois pontos ou espaço incorretamente), deve escapar o caráter com uma barra invertida ("<code>\</code>"). Como a barra invertida também é um caráter de escapar no JavaScript, se a escrever numa <em>string literal</em>, tem de a escapar duas vezes (primeiro para a <em>string</em> do JavaScript, e depois para o <code>querySelector()</code>):</p> - -<pre class="brush: html notranslate"><div id="foo\bar"></div> -<div id="foo:bar"></div> - -<script> - console.log('#foo\bar'); // "#fooar" (\b é o caráter de controlo para a barra invertida) - document.querySelector('#foo\bar'); // Corresponde a nada - - console.log('#foo\\bar'); // "#foo\bar" - console.log('#foo\\\\bar'); // "#foo\\bar" - document.querySelector('#foo\\\\bar'); // Corresponde ao primeiro div - - document.querySelector('#foo:bar'); // Corresponde a nada - document.querySelector('#foo\\:bar'); // Corresponde ao segundo div -</script></pre> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Encontrar_o_primeiro_elemento_que_corresponde_a_uma_classe">Encontrar o primeiro elemento que corresponde a uma classe</h3> - -<p>Neste exemplo, o primeiro elemento no documento com a classe <code>myclass</code> é devolvida:</p> - -<pre class="brush: js notranslate">var el = document.querySelector(".myclass"); -</pre> - -<h3 id="Um_seletor_mais_complexo">Um seletor mais complexo</h3> - -<p>Seletores são muito poderosos, como demonstrado no seguinte exemplo. O primeiro elemento {{HTMLElement("input")}} com o nome "login" (<code><input name="login"/></code>) encontrado dentro dum {{HTMLElement("div")}} cuja classe é "user-panel main" (<code><div class="user-panel main"></code>) no documento é devolvido:</p> - -<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']"); -</pre> - -<h3 id="Negação">Negação</h3> - -<p>Todos os strings de seletores de CSS são válidos, assim também é possivel ter seletores de negação:</p> - -<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre> - -<p>Isto seléciona um <code>input</code> que tem um <code>div</code> com classe <code>user-panel</code> como parente, mas sem a classe <code>main</code>.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "document.querySelector()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<div>{{Compat("api.Document.querySelector")}}</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizar elementos DOM a usar selectors</a></li> - <li>{{domxref("Element.querySelector()")}}</li> - <li>{{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("Element.querySelectorAll()")}}</li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippets de código para o querySelector</a></li> -</ul> diff --git a/files/pt-pt/web/api/document/visibilitychange_event/index.html b/files/pt-pt/web/api/document/visibilitychange_event/index.html deleted file mode 100644 index 02df020b70..0000000000 --- a/files/pt-pt/web/api/document/visibilitychange_event/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: visibilitychange -slug: Web/API/Document/visibilitychange_event -translation_of: Web/API/Document/visibilitychange_event ---- -<p>O evento <code>visibilitychange</code> é ativado quando o conteúdo de um separador se torna visível ou foi ocultado.</p> - -<h2 id="Informação_geral">Informação geral</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Especificação</dt> - <dd style="margin: 0 0 0 120px;">{{SpecName("Page Visibility API")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("event")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">Sim</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelável</dt> - <dd style="margin: 0 0 0 120px;">Não</dd> - <dt style="float: left; text-align: right; width: 120px;">Destino</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Ação Predefinida</dt> - <dd style="margin: 0 0 0 120px;"> </dd> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="Propriedades">Propriedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propriedade</th> - <th scope="col">Tipo</th> - <th scope="col">Descrição</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush:js;">document.addEventListener("visibilitychange", function() { - console.log( document.visibilityState ); -}); -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>13 {{property_prefix("webkit")}}<br> - 33</td> - <td>{{CompatGeckoDesktop(10)}} {{property_prefix("moz")}}<br> - {{CompatGeckoDesktop(18)}}</td> - <td>10</td> - <td> - <p>12.10[1]</p> - </td> - <td>6.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>4.4 {{property_prefix("webkit")}}</td> - <td>{{CompatGeckoMobile(10)}} {{property_prefix("moz")}}<br> - {{CompatGeckoMobile(18)}}</td> - <td>{{CompatUnknown}}</td> - <td>12.10 [1]</td> - <td>7</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Doesn't fire the <code>visibilitychange</code> event when the browser window is minimized, nor set <code>hidden</code> to <code>true</code>.</p> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/Page_Visibility_API" title="DOM/Using_the_Page_Visibility_API">Utilização de Page Visibility API</a></li> - <li><a href="/pt-PT/docs/Web">Document.visibilityState</a></li> -</ul> diff --git a/files/pt-pt/web/api/document_object_model/index.html b/files/pt-pt/web/api/document_object_model/index.html deleted file mode 100644 index eecf95b04f..0000000000 --- a/files/pt-pt/web/api/document_object_model/index.html +++ /dev/null @@ -1,502 +0,0 @@ ---- -title: Modelo de Objeto de Documento (DOM) -slug: Web/API/Document_Object_Model -tags: - - API - - DOM - - DOM Reference - - NeedsTranslation - - Referencia - - TopicStub -translation_of: Web/API/Document_Object_Model -original_slug: DOM/DOM_Reference ---- -<div>{{DefaultAPISidebar("DOM")}}</div> - -<p>O <strong>Modelo de Objeto de Documento (<em>DOM</em>)</strong> interliga as páginas da <em>Web</em> para <em>scripts</em> ou linguagens de programação. Normalmente, isso significa que JavaScript, mas a modelagem de documentos HTML, SVG ou XML como objetos não é parte da linguagem de JavaScript. O modelo DOM representa um documento com uma árvore lógica. Cada ramo da árvore termina em um nodo, e cada nodo contém objetos. Os métodos DOM permitem o acesso programático à árvore; com eles, pode alterar a estrutura, o estilo ou o conteúdo do documento. Os nodos podem ter manipuladores de eventos anexados aos mesmos. Quando é acionado um evento, os manipuladores de eventos são executados .</p> - -<p>Está disponível uma <a href="/pt-PT/docs/Gecko_DOM_Reference/Introduction">introdução </a>ao DOM.</p> - -<h2 id="Interfaces_DOM">Interfaces DOM</h2> - -<div class="index"> -<ul> - <li>{{domxref("Attr")}}</li> - <li>{{domxref("CharacterData")}}</li> - <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> - <li>{{domxref("Comment")}}</li> - <li>{{domxref("CustomEvent")}}</li> - <li>{{domxref("Document")}}</li> - <li>{{domxref("DocumentFragment")}}</li> - <li>{{domxref("DocumentType")}}</li> - <li>{{domxref("DOMError")}}</li> - <li>{{domxref("DOMException")}}</li> - <li>{{domxref("DOMImplementation")}}</li> - <li>{{domxref("DOMString")}}</li> - <li>{{domxref("DOMTimeStamp")}}</li> - <li>{{domxref("DOMSettableTokenList")}}</li> - <li>{{domxref("DOMStringList")}}</li> - <li>{{domxref("DOMTokenList")}}</li> - <li>{{domxref("Element")}}</li> - <li>{{domxref("Event")}}</li> - <li>{{domxref("EventTarget")}}</li> - <li>{{domxref("HTMLCollection")}}</li> - <li>{{domxref("MutationObserver")}}</li> - <li>{{domxref("MutationRecord")}}</li> - <li>{{domxref("Node")}}</li> - <li>{{domxref("NodeFilter")}}</li> - <li>{{domxref("NodeIterator")}}</li> - <li>{{domxref("NodeList")}}</li> - <li>{{domxref("ParentNode")}} {{experimental_inline}}</li> - <li>{{domxref("ProcessingInstruction")}}</li> - <li>{{domxref("Range")}}</li> - <li>{{domxref("Text")}}</li> - <li>{{domxref("TreeWalker")}}</li> - <li>{{domxref("URL")}}</li> - <li>{{domxref("Window")}}</li> - <li>{{domxref("Worker")}}</li> - <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> -</ul> -</div> - -<h2 id="Interfaces_DOM_obsoletas_obsolete_inline">Interfaces DOM obsoletas {{obsolete_inline}}</h2> - -<p>The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still not very clear whether some may be reintroduced or not, but for the time being they have to be considered as obsolete and should be avoided:</p> - -<div class="index"> -<ul> - <li>{{domxref("CDATASection")}}</li> - <li>{{domxref("DOMConfiguration")}}</li> - <li>{{domxref("DOMErrorHandler")}}</li> - <li>{{domxref("DOMImplementationList")}}</li> - <li>{{domxref("DOMImplementationRegistry")}}</li> - <li>{{domxref("DOMImplementationSource")}}</li> - <li>{{domxref("DOMLocator")}}</li> - <li>{{domxref("DOMObject")}}</li> - <li>{{domxref("DOMUserData")}}</li> - <li>{{domxref("Entity")}}</li> - <li>{{domxref("EntityReference")}}</li> - <li>{{domxref("NamedNodeMap")}}</li> - <li>{{domxref("NameList")}}</li> - <li>{{domxref("Notation")}}</li> - <li>{{domxref("TypeInfo")}}</li> - <li>{{domxref("UserDataHandler")}}</li> -</ul> -</div> - -<h2 id="Interfaces_HTML">Interfaces HTML</h2> - -<p>A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.</p> - -<p>An <code>HTMLDocument</code> object also gives access to various features of browsers like the ta or the window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}}. Eventually, {{domxref("Selection")}} is done on the document.</p> - -<h3 id="Interfaces_de_elemento_HTML">Interfaces de elemento HTML</h3> - -<div class="index"> -<ul> - <li>{{domxref("HTMLAnchorElement")}}</li> - <li>{{domxref("HTMLAppletElement")}}</li> - <li>{{domxref("HTMLAreaElement")}}</li> - <li>{{domxref("HTMLAudioElement")}}</li> - <li>{{domxref("HTMLBaseElement")}}</li> - <li>{{domxref("HTMLBodyElement")}}</li> - <li>{{domxref("HTMLBRElement")}}</li> - <li>{{domxref("HTMLButtonElement")}}</li> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("HTMLDataElement")}}</li> - <li>{{domxref("HTMLDataListElement")}}</li> - <li>{{domxref("HTMLDialogElement")}}</li> - <li>{{domxref("HTMLDirectoryElement")}}</li> - <li>{{domxref("HTMLDivElement")}}</li> - <li>{{domxref("HTMLDListElement")}}</li> - <li>{{domxref("HTMLElement")}}</li> - <li>{{domxref("HTMLEmbedElement")}}</li> - <li>{{domxref("HTMLFieldSetElement")}}</li> - <li>{{domxref("HTMLFontElement")}}</li> - <li>{{domxref("HTMLFormElement")}}</li> - <li>{{domxref("HTMLFrameElement")}}</li> - <li>{{domxref("HTMLFrameSetElement")}}</li> - <li>{{domxref("HTMLHeadElement")}}</li> - <li>{{domxref("HTMLHeadingElement")}}</li> - <li>{{domxref("HTMLHtmlElement")}}</li> - <li>{{domxref("HTMLHRElement")}}</li> - <li>{{domxref("HTMLIFrameElement")}}</li> - <li>{{domxref("HTMLImageElement")}}</li> - <li>{{domxref("HTMLInputElement")}}</li> - <li>{{domxref("HTMLKeygenElement")}}</li> - <li>{{domxref("HTMLLabelElement")}}</li> - <li>{{domxref("HTMLLegendElement")}}</li> - <li>{{domxref("HTMLLIElement")}}</li> - <li>{{domxref("HTMLLinkElement")}}</li> - <li>{{domxref("HTMLMapElement")}}</li> - <li>{{domxref("HTMLMediaElement")}}</li> - <li>{{domxref("HTMLMenuElement")}}</li> - <li>{{domxref("HTMLMetaElement")}}</li> - <li>{{domxref("HTMLMeterElement")}}</li> - <li>{{domxref("HTMLModElement")}}</li> - <li>{{domxref("HTMLObjectElement")}}</li> - <li>{{domxref("HTMLOListElement")}}</li> - <li>{{domxref("HTMLOptGroupElement")}}</li> - <li>{{domxref("HTMLOptionElement")}}</li> - <li>{{domxref("HTMLOutputElement")}}</li> - <li>{{domxref("HTMLParagraphElement")}}</li> - <li>{{domxref("HTMLParamElement")}}</li> - <li>{{domxref("HTMLPreElement")}}</li> - <li>{{domxref("HTMLProgressElement")}}</li> - <li>{{domxref("HTMLQuoteElement")}}</li> - <li>{{domxref("HTMLScriptElement")}}</li> - <li>{{domxref("HTMLSelectElement")}}</li> - <li>{{domxref("HTMLSourceElement")}}</li> - <li>{{domxref("HTMLSpanElement")}}</li> - <li>{{domxref("HTMLStyleElement")}}</li> - <li>{{domxref("HTMLTableElement")}}</li> - <li>{{domxref("HTMLTableCaptionElement")}}</li> - <li>{{domxref("HTMLTableCellElement")}}</li> - <li>{{domxref("HTMLTableDataCellElement")}}</li> - <li>{{domxref("HTMLTableHeaderCellElement")}}</li> - <li>{{domxref("HTMLTableColElement")}}</li> - <li>{{domxref("HTMLTableRowElement")}}</li> - <li>{{domxref("HTMLTableSectionElement")}}</li> - <li>{{domxref("HTMLTextAreaElement")}}</li> - <li>{{domxref("HTMLTimeElement")}}</li> - <li>{{domxref("HTMLTitleElement")}}</li> - <li>{{domxref("HTMLTrackElement")}}</li> - <li>{{domxref("HTMLUListElement")}}</li> - <li>{{domxref("HTMLUnknownElement")}}</li> - <li>{{domxref("HTMLVideoElement")}}</li> -</ul> -</div> - -<h3 id="Outras_interfaces">Outras interfaces</h3> - -<div class="index"> -<ul> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("CanvasPixelArray")}}</li> - <li>{{domxref("NotifyAudioAvailableEvent")}}</li> - <li>{{domxref("HTMLAllCollection")}}</li> - <li>{{domxref("HTMLFormControlsCollection")}}</li> - <li>{{domxref("HTMLOptionsCollection")}}</li> - <li>{{domxref("HTMLPropertiesCollection")}}</li> - <li>{{domxref("DOMStringMap")}}</li> - <li>{{domxref("RadioNodeList")}}</li> - <li>{{domxref("MediaError")}}</li> -</ul> -</div> - -<h3 id="Interfaces_HTML_obsoletas_obsolete_inline">Interfaces HTML obsoletas {{obsolete_inline}}</h3> - -<div class="index"> -<ul> - <li>{{domxref("HTMLBaseFontElement")}}</li> - <li>{{domxref("HTMLIsIndexElement")}}</li> -</ul> -</div> - -<h2 id="SGV_-_Interfaces">SGV - Interfaces</h2> - -<h3 id="Interfaces_de_elemento_SVG">Interfaces de elemento SVG</h3> - -<div class="index"> -<ul> - <li>{{domxref("SVGAElement")}}</li> - <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAnimationElement")}}</li> - <li>{{domxref("SVGAnimateElement")}}</li> - <li>{{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAnimateMotionElement")}}</li> - <li>{{domxref("SVGAnimateTransformElement")}}</li> - <li>{{domxref("SVGCircleElement")}}</li> - <li>{{domxref("SVGClipPathElement")}}</li> - <li>{{domxref("SVGColorProfileElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> - <li>{{domxref("SVGCursorElement")}}</li> - <li>{{domxref("SVGDefsElement")}}</li> - <li>{{domxref("SVGDescElement")}}</li> - <li>{{domxref("SVGElement")}}</li> - <li>{{domxref("SVGEllipseElement")}}</li> - <li>{{domxref("SVGFEBlendElement")}}</li> - <li>{{domxref("SVGFEColorMatrixElement")}}</li> - <li>{{domxref("SVGFEComponentTransferElement")}}</li> - <li>{{domxref("SVGFECompositeElement")}}</li> - <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> - <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> - <li>{{domxref("SVGFEDisplacementMapElement")}}</li> - <li>{{domxref("SVGFEDistantLightElement")}}</li> - <li>{{domxref("SVGFEDropShadowElement")}}</li> - <li>{{domxref("SVGFEFloodElement")}}</li> - <li>{{domxref("SVGFEFuncAElement")}}</li> - <li>{{domxref("SVGFEFuncBElement")}}</li> - <li>{{domxref("SVGFEFuncGElement")}}</li> - <li>{{domxref("SVGFEFuncRElement")}}</li> - <li>{{domxref("SVGFEGaussianBlurElement")}}</li> - <li>{{domxref("SVGFEImageElement")}}</li> - <li>{{domxref("SVGFEMergeElement")}}</li> - <li>{{domxref("SVGFEMergeNodeElement")}}</li> - <li>{{domxref("SVGFEMorphologyElement")}}</li> - <li>{{domxref("SVGFEOffsetElement")}}</li> - <li>{{domxref("SVGFEPointLightElement")}}</li> - <li>{{domxref("SVGFESpecularLightingElement")}}</li> - <li>{{domxref("SVGFESpotLightElement")}}</li> - <li>{{domxref("SVGFETileElement")}}</li> - <li>{{domxref("SVGFETurbulenceElement")}}</li> - <li>{{domxref("SVGFilterElement")}}</li> - <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> - <li>{{domxref("SVGFontElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGForeignObjectElement")}}</li> - <li>{{domxref("SVGGElement")}}</li> - <li>{{domxref("SVGGeometryElement")}}</li> - <li>{{domxref("SVGGlyphElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGGradientElement")}}</li> - <li>{{domxref("SVGGraphicsElement")}}</li> - <li>{{domxref("SVGHatchElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGHatchpathElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGHKernElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGImageElement")}}</li> - <li>{{domxref("SVGLinearGradientElement")}}</li> - <li>{{domxref("SVGLineElement")}}</li> - <li>{{domxref("SVGMarkerElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMaskElement")}}</li> - <li>{{domxref("SVGMeshElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMeshGradientElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMeshpatchElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMeshrowElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGMetadataElement")}}</li> - <li>{{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGMPathElement")}}</li> - <li>{{domxref("SVGPathElement")}}</li> - <li>{{domxref("SVGPatternElement")}}</li> - <li>{{domxref("SVGPolylineElement")}}</li> - <li>{{domxref("SVGPolygonElement")}}</li> - <li>{{domxref("SVGRadialGradientElement")}}</li> - <li>{{domxref("SVGRectElement")}}</li> - <li>{{domxref("SVGScriptElement")}}</li> - <li>{{domxref("SVGSetElement")}}</li> - <li>{{domxref("SVGSolidcolorElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGStopElement")}}</li> - <li>{{domxref("SVGStyleElement")}}</li> - <li>{{domxref("SVGSVGElement")}}</li> - <li>{{domxref("SVGSwitchElement")}}</li> - <li>{{domxref("SVGSymbolElement")}}</li> - <li>{{domxref("SVGTextContentElement")}}</li> - <li>{{domxref("SVGTextElement")}}</li> - <li>{{domxref("SVGTextPathElement")}}</li> - <li>{{domxref("SVGTextPositioningElement")}}</li> - <li>{{domxref("SVGTitleElement")}}</li> - <li>{{domxref("SVGTRefElement")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGTSpanElement")}}</li> - <li>{{domxref("SVGUseElement")}}</li> - <li>{{domxref("SVGUnknownElement")}} {{experimental_inline}}</li> - <li>{{domxref("SVGViewElement")}}</li> - <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li> -</ul> -</div> - -<h3 id="Interfaces_de_tipo_de_dados_SVG">Interfaces de tipo de dados SVG</h3> - -<p>Here are the DOM API for data types used in the definitions of SVG properties and attributes.</p> - -<div class="note"> -<p><strong>Nota:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.</p> -</div> - -<h4 id="Tipo_estático">Tipo estático</h4> - -<div class="index"> -<ul> - <li>{{domxref("SVGAngle")}}</li> - <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGICCColor")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGElementInstance")}}</li> - <li>{{domxref("SVGElementInstanceList")}}</li> - <li>{{domxref("SVGLength")}}</li> - <li>{{domxref("SVGLengthList")}}</li> - <li>{{domxref("SVGMatrix")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGNameList")}}</li> - <li>{{domxref("SVGNumber")}}</li> - <li>{{domxref("SVGNumberList")}}</li> - <li>{{domxref("SVGPaint")}}</li> - <li>{{domxref("SVGPathSeg")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPathSegList")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPoint")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPointList")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGPreserveAspectRatio")}}</li> - <li>{{domxref("SVGRect")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGStringList")}}</li> - <li>{{domxref("SVGTransform")}}</li> - <li>{{domxref("SVGTransformList")}}</li> -</ul> -</div> - -<h4 id="Tipo_animado">Tipo animado</h4> - -<div class="index"> -<ul> - <li>{{domxref("SVGAnimatedAngle")}}</li> - <li>{{domxref("SVGAnimatedBoolean")}}</li> - <li>{{domxref("SVGAnimatedEnumeration")}}</li> - <li>{{domxref("SVGAnimatedInteger")}}</li> - <li>{{domxref("SVGAnimatedLength")}}</li> - <li>{{domxref("SVGAnimatedLengthList")}}</li> - <li>{{domxref("SVGAnimatedNumber")}}</li> - <li>{{domxref("SVGAnimatedNumberList")}}</li> - <li>{{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGAnimatedPoints")}}</li> - <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> - <li>{{domxref("SVGAnimatedRect")}}</li> - <li>{{domxref("SVGAnimatedString")}}</li> - <li>{{domxref("SVGAnimatedTransformList")}}</li> -</ul> -</div> - -<h3 id="Interfaces_relacionadas_com_SMIL">Interfaces relacionadas com SMIL</h3> - -<div class="index"> -<ul> - <li>{{domxref("ElementTimeControl")}}</li> - <li>{{domxref("TimeEvent")}}</li> -</ul> -</div> - -<h3 id="Outras_interfaces_SVG">Outras interfaces SVG</h3> - -<div class="index"> -<ul> - <li>{{domxref("GetSVGDocument")}}</li> - <li>{{domxref("ShadowAnimation")}}</li> - <li>{{domxref("SVGColorProfileRule")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGCSSRule")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGDocument")}}</li> - <li>{{domxref("SVGException")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGFitToViewBox")}}</li> - <li>{{domxref("SVGLangSpace")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGLocatable")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGRenderingIntent")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGStylable")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGTests")}}</li> - <li>{{domxref("SVGTransformable")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGUnitTypes")}}</li> - <li>{{domxref("SVGUseElementShadowRoot")}}</li> - <li>{{domxref("SVGURIReference")}}</li> - <li>{{domxref("SVGViewSpec")}} {{deprecated_inline}}</li> - <li>{{domxref("SVGZoomAndPan")}}</li> - <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li> -</ul> -</div> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="/pt-PT/docs/DOM/DOM_Reference/Exemplos">Exemplos de DOM</a></li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody><tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> -</tbody></table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody><tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> -</tbody></table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/pt-pt/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html deleted file mode 100644 index 1f9949733b..0000000000 --- a/files/pt-pt/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Utilizando o Núcleo DOM de Nível 1 do W3C -slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core -tags: - - DOM -translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core -original_slug: Using_the_W3C_DOM_Level_1_Core ---- -<p>O 'Núcleo DOM de Nível 1 do W3C' é um modelo de objetos poderoso para alterar o conteúdo de uma árvore de documentos. É suportado em todos os navegadores principais, incluindo o Mozilla Firefox e o Microsoft Internet Explorer. É uma base poderosa para scrips na <em>Web</em>.</p> - -<h2 id="What_is_a_content_tree.3F" name="What_is_a_content_tree.3F"> O que é uma árvore de conteúdos?</h2> - -<p>Muitos autores HTML pensam que o HTML é algo plano -- um punhado de texto com tags no meio. Entretanto, é muito mais do que somente isso. Qualquer documento HTML (ou do mesmo modo em qualquer documento SGML ou XML) é uma estrutura de árvore. Por exemplo, o seguinte documento e estrutura de árvore são similares (embora não sejam idênticos -- veja as notas em <a href="/en/Whitespace_in_the_DOM" title="en/Whitespace_in_the_DOM">espaços em branco no DOM</a>):</p> - -<pre class="brush: html"><html> -<head> - <title>My Document</title> -</head> -<body> - <h1>Header</h1> - <p>Paragraph</p> -</body> -</html> -</pre> - -<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" class="internal" src="/@api/deki/files/415/=Using_the_W3C_DOM_Level_1_Core-doctree.jpg"></p> - -<p>Quando o Mozilla interpreta um documento, ele constrói uma árvore de conteúdos e então a utiliza para mostrar o documento.</p> - -<p>Os termos utilizados para descrever árvores se aparecem frequentemente no Núcleo DOM Nível 1. Cada uma das caixas desenhadas na árvore acima é um nó na árvore. A linha acima de um nó expressa um relacionamento pai-filho: o nó ao topo é o pai, e o nó abaixo é o filho. Dois filhos do mesmo pai são, portanto, irmãos. Similarmente, pode-se referenciar ancestrais e descentes (Apesar de primos serem um tanto confusos).</p> - -<h3 id="What_does_the_DOM_Level_1_Core_let_me_do.3F" name="What_does_the_DOM_Level_1_Core_let_me_do.3F">O que o Núcleo DOM Nível 1 me permite fazer?</h3> - -<p>O DOM Nível 1 da W3C permite que você altere o conteúdo da árvore <em>do modo que você desejar</em>. É poderoso o bastante para construir qualquer documento HTML a partir do zero. Ele permite autores alterar qualquer coisa no documento a partir de um script, a qualquer instante. O modo mais fácil de um autor de uma página alterar o DOM dinamicamente é utilizando JavaScript. Em JavaScript, o documento é acessível do mesmo modo que em navegadores antigos: através da propriedade <code>document</code> do objeto global. Esse objeto <code>document</code> implementa a <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interface Document</a> da especificação do Nível 1 do DOM do W3C.</p> - -<h3 id="A_simple_example" name="A_simple_example">Um exemplo simples</h3> - -<p>Suponha que autor queira pegar o documento acima e alterar o conteúdo do cabeçalho, e escrever dois parágrafos ao invés de um. O seguinte script irá fazer o trabalho:</p> - -<pre class="brush: js"><span class="highlightgreen">// document.getElementsByTagName("H1") retorna um NodeList dos elementos H1 -// no documento, e o primeiro é o número 0:</span> -var header = document.getElementsByTagName("H1").item(0); - -// o firstChild do cabeçalho é um Text node, e a propriedade data -// do text node contém seu texto: -header.firstChild.data = "A dynamic document"; -// agora o cabeçalho é "A dynamic document". - -// Recupera o primeiro elemento P no documento do mesmo modo: -var para = document.getElementsByTagName("P").item(0); -// e altera seu texto também: -para.firstChild.data = "This is the first paragraph."; - -// cria um novo Text node para o segundo parágrafo -var newText = document.createTextNode("This is the second paragraph."); -// cria um novo Element para ser o segundo parágrafo -var newElement = document.createElement("P"); -// insere o texto no segundo parágrafo -newElement.appendChild(newText); -// e coloca o parágrafo no final do documento acrescentando-o ao -// BODY (que é o pai de para) -para.parentNode.appendChild(newElement); -</pre> - -<p>Você pode ver esse script como <a class="internal" href="/@api/deki/files/2866/=example.html" title="/@api/deki/files/2866/=example.html">um exemplo completo</a>.</p> - -<h3 id="How_can_I_learn_more.3F" name="How_can_I_learn_more.3F">Como posso aprender mais?</h3> - -<p>Agora que você está familiarizado com os conceitos básicos do DOM há um documento explicando os <a href="/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces" title="en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces">métodos fundamentais do DOM Nível 1</a>. Ele é o acompanhamento desse documento.</p> - -<p>Veja também a <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">especificação do Núcleo DOM Nível 1</a> do W3C. É uma especificação razoavelmente clara, apesar de sua formalidade. A principal utilidade para os autores é a descrição dos diferentes tipos de objetos DOM e todas as suas propriedades e métodos. Veja também nossa <a href="/en/DOM" title="en/DOM">outra documentação DOM</a>.</p> - -<div class="originaldocinfo"> -<p><strong>Original Document Information</strong></p> - -<ul> - <li>Author(s): L. David Baron <dbaron at dbaron dot org></li> - <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> -</ul> -</div> diff --git a/files/pt-pt/web/api/domstring/index.html b/files/pt-pt/web/api/domstring/index.html deleted file mode 100644 index abd4b8962e..0000000000 --- a/files/pt-pt/web/api/domstring/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: DOMString -slug: Web/API/DOMString -tags: - - API - - DOM - - Referencia - - String -translation_of: Web/API/DOMString ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>DOMString</code></strong> é uma <em>string</em> codificada em UTF-16. Como a JavaScript já usa <em>strings</em> deste tipo, <code>DOMString</code> é mapeado diretamente a uma {{jsxref("String")}}.</p> - -<p>Passar {{jsxref("null")}} a um método ou parametro que aceita uma <code>DOMString</code> tipicamente é convertido para uma <em>string</em> com o valor <code>"null"</code>.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td> - <td>{{Spec2('WebIDL')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>JavaScript {{jsxref("String")}}</li> - <li>{{domxref("USVString")}}</li> - <li>{{domxref("CSSOMString")}}</li> - <li><a href="/pt-PT/docs/Web/API/DOMString/Binary">Strings binários</a></li> -</ul> diff --git a/files/pt-pt/web/api/element/clientleft/index.html b/files/pt-pt/web/api/element/clientleft/index.html deleted file mode 100644 index 2fa24484b0..0000000000 --- a/files/pt-pt/web/api/element/clientleft/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: element.clientLeft -slug: Web/API/Element/clientLeft -tags: - - PrecisaDeRevisãoEditorial - - Referência_do_DOM_Gecko -translation_of: Web/API/Element/clientLeft -original_slug: DOM/element.clientLeft ---- -<p>{{ ApiRef() }} <span class="comment">Faltam duas imagens no documento</span></p> -<h3 id="Resumo" name="Resumo">Resumo</h3> -<p>A largura da borda esquerda de um elemento em pixels inclui a largura da barra de rolagem vertical se a direção do texto do elemento estiver da direita para a esquerda e se houver um excesso causando uma barra de rolagem vertical na esquerda para ser renderizada. <code>clientLeft</code> não inclui a margem ou o enchimento esquerdo. <code>clientLeft</code> é somente leitura.</p> -<p>Aplicações baseadas em <a href="pt/Gecko">Gecko</a> suportam <code>clientLeft</code> començando com o Gecko 1.9 (<a href="pt/Firefox_3_para_desenvolvedores">Firefox 3</a>, implementado em {{ Bug(111207) }}). Esta propriedade não é suportada pelo Firefox 2 e mais antigos.</p> -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> -<pre class="eval">var <var>left</var> = <var>element</var>.clientLeft; -</pre> -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> -<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> - <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> - <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> - <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> - <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> - <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> - <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> - </div> - <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ 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') }}</span></div> -<p style="margin-top: 270px;"><img alt="Image:clientLeft.png"></p> -<p><img alt="Vertical scrollbar position when layout.scrollbar.side property is set to 1 or to 3"></p> -<p>Quando a <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">propriedade - <i> - layout.scrollbar.side</i> - </a> é configurada para 1 ou para 3 e quando a direção do texto é configurada da direita para a esquerda, <b>então a barra de rolagem vertical é posicionada na esquerda</b> e isto impacta na maneira como o <code>clientLeft</code> é computado.</p> -<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> -<p>Não é parte de qualquer especificação W3C.</p> -<h3 id="Notas" name="Notas">Notas</h3> -<p><code>clientLeft</code> foi primeiramente introduzido no objeto modelo DHTML do MS IE.</p> -<p>A posição da barra de rolagem vertical na direção do texto, direita para a esquerda, configura que o elemento dependerá da <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">preferência - <i> - layout.scrollbar.side</i> - </a></p> -<h3 id="Refer.C3.AAncias" name="Refer.C3.AAncias">Referências</h3> -<ul> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientleft.asp?frame=true">MSDN's clientLeft definition</a></li> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> -</ul> -<p><span class="comment">Categorias</span></p> -<p><span class="comment">Interwiki Language Links</span></p> -<p>{{ languages( { "en": "en/DOM/element.clientLeft", "ja": "ja/DOM/element.clientLeft", "pl": "pl/DOM/element.clientLeft" } ) }}</p> diff --git a/files/pt-pt/web/api/element/clienttop/index.html b/files/pt-pt/web/api/element/clienttop/index.html deleted file mode 100644 index 9212f32bdd..0000000000 --- a/files/pt-pt/web/api/element/clienttop/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: element.clientTop -slug: Web/API/Element/clientTop -tags: - - PrecisaDeRevisãoEditorial - - Referência_do_DOM_Gecko -translation_of: Web/API/Element/clientTop -original_slug: DOM/element.clientTop ---- -<p>{{ ApiRef() }} <span class="comment">Falta uma imagem no documento</span></p> -<h3 id="Resumo" name="Resumo">Resumo</h3> -<p>A largura da borda superior de um elemento em pixels não inclui a margem superior ou o enchimento. <code>clientTop</code> é somente leitura.</p> -<p>Aplicações baseadas em <a href="pt/Gecko">Gecko</a> suportam <code>clientTop</code> começando com Gecko 1.9 (<a href="pt/Firefox_3_para_desenvolvedores">Firefox 3</a>, implementou em {{ Bug(111207) }}). Esta propriedade não é suportada no Firefox 2 e mais antigos.</p> -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> -<pre class="eval">var<i>top</i> = <var>element</var>.clientTop; -</pre> -<h3 id="Exemplos" name="Exemplos">Exemplos</h3> -<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> - <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> - <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> - <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> - <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> - <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> - <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> - </div> - <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ 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') }}</span></div> -<p style="margin-top: 270px;"><img alt="Image:clientTop.png"></p> -<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> -<p>Não é parte de nenhuma especificação W3C.</p> -<h3 id="Notas" name="Notas">Notas</h3> -<p><code>clientTop</code> foi primeiramente introduzido no objeto modelo DHTML do MS IE.</p> -<h3 id="Refer.C3.AAncias" name="Refer.C3.AAncias">Referências</h3> -<ul> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a></li> - <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> -</ul> -<p><span class="comment">Categorias</span></p> -<p><span class="comment">Interwiki Language Links</span></p> -<p>{{ languages( { "en": "en/DOM/element.clientTop", "pl": "pl/DOM/element.clientTop" } ) }}</p> diff --git a/files/pt-pt/web/api/element/index.html b/files/pt-pt/web/api/element/index.html deleted file mode 100644 index abad0b55c4..0000000000 --- a/files/pt-pt/web/api/element/index.html +++ /dev/null @@ -1,574 +0,0 @@ ---- -title: element -slug: Web/API/Element -tags: - - API - - API da Web - - DOM - - Element - - Elemento - - Interface - - Referencia - - Referência DOM -translation_of: Web/API/Element -original_slug: DOM/element ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><strong><code>Element</code></strong> </span>é a classe base mais geral da qual todos os objetos em um <span class="seoSummary">{{DOMxRef("Document","documento")}} herdam. Este só tem métodos e propriedades comuns para todos os tipos de elementos. </span>Classes mais específicas herdam de<span class="seoSummary"> <code>Element</code>.</span> Por exemplo, a interface {{DOMxRef("HTMLElement")}} é a interface base para os elementos HTML, enquanto a interface {{DOMxRef("SVGElement")}} é a base para todos os elementos SVG. A maioria das funcionalidades é especificada mais abaixo na hierarquia de classes.</p> - -<p>Linguagens fora do âmbito da plataforma Web, como XUL através da interface <code>XULElement</code>, também implementa <code>Element</code>.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Propriedades" name="Propriedades">Propriedades</h2> - -<p><em>Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>and {{DOMxRef("Animatable")}}.</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Nome</th> - <th>Descrição</th> - <th>Tipo</th> - <th>Dosponibilidade</th> - </tr> - <tr> - <td><code><a href="pt/DOM/element.attributes">attibutes</a></code></td> - <td>Todos os atributos associados ao elemento</td> - <td><code><a href="pt/DOM/NamedNodeMap">NamedNodeMap</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.childNodes">childNodes</a></code></td> - <td>Todos os nós-filhos de um elemento.</td> - <td><code><a href="pt/DOM/NodeList">NodeList</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.className">className</a></code></td> - <td>Retorna ou define a classe do elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.clientHeight">clientHeight</a></code></td> - <td>A altura interna de um elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.clientLeft">clientLeft</a></code></td> - <td>A largura da borda esquerda de um elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.clientTop">clientTop</a></code></td> - <td>A largura da borda superior de um elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.clientWidth">clientWidth</a></code></td> - <td>A largura interna de um elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.dir">dir</a></code></td> - <td>Retorna ou define a direcionalidade do elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.firstChild">firstChild</a></code></td> - <td>O primeiro nó-filho direto de um elemento, ou <code>null</code> se o elemento não tem nós-filhos.</td> - <td><code><a href="pt/DOM/Node">Node</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.id">id</a></code></td> - <td>Retorna ou define o id do elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.innerHTML">innerHTML</a></code></td> - <td>Retorna ou define a marcação e o conteúdo de um elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.lang">lang</a></code></td> - <td>Retorna ou define o atributo linguagem de um elemento, texto, e conteúdo do elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.lastChild">lastChild</a></code></td> - <td>O último nó-filho direto de um elemento, ou <code>null</code> se o elemento não tem nós-filhos.</td> - <td><code><a href="pt/DOM/Node">Node</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.localName">localName</a></code></td> - <td>A parte local de um nome qualificado de um elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <th>Nome</th> - <th>Descrição</th> - <th>Tipo</th> - <th>Disponibilidade</th> - </tr> - <tr> - <td><code><a href="pt/DOM/element.name">name</a></code></td> - <td>Retorna/define o atributo name de um elemento.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.namespaceURI">namespaceURI</a></code></td> - <td>A URI de namespace do nó, ou <code>null</code> se não está especificado.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.nextSibling">nextSibling</a></code></td> - <td>O nó imediatamente seguinte ao dado numa árvore, ou <code>null</code> se não existe nó-irmão.</td> - <td><code><a href="pt/DOM/Node">Node</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.nodeName">nodeName</a></code></td> - <td>O nome do nó.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.nodeType">nodeType</a></code></td> - <td>Um número representando o tipo do nó. É sempre igual a <code>1</code> para elementos DOM.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.nodeValue">nodeValue</a></code></td> - <td>O valor do nó. É sempre igual a <code>null</code> para elementos DOM.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.offsetHeight">offsetHeight</a></code></td> - <td>A altura de um elemento, em relação ao layout.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.offsetLeft">offsetLeft</a></code></td> - <td>A distância da borda esquerda do elemento para o a borda esquerda do seu <code>offsetParent</code>.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.offsetParent">offsetParent</a></code></td> - <td>O elemento para o qual todos cálculos de offset estão atualmente computados.</td> - <td><code><a href="pt/DOM/element">Element</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.offsetTop">offsetTop</a></code></td> - <td>A distância da borda superior do elemento para o a borda superior do seu <code>offsetParent</code>.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.offsetWidth">offsetWidth</a></code></td> - <td>A largura de um elemento, em relação ao layout.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.ownerDocument">ownerDocument</a></code></td> - <td>O documento no qual o nó está, ou <code>null</code> se o nó não está dentro de nenhum.</td> - <td><code><a href="pt/DOM/document">Document</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <th>Nome</th> - <th>Descrição</th> - <th>Tipo</th> - <th>Disponibilidade</th> - </tr> - <tr> - <td><code><a href="pt/DOM/element.parentNode">parentNode</a></code></td> - <td>The parent element of this node, or <code>null</code> if the node is not inside of a <a href="pt/DOM/document">DOM Document</a>.</td> - <td><code><a href="pt/DOM/Node">Node</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.prefix">prefix</a></code></td> - <td>The namespace prefix of the node, or <code>null</code> if no prefix is specified.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.previousSibling">previousSibling</a></code></td> - <td>The node immediately preceding the given one in the tree, or <code>null</code> if there is no sibling node.</td> - <td><code><a href="pt/DOM/Node">Node</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.scrollHeight">scrollHeight</a></code></td> - <td>The scroll view height of an element.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.scrollLeft">scrollLeft</a></code></td> - <td>Gets/sets the left scroll offset of an element.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.scrollTop">scrollTop</a></code></td> - <td>Gets/sets the top scroll offset of an element.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.scrollWidth">scrollWidth</a></code></td> - <td>The scroll view width of an element.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.style">style</a></code></td> - <td>An object representing the declarations of an element's style attributes.</td> - <td><code><a href="pt/DOM/CSSStyleDeclaration">CSSStyle</a></code></td> - <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.tabIndex">tabIndex</a></code></td> - <td>Gets/sets the position of the element in the tabbing order.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.tagName">tagName</a></code></td> - <td>The name of the tag for the given element.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.textContent">textContent</a></code></td> - <td>Gets/sets the textual contents of an element and all its descendants.</td> - <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - </tbody> -</table> - -<h3 id="Methods" name="Methods">Métodos</h3> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Nome & Descrição</th> - <th>Retorna</th> - <th>Disponibilidade</th> - </tr> - <tr> - <td><code><a href="pt/DOM/element.addEventListener">addEventListener</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">type</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Function">listener</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">useCapture</a> )</code><br> - Register an event handler to a specific event type on the element.</td> - <td>-</td> - <td><small><a href="pt/DOM/event">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.appendChild">appendChild</a>( <a href="pt/DOM/Node">appendedNode</a> )</code><br> - Insert a node as the last child node of this element.</td> - <td><a href="pt/DOM/Node">Node</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.blur">blur</a>()</code><br> - Removes keyboard focus from the current element.</td> - <td>-</td> - <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.click">click</a>()</code><br> - Simulates a click on the current element.</td> - <td>-</td> - <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.cloneNode">cloneNode</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">deep</a> )</code><br> - Clone a node, and optionally, all of its contents.</td> - <td><a href="pt/DOM/Node">Node</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.dispatchEvent">dispatchEvent</a>( <a href="pt/DOM/event">event</a> )</code><br> - Dispatch an event to this node in the DOM.</td> - <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.focus">focus</a>()</code><br> - Gives keyboard focus to the current element.</td> - <td>-</td> - <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.getAttribute">getAttribute</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Retrieve the value of the named attribute from the current node.</td> - <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.getAttributeNS">getAttributeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Retrieve the value of the attribute with the specified name and namespace, from the current node.</td> - <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.getAttributeNode">getAttributeNode</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Retrieve the node representation of the named attribute from the current node.</td> - <td><a href="pt/DOM/Attr">Attr</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.getAttributeNodeNS">getAttributeNodeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Retrieve the node representation of the attribute with the specified name and namespace, from the current node.</td> - <td><a href="pt/DOM/Attr">Attr</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <th>Nome & Descrição</th> - <th>Retorna</th> - <th>Disponibilidade</th> - </tr> - <tr> - <td><code><a href="pt/DOM/element.getElementsByTagName">getElementsByTagName</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Retrieve a set of all descendant elements, of a particular tag name, from the current element.</td> - <td><a href="pt/DOM/NodeSet">NodeSet</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Retrieve a set of all descendant elements, of a particular tag name and namespace, from the current element.</td> - <td><a href="pt/DOM/NodeSet">NodeSet</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.hasAttribute">hasAttribute</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Check if the element has the specified attribute, or not.</td> - <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.hasAttributeNS">hasAttributeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Check if the element has the specified attribute, in the specified namespace, or not.</td> - <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.hasAttributes">hasAttributes</a>()</code><br> - Check if the element has any attributes, or not.</td> - <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.hasChildNodes">hasChildNodes</a>()</code><br> - Check if the element has any child nodes, or not.</td> - <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.insertBefore">insertBefore</a>( <a href="pt/DOM/Node">insertedNode</a>, <a href="pt/DOM/Node">adjacentNode</a> )</code><br> - Inserts the first node before the second, child, Node in the DOM.</td> - <td><a href="pt/DOM/Node">Node</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.normalize">normalize</a>()</code><br> - Clean up all the text nodes under this element (merge adjacent, remove empty).</td> - <td>-</td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.removeAttribute">removeAttribute</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Remove the named attribute from the current node.</td> - <td>-</td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.removeAttributeNS">removeAttributeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Remove the attribute with the specified name and namespace, from the current node.</td> - <td>-</td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <th>Nome & Descrição</th> - <th>Retorna</th> - <th>Disponibilidade</th> - </tr> - <tr> - <td><code><a href="pt/DOM/element.removeAttributeNode">removeAttributeNode</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> - Remove the node representation of the named attribute from the current node.</td> - <td>-</td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.removeChild">removeChild</a>( <a href="pt/DOM/Node">removedNode</a> )</code><br> - Removes a child node from the current element.</td> - <td><a href="pt/DOM/Node">Node</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.removeEventListener">removeEventListener</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">type</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Function">handler</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">useCapture</a> )</code><br> - Removes an event listener from the element.</td> - <td>-</td> - <td><small><a href="pt/DOM/event">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.replaceChild">replaceChild</a>( <a href="pt/DOM/Node">insertedNode</a>, <a href="pt/DOM/Node">replacedNode</a> )</code><br> - Replaces one child node in the current element with another.</td> - <td><a href="pt/DOM/Node">Node</a></td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.scrollIntoView">scrollIntoView</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">alignWithTop</a> )</code><br> - Scrolls the page until the element gets into the view.</td> - <td>-</td> - <td><small><a href="pt/HTML">HTML</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.setAttribute">setAttribute</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Object">value</a> )</code><br> - Set the value of the named attribute from the current node.</td> - <td>-</td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.setAttributeNS">setAttributeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Object">value</a> )</code><br> - Set the value of the attribute with the specified name and namespace, from the current node.</td> - <td>-</td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.setAttributeNode">setAttributeNode</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="pt/DOM/Attr">attrNode</a> )</code><br> - Set the node representation of the named attribute from the current node.</td> - <td>-</td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - <tr> - <td><code><a href="pt/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="pt/DOM/Attr">attrNode</a> )</code><br> - Set the node representation of the attribute with the specified name and namespace, from the current node.</td> - <td>-</td> - <td><small><a href="pt/DOM">All</a></small></td> - </tr> - </tbody> -</table> - -<h3 id="Event_Handlers" name="Event_Handlers">Event Handlers</h3> - -<p>These are properties that correspond to the HTML 'on' event attributes.</p> - -<p>Unlike the corresponding attributes, the values of these properties are functions (or any other object implementing the <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener">EventListener</a> interface) rather than a string. In fact, assigning an event attribute in HTML creates a wrapper function around the specified code. For example, given the following HTML:</p> - -<pre><div onclick="foo();">click me!</div> -</pre> - -<p>If <code>element</code> is a reference to this <code>div</code>, the value of <code>element.onclick</code> is effectively:</p> - -<pre>function onclick(event) { - foo(); -} -</pre> - -<p>Note how the <a href="pt/DOM/event">event</a> object is passed as parameter <code>event</code> to this wrapper function.</p> - -<dl> - <dt><a href="pt/DOM/element.onblur">onblur</a></dt> - <dd>Returns the event handling code for the blur event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onchange">onchange</a></dt> - <dd>Returns the event handling code for the change event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onclick">onclick</a></dt> - <dd>Returns the event handling code for the click event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.ondblclick">ondblclick</a></dt> - <dd>Returns the event handling code for the dblclick event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onfocus">onfocus</a></dt> - <dd>Returns the event handling code for the focus event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onkeydown">onkeydown</a></dt> - <dd>Returns the event handling code for the keydown event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onkeypress">onkeypress</a></dt> - <dd>Returns the event handling code for the keypress event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onkeyup">onkeyup</a></dt> - <dd>Returns the event handling code for the keyup event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onmousedown">onmousedown</a></dt> - <dd>Returns the event handling code for the mousedown event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onmousemove">onmousemove</a></dt> - <dd>Returns the event handling code for the mousemove event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onmouseout">onmouseout</a></dt> - <dd>Returns the event handling code for the mouseout event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onmouseover">onmouseover</a></dt> - <dd>Returns the event handling code for the mouseover event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onmouseup">onmouseup</a></dt> - <dd>Returns the event handling code for the mouseup event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onresize">onresize</a></dt> - <dd>Returns the event handling code for the resize event.</dd> -</dl> - -<dl> - <dt><a href="pt/DOM/element.onscroll">onscroll</a></dt> - <dd>Returns the event handling code for the scroll event.</dd> -</dl> - -<div class="noinclude"> </div> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - - - -<p>{{Compat("api.Element")}}</p> diff --git a/files/pt-pt/web/api/file/file/index.html b/files/pt-pt/web/api/file/file/index.html deleted file mode 100644 index a785c59a41..0000000000 --- a/files/pt-pt/web/api/file/file/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: File.File() -slug: Web/API/File/File -tags: - - API - - Construtor - - File API - - Referencia -translation_of: Web/API/File/File ---- -<div>{{APIRef("File")}}</div> - -<p>O construtor <code><strong>File()</strong></code> cria uma instância do objeto {{domxref("File")}}.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">new File(bits, name[, options]);</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code>bits</code></dt> - <dd>Uma {{jsxref("Array")}} de objetos {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("USVString")}}, ou um misto de tais objetos, que será posto no {{domxref("File")}}. Objetos <code>USVString</code> são codificados em UTF-8.</dd> - <dt><code>name</code></dt> - <dd>Uma {{domxref("USVString")}} que representa o nome do ficheiro ou o caminho para o ficheiro.</dd> - <dt><code>options</code> {{optional_inline}}</dt> - <dd>Um objeto com atributos opcionais para o ficheiro. As opções disponíveis são: - <ul> - <li><code>type</code>: Uma {{domxref("DOMString")}} que representa o tipo MIME do conteúdo será posto no ficheiro. Tem um valor pré-definido de <code>""</code>.</li> - <li><code>lastModified</code>: Um número que representa o número de milissegundos entre o início da era Unix e a última data em que o ficheiro foi modificado. Tem um valor pré-definido de {{jsxref("Date.now()")}}.</li> - </ul> - </dd> -</dl> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js notranslate">var file = new File(["foo"], "foo.txt", { - type: "text/plain", -});</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.File.File")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> - <li>{{domxref("Blob")}}</li> -</ul> diff --git a/files/pt-pt/web/api/file/filename/index.html b/files/pt-pt/web/api/file/filename/index.html deleted file mode 100644 index 0e0ee197ae..0000000000 --- a/files/pt-pt/web/api/file/filename/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: File.fileName -slug: Web/API/File/fileName -tags: - - API - - DOM - - Ficheiros - - File API - - Non-standard - - Obsoleto - - Propriedade - - Referencia -translation_of: Web/API/File/fileName ---- -<div>{{APIRef("File API")}}{{non-standard_header}} {{obsolete_header(7.0)}}</div> - -<p>Retorna o nome do ficheiro. Por razões de segurança o caminho é excluído desta propriedade.</p> - -<div class="note">Esta propriedade está obsoleta. Use antes {{domxref("File.name")}}.</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">var <em>name</em> = <em>instanceOfFile</em>.fileName;</pre> - -<h3 id="Valor">Valor</h3> - -<p>Uma <em>string</em></p> - -<h2 id="Specification" name="Specification">Especificação</h2> - -<p>Não faz parte duma especificação.</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("File.name")}}</li> -</ul> diff --git a/files/pt-pt/web/api/file/filesize/index.html b/files/pt-pt/web/api/file/filesize/index.html deleted file mode 100644 index e17676ecee..0000000000 --- a/files/pt-pt/web/api/file/filesize/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: File.fileSize -slug: Web/API/File/fileSize -tags: - - API - - DOM - - Ficheiros - - File API - - Non-standard - - Obsoleto - - Propriedade - - Referencia -translation_of: Web/API/File/fileSize ---- -<p>{{APIRef("File API") }}{{non-standard_header}} {{deprecated_header(7.0)}}</p> - -<p>Retorna o tamanho do ficheiro em <em>bytes</em>.</p> - -<div class="note">Esta propriedade está obsoleta. Use antes {{domxref("Blob.size")}}.</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">var <em>size</em> = <em>instanceOfFile</em>.fileSize;</pre> - -<h3 id="Valor">Valor</h3> - -<p>Um número.</p> - -<h2 id="Especificação">Especificação</h2> - -<p>Não faz parte de nenhuma especificação.</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("Blob.size")}}</li> -</ul> diff --git a/files/pt-pt/web/api/file/getasbinary/index.html b/files/pt-pt/web/api/file/getasbinary/index.html deleted file mode 100644 index 8ec42cf1f2..0000000000 --- a/files/pt-pt/web/api/file/getasbinary/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: File.getAsBinary() -slug: Web/API/File/getAsBinary -tags: - - API - - Ficheiros - - File API - - Non-standard - - Obsoleto - - Referencia - - metodo -translation_of: Web/API/File/getAsBinary ---- -<p>{{APIRef("File API")}}</p> - -<p>{{non-standard_header}}</p> - -<p>{{obsolete_header(7.0)}}</p> - -<h2 id="Sumário">Sumário</h2> - -<p>O método <code>getAsBinary</code> permite aceder aos dados de um ficheiro num formato <em>raw</em> binário.</p> - -<div class="note"> -<p><strong>Nota:</strong> Este método é obsoleto; use antes o método {{domxref("FileReader.readAsBinaryString()","readAsBinaryString()")}} ou {{domxref("FileReader.readAsArrayBuffer()","readAsArrayBuffer()")}} de {{domxref("FileReader")}}.</p> -</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="notranslate">var binary = <em>instanceOfFile</em>.getAsBinary();</pre> - -<h3 id="Retorna">Retorna</h3> - -<p>Uma <em>string</em>.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush:js; notranslate">// fileInput é um HTMLInputElement: <input type="file" id="myfileinput" multiple> -var fileInput = document.getElementById("myfileinput"); - -// files é um objeto de FileList (parecido ao NodeList) -var files = fileInput.files; - -// objeto com os tipos de media permitidos -var accept = { - binary : ["image/png", "image/jpeg"], - text : ["text/plain", "text/css", "application/xml", "text/html"] -}; - -var file; - -for (var i = 0; i < files.length; i++) { - file = files[i]; - - // se o ficheiro pode ser detetado - if (file !== null) { - if (accept.binary.indexOf(file.type) > -1) { - // file contem dados binarios, num formato permitido - var data = file.getAsBinary(); - } else if (accept.text.indexOf(file.type) > -1) { - // file contem texto, num formato permitido - var data = file.getAsText(); - // modificar dados com métodos de string - } - } -}</pre> - -<h2 id="Specification" name="Specification">Especificação</h2> - -<p>Não pertence a nenhuma especificação.</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("File")}}</li> - <li>{{domxref("FileReader")}}</li> -</ul> diff --git a/files/pt-pt/web/api/file/getasdataurl/index.html b/files/pt-pt/web/api/file/getasdataurl/index.html deleted file mode 100644 index e3e5bae4b3..0000000000 --- a/files/pt-pt/web/api/file/getasdataurl/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: File.getAsDataURL() -slug: Web/API/File/getAsDataURL -tags: - - API - - Ficheiros - - File API - - Non-standard - - Obsoleto - - Referencia - - metodo -translation_of: Web/API/File/getAsDataURL ---- -<div>{{APIRef("File API") }}</div> - -<p>{{non-standard_header}}</p> - -<p>{{deprecated_header(7.0)}}</p> - -<h2 id="Sumário">Sumário</h2> - -<p><span class="seoSummary">O método <code>getAsDataURL</code> retorna um URL em estilo <a href="/en-US/docs/data_URIs"><code>data:</code></a> que codifica todo o conteúdo do ficheiro em questão.</span></p> - -<div class="note"> -<p><strong>Nota:</strong> Este método está obsoleto: use antes o método {{domxref("FileReader.readAsDataURL","readAsDataURL()")}} de {{domxref("FileReader")}}.</p> -</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="notranslate">var url = <var>instanceOfFile</var>.getAsDataURL();</pre> - -<h3 id="Retorna">Retorna</h3> - -<p>Uma string a representar um URL de estilo <a href="/en-US/docs/data_URIs"><code>data:</code></a></p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js notranslate">// fileInput é um HTMLInputElement: <input type="file" id="myfileinput" multiple> -var fileInput = document.getElementById("myfileinput"); - -// files é um objeto FileList (parecido ao NodeList) -var files = fileInput.files; - -// accept é um array com tipos de ficheiros aceites -var accept = ["image/png"]; - -// img é um HTMLImgElement: <img id="myimg"> -var img = document.getElementById("myimg"); - -// se aceitamos o primeiro tipo de ficheiro selecionado -if (accept.indexOf(files[0].mediaType) > -1) { - // apresentar a imagem - // igual a <img src="data:image/png,<imagedata>"> - img.src = files[0].getAsDataURL(); -} -</pre> - -<h2 id="Especificação">Especificação</h2> - -<p>Não pertence a nenhuma especificação.</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("File")}}</li> - <li>{{domxref("FileReader")}}</li> -</ul> diff --git a/files/pt-pt/web/api/file/getastext/index.html b/files/pt-pt/web/api/file/getastext/index.html deleted file mode 100644 index b20229737e..0000000000 --- a/files/pt-pt/web/api/file/getastext/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: File.getAsText() -slug: Web/API/File/getAsText -tags: - - API - - Ficheiros - - File API - - Non-standard - - Obsoleto - - Referencia - - metodo -translation_of: Web/API/File/getAsText ---- -<p>{{APIRef("File API") }}{{non-standard_header}}</p> - -<p>{{obsolete_header(7.0)}}</p> - -<h2 id="Sumário">Sumário</h2> - -<p>O método <code>getAsText</code> oferece os dados do ficheiro num formato de texto de acordo com uma codificação.</p> - -<div class="note"> -<p><strong>Note:</strong> Este método está obsoleto; use antes o método {{domxref("FileReader.readAsText()","readAsText()")}} de {{domxref("FileReader")}}.</p> -</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="notranslate">var <var>str</var> = <var>instanceOfFile</var>.getAsText(<var>encoding</var>);</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><var>encoding</var></dt> - <dd>Uma <em>string</em> a indicar qual a codificação para usar nos dados devolvidos. Se o <em>string</em> estiver vazio, é utilizado UTF-8.</dd> -</dl> - -<h3 id="Retorna">Retorna</h3> - -<p>A string que contem os dados do ficheiro num formato de texto especificado pelo <code>encoding</code>.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js notranslate">// fileInput é um HTMLInputElement: <input type="file" id="myfileinput" multiple> -var fileInput = document.getElementById("myfileinput"); - -// files é um objeto de FileList (parecido ao NodeList) -var files = fileInput.files; - -// object com os formatos de media validos -var accept = { - binary : ["image/png", "image/jpeg"], - text : ["text/plain", "text/css", "application/xml", "text/html"] -}; - -var file; - -for (var i = 0; i < files.length; i++) { - file = files[i]; - - // se o formato do ficheiro foi detetado - if (file !== null) { - if (accept.text.indexOf(file.mediaType) > -1) { - // file contem texto, num formato permitido - // make sure it's encoded as utf-8 - var data = file.getAsText("utf-8"); - // modificar dados com métodos de string - - } else if (accept.binary.indexOf(file.mediaType) > -1) { - // binario - } - } -}</pre> - -<h2 id="Especificação">Especificação</h2> - -<p>Não pertence a nenhuma especificação.</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("File")}}</li> - <li>{{domxref("FileReader")}}</li> -</ul> diff --git a/files/pt-pt/web/api/file/index.html b/files/pt-pt/web/api/file/index.html deleted file mode 100644 index 43e85438cb..0000000000 --- a/files/pt-pt/web/api/file/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: File -slug: Web/API/File -tags: - - API - - File API - - Interface - - NeedsTranslation - - Reference - - TopicStub - - Web -translation_of: Web/API/File ---- -<div>{{APIRef}}</div> - -<p>The <strong><code>File</code></strong> interface provides information about files and allows JavaScript in a web page to access their content.</p> - -<p><code>File</code> objects are generally retrieved from a {{DOMxRef("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, from a drag and drop operation's {{DOMxRef("DataTransfer")}} object, or from the <code>mozGetAsFile()</code> API on an {{DOMxRef("HTMLCanvasElement")}}.</p> - -<p>A <code>File</code> object is a specific kind of a {{DOMxRef("Blob")}}, and can be used in any context that a Blob can. In particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL()")}}, {{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, and {{DOMxRef("XMLHttpRequest", "", "send()")}} accept both <code>Blob</code>s and <code>File</code>s.</p> - -<p>See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for more information and examples.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{DOMxRef("File.File", "File()")}}</dt> - <dd>Returns a newly constructed <code>File</code>.</dd> -</dl> - -<h2 id="Instance_properties">Instance properties</h2> - -<dl> - <dt>{{DOMxRef("File.prototype.lastModified")}} {{ReadOnlyInline}}</dt> - <dd>Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).</dd> - <dt>{{DOMxRef("File.prototype.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}}</dt> - <dd>Returns the last modified {{JSxRef("Date")}} of the file referenced by the <code>File</code> object.</dd> - <dt>{{DOMxRef("File.prototype.name")}}{{ReadOnlyInline}}</dt> - <dd>Returns the name of the file referenced by the <code>File</code> object.</dd> - <dt>{{DOMxRef("File.prototype.webkitRelativePath")}} {{Non-standard_Inline}} {{ReadOnlyInline}}</dt> - <dd>Returns the path the URL of the {{DOMxRef("File")}} is relative to.</dd> -</dl> - -<p><code>File</code> implements {{DOMxRef("Blob")}}, so it also has the following properties available to it:</p> - -<dl> - <dt>{{DOMxRef("File.prototype.size")}} {{ReadOnlyInline}}</dt> - <dd>Returns the size of the file in bytes.</dd> - <dt>{{DOMxRef("File.prototype.type")}} {{ReadOnlyInline}}</dt> - <dd>Returns the <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME </a>type of the file.</dd> -</dl> - -<h2 id="Instance_methods">Instance methods</h2> - -<p><em>The <code>File</code> interface doesn't define any methods, but inherits methods from the {{DOMxRef("Blob")}} interface:</em></p> - -<dl> - <dt>{{DOMxRef("Blob.prototype.slice()", "Blob.prototype.slice([start[, end[, contentType]]])")}}</dt> - <dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the source <code>Blob</code>.</dd> - <dt>{{DOMxRef("Blob.prototype.stream()")}}</dt> - <dd>Transforms the <code>File</code> into a {{DOMxRef("ReadableStream")}} that can be used to read the <code>File</code> contents.</dd> - <dt>{{DOMxRef("Blob.prototype.text()")}}</dt> - <dd>Transforms the <code>File</code> into a stream and reads it to completion. It returns a promise that resolves with a {{DOMxRef("USVString")}} (text).</dd> - <dt>{{DOMxRef("Blob.prototype.arrayBuffer()")}}</dt> - <dd>Transforms the <code>File</code> into a stream and reads it to completion. It returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}}.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API', "#file-section", "The <code>File</code> interface")}}</td> - <td>{{Spec2('File API')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.File")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li> - <li>{{DOMxRef("FileReader")}}</li> - <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (for privileged code running in Gecko, such as Firefox add-ons)</li> -</ul> diff --git a/files/pt-pt/web/api/file/lastmodified/index.html b/files/pt-pt/web/api/file/lastmodified/index.html deleted file mode 100644 index 9b05f6f3cf..0000000000 --- a/files/pt-pt/web/api/file/lastmodified/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: File.lastModified -slug: Web/API/File/lastModified -tags: - - API - - Ficheiros - - File API - - Propriedade - - Referencia -translation_of: Web/API/File/lastModified ---- -<div>{{APIRef("File")}}</div> - -<p>A propriedade <em>read-only</em> <code><strong>File.lastModified</strong></code> indica a ultima data em que o ficheiro foi modificado, na forma do numero de milissegundos desde o início da era Unix (1 de janeiro de 1970 às 00:00:00). Os ficheiros cuja a data da última modificação não é conhecida devolvem a data actual.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">const <em>tempo</em> = <em>instanciaDeFicheiro</em>.lastModified; -</pre> - -<h3 id="Valor">Valor</h3> - -<p>Um número que representa o número de milissegundos desde o início da época do Unix.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<h3 id="Leitura_a_partir_da_entrada_do_ficheiro">Leitura a partir da entrada do ficheiro</h3> - -<pre class="brush: html notranslate"><input type="file" multiple id="entradaDeFicheiro"> -</pre> - -<pre class="brush:js notranslate">const entradaDeFicheiro = document.querySelector('#entradaDeFicheiro'); -entradaDeFicheiro.addEventListener('change', (event) => { - // ficheiros é um objeto de FileList (semelhante a NodeList) - const ficheiros = event.target.files; - - for (let ficheiro of ficheiros) { - const data = new Date(ficheiro.lastModified); - console.log(`${ficheiro.name} tem uma última data modificada de ${data}`); - } -}); -</pre> - -<p>Veja os resultados abaixo:</p> - -<p>{{ EmbedLiveSample('Leitura_a_partir_da_entrada_do_ficheiro', 300, 50) }}</p> - -<h3 id="Ficheiros_criados_dinamicamente">Ficheiros criados dinamicamente</h3> - -<p>Se um objeto File for criado dinamicamente, a última data modificada pode ser fornecida na função construtor {{domxref("File.File()", "new File()")}}. Se estiver em falta, lastModified herda a hora actual de {{jsxref("Date.now()")}} no momento em que o objeto File é criado.</p> - -<pre class="brush:js notranslate">const ficheiroComData = new File([], 'file.bin', { - lastModified: new Date(2017, 1, 1), -}); -console.log(ficheiroComData.lastModified); //devolve 1485903600000 - -const ficheiroSemData = new File([], 'file.bin'); -console.log(ficheiroSemData.lastModified); //devolve data atual em milissegundos -</pre> - -<h2 id="Reduced_time_precision">Reduced time precision</h2> - -<p>To offer protection against timing attacks and fingerprinting, the precision of <code>someFile.lastModified</code> might get rounded depending on browser settings.<br> - In Firefox, the <code>privacy.reduceTimerPrecision</code> preference is enabled by default and defaults to 20us in Firefox 59; in 60 it will be 2ms.</p> - -<pre class="brush: js notranslate">// reduced time precision (2ms) in Firefox 60 -someFile.lastModified; -// 1519211809934 -// 1519211810362 -// 1519211811670 -// ... - - -// reduced time precision with `privacy.resistFingerprinting` enabled -someFile.lastModified; -// 1519129853500 -// 1519129858900 -// 1519129864400 -// ... -</pre> - -<p>In Firefox, you can also enabled <code>privacy.resistFingerprinting</code>, the precision will be 100ms or the value of <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, whichever is larger.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API', '#file-attrs', 'lastModified')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.File.lastModified")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("File")}}</li> -</ul> diff --git a/files/pt-pt/web/api/file/lastmodifieddate/index.html b/files/pt-pt/web/api/file/lastmodifieddate/index.html deleted file mode 100644 index 10d5d8c932..0000000000 --- a/files/pt-pt/web/api/file/lastmodifieddate/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: File.lastModifiedDate -slug: Web/API/File/lastModifiedDate -tags: - - API - - Ficheiros - - File - - File API - - Obsoleto - - Propriedade - - Read-only - - Referencia - - lastDateModified -translation_of: Web/API/File/lastModifiedDate ---- -<div>{{APIRef("File API") }} {{deprecated_header}}</div> - -<p>A propriedade <em>read-only</em> <code><strong>File.lastModifiedDate</strong></code><strong> </strong>devolve a ultima data em que o ficheiro foi modificado. Ficheiros onde a ultima data de modificação é desconhecida devolvem a data atual.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="notranslate">var time = <em>instanceOfFile</em>.lastModifiedDate</pre> - -<h3 id="Valor">Valor</h3> - -<p>Um objeto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> a indicar a data e hora da ultima modificação ao ficheiro.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush:js notranslate">// fileInput é um HTMLInputElement: <input type="file" multiple id="myfileinput"> -var fileInput = document.getElementById("myfileinput"); - -// files é um objeto de FileList (parecido ao NodeList) -var files = fileInput.files; - -for (var i = 0; i < files.length; i++) { - alert(files[i].name + " has a last modified date of " + files[i].lastModifiedDate); -}</pre> - -<h2 id="Precisão_reduzida">Precisão reduzida</h2> - -<p>Para oferecer proteção contra <em>timing attacks</em> e <em>fingerprinting</em> a precisão de <code>someFile.lastModifiedDate.getTime()</code> pode ser arredondada dependente das preferências no navegador.</p> - -<p>No Firefox, a preferência <code>privacy.reduceTimerPrecision</code> está ligada por pré-definição com valores arredondados aos 20μs mais próximos no Firefox 59; e no Firefox 60 aos 2ms.</p> - -<pre class="brush: js notranslate">// precisão reduzida (2ms) no Firefox 60 -someFile.lastModifiedDate.getTime(); -// 1519211809934 -// 1519211810362 -// 1519211811670 -// ... - - -// precisão reduzida com a `privacy.resistFingerprinting` ligada -someFile.lastModifiedDate.getTime(); -// 1519129853500 -// 1519129858900 -// 1519129864400 -// ... -</pre> - -<p>No Firefox, também pode ligar a preferência <code>privacy.resistFingerprinting</code>, a precisão será arredondada aos 100ms mais próximos ou ao valor de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, o que for maior.</p> - -<h2 id="Especificações">Especificações</h2> - -<p>Apesar de estar presente numa versão inicial do esboço do File API <em>spec</em>, esta propriedade foi removida e agora é <em>non-standard</em>. Use antes {{domxref("File.lastModified")}}.</p> - -<h2 id="Compatibilidade">Compatibilidade</h2> - -<div> - - -<p>{{Compat("api.File.lastModifiedDate")}}</p> -</div> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("File")}}</li> -</ul> diff --git a/files/pt-pt/web/api/file/mozfullpath/index.html b/files/pt-pt/web/api/file/mozfullpath/index.html deleted file mode 100644 index 24e126847f..0000000000 --- a/files/pt-pt/web/api/file/mozfullpath/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: File.mozFullPath -slug: Web/API/File/mozFullPath -tags: - - API - - Ficheiros - - File - - File API - - Non-standard - - Propriedade - - Referencia - - mozFullPath -translation_of: Web/API/File/mozFullPath ---- -<div>{{APIRef("File API")}}{{draft}}{{Non-standard_header}}</div> - -<p><span class="seoSummary">Uma extensão privilegiada para a interface {{domxref("File")}}, a propriedade <code>mozFullPath</code> contém o caminho completo do ficheiro representado.</span> Esta propriedade só está disponível a partir do código do navegador ou de extensões Firefox ao estilo antigo com base no XPCOM. Não está disponível para o conteúdo da web.</p> diff --git a/files/pt-pt/web/api/file/name/index.html b/files/pt-pt/web/api/file/name/index.html deleted file mode 100644 index 907a08a8e2..0000000000 --- a/files/pt-pt/web/api/file/name/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: File.name -slug: Web/API/File/name -tags: - - API - - File API - - Files - - Propriadade - - Referencia -translation_of: Web/API/File/name ---- -<div>{{APIRef("File API")}}</div> - -<div>Devolve o nome do ficheiro representado por um objeto {{domxref("File")}}. Por razões de segurança, o caminho é excluído desta propriedade.</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">var <var>name</var> = <var>file</var>.name;</pre> - -<h2 id="Valor">Valor</h2> - -<p>Uma string, que contem o nome do ficheiro sem o caminho, por exemplo "<code>O meu Resumo.rtf</code>".</p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: html notranslate"><input type="file" multiple onchange="processSelectedFiles(this)"> -</pre> - -<pre class="brush: js notranslate">function processSelectedFiles(fileInput) { - var files = fileInput.files; - - for (var i = 0; i < files.length; i++) { - alert("Filename " + files[i].name); - } -}</pre> - -<p>Veja os resultados abaixo:</p> - -<p>{{ EmbedLiveSample('Exemplo', 300, 50) }}</p> - - - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API', '#file-attrs', 'name')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - -<div> - - -<p>{{Compat("api.File.name")}}</p> -</div> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><em><a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a></em></li> -</ul> diff --git a/files/pt-pt/web/api/file/type/index.html b/files/pt-pt/web/api/file/type/index.html deleted file mode 100644 index 2b448d3086..0000000000 --- a/files/pt-pt/web/api/file/type/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: File.type -slug: Web/API/File/type -tags: - - API - - Ficheiros - - File API - - Propriedade - - Referencia - - Tipo de Ficheiro -translation_of: Web/API/File/type ---- -<div>{{APIRef("File API")}}</div> - -<p>Retorna a média (<a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME</a>) representado por um objeto {{domxref("File")}}.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="brush: js notranslate">var name = <var>file</var>.type;</pre> - -<h2 id="Valor">Valor</h2> - -<p>Uma <em>string</em>, que contem o tipo de média (MIME) que indica o tipo do ficheiro, por exemplo "<code>image/png</code>" é devolvido para imagens PNG.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: html notranslate"><input type="file" multiple onchange="showType(this)"> -</pre> - -<pre class="brush: js notranslate">function showType(fileInput) { - var files = fileInput.files; - - for (var i = 0; i < files.length; i++) { - var name = files[i].name; - var type = files[i].type; - alert("Filename: " + name + " , Type: " + type); - } -}</pre> - -<div class="blockIndicator note"> -<p><br> - <strong>Nota:</strong> Baseado na atual implementação, navegadores não leem a <em>bytestream</em> dum ficheiro para determinar a sua média. É feito uma ilação baseada na extensão do ficheiro; uma imagem PNG com uma extensão ".txt" é atribuída o tipo "<code>text/plain</code>" e não "<code>image/png</code>". Além disso, <code>file.type</code> é geralmente fiável apenas para ficheiros comuns como imagens, documentos HTML, áudio e vídeo. Extensões de ficheiros pouco comuns devolveriam uma cadeia de caracteres vazia. A configuração do cliente (por exemplo, o Registo do Windows) pode resultar em valores inesperados mesmo para tipos comuns. <code>Os programadores são aconselhados a não confiar nesta propriedade como o único esquema de validação.</code></p> -</div> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API', '#dfn-type', 'type')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.File.type")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Usar ficheiros de aplicações web</a></li> - <li>Publicação de blogue (em inglês): <em><a href="https://textslashplain.com/2018/07/26/be-skeptical-of-client-reported-mime-content-types/">Be skeptical of client-reported MIME types</a></em></li> -</ul> diff --git a/files/pt-pt/web/api/file/webkitrelativepath/index.html b/files/pt-pt/web/api/file/webkitrelativepath/index.html deleted file mode 100644 index 35f155c1c6..0000000000 --- a/files/pt-pt/web/api/file/webkitrelativepath/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: File.webkitRelativePath -slug: Web/API/File/webkitRelativePath -tags: - - Ficheiro -translation_of: Web/API/File/webkitRelativePath ---- -<p>{{APIRef("File API")}}</p> - -<p>O <strong><code>File.webkitRelativePath</code></strong> é uma propriedade só de leitura que contém um {{domxref("USVString")}} que especifica o caminho do ficheiro em relação ao diretório selecionado pelo utilizador num elemento {{HTMLElement("input")}} com o seu conjunto de atributos {{htmlattrxref("webkitdirectory", "input")}}.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate"> <code><em>relativePath = File</em></code>.webkitRelativePath</pre> - -<h3 id="Valor">Valor</h3> - -<p>Um {{domxref("USVString")}} que contem o caminho do ficheiro relativo ao diretório dos antepassados que o utilizador selecionou.</p> - -<h2 id="Example" name="Example">Exemplo</h2> - -<p>Neste exemplo, é apresentado um seletor de diretórios que permite ao utilizador escolher um ou mais diretórios. Quando o evento {{event("change")}} ocorre, é gerada e apresentada uma lista de todos os ficheiros contidos dentro das hierarquias de diretórios selecionados.</p> - -<h3 id="Conteúdo_HTML">Conteúdo HTML</h3> - -<pre class="brush: html notranslate"><input type="file" id="seletorDeFicheiros" name="listaDeFicheiros" webkitdirectory multiple /> -<ul id="listagem"></ul></pre> - -<h3 id="Conteúdo_JavaScript">Conteúdo JavaScript</h3> - -<pre class="brush: js notranslate">document.getElementById("seletorDeFicheiros").addEventListener("change", function(event) { - let output = document.getElementById("listagem"); - let ficheiros = event.target.files; - - for (let i = 0; i < ficheiros.length; i++) { - let item = document.createElement("li"); - item.innerHTML = ficheiros[i].webkitRelativePath; - output.appendChild(item); - }; -}, false); -</pre> - -<h3 id="Resultado">Resultado</h3> - -<p>{{ EmbedLiveSample('Example') }}</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('File System API', '#dom-file-webkitrelativepath', 'webkitRelativePath') }}</td> - <td>{{ Spec2('File System API') }}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<p>Esta IPA não tem especificação oficial do W3C ou do WHATWG.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade</h2> - - - -<p>{{Compat("api.File.webkitRelativePath")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a href="pt-PT/docs/Web/API/File_and_Directory_Entries_API">API de entradas de ficheiros e diretórios</a></li> - <li>{{domxref("HTMLInputElement.webkitEntries")}}</li> - <li>{{domxref("HTMLInputElement.webkitdirectory")}}</li> -</ul> diff --git a/files/pt-pt/web/api/file_and_directory_entries_api/index.html b/files/pt-pt/web/api/file_and_directory_entries_api/index.html deleted file mode 100644 index 3c3d90dd9f..0000000000 --- a/files/pt-pt/web/api/file_and_directory_entries_api/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: API Entradas de Diretoria e Ficheiro -slug: Web/API/File_and_Directory_Entries_API -tags: - - API - - API Entradas de Diretoria e Ficheiro - - API Sistema de Ficheiros - - Ficheiros - - Não Padrão - - Referencia - - Resuno - - Sinopse -translation_of: Web/API/File_and_Directory_Entries_API -original_slug: Web/API/API_Entradas_de_Diretoria_e_Ficheiro ---- -<p>{{DefaultAPISidebar("File System API")}}{{Non-standard_header}}</p> - -<p>API Entradas de Diretoria e Ficheiro simula um sistema de ficheiros local em que as páginas da Web podem navegar dentro e aceder aos ficheiros na mesma. Pode desenvolver aplicações que lêem, escrevem e criam ficheiros e/ou diretorias num sistema de ficheiros virtual e ambiente de testes (sandbox).</p> - -<div class="note"> -<p>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.</p> -</div> - -<p>Two very similar APIs exist depending on whether you desire asynchronous or synchronous behavior. The synchronous API is indended to be used inside a {{domxref("Worker")}} and will return the values you desire. The asynchronous API will not block and functions and the API will not return values; instead, you will need to supply a callback function to handle the response whenever it arrives.</p> - -<div class="warning"> -<p>The Firefox implementation of the File and Directory Entries API is very limited; there is no support for creating files. Only for accessing files which are selected by the user in a file {{HTMLElement("input")}} element (see {{domxref("HTMLInputElement")}} as well) or when a file or directory is provided to the Web site or app using <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>. Firefox also does not implement the synchronous API. Check the browser compatibility for any part of the API you use carefully, and see <a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox</a> for more details.</p> -</div> - -<h2 id="Obter_acesso_a_um_sistema_de_ficheiros">Obter acesso a um sistema de ficheiros</h2> - -<p>There are two ways to get access to file systems defined in the current specification draft:</p> - -<ul> - <li>When handling a {{event("drop")}} event for drag and drop, you can call {{domxref("DataTransferItem.webkitGetAsEntry()")}} to get the {{domxref("FileSystemEntry")}} for a dropped item. If the result isn't <code>null</code>, then it's a dropped file or directory, and you can use file system calls to work with it.</li> - <li>The {{domxref("HTMLInputElement.webkitEntries")}} property lets you access the {{domxref("FileSystemFileEntry")}} objects for the currently selected files, but only if they are dragged-and-dropped onto the file chooser ({{bug(1326031)}}). If {{domxref("HTMLInputElement.webkitdirectory")}} is <code>true</code>, the {{HTMLElement("input")}} element is instead a directory picker, and you get {{domxref("FileSystemDirectoryEntry")}} objects for each selected directory.</li> -</ul> - -<h2 id="API_Assíncrona">API Assíncrona</h2> - -<p>The asynchronous API should be used for most operations, to prevent file system accesses from blocking the entire browser if used on the main thread. It includes the following interfaces:</p> - -<dl> - <dt>{{domxref("FileSystem")}}</dt> - <dd>Represents a file system.</dd> - <dt>{{domxref("FileSystemEntry")}}</dt> - <dd>The basic interface representing a single entry in a file system. This is implemented by other interfaces which represent files or directories.</dd> - <dt>{{domxref("FileSystemFileEntry")}}</dt> - <dd>Represents a single file in a file system.</dd> - <dt>{{domxref("FileSystemDirectoryEntry")}}</dt> - <dd>Represents a single directory in a file system.</dd> - <dt>{{domxref("FileSystemDirectoryReader")}}</dt> - <dd>Created by calling {{domxref("FileSystemDirectoryEntry.createReader()")}}, this interface provides the functionality which lets you read the contents of a directory.</dd> - <dt>{{domxref("FileSystemFlags")}}</dt> - <dd>Defines a set of values which are used when specifying option flags when calling certain methods in the <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a>.</dd> - <dt>{{domxref("FileError")}}</dt> - <dd>Represents an error which is generated by asynchronous file system calls.</dd> -</dl> - -<p>There are also two global functions (which are not part of the specification at this time and are implemented only by Google Chrome). They're available on the {{domxref("Window")}} object and implemented in {{domxref("LocalFileSystem")}}: <code>requestFileSystem()</code> and <code>resolveLocalFileSystemURL()</code>.</p> - -<h2 id="API_Síncrona">API Síncrona</h2> - -<p>The synchronous API is should only be used in {{domxref("Worker")}}s; these calls block until they're finished executing, and simply return the results instead of using callbacks. Using them on the main thread will block the browser, which is naughty. The interfaces below otherwise mirror the ones from the asynchronous API.</p> - -<dl> - <dt>{{domxref("FileSystemSync")}}</dt> - <dd>Represents a file system.</dd> - <dt>{{domxref("FileSystemEntrySync")}}</dt> - <dd>The basic interface representing a single entry in a file system. This is implemented by other interfaces which represent files or directories. {{domxref("EntrySync")}}</dd> - <dt>{{domxref("FileSystemFileEntrySync")}}</dt> - <dd>Represents a single file in a file system.</dd> - <dt>{{domxref("FileSystemDirectoryEntrySync")}}</dt> - <dd>Represents a single directory in a file system.</dd> - <dt>{{domxref("FileSystemDirectoryReaderSync")}}</dt> - <dd>Created by calling {{domxref("FileSystemDirectoryEntrySync.createReader()")}}, this interface provides the functionality which lets you read the contents of a directory.</dd> - <dt>{{domxref("FileException")}}</dt> - <dd>Represents an error which is generated by synchronous file system calls.</dd> -</dl> - -<p>There are also two global functions (which are not part of the specification at this time and are implemented only by Google Chrome). They're available on the {{domxref("Worker")}} object and implemented in {{domxref("LocalFileSystemSync")}}: <code>requestFileSystemSync()</code> and <code>resolveLocalFileSystemSyncURL()</code>.</p> - -<h2 id="Outras_Interfaces">Outras Interfaces</h2> - -<dl> - <dt>{{domxref("LocalFileSystem")}}</dt> - <dd>Gives you access to a sandboxed file system.</dd> - <dt>{{domxref("LocalFileSystemSync")}}</dt> - <dt> </dt> - <dt>{{domxref("LockedFile")}}</dt> - <dd>Provides tools to deal with a given file with all the necessary locks.</dd> - <dt>{{domxref("Metadata")}}{{experimental_inline}}</dt> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File System API')}}</td> - <td>{{Spec2('File System API')}}</td> - <td>Draft of proposed API</td> - </tr> - </tbody> -</table> - -<p>This API has no official W3C or WHATWG specification.</p> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Asynchronous API</td> - <td>13 {{ property_prefix("webkit") }}</td> - <td>{{ CompatGeckoDesktop(50) }}<sup>[1]</sup></td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - <tr> - <td>Synchronous API</td> - <td>13 {{ property_prefix("webkit") }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Asynchronous API</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatVersionUnknown }} {{ property_prefix("webkit") }}</td> - <td>{{ CompatGeckoMobile(50) }}<sup>[1]</sup></td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - <tr> - <td>Synchronous API</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatVersionUnknown }} {{ property_prefix("webkit") }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Firefox 50 introduces partial support for the File and Directory Entries API. Be sure to check the compatibility tables for individual interfaces and methods before using them, to ensure that they're supported, before you use them. The API can be disabled by setting the value of the preference <code>dom.webkitBlink.filesystem.enabled</code> to <code>false</code>.</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introdução às API Entradas de diretoria e Ficheiro </a>(inglês)</li> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Firefox_support">File and Directory Entries API support in Firefox </a>(inglês)</li> -</ul> diff --git a/files/pt-pt/web/api/filereader/abort/index.html b/files/pt-pt/web/api/filereader/abort/index.html deleted file mode 100644 index 3ffeae8ce9..0000000000 --- a/files/pt-pt/web/api/filereader/abort/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: FileReader.abort() -slug: Web/API/FileReader/abort -tags: - - API - - Ficheiros - - File API - - FileReader - - Referencia - - abort - - metodo -translation_of: Web/API/FileReader/abort ---- -<div>{{APIRef("File API")}}</div> - -<p>O método <strong><code>abort</code></strong> aborta a operação de leitura. Ao completar o abortamento, o {{domxref("FileReader.readyState","readyState")}} é <code>DONE</code>.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate"><var>instanceOfFileReader</var>.abort();</pre> - -<h3 id="Exceções">Exceções</h3> - -<dl> - <dt><code>DOM_FILE_ABORT_ERR</code></dt> - <dd>Lançado quando <code>abort</code> é chamado enquanto não há uma operação de leitura em progresso (ou seja, quando o <em>state</em> não é <code>LOADING</code>).</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("File API", "#abort", "abort()")}}</td> - <td>{{Spec2("File API")}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.FileReader.abort")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> -</ul> diff --git a/files/pt-pt/web/api/filereader/error/index.html b/files/pt-pt/web/api/filereader/error/index.html deleted file mode 100644 index b308705d79..0000000000 --- a/files/pt-pt/web/api/filereader/error/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: FileReader.error -slug: Web/API/FileReader/error -tags: - - API - - Ficheiros - - File API - - Propriedade - - Referencia -translation_of: Web/API/FileReader/error ---- -<div>{{APIRef("File API")}}</div> - -<p>A propriedade <code><strong>error</strong></code> de {{domxref("FileReader")}} retorna o erro que ocorreu ao ler o ficheiro.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">var <var>error</var> = <var>instanceOfFileReader</var>.error -</pre> - -<h2 id="Valor">Valor</h2> - -<p>Um {{domxref("DOMError")}} com o erro. Em Chrome 48+/Firefox 58+ esta propriedade retorna uma {{domxref("DOMException")}} porque <code>DOMError</code> foi removido do <em>standard</em> do DOM.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("File API", "#dom-filereader-error", "FileReader: error")}}</td> - <td>{{Spec2("File API")}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.FileReader.error")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> -</ul> diff --git a/files/pt-pt/web/api/filereader/index.html b/files/pt-pt/web/api/filereader/index.html deleted file mode 100644 index 0df369c585..0000000000 --- a/files/pt-pt/web/api/filereader/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: FileReader -slug: Web/API/FileReader -tags: - - API - - DOM - - File API - - Files - - NeedsTranslation - - Reference - - TopicStub - - WebAPI -translation_of: Web/API/FileReader ---- -<p>{{ APIRef("File API") }}</p> - -<h2 id="Summary">Summary</h2> - -<p>The <code>FileReader</code> object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using {{ domxref("File") }} or {{ domxref("Blob") }} objects to specify the file or data to read.</p> - -<p>File objects may be obtained from a {{ domxref("FileList") }} object returned as a result of a user selecting files using the {{ HTMLElement("input") }} element, from a drag and drop operation's <a href="/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a> object, or from the <code>mozGetAsFile()</code> API on an {{ domxref("HTMLCanvasElement") }}.</p> - -<h2 id="Constructor">Constructor</h2> - -<pre class="syntaxbox">FileReader FileReader();</pre> - -<p>See <a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a> for details and examples.</p> - -<h2 id="Properties" name="Properties">Properties</h2> - -<dl> - <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt> - <dd>A {{domxref("DOMError")}} representing the error that occurred while reading the file.</dd> - <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt> - <dd>A number indicating the state of the <code>FileReader</code>. This will be one of the {{ anch("State constants") }}.</dd> - <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt> - <dd>The file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("FileReader.onabort")}}</dt> - <dd>A handler for the {{event("abort")}} event. This event is triggered each time the reading operation is aborted.</dd> - <dt>{{domxref("FileReader.onerror")}}</dt> - <dd>A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.</dd> - <dt>{{domxref("FileReader.onload")}}</dt> - <dd>A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.</dd> - <dt>{{domxref("FileReader.onloadstart")}}</dt> - <dd>A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.</dd> - <dt>{{domxref("FileReader.onloadend")}}</dt> - <dd>A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).</dd> - <dt>{{domxref("FileReader.onprogress")}}</dt> - <dd>A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.</dd> -</dl> - -<div class="note"> -<p>Note: As <code>FileReader</code> inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.</p> -</div> - -<h3 id="State_constants" name="State_constants">State constants</h3> - -<ul> - <li><code>EMPTY </code> : <code>0</code> : No data has been loaded yet.</li> - <li><code>LOADING</code> : <code>1</code> : Data is currently being loaded.</li> - <li><code>DONE </code> : <code>2</code> : The entire read request has been completed.</li> -</ul> - -<h2 id="Methods" name="Methods">Methods</h2> - -<dl> - <dt>{{domxref("FileReader.abort()")}}</dt> - <dd>Aborts the read operation. Upon return, the <code>readyState</code> will be <code>DONE</code>.</dd> - <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}</dt> - <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.</dd> - <dt>{{domxref("FileReader.readAsBinaryString()")}}</dt> - <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains the raw binary data from the file as a string.</dd> - <dt>{{domxref("FileReader.readAsDataURL()")}}</dt> - <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains a <code>data:</code> URL representing the file's data.</dd> - <dt>{{domxref("FileReader.readAsText()")}}</dt> - <dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains the contents of the file as a text string.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('File API','#FileReader-interface','FileReader')}}</td> - <td>{{Spec2('File API')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer*</th> - <th>Opera*</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}</td> - <td>7</td> - <td>10</td> - <td>12.02</td> - <td>6.0.2</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>32</td> - <td>3</td> - <td>10</td> - <td>11.5</td> - <td>6.1</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Implementation_notes">Implementation notes</h3> - -<ul> - <li>IE9 has a <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info" title="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</li> - <li>Opera has <a href="http://www.opera.com/docs/specs/presto28/file/" title="http://my.opera.com/desktopteam/blog/2011/04/05/stability-gmail-socks">partial support</a> in 11.1.</li> -</ul> - -<h4 id="Gecko-specific_notes">Gecko-specific notes</h4> - -<ul> - <li>Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{ domxref("Blob") }} parameters below were {{ domxref("File") }} parameters; this has since been updated to match the specification correctly.</li> - <li>Prior to Gecko 13.0 {{ geckoRelease("13.0") }} the <code>FileReader.error</code> property returned a {{ domxref("FileError") }} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{ domxref("DOMError") }} object as defined in the latest FileAPI draft.</li> -</ul> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li><a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a></li> - <li>{{ domxref("File") }}</li> - <li>{{ domxref("Blob") }}</li> - <li><a href="/en-US/docs/nsIDOMFileReader">nsIDOMFileReader</a> - For addons/privileged scope</li> -</ul> diff --git a/files/pt-pt/web/api/filereader/readasarraybuffer/index.html b/files/pt-pt/web/api/filereader/readasarraybuffer/index.html deleted file mode 100644 index d5122d8096..0000000000 --- a/files/pt-pt/web/api/filereader/readasarraybuffer/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: FileReader.readAsArrayBuffer() -slug: Web/API/FileReader/readAsArrayBuffer -tags: - - API - - DOM - - Ficheiros - - File API - - FileReader - - Referencia - - metodo - - readAsArrayBuffer -translation_of: Web/API/FileReader/readAsArrayBuffer ---- -<p>{{APIRef("File API")}}</p> - -<p>O método <code>readAsArrayBuffer()</code> da interface {{domxref("FileReader")}} é utilizado para começar a ler o conteúdo de um {{domxref("Blob")}} ou {{domxref("File")}} especificado. Quando a operação de leitura termina, o valor de {{domxref("FileReader.readyState","readyState")}} passa a ser <code>DONE</code>, e é acionado o evento {{domxref("FileReader/loadend_event", "loadend")}}. Nessa altura, o atributo {{domxref("FileReader.result","result")}} contém um {{domxref("ArrayBuffer")}} representando os dados do ficheiro.</p> - -<div class="blockIndicator note"> -<p><strong>API mais recente</strong><br> - O método {{domxref("Blob.arrayBuffer()")}} é uma API recente que serve para ler um ficheiro como um <em>array buffer</em>, usando <em>Promises</em>.</p> -</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate"><var>instanceOfFileReader</var>.readAsArrayBuffer(<var>blob</var>);</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code><var>blob</var></code></dt> - <dd>O {{domxref("Blob")}} ou {{domxref("File")}} a partir do qual ler.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}</td> - <td>{{Spec2("File API")}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.FileReader.readAsArrayBuffer")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> -</ul> diff --git a/files/pt-pt/web/api/filereader/readasbinarystring/index.html b/files/pt-pt/web/api/filereader/readasbinarystring/index.html deleted file mode 100644 index 44911105e6..0000000000 --- a/files/pt-pt/web/api/filereader/readasbinarystring/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: FileReader.readAsBinaryString() -slug: Web/API/FileReader/readAsBinaryString -tags: - - API - - Ficheiros - - File API - - Referencia - - metodo -translation_of: Web/API/FileReader/readAsBinaryString ---- -<p>{{APIRef("File API")}}</p> - -<p>O método <code>readAsBinaryString</code> é usado para iniciar a leitura dos conteúdos do {{domxref("Blob")}} ou {{domxref("File")}} indicado. Quando a operação da leitura é terminada, o {{domxref("FileReader.readyState","readyState")}} retorna <code>DONE</code>, e o {{event("loadend")}} é acionado. A propriedade {{domxref("FileReader.result","result")}} depois contem o binário bruto do ficheiro.</p> - -<p>Note que este método foi removido do File API, mas foi reintroduzido por motivos de compatibilidade com versões antigas.<br> - É recomendado usar {{domxref("FileReader.readAsArrayBuffer()")}}.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="notranslate"><em>instanceOfFileReader</em>.readAsBinaryString(blob);</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code>blob</code></dt> - <dd>O {{domxref("Blob")}} ou {{domxref("File")}} a ser lido.</dd> -</dl> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js notranslate">var canvas = document.createElement('canvas'); -var height = 200; -var width = 200; - -canvas.width = width; -canvas.height = height; - -var ctx = canvas.getContext('2d'); - -ctx.strokeStyle = '#090'; -ctx.beginPath(); -ctx.arc(width/2, height/2, width/2 - width/10, 0, Math.PI*2); -ctx.stroke(); - -canvas.toBlob(function (blob) { - var reader = new FileReader(); - - reader.onloadend = function () { - console.log(reader.result); - } - - reader.readAsBinaryString(blob); -});</pre> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Especificações</h2> - -<table class="spectable standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API','#readAsBinaryString','readAsBinaryString')}}</td> - <td>{{Spec2('File API')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade</h2> - - - -<p>{{Compat("api.FileReader.readAsBinaryString")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> -</ul> diff --git a/files/pt-pt/web/api/filereader/readasdataurl/index.html b/files/pt-pt/web/api/filereader/readasdataurl/index.html deleted file mode 100644 index 321d50d3ce..0000000000 --- a/files/pt-pt/web/api/filereader/readasdataurl/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: FileReader.readAsDataURL() -slug: Web/API/FileReader/readAsDataURL -tags: - - API - - Base 64 - - Ficheiros - - File API - - FileReader - - Referencia - - metodo -translation_of: Web/API/FileReader/readAsDataURL ---- -<p>O método <code>readAsDataURL</code> é utilizado para ler os conteúdos dum {{domxref("Blob")}} ou {{domxref("File")}} especificado. Quando a operação de leitura é terminada, a propriedade {{domxref("FileReader.readyState","readyState")}} é atualizada para <code>DONE</code>, e o evento {{event("loadend")}} é lançado. Nessa altura, o atributo {{domxref("FileReader.result","result")}} contem os dados na forma <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">data: URL</a> que representa os dados do ficheiro em base 64 numa <em>string</em>.</p> - -<div class="note"> -<p><strong>Nota:</strong> O{{domxref("FileReader.result","result")}} da Blob não pode ser diretamente descodificado como Base64 sem remover a declaração Data-URL que precede os dados em Base64. Para ter só a <em>string</em> em Base64, primeiro tem de remover o <code>data:*/*;base64,</code> do resultado.</p> -</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre> - -<h3 id="Parametros">Parametros</h3> - -<dl> - <dt><code>blob</code></dt> - <dd>O {{domxref("Blob")}} ou {{domxref("File")}} para ler.</dd> -</dl> - -<h2 id="Exemplo">Exemplo</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><input type="file" onchange="previewFile()"><br> -<img src="" height="200" alt="Image preview..."></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">function previewFile() { - const preview = document.querySelector('img'); - const file = document.querySelector('input[type=file]').files[0]; - const reader = new FileReader(); - - reader.addEventListener("load", function () { - // converter o file de imagem oara uma string de base 64 - preview.src = reader.result; - }, false); - - if (file) { - reader.readAsDataURL(file); - } -}</pre> - -<h3 id="Resultado">Resultado</h3> - -<p>{{EmbedLiveSample("Exemplo", "100%", 240)}}</p> - -<h2 id="Exemplo_de_vários_files">Exemplo de vários files</h2> - -<h3 id="HTML_2">HTML</h3> - -<pre class="brush: html notranslate"><input id="browse" type="file" onchange="previewFiles()" multiple> -<div id="preview"></div></pre> - -<h3 id="JavaScript_2">JavaScript</h3> - -<pre class="brush: js notranslate">function previewFiles() { - - var preview = document.querySelector('#preview'); - var files = document.querySelector('input[type=file]').files; - - function readAndPreview(file) { - - // Make sure `file.name` matches our extensions criteria - if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { - var reader = new FileReader(); - - reader.addEventListener("load", function () { - var image = new Image(); - image.height = 100; - image.title = file.name; - image.src = this.result; - preview.appendChild( image ); - }, false); - - reader.readAsDataURL(file); - } - - } - - if (files) { - [].forEach.call(files, readAndPreview); - } - -} -</pre> - -<div class="note"><strong>Nota:</strong> O construtor <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> não é apoiado pela Internet Explorer anterior à versão 10. Para obter código totalmente compatível veja a nossa <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">solução <em>crossbrowser</em> para pré-visualizar imagens</a>. Veja também <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">este exemplo mais complexo</a>.</div> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("File API", "#readAsDataURL", "readAsDataURL()")}}</td> - <td>{{Spec2("File API")}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.FileReader.readAsDataURL")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> - <li>{{domxref("URL.createObjectURL()")}}</li> -</ul> - -<div>{{APIRef("File API")}}</div> diff --git a/files/pt-pt/web/api/filereader/readastext/index.html b/files/pt-pt/web/api/filereader/readastext/index.html deleted file mode 100644 index d8f821e7ab..0000000000 --- a/files/pt-pt/web/api/filereader/readastext/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: FileReader.readAsText() -slug: Web/API/FileReader/readAsText -tags: - - API - - Ficheiros - - File API - - Referencia - - metodo -translation_of: Web/API/FileReader/readAsText ---- -<div>{{APIRef("File API")}}</div> - -<p>O método <strong><code>readAsText()</code></strong> é utilizado para ler os conteúdos do {{domxref("Blob")}} ou {{domxref("File")}} indicado. Quando a operação de leitura é terminada, a propriedade {{domxref("FileReader.readyState","readyState")}} é modificada para <code>DONE</code>, o evento {{event("loadend")}} é lançado, e a propriedade {{domxref("FileReader.result","result")}} fica com os conteúdos do ficheiro em forma de <em>string</em>.</p> - -<div class="blockIndicator note"> -<p><strong>API mais recente disponível</strong><br> - {{domxref("Blob.text()")}} é um método mais recente, baseado na API de promessas, para ler um ficheiro como uma <em>string</em>.</p> -</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code>blob</code></dt> - <dd>O {{domxref("Blob")}} ou {{domxref("File")}} de qual ler.</dd> - <dt><code>encoding</code> {{optional_inline}}</dt> - <dd>Uma <em>string</em> a especificar qual codificação usar para os dados devolvidos. A UTF-8 é utilizada se não for definido.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("File API", "#readAsDataText", "readAsText()")}}</td> - <td>{{Spec2("File API")}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.FileReader.readAsText")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> -</ul> diff --git a/files/pt-pt/web/api/filereader/readystate/index.html b/files/pt-pt/web/api/filereader/readystate/index.html deleted file mode 100644 index 1147e43f29..0000000000 --- a/files/pt-pt/web/api/filereader/readystate/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: FileReader.readyState -slug: Web/API/FileReader/readyState -tags: - - API - - Ficheiros - - File API - - Propriedade - - Referencia -translation_of: Web/API/FileReader/readyState ---- -<div>{{APIRef("File API")}}</div> - -<p>A propriedade <strong><code>readyState</code></strong> de {{domxref("FileReader")}} fornece o estado actual da operação de leitura em que se encontra um <code>FileReader</code>. Um <code>FileReader</code> existe num dos seguintes estados:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Valor</th> - <th scope="col">Estado</th> - <th scope="col">Descrição</th> - </tr> - <tr> - <td><code>0</code></td> - <td><code>EMPTY</code></td> - <td>Foi criado um leitor. Nenhum dos métodos de leitura foi ainda chamado.</td> - </tr> - <tr> - <td><code>1</code></td> - <td><code>LOADING</code></td> - <td>Foi chamado um método de leitura.</td> - </tr> - <tr> - <td><code>2</code></td> - <td><code>DONE</code></td> - <td>A operação está concluída.</td> - </tr> - </thead> -</table> - -<dl> - <dt><code>EMPTY</code></dt> - <dd>O <code>FileReader</code> foi criado, mas ainda não foi chamado o método <code>readAs</code>.</dd> - <dt><code>LOADING</code></dt> - <dd>Foi invocado o método <code>readAs</code>. O {{domxref("File")}} ou {{domxref("Blob")}} está a ser lido, e ainda não ocorreu qualquer erro.</dd> - <dt><code>DONE</code></dt> - <dd>A operação lida está concluída. Isto pode significar que: todo o {{domxref("File")}} ou {{domxref("Blob")}} foi lido na memória, ocorreu um erro de leitura de ficheiro, ou {{domxref("FileReader.abort()", "abort()")}} foi chamado e a leitura foi cancelada.</dd> -</dl> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js notranslate">var reader = new FileReader(); -console.log('EMPTY', reader.readyState); // readyState é 0 - -reader.readAsText(blob); -console.log('LOADING', reader.readyState); // readyState é 1 - -reader.onloadend = function () { - console.log('DONE', reader.readyState); // readyState é 2 -}; -</pre> - -<h2 id="Valor">Valor</h2> - -<p>Um número que é uma das três constantes de estado possíveis definidas para o {{domxref("FileReader")}} API.</p> - -<h2 id="Especificação">Especificação</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("File API", "#dom-filereader-readystate", "readyState")}}</td> - <td>{{Spec2("File API")}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.FileReader.readyState")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("Blob")}}</li> -</ul> diff --git a/files/pt-pt/web/api/filereader/result/index.html b/files/pt-pt/web/api/filereader/result/index.html deleted file mode 100644 index ea7ddd4bbd..0000000000 --- a/files/pt-pt/web/api/filereader/result/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: FileReader.result -slug: Web/API/FileReader/result -tags: - - API - - Ficheiros - - File API - - FileReader - - Propriedade - - Referencia - - result -translation_of: Web/API/FileReader/result ---- -<div>{{APIRef("File API")}}</div> - -<p>A propriedade <code><strong>result</strong></code> de {{domxref("FileReader")}} devolve os conteúdo do ficheiro. Esta propriedade só é válida após a operação de leitura estar concluída, e o formato dos dados depende de qual método foi utilizado para iniciar a operação de leitura.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">var <var>file</var> = <var>instanceOfFileReader</var>.result -</pre> - -<h3 id="Valor">Valor</h3> - -<p>Uma <em>string</em> ou {{jsxref("ArrayBuffer")}} apropriado com base em qual dos métodos de leitura foi utilizado para iniciar a operação de leitura. O valor é <code>null</code> se a leitura ainda não estiver completa ou não foi bem sucedida.</p> - -<p>Os resultados são descritos abaixo.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Método</th> - <th scope="col">Descrição</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{domxref("FileReader/readAsArrayBuffer", "readAsArrayBuffer()")}}</td> - <td>O <code>result</code> é um {{jsxref("Global_Objects/ArrayBuffer", "ArrayBuffer")}} de JavaScript que contem dados binários.</td> - </tr> - <tr> - <td>{{domxref("FileReader/readAsBinaryString", "readAsBinaryString()")}}</td> - <td>O <code>result</code> contém os dados binários brutos do ficheiro numa <em>string</em>.</td> - </tr> - <tr> - <td>{{domxref("FileReader/readAsDataURL", "readAsDataURL()")}}</td> - <td>O <code>result</code> é uma string com uma <code>data:</code> URL que representa os dados do ficheiro.</td> - </tr> - <tr> - <td>{{domxref("FileReader/readAsText", "readAsText()")}}</td> - <td>O <code>result</code> ié texto numa <em>string</em>.</td> - </tr> - </tbody> -</table> - -<h2 id="Exemplo">Exemplo</h2> - -<p>Este exemplo apresenta uma função, <code>read()</code>, que lê um ficheiro a partir de uma <a href="/en-US/docs/Web/HTML/Element/input/file">entrada de ficheiro</a>. Funciona criando um objecto {{domxref("FileReader")}} e criando um ouvinte para eventos {{domxref("FileReader/load_event", "load")}}, de modo que quando o ficheiro é lido, o <code>result</code> é obtido e passado para a função callback fornecida para <code>read()</code>.</p> - -<p>O conteúdo é tratado como dados de texto brutos.</p> - -<pre class="brush: js notranslate">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); -} -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("File API", "#dom-filereader-result", "result")}}</td> - <td>{{Spec2("File API")}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.FileReader.result")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("FileReader")}}</li> -</ul> diff --git a/files/pt-pt/web/api/filesystem/index.html b/files/pt-pt/web/api/filesystem/index.html deleted file mode 100644 index f755c6d43e..0000000000 --- a/files/pt-pt/web/api/filesystem/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Sistema de Ficheiros -slug: Web/API/FileSystem -tags: - - API - - File API - - File System API - - File and Directory Entries API - - Interface - - Não Standard - - Offline - - filesystem -translation_of: Web/API/FileSystem -original_slug: Web/API/Sistema_de_ficheiros ---- -<div> -<p>{{APIRef("File System API")}}{{SeeCompatTable}}</p> - -<p>A interface da "API de Entradas de Diretorias e Ficheiros" é usada para representar um sistema de ficheiros. Estes objetos podem ser obtidos a partir da propriedade {{domxref("FileSystemEntry.filesystem", "filesystem")}} em qualquer entrada do sistema de ficheiros. Alguns navegadores oferecem APIs adicionais para criar e gerir sistemas de ficheiros, por exemplo o método {{domxref("Window.requestFileSystem", "requestFileSystem()")}} encontrado no Chrome.</p> - -<p>Esta interface não dá acesso ao <em>filesystem</em> do utilizador. Em vez disso, terá uma "drive virtual" dentro da <em>sandbox</em> do navegador. Se quiser ter acesso ao sistema de ficheiros dos utilizadores, necessita de invocar o utilizador.</p> -</div> - -<h2 id="Conceitos_básicos">Conceitos básicos</h2> - -<p>Existem duas formas para aceder ao objeto <code>FileSystem</code>:</p> - -<ol> - <li>Pode pedir por um dentro duma <em>sandbox</em> para só a sua app ao chamar <code>window.requestFileSystem()</code>. Se a chamada tiver sucesso, é executada uma <em>callback handler</em>, que recebe como parâmetro um objeto <code>FileSystem</code> que descreve o sistema de ficheiros.</li> - <li>Pode o pedir através duma entrada no sistema de ficheiros, com a propriadade {{domxref("FileSystemEntry.filesystem", "filesystem")}}.</li> -</ol> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Atributos</h2> - -<dl> - <dt>{{domxref("FileSystem.name")}} {{ReadOnlyInline}}</dt> - <dd>Uma {{domxref("USVString")}} que representa o nome do sistema de ficheiros. Este nome é único na lista de sistemas de ficheiros exposta.</dd> - <dt>{{domxref("FileSystem.root")}} {{ReadOnlyInline}}</dt> - <dd>Um objeto de {{domxref("FileSystemDirectoryEntry")}} que representa a diretoria raiz do sistema de ficheiros. Através deste objeto, pode ganhar acesso a todos os ficheiros e diretorias no sistema.</dd> -</dl> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade</h2> - - - -<p>{{Compat("api.FileSystem")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/API_Entradas_de_Diretoria_e_Ficheiro">API de Entradas de Diretorias e Ficheiros</a></li> - <li>Introdução à API de Entradas de Diretorias e Ficheiros</li> - <li>{{domxref("FileSystemEntry")}}, {{domxref("FileSystemFileEntry")}}, e {{domxref("FileSystemDirectoryEntry")}}</li> - <li>Artigo de MSDN: <em><a href="https://msdn.microsoft.com/library/mt732564">WebKitFileSystem object</a></em> (em inglês)</li> -</ul> diff --git a/files/pt-pt/web/api/geolocation/index.html b/files/pt-pt/web/api/geolocation/index.html deleted file mode 100644 index 3e3387d0b4..0000000000 --- a/files/pt-pt/web/api/geolocation/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Geolocalização -slug: Web/API/Geolocation -tags: - - API - - API de Geolocalização - - Avançada - - Contexto de segurança - - Interface - - Referencia -translation_of: Web/API/Geolocation ---- -<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div> - -<p>A interface de <code><strong>Geolocalização</strong></code> representa um objeto capaz de obter programaticamente a posição do dispositivo. Esta dá acesso ao conteúdo da Web para a localização do dispositivo. Isto permite que um site da Web ou aplicação ofereça resultados personalizados com base na localização do utilizador.</p> - -<p>Um objeto com esta interface é obtido utilizando a propriedade {{domxref("navigator.geolocation")}} implementada pelo objeto {{domxref("Navigator")}}.</p> - -<div class="note"> -<p><strong>Nota:</strong> por motivos de segurança, quando uma página da Web tenta aceder à informação da localização, o utilizador é notificado e é-lhe solicitado para dar permissão. Tenha em atenção que cada navegador tem as suas próprias políticas e métodos para solicitarem esta permissão.</p> -</div> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em>A interface de <code>Geolocalização</code> não implementa, nem adquire qualquer propriedade.</em></p> - -<h2 id="Métodos">Métodos</h2> - -<p><em><em>A interface de <code>Geolocalização</code> não </em>adquire qualquer propriedade</em>.</p> - -<dl> - <dt>{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}</dt> - <dd>Determina a localização do dispositivo e devolve um objeto de {{domxref("Position")}} com os dados.</dd> - <dt>{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}</dt> - <dd>Devolve um valor <code>longo</code> representando a nova função <em>estabelecida callback</em> para ser invocada sempre que a localização do dispositivo for alterada.</dd> - <dt>{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}</dt> - <dd>Remove o manipulador particular instalado anteriormente, utilizando <code>watchPosition()</code>.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Geolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Especificação inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>5</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9</td> - <td>10.60<br> - Removed in 15.0<br> - Reintroduced in 16.0</td> - <td>5</td> - </tr> - <tr> - <td>Apenas contexto de segurança</td> - <td>47</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoDesktop("55")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("4")}}</td> - <td>{{CompatUnknown()}}</td> - <td>10.60</td> - <td>{{CompatUnknown()}}</td> - </tr> - <tr> - <td>Apenas contexto de segurança</td> - <td>{{CompatNo}}</td> - <td>47</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoDesktop("55")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/Geolocation/Utilizacao_da_geolocalizacao" title="/en-US/docs/WebAPI/Using_geolocation">API de geolocalização</a></li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: 0% 0% repeat scroll rgba(0, 0, 0, 0); display: none; opacity: 1; left: -8px; top: -25px;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/geolocation_api/index.html b/files/pt-pt/web/api/geolocation_api/index.html deleted file mode 100644 index c9d0a60cb1..0000000000 --- a/files/pt-pt/web/api/geolocation_api/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: API de Geolocalização -slug: Web/API/Geolocation_API -tags: - - API de Geolocalização - - Guía - - Intermediário -translation_of: Web/API/Geolocation_API -original_slug: Web/API/Geolocation/Utilizacao_da_geolocalizacao ---- -<p>{{securecontext_header}}{{APIRef("Geolocation API")}}</p> - -<p>A <strong>API de geolocalização </strong>permite que o utilizador forneça a sua localização nas aplicações da Web, se assim o desejar. Por motivos de segurança, é solicitado ao utilizador para dar permissão para informar a informação da localização.</p> - -<h2 id="O_objeto_de_geolocalização">O objeto de geolocalização</h2> - -<p>A API de <a href="/pt-PT/docs/Web/API/Geolocation">Geolocation</a> é publicada através do objeto {{domxref("navigator.geolocation")}}.</p> - -<p>Se o objeto existir, os serviços de geolocalização estarão disponíveis. Pode testar a presença de geolocalização assim:</p> - -<pre class="brush: js">if ("geolocation" in navigator) { - /* geolocation is available */ -} else { - /* geolocation IS NOT available */ -} -</pre> - -<div class="note"> -<p><strong>Nota:</strong> On Firefox 24 and older versions, <code>"geolocation" in navigator</code> always returned <code>true</code> even if the API was disabled. This has been fixed with <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a> to comply with the spec. ({{bug(884921)}}).</p> -</div> - -<h3 id="Obter_a_posição_atual">Obter a posição atual</h3> - -<p>To obtain the user's current location, you can call the {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}} method. This initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date information. When the position is determined, the defined callback function is executed. You can optionally provide a second callback function to be executed if an error occurs. A third, optional, parameter is an options object where you can set the maximum age of the position returned, the time to wait for a request, and if you want high accuracy for the position.</p> - -<div class="note"> -<p><strong>Nota:</strong> By default, {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tries to answer as fast as possible with a low accuracy result. It is useful if you need a quick answer regardless of the accuracy. Devices with a GPS, for example, can take a minute or more to get a GPS fix, so less accurate data (IP location or wifi) may be returned to {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p> -</div> - -<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { - do_something(position.coords.latitude, position.coords.longitude); -});</pre> - -<p>The above example will cause the <code>do_something()</code> function to execute when the location is obtained.</p> - -<h3 id="Vigiar_a_posição_atual">Vigiar a posição atual</h3> - -<p>If the position data changes (either by device movement or if more accurate geo information arrives), you can set up a callback function that is called with that updated position information. This is done using the {{domxref("Geolocation.watchPosition()","watchPosition()")}} function, which has the same input parameters as {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. The callback function is called multiple times, allowing the browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you. The error callback function, which is optional just as it is for {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, can be called repeatedly.</p> - -<div class="note"> -<p><strong>Nota:</strong> pode utilizar {{domxref("Geolocation.watchPosition()","watchPosition()")}} sem uma chamada inicial {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p> -</div> - -<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) { - do_something(position.coords.latitude, position.coords.longitude); -});</pre> - -<p>The {{domxref("Geolocation.watchPosition()","watchPosition()")}} method returns an ID number that can be used to uniquely identify the requested position watcher; you use this value in tandem with the {{domxref("Geolocation.clearWatch()","clearWatch()")}} method to stop watching the user's location.</p> - -<pre class="brush: js">navigator.geolocation.clearWatch(watchID); -</pre> - -<h3 id="Resposta_de_ajuste_preciso">Resposta de ajuste preciso</h3> - -<p>Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional <a href="/en-US/docs/Web/API/PositionOptions">PositionOptions</a> object.</p> - -<p>{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}</p> - -<p>A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:</p> - -<pre class="brush: js">function geo_success(position) { - do_something(position.coords.latitude, position.coords.longitude); -} - -function geo_error() { - alert("Sorry, no position available."); -} - -var geo_options = { - enableHighAccuracy: true, - maximumAge : 30000, - timeout : 27000 -}; - -var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre> - -<h2 id="Descrever_uma_posição">Descrever uma posição</h2> - -<p>The user's location is described using a <code>Position</code> object referencing a <code>Coordinates</code> object.</p> - -<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}</p> - -<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}</p> - -<h2 id="Lidar_com_erros">Lidar com erros</h2> - -<p>The error callback function, if provided when calling <code>getCurrentPosition()</code> or <code>watchPosition()</code>, expects a <a href="/en-US/docs/Web/API/PositionError">PositionError</a> object as its first parameter.</p> - -<pre class="brush: js">function errorCallback(error) { - alert('ERROR(' + error.code + '): ' + error.message); -}; -</pre> - -<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}</p> - -<h2 id="Exemplo_de_Geolocalização_Live">Exemplo de Geolocalização <em>Live</em></h2> - -<div class="hidden"> -<pre class="brush: css">body { - padding: 20px; - background-color:#ffffc9 -} - -p { margin : 0; } -</pre> -</div> - -<h3 id="Conteúdo_HTML">Conteúdo HTML</h3> - -<pre class="brush: html;"><p><button onclick="geoFindMe()">Show my location</button></p> -<div id="out"></div> -</pre> - -<h3 id="Conteúdo_JavaScript">Conteúdo JavaScript</h3> - -<pre class="brush: js;">function geoFindMe() { - var output = document.getElementById("out"); - - if (!navigator.geolocation){ - output.innerHTML = "<p>Geolocation is not supported by your browser</p>"; - return; - } - - function success(position) { - var latitude = position.coords.latitude; - var longitude = position.coords.longitude; - - output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>'; - - var img = new Image(); - img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false"; - - output.appendChild(img); - } - - function error() { - output.innerHTML = "Unable to retrieve your location"; - } - - output.innerHTML = "<p>Locating…</p>"; - - navigator.geolocation.getCurrentPosition(success, error); -} -</pre> - -<h3 id="Resultado_Live">Resultado <em>Live</em></h3> - -<p>{{EmbedLiveSample('Geolocation_Live_Example', 350, 410)}}</p> - -<h2 id="Aviso_para_permissão">Aviso para permissão</h2> - -<p>Any add-on hosted on <a href="https://addons.mozilla.org/">addons.mozilla.org</a> which makes use of geolocation data must explicitly request permission before doing so. The following function will request permission in a manner similar to the automatic prompt displayed for web pages. The user's response will be saved in the preference specified by the <code>pref</code> parameter, if applicable. The function provided in the <code>callback</code> parameter will be called with a boolean value indicating the user's response. If <code>true</code>, the add-on may access geolocation data.</p> - -<pre class="brush: js">function prompt(window, pref, message, callback) { - let branch = Components.classes["@mozilla.org/preferences-service;1"] - .getService(Components.interfaces.nsIPrefBranch); - - if (branch.getPrefType(pref) === branch.PREF_STRING) { - switch (branch.getCharPref(pref)) { - case "always": - return callback(true); - case "never": - return callback(false); - } - } - - let done = false; - - function remember(value, result) { - return function() { - done = true; - branch.setCharPref(pref, value); - callback(result); - } - } - - let self = window.PopupNotifications.show( - window.gBrowser.selectedBrowser, - "geolocation", - message, - "geo-notification-icon", - { - label: "Share Location", - accessKey: "S", - callback: function(notification) { - done = true; - callback(true); - } - }, [ - { - label: "Always Share", - accessKey: "A", - callback: remember("always", true) - }, - { - label: "Never Share", - accessKey: "N", - callback: remember("never", false) - } - ], { - eventCallback: function(event) { - if (event === "dismissed") { - if (!done) callback(false); - done = true; - window.PopupNotifications.remove(self); - } - }, - persistWhileVisible: true - }); -} - -prompt(window, - "extensions.foo-addon.allowGeolocation", - "Foo Add-on wants to know your location.", - function callback(allowed) { alert(allowed); }); -</pre> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<p>{{Compat("api.Geolocation")}}</p> - -<h3 id="Disponibilidade">Disponibilidade</h3> - -<p>Como a localização baseada em Wi-Fi é geralmente fornecida pelo Google, a API de Geolocalização "vanilla" pode estar indisponível na China. Pode utilizar os provedores locais de terceiros, tais como <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a>, <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a>, ou <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a>. Estes serviços utilziam o endereço de IP do utilizador e/ou uma aplicação local para fornecer o posicionamento melhorado.</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>{{domxref("navigator.geolocation")}}</li> - <li><a href="https://developer.mozilla.org/pt-PT/docs/Web/Apps/Fundamentals/gather_and_modify_data/Plotting_yourself_on_the_map">Localizar-se no mapa</a></li> - <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">API de Geolocation em w3.org</a></li> - <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Quem moveu a minha geolocalização?</a> (Blogue de <em>Hacks</em>)</li> -</ul> diff --git a/files/pt-pt/web/api/index.html b/files/pt-pt/web/api/index.html deleted file mode 100644 index 196c30c28f..0000000000 --- a/files/pt-pt/web/api/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: APIs da Web (Interfaces) -slug: Web/API -tags: - - API - - DOM - - JavaScript - - Referencia - - Web -translation_of: Web/API ---- -<p>Quando escrever código para a Web com Javascript, estão disponíveis muitas APIs excelentes. Em baixo, tem uma lista de interfaces (ou seja, tipos de objetos) que poderá utilizar durante o desenvolvimento da sua aplicaçao ou site da <em>Web</em>.</p> - -<p>{{APIListAlpha}}</p> diff --git a/files/pt-pt/web/api/mathmlelement/index.html b/files/pt-pt/web/api/mathmlelement/index.html deleted file mode 100644 index ee2504017a..0000000000 --- a/files/pt-pt/web/api/mathmlelement/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: MathMLElement -slug: Web/API/MathMLElement -tags: - - API - - Interface - - MathML - - MathMLElement - - Referencia -translation_of: Web/API/MathMLElement ---- -<div>{{APIRef("MathML")}}</div> - -<p class="summary">A interface <strong><code>MathMLElement</code></strong> representa qualquer elemento <a href="/pt-PT/docs/Web/MathML">MathML</a>.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<p><em>Esta interface não tem propriedades, mas herda propriedades de: {{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("Element")}}, {{DOMxRef("ElementCSSInlineStyle")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("HTMLOrForeignElement")}}</em></p> - -<ul> -</ul> - -<h2 id="Métodos">Métodos</h2> - -<p><em>Esta interface não tem métodos, mas herda métodos de: {{DOMxRef("DocumentAndElementEventHandlers")}}, {{DOMxRef("Element")}}, {{DOMxRef("ElementCSSInlineStyle")}}, {{DOMxRef("GlobalEventHandlers")}}, {{DOMxRef("HTMLOrForeignElement")}}</em></p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="MathML">MathML</h3> - -<pre class="brush: html notranslate"><math xmlns="http://www.w3.org/1998/Math/MathML"> - <msqrt> - <mi>x</mi> - </msqrt> -</math></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js notranslate">document.querySelector('msqrt').constructor.name; // MathMLElement</pre> - -<h2 id="Specification" name="Specification">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://mathml-refresh.github.io/mathml-core/#dom-mathmlelement">MathMLElement interface</a></td> - <td></td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.MathMLElement")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{DOMxRef("Element")}}</li> - <li>{{DOMxRef("HTMLElement")}}</li> - <li>{{DOMxRef("SVGElement")}}</li> -</ul> diff --git a/files/pt-pt/web/api/media_streams_api/index.html b/files/pt-pt/web/api/media_streams_api/index.html deleted file mode 100644 index 34fefc2bae..0000000000 --- a/files/pt-pt/web/api/media_streams_api/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: API de Captura de Transmissões de Multimédia (Media Streams) -slug: Web/API/Media_Streams_API -tags: - - API - - API de Transmissão de Multimédia - - Audio - - Avançado - - Guía - - Introdução - - Media - - Multimedia - - Video -translation_of: Web/API/Media_Streams_API -original_slug: Web/API/API_transmissoes_multimedia ---- -<div>{{DefaultAPISidebar("Media Capture and Streams")}}</div> - -<p>A API de <em><strong>Media Capture and Streams</strong></em>, muitas vezes chamada de <em>Media Stream API</em> ou <em>Stream API</em>, é uma API relacionada com <a href="/pt-PT/docs/Web/API/API_WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> que suporta transmissões de dados de áudio ou vídeo, os métodos para trabalhar com eles, as restrições associadas com o tipo de dados, as devoluções de retorno de sucesso e erro quando utilizar os dados de forma assíncrona, e os eventos que foram ativados durante o processo.</p> - -<h2 id="Conceitos_básicos">Conceitos básicos</h2> - -<p>The API is based on the manipulation of a {{domxref("MediaStream")}} object representing a flux of audio- or video-related data. See an example in <a href="/docs/Web/API/API_WebRTC/Tirar_fotografias" title="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video">Get the video</a>.</p> - -<p>A <code>MediaStream</code> consists of zero or more {{domxref("MediaStreamTrack")}} objects, representing various audio or video <strong>tracks</strong>. Each <code>MediaStreamTrack</code> may have one or more <strong>channels</strong>. The channel represents the smallest unit of a media stream, such as an audio signal associated with a given speaker, like <em>left</em> or <em>right</em> in a stereo audio track.</p> - -<p><code>MediaStream</code> objects have a single <strong>input</strong> and a single <strong>output</strong>. A <code>MediaStream</code> object generated by {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} is called <em>local</em>, and has as its source input one of the user's cameras or microphones. A non-local <code>MediaStream</code> may be representing to a media element, like {{HTMLElement("video")}} or {{HTMLElement("audio")}}, a stream originating over the network, and obtained via the WebRTC {{domxref("RTCPeerConnection")}} API, or a stream created using the <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioSourceNode")}}. The output of the <code>MediaStream</code> object is linked to a <strong>consumer</strong>. It can be a media elements, like {{HTMLElement("audio")}} or {{HTMLElement("video")}}, the WebRTC {{domxref("RTCPeerConnection")}} API or a <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> {{domxref("MediaStreamAudioDestinationNode")}}.</p> - -<h2 id="Referência">Referência</h2> - -<div class="index"> -<ul> - <li>{{event("addtrack")}} (event)</li> - <li>{{domxref("AudioStreamTrack")}}</li> - <li>{{domxref("BlobEvent")}}</li> - <li>{{event("ended")}} (event)</li> - <li>{{domxref("MediaStream")}}</li> - <li>{{domxref("MediaStreamTrack")}}</li> - <li>{{domxref("MediaStreamTrackEvent")}}</li> - <li>{{domxref("MediaTrackCapabilities")}}</li> - <li>{{domxref("MediaTrackConstraints")}}</li> - <li>{{domxref("MediaTrackSettings")}}</li> - <li>{{domxref("MediaTrackSupportedConstraints")}}</li> - <li>{{event("muted")}} (event)</li> - <li>{{domxref("NavigatorUserMedia")}}</li> - <li>{{domxref("NavigatorUserMediaError")}}</li> - <li>{{event("overconstrained")}} (event)</li> - <li>{{event("removetrack")}} (event)</li> - <li>{{event("started")}} (event)</li> - <li>{{event("unmuted")}} (event)</li> - <li>{{domxref("URL")}}</li> - <li>{{domxref("VideoStreamTrack")}}</li> -</ul> -</div> - -<h2 id="Guias_e_tutoriais">Guias e tutoriais</h2> - -<p>{{LandingPageListSubpages}}</p> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<p>{{ CompatibilityTable }} </p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Edge</th> - <th>Internet Explorer</th> - <th>Opera </th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Stream API </td> - <td>21{{ property_prefix("webkit") }} </td> - <td>Nightly 18{{ property_prefix("moz") }} </td> - <td>{{ CompatVersionUnknown }}</td> - <td>{{ CompatUnknown }} </td> - <td>12</td> - <td>{{ CompatUnknown }} </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>API de emissão</td> - <td>{{ CompatNo }} </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatUnknown }}</td> - <td>{{ CompatUnknown }} </td> - <td>{{ CompatNo }} </td> - <td>{{ CompatNo }} </td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<p>Currently using WebRTC for accessing the camera is supported in Chrome, Opera and Firefox Nightly 18. Enabling WebRTC in Firefox Nightly requires you to set a flag in the configuration:</p> - -<ul> - <li>Type "about:config" in the address bar and say yes that you want to make changes</li> - <li>Find the "media.navigator.enabled" entry and set it to true</li> -</ul> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/API_WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> - a página introdutória para a API</li> - <li>{{domxref("mediaDevices.getUserMedia()")}}</li> - <li><a href="/pt-PT/docs/Web/API/API_WebRTC/Tirar_fotografias">Tirar fotografias com a câmara da <em>Web</em></a>: tutorial sobre como utilizar <code>getUserMedia()</code>.</li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/mediadevices/index.html b/files/pt-pt/web/api/mediadevices/index.html deleted file mode 100644 index 68ea5de783..0000000000 --- a/files/pt-pt/web/api/mediadevices/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: MediaDevices -slug: Web/API/MediaDevices -tags: - - API - - Devices - - Interface - - Media - - Media Capture and Streams API - - Media Streams API - - MediaDevices - - NeedsTranslation - - Reference - - TopicStub - - WebRTC -translation_of: Web/API/MediaDevices ---- -<div>{{APIRef("Media Capture and Streams")}}{{SeeCompatTable}}</div> - -<p><span class="seoSummary">The <strong><code>MediaDevices</code></strong> interface provides access to connected media input devices like cameras and microphones, as well as screen sharing. In essence, it lets you obtain access to any hardware source of media data.</span></p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parent {{domxref("EventTarget")}}.</em></p> - -<h3 id="Handlers" name="Handlers">Event handlers</h3> - -<dl> - <dt>{{ domxref("MediaDevices.ondevicechange") }}</dt> - <dd>The event handler for the {{event("devicechange")}} event. This event is delivered to the <code>MediaDevices</code> object when a media input or output device is attached to or removed from the user's computer.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits methods from its parent {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{ domxref("EventTarget.addEventListener()") }}</dt> - <dd>Registers an event handler to a specific event type.</dd> - <dt>{{ domxref("MediaDevices.enumerateDevices()") }}</dt> - <dd>Obtains an array of information about the media input and output devices available on the system.</dd> - <dt>{{domxref("MediaDevices.getSupportedConstraints()")}}</dt> - <dd>Returns an object conforming to {{domxref("MediaTrackSupportedConstraints")}} indicating which constrainable properties are supported on the {{domxref("MediaStreamTrack")}} interface. See {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} to learn more about constraints and how to use them.</dd> - <dt>{{ domxref("MediaDevices.getUserMedia()") }}</dt> - <dd>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.</dd> - <dt>{{ domxref("EventTarget.removeEventListener()") }}</dt> - <dd>Removes an event listener.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<pre class="brush:js">'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.onremovetrack = 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); - } -}</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}</td> - <td>{{Spec2('Media Capture')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(47)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("36.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera(30)}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>enumerateDevices()</code></td> - <td>{{CompatChrome(51)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera(38)}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>getSupportedConstraints()</code></td> - <td>{{CompatChrome(53)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(44)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera(40)}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>ondevicechange</code> and <code>devicechange</code> events</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(51)}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Stereo audio capture</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(55)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(47)}}</td> - <td>{{CompatChrome(47)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("36.0")}}</td> - <td>2.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatOperaMobile(30)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>enumerateDevices()</code></td> - <td>{{CompatChrome(51)}}</td> - <td>{{CompatChrome(51)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOperaMobile(38)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>getSupportedConstraints()</code></td> - <td>{{CompatChrome(53)}}</td> - <td>{{CompatChrome(52)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(50)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOperaMobile(40)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>ondevicechange</code> and <code>devicechange</code> events</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(51)}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Stereo audio capture</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> - -<p>[1] Support for the <code>devicechange</code> event and for {{domxref("MediaDevices.ondevicechange")}} landed in Firefox 51, but <em>only for Mac</em>, and disabled by default. It can be enabled by setting the preference <code>media.ondevicechange.enabled</code> to <code>true</code>. Support for this event was added for Linux and Windows—and it was enabled by default—starting in Firefox 52.</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: The API this interface is part of.</li> - <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li> - <li>{{domxref("Navigator.mediaDevices")}}: Returns a reference to a <code>MediaDevices</code> object that can be used to access devices.</li> - <li><a href="https://github.com/chrisjohndigital/CameraCaptureJS">CameraCaptureJS:</a> HTML5 video capture and playback using MediaDevices and the MediaStream Recording API (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">source on GitHub</a>)</li> - <li><a href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: HTML5 video language lab web application using MediaDevices and the MediaStream Recording API for video recording (<a href="https://github.com/chrisjohndigital/OpenLang">source on GitHub</a>)</li> -</ul> diff --git a/files/pt-pt/web/api/messageevent/index.html b/files/pt-pt/web/api/messageevent/index.html deleted file mode 100644 index f69342523b..0000000000 --- a/files/pt-pt/web/api/messageevent/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: MessageEvent -slug: Web/API/MessageEvent -tags: - - API - - Canais - - Interface - - Mensagens - - Referencia - - WebSockets - - Window - - Workers -translation_of: Web/API/MessageEvent ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p>A interface <code><strong>MessageEvent</strong></code> representa a mensagem recebida pelo objeto alvo.</p> - -<p>É usado para representar mensagens em:</p> - -<ul> - <li><a href="/en-US/docs/Web/API/Server-sent_events">Eventos enviados pelo servidor</a> (ver {{domxref("EventSource.onmessage")}}).</li> - <li><a href="/pt-PT/docs/Web/API/WebSockets_API">Web sockets</a> (ver a propriedade <code>onmessage</code> da interface <a href="/en-US/docs/Web/API/WebSocket">WebSocket</a>).</li> - <li>Envio de mensagens entre-documentos (ver {{domxref("Window.postMessage()")}} e {{domxref("Window.onmessage")}}).</li> - <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Mensagens em canal</a> (ver {{domxref("MessagePort.postMessage()")}} e {{domxref("MessagePort.onmessage")}}).</li> - <li>Envio de mensagens entre-documentos e entre-<em>workers</em> (ver as duas entradas acima, e tembém {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, etc.)</li> - <li><a href="/en-US/docs/Web/API/Broadcast_Channel_API">Canais de transmissão</a> (ver {{domxref("Broadcastchannel.postMessage()")}}) e {{domxref("BroadcastChannel.onmessage")}}).</li> - <li>Canais de transmissão de WebRTC (ver {{domxref("RTCDataChannel.onmessage")}}).</li> -</ul> - -<p>A ação acionada por este evento é definida na função escolhida para ser o <em>event handler</em> do evento {{event("message")}} relevante (e.x. usar um <em>handler</em> <code>onmessage</code> como é menciondo antriormente).</p> - -<p>{{AvailableInWorkers}}<br> - {{InheritanceDiagram(600, 80)}}</p> - -<h2 id="Construtor">Construtor</h2> - -<dl> - <dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt> - <dd>Cria um <code>MessageEvent</code>.</dd> -</dl> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em>Esta interface também herda propriedades da interface {{domxref("Event")}}, </em> <em>de qual se deriva</em><em>.</em></p> - -<dl> - <dt>{{domxref("MessageEvent.data")}} {{readonlyInline}}</dt> - <dd>Os dados enviados pelo emissor da mensagem.</dd> - <dt>{{domxref("MessageEvent.origin")}} {{readonlyInline}}</dt> - <dd>Uma {{domxref("USVString")}} que representa a origem do emissor da mensagem.</dd> - <dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt> - <dd>Uma {{domxref("DOMString")}} que representa um ID único para o evento.</dd> - <dt>{{domxref("MessageEvent.source")}} {{readonlyInline}}</dt> - <dd>Uma <code>MessageEventSource</code> (que pode ser um objeto {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, ou {{domxref("ServiceWorker")}}) que representa o emissor da mensagem.</dd> - <dt>{{domxref("MessageEvent.ports")}} {{readonlyInline}}</dt> - <dd>Uma matriz de objetos {{domxref("MessagePort")}} que representam as portas ao canal por qual as mensagens são enviadas (onde for apropriado, por exemplo em mensagens via canais ou ao enviar uma mensagem a um <em>worker</em> partilhado).</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p><em>Esta interface também herda métodos de {{domxref("Event")}}, de qual se deriva.</em></p> - -<dl> - <dt>{{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}}</dt> - <dd>Inicializa um evento de mensagem. <strong>Não use</strong> — <strong>use antes o construtor {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}.</strong></dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<p>No nosso<a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">exemplo básico dum <em>worker</em> partilhado</a>, temos duas páginas de HTML, cada qual usa JavaScript para fazer um simples cálculo. Os <em>scripts</em> diferentes estão a utilizar o mesmo ficheiro de <em>worker</em> para fazer os cálculos — ambos podem-no aceder, mesmo se as páginas estiverem a correr em janelas diferentes.</p> - -<p>O seguinte <em>snippet</em> de código demonstra a criação dum objeto {{domxref("SharedWorker")}} usando o construtor {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Ambas <em>scripts</em> contêm isto:</p> - -<pre class="brush: js notranslate">var myWorker = new SharedWorker('worker.js'); -</pre> - -<p>Ambas <em>scripts</em> acedem ao <em>worker</em> através dum objeto {{domxref("MessagePort")}} criado usando a propriedade {{domxref("SharedWorker.port")}}. Se o evento <code>onmessage</code> foi adicionado usando <code>addEventListener</code>, a porta é manualmente criada usando o seu método <code>start()</code>:</p> - -<pre class="brush: js notranslate">myWorker.port.start();</pre> - -<p>Quando a porta é iniciada, ambos <em>scripts</em> enviam mensagens ao <em>worker</em> e processão mensagens vindas do <em>worker</em> usando <code>port.postMessage()</code> e <code>port.onmessage</code>, respetivamente:</p> - -<pre class="brush: js notranslate">first.onchange = function() { - myWorker.port.postMessage([first.value,second.value]); - console.log('Mensagem enviada ao worker'); -} - -second.onchange = function() { - myWorker.port.postMessage([first.value,second.value]); - console.log('Mensagem enviada ao worker'); -} - -myWorker.port.onmessage = function(e) { - result1.textContent = e.data; - console.log('Mensagem recebida do worker'); -}</pre> - -<p>Dentro do <em>worker</em> usamos o <em>handler</em> {{domxref("SharedWorkerGlobalScope.onconnect")}} para nos ligarmos à mesma porta a que referimos antes. As portas associadas a esse <em>worker</em> são acessíveis através da propriedade <code>ports</code> do evento {{event("connect")}} — nós depois usamos o método <code>start()</code> de {{domxref("MessagePort")}} para iniciar a porta, e o <em>handler</em> <code>onmessage</code> para lidar com as mensagens enviadas dos <em>threads</em> principais.</p> - -<pre class="brush: js notranslate">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(); // Necessário quando se usa addEventListener. Senão é chamado implicitamente pelo setter onmessage. -}</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.MessageEvent")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("ExtendableMessageEvent")}} — parecida a esta interface, mas usada como base de outras interfaces que necessitam dar mais flexibilidade aos seus utilizadores ou autores.</li> -</ul> diff --git a/files/pt-pt/web/api/metadata/index.html b/files/pt-pt/web/api/metadata/index.html deleted file mode 100644 index de3b7848ef..0000000000 --- a/files/pt-pt/web/api/metadata/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Metadados -slug: Web/API/Metadata -tags: - - API - - API Entradas de Diretoria e Ficheiro - - API do Sistema de Ficheiros - - Ficheiros - - Interface - - Não Padrão - - Pff-line - - Referencia - - metadados -translation_of: Web/API/Metadata -original_slug: Web/API/Metadados ---- -<p>{{ APIRef("File System API") }}{{SeeCompatTable}}{{Non-standard_header}}</p> - -<p>A interface de <strong><code>Metadados</code></strong> é utilizada por <u>API Entradas de Diretoria e Ficheiro</u> para conter a informação sobre a entrada do sistema de ficheiros. Estes metadados incluem o tamanho do ficheiro e a data e hora da modificação.</p> - -<div class="note"> -<p>Esta interface não está disponível através do escopo global; em vez disso, pode obter um objeto <code>Metadata</code> descrevendo uma {{domxref("FileSystemEntry")}} utilizando o método {{domxref("FileSystemEntry.getMetadata()")}}.</p> -</div> - -<h2 id="Propriedades" style="">Propriedades</h2> - -<dl> - <dt>{{domxref("Metadata.modificationTime", "modificationTime")}} {{ReadOnlyInline}}</dt> - <dd>A {{jsxref("Date")}} object indicating the date and time the entry was modified.</dd> -</dl> - -<dl> - <dt>{{domxref("Metadata.size", "size")}} {{ReadOnlyInline}}</dt> - <dd>A 64-bit unsigned integer indicating the size of the entry in bytes.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File System API')}}</td> - <td>{{Spec2('File System API')}}</td> - <td>Draft of proposed API</td> - </tr> - </tbody> -</table> - -<p>Esta API não é uma especificação oficial de W3C ou WHATWG.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de navegador</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>13 {{property_prefix("webkit")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Android</th> - <th>Chrome para Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatNo}}</td> - <td>0.16 {{property_prefix("webkit")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/API_Entradas_de_Diretoria_e_Ficheiro">API Entradas de Diretoria e Ficheiro</a></li> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introdução à API de Sistema de Ficheiros </a>(inglês)</li> - <li>{{domxref("FileSystemEntry")}}</li> - <li>{{domxref("FileSystemFileEntry")}} and {{domxref("FileSystemDirectoryEntry")}}</li> -</ul> diff --git a/files/pt-pt/web/api/navigatoronline/index.html b/files/pt-pt/web/api/navigatoronline/index.html deleted file mode 100644 index 91197b69ef..0000000000 --- a/files/pt-pt/web/api/navigatoronline/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: NavigatorOnLine -slug: Web/API/NavigatorOnLine -tags: - - API - - HTML-DOM - - NeedsTranslation - - TopicStub -translation_of: Web/API/NavigatorOnLine ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <code><strong>NavigatorOnLine</strong></code> interface contains methods and properties related to the connectivity status of the browser.</p> - -<p>There is no object of type <code>NavigatorOnLine</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>The <code>NavigatorOnLine</code></em><em> interface doesn't inherit any property.</em></p> - -<dl> - <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The </em><em><code>NavigatorOnLine</code></em><em> interface neither implements, nor inherit any method.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from the latest snapshot, {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>on {{domxref("WorkerNavigator")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(29)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>on {{domxref("WorkerNavigator")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(29)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("Navigator")}} interface that implements it.</li> - <li><a href="/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events">Online and offline events</a></li> -</ul> diff --git a/files/pt-pt/web/api/navigatoronline/online_and_offline_events/index.html b/files/pt-pt/web/api/navigatoronline/online_and_offline_events/index.html deleted file mode 100644 index ad57eac34a..0000000000 --- a/files/pt-pt/web/api/navigatoronline/online_and_offline_events/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Eventos online e offline -slug: Web/API/NavigatorOnLine/Online_and_offline_events -tags: - - AJAX - - DOM - - Desenvolvimento_Web - - Todas_as_Categorias -translation_of: Web/API/NavigatorOnLine/Online_and_offline_events -original_slug: Web/API/NavigatorOnLine/Eventos_online_e_offline ---- -<p>O <a href="pt/Firefox_3_para_desenvolvedores">Firefox 3</a> implementou <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">eventos Online/Offline</a> da <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">especificação WHATWG Web Applications 1.0</a>.</p> - -<h3 id="Vis.C3.A3o_geral" name="Vis.C3.A3o_geral">Visão geral</h3> - -<p>Para construir uma boa aplicação web capaz de ser usada offline, você precisar saber quando sua aplicação está realmente offline. Casualmente, você pode também precisar saber quando a sua aplicação retornou ao estado 'online' novamente. Efetivamente, as exigências colapsam como tal:</p> - -<ol> - <li>Você precisa saber quando o usuário torna-se online, então você pode re-sincronizar com o servidor.</li> - <li>Você precisa saber quando o usuário está offline, então você pode estar seguro para fazer suas requisições do servidor e elas se enfileirarem para um tempo posterior.</li> -</ol> - -<p>Este é o processo em que eventos online/offline ajudam a banalizar.</p> - -<h3 id="API" name="API">API</h3> - -<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4> - -<p><code><a href="pt/DOM/window.navigator.onLine">navigator.onLine</a></code> é uma propriedade que mantém um valor <code>true</code>/<code>false</code> (<code>true</code> para online, <code>false</code> para offline). Esta propriedade é atualizada sempre que o usuário trocar do "Modo Offline" selecionando o item correspondente do menu (Arquivo -> Trabalhar Offline no Firefox).</p> - -<p>Adicionalmente, esta propriedade deve atualizar sempre que o navegador não for mais capaz de conectar a uma rede. De acordo com a especificação:</p> - -<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">O atributo <code>navigator.onLine</code> deve retornar falso se o agente de usuário não obtiver contato com a rede quando o usuário segue links ou quando<em>scripts</em> de uma página remota forem requisitados.</blockquote> - -<p>Firefox 2 atualiza esta propriedade quando trocando de/para o modo Offline do navegador, e quando perde/encontra conectividade com uma rede no Windows e Linux.</p> - -<p>Esta propriedade existe em antigas versões do Firefox e Internet Explorer (a especificação baseou-se fora destas implementações prévias), então você pode começar usando isto imediatamente. A detecção automática do estado da rede foi implementado no Firefox 2.</p> - -<h4 id="Eventos_.22online.22_e_.22offline.22" name="Eventos_.22online.22_e_.22offline.22">Eventos "<code>online</code>" e "<code>offline</code>"</h4> - -<p>O <a href="pt/Firefox_3_para_desenvolvedores">Firefox 3</a> introduz dois novos eventos: "<code>online</code>" e "<code>offline</code>". Estes dois eventos são colocados no <code><body></code> de cada página quando o navegador troca entre o modo online e offline. Adicionalmente, os eventos vão de <code>document.body</code>, para <code>document</code>, terminando em <code>window</code>. Ambos os eventos não são canceláveis (você não pode evitar o usuário de estar online, ou indo para offline).</p> - -<p>Você pode registrar ouvintes para estes eventos de algumas maneiras familiares:</p> - -<ul> - <li>usando <code><a href="pt/DOM/element.addEventListener">addEventListener</a></code> em <code>window</code>, <code>document</code>, ou <code>document.body</code></li> - <li>configurando as propriedades <code>.ononline</code> ou <code>.onoffline</code> em <code>document</code> ou <code>document.body</code> para um objeto <code>Function</code> JavaScript. (<strong>Nota:</strong> usando <code>window.ononline</code> ou <code>window.onoffline</code> você não trabalhará para razões de compatibilidade.)</li> - <li>especificando os atributos <code>ononline="..."</code> ou <code>onoffline="..."</code> na etiqueta <code><body></code> na marcação HTML.</li> -</ul> - -<h3 id="Exemplo" name="Exemplo">Exemplo</h3> - -<p>Há <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">um caso de teste simples</a> que você pode rodar para verificar se os eventos estão trabalhando. <span class="comment">XXX Quando os "mochitestes" para isto forem criados, apontar para este e atualizar este exemplo -nickolay</span></p> - -<pre class="eval"> <!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> -</pre> - -<h3 id="Refer.C3.AAncias" name="Refer.C3.AAncias">Referências</h3> - -<ul> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li> - <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> e um <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li> - <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li> - <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li> -</ul> - -<p><span class="comment">Categorias</span></p> - -<p><span class="comment">Interwiki Language Links</span></p> diff --git a/files/pt-pt/web/api/node/appendchild/index.html b/files/pt-pt/web/api/node/appendchild/index.html deleted file mode 100644 index 401343d844..0000000000 --- a/files/pt-pt/web/api/node/appendchild/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: element.appendChild -slug: Web/API/Node/appendChild -tags: - - Referência_do_DOM_Gecko -translation_of: Web/API/Node/appendChild -original_slug: DOM/element.appendChild ---- -<p>{{ ApiRef() }}</p> -<h3 id="Sumario" name="Sumario">Sumario</h3> -<p>Adiciona um novo nó (filho) a um determinado elemento (objeto)</p> -<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> -<pre class="eval"><i>element</i>.appendChild(<i>child</i>) -</pre> -<ul> - <li><code>element</code> é o elemento pai.</li> - <li><code>child</code> é o nó que será adicionado como filho de <code>element</code>.</li> -</ul> -<h3 id="Exemplo" name="Exemplo">Exemplo</h3> -<pre>// Cria um novo Elemento(Objeto) -var p = document.createElement("p"); - -// Adiciona ao Elemento Body (este deverá existir!) -document.body.appendChild(p); -</pre> -<h3 id="Notas" name="Notas">Notas</h3> -<p>Se <code>child</code> é a referência para um nó ja existente no documento, <code>appendChild</code> moverá este para a nova posição (ou seja não é necessário remover um nó de uma posição para depois adicionar em outra). Isto significa que um nó não pode estar em dois lugares do documento ao mesmo tempo.</p> -<p>Você pode usar também <a href="pt/DOM/element.cloneNode">cloneNode</a> para copiar este nó e depois adicioná-lo a outro elemento. (Observe que ao criar um objeto ultilizando <code>cloneNode</code> ou <code>createElement</code> este não fará parte do documento até você torna-lo parte deste usando appendChild ou método similar)</p> -<p>Métodos relacionados : <a href="pt/DOM/element.insertBefore">insertBefore</a>, <a href="pt/DOM/element.replaceChild">replaceChild</a> and <a href="pt/DOM/element.removeChild">removeChild</a>. <span class="comment"><code>appendChild</code> é um dos métodos essenciais na programação usando DOM. O método <code>appendChild</code> insere um novo nó na estrutura DOM e este é a segunda parte da metodologia create-and-append.</span></p> -<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-184E7107">DOM Level 2 Core: appendChild</a></p> -<p>{{ languages( { "en": "en/DOM/element.appendChild", "fr": "fr/DOM/element.appendChild", "pl": "pl/DOM/element.appendChild" } ) }}</p> diff --git a/files/pt-pt/web/api/node/clonenode/index.html b/files/pt-pt/web/api/node/clonenode/index.html deleted file mode 100644 index cca183e508..0000000000 --- a/files/pt-pt/web/api/node/clonenode/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: element.cloneNode -slug: Web/API/Node/cloneNode -translation_of: Web/API/Node/cloneNode -original_slug: DOM/element.cloneNode ---- -<h3 id="Resumo" name="Resumo">Resumo</h3> - -<p>Retorna a cópia de um elemento.</p> - -<h3 id="Syntax" name="Syntax">Syntax</h3> - -<pre class="eval"><em>dupNode</em> = <em>element</em>.cloneNode(<em>deep</em>); -</pre> - -<ul> - <li><code>dupNode</code> é variável que receberá o nó gerado</li> - <li><code>element</code> é o elemento pai (o elemento que contém o nó que será copiado)</li> - <li><code>deep</code> é um valor boleano, obrigatório que indica de o a clone vai ser completo ou não (ver <a href="#Notas">notas</a>).</li> -</ul> - -<h3 id="Example" name="Example">Example</h3> - -<pre>p = document.getElementById("diogok"); -p_prime = p.cloneNode(true); -</pre> - -<h3 id="Notas" name="Notas">Notas</h3> - -<p>Clonando um nó copiamos todos seus atributos e seus respectivos valores</p> - -<p>O nó clonado retornado por <code>cloneNode</code> não faz parte do documento enquanto não for adicionado a um outro nó que faça parte do documento usando <a href="/pt/DOM/element.appendChild" title="pt/DOM/element.appendChild">appendChild</a> ou outro método similar. Enquanto não for adicionado a um outro nó, será um nó sem pai. Ou seja, o clone não herda o pai do original.</p> - -<p>Se <code>deep</code> for <code>false</code>, nada sobre os nós filhos será clonado. <em>Qualquer texto contido no nó não será clonado junto</em>, já que o texto fica contido em nós de texto.</p> - -<p>Se <code>deep</code> for <code>true</code>, toda a subárvore (incluíndo texto) é copiado também. Para nós vazios (como os elementos IMG e INPUT) não importa qua valor que você coloque em <code>deep</code>, mas você ainda deve definir um valor</p> - -<p>Note que o cloneNode pode causar o problema de termos dois elementos com um mesmo id em um documento!</p> - -<p>Somente os eventos colocados em atributos inline são copiados. Os eventos adicionados após a renderização do nó via javascript não são copiados. <code> </code></p> - -<pre class="eval">var elms = document.getElementById('foo'); -elms.onclick = function(){ - alert('Eu não deveria ser copiado?'); -} -var g = elms.cloneNode(true); -g.id = 'foo2'; -g.style.top = '0px'; -document.body.appendChild(g); -</pre> - -<p>No trecho de código acima o atributo <code>onclick</code> não é copiado. Nem mesmo com <code>addEventListener</code>.</p> - -<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> - -<p><a class="external" href="http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4">DOM Level 2 Core: cloneNode</a></p> diff --git a/files/pt-pt/web/api/node/index.html b/files/pt-pt/web/api/node/index.html deleted file mode 100644 index 8c59f718ff..0000000000 --- a/files/pt-pt/web/api/node/index.html +++ /dev/null @@ -1,407 +0,0 @@ ---- -title: Node -slug: Web/API/Node -tags: - - API - - DOM - - Element - - Interface - - Node - - WebAPI -translation_of: Web/API/Node ---- -<div> - {{Apiref}}</div> -<p><code><strong>Node </strong></code>é uma interface da qual uma varidade de tipos do DOM herdam e permite que estes vários tipos seja tratados (ou testados) de forma similar.</p> -<p>As seguintes interfaces todas herdam de <code>Node</code> os seus métodos e propriedades:{{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (que {{domxref("Text")}}, {{domxref("Comment")}}, e {{domxref("CDATASection")}} herdam), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> -<p>Estas interfaces podem retornar <code>null</code> em casos particulares, em que estes métodos e propriedades não são relevantes. Podem lançar uma excepção - por exempo, ao adicionar nós-filho a um tipo de nó para o qual não está prevista a existência de nós descendentes.</p> -<p> </p> -<h2 id="Propriedades">Propriedades</h2> -<p><em>Herda propriedades do seu pai {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> -<dl> - <dt> - {{domxref("Node.attributes")}} {{deprecated_inline}}</dt> - <dd> - ...</dd> - <dt> - {{domxref("Node.baseURI")}} {{readonlyInline}}</dt> - <dd> - Retorna uma {{domxref("DOMString")}} que represente o URL base. O conceito de URL base varia de língua para língua; em HTML corresponde: ao protocolo, nome do domínio e estrutura de directórios, ou seja, tudo até à última '<code>/</code>'.</dd> - <dt> - {{domxref("Node.baseURIObject")}} {{Non-standard_inline()}}</dt> - <dd> - (Não disponível para conteúdo Web). O objecto {{ Interface("nsIURI") }} apenas de leitura representa o URI base para o elemento.</dd> - <dt> - {{domxref("Node.childNodes")}} {{readonlyInline}}</dt> - <dd> - Retorna uma {{domxref("NodeList")}} activa quem contém todos os descendentes desse nó. Sendo {{domxref("NodeList")}} uma lista activa, significa que os descendentes do <code>Node</code> mudam, o objecto {{domxref("NodeList")}} é automaticamente actualizado.</dd> - <dt> - {{domxref("Node.firstChild")}} {{readonlyInline}}</dt> - <dd> - Retorna um {{domxref("Node")}} que representa o primeiro descendente directo do nó ou <code>null</code> se o nó não tiver descendentes.</dd> - <dt> - {{domxref("Node.lastChild")}} {{readonlyInline}}</dt> - <dd> - Retorna um {{domxref("Node")}} que representa o último descendente directo do <code>Node, </code>ou <code>null</code> caso o <code>node</code> não tenha descendentes.</dd> - <dt> - {{domxref("Node.localName")}} {{readonlyInline}}{{obsolete_inline}}</dt> - <dd> - Retorna uma {{domxref("DOMString")}} que representa a parte local do nome qualificado do elemento. No Firefox 3.5 e anteriores, a propriedade exibe o nome local do elemento HTML em maiúsculas (mas não o faz para elementos XHTML). Em versões posteriores, isto não se verifica, portanto a propriedade é exibida em letras minúsculas para ambos HTML e XHTML. {{ gecko_minversion_inline("1.9.2") }}. Apesar da especificação requerer que <code>localName</code> seja definido no interface {{domxref("Node")}}, browsers Gecko-based implementam-no no interface {{domxref("Element")}}.</dd> - <dt> - {{domxref("Node.namespaceURI")}} {{readonlyInline}}{{obsolete_inline}}</dt> - <dd> - O URI do namspace do <code>node</code> em causa, ou <code>null, </code>se não possuir<code> namespace</code>. No Firefox 3.5 e anteriores, elementos HTML não se encontravam em qualquer namespace. Em versões posteriores, elementos HTML estão no namespace <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> quer na tree de HTML, quer na de XHTML {{ gecko_minversion_inline("1.9.2") }}</dd> - <dd> - Apesar da especificação requerer <code>namespaceURI</code> definido no interface {{domxref("Node")}}, browsers Gecko-based implementam-no no interface {{domxref("Element")}}.</dd> - <dt> - {{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> - <dd> - Retorna um {{domxref("Node")}} que representa o próximo <code>node</code> na tree, ou <code>null</code> caso esse <code>node</code> não exista.</dd> - <dt> - {{domxref("Node.nodeName")}} {{readonlyInline}}</dt> - <dd> - Retorna uma {{domxref("DOMString")}} que contém o nome do <code>Node</code>. A estrutura do nome difere do tipo do nome. Exemplo: um {{domxref("HTMLElement")}} irá conter o nome da tag correspondente, como <code>'audio'</code> para um {{domxref("HTMLAudioElement")}}, um {{domxref("Text")}} node irá ter a string <code>'#text'</code>, ou então um {{domxref("Document")}} node irá ter uma string <code>'#document'</code>.</dd> - <dt> - {{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}</dt> - <dd> - Um {{ Interface("nsIPrincipal") }} representa um node principal.</dd> - <dt> - {{domxref("Node.nodeType")}}{{readonlyInline}}</dt> - <dd> - Retorna um <code>unsigned short</code> que representa o tipo de node. Os valores possíveis são:<br> - <table class="standard-table"> - <tbody> - <tr> - <th scope="col">Nome</th> - <th scope="col">Valor</th> - </tr> - <tr> - <td><code>ELEMENT_NODE</code></td> - <td><code>1</code></td> - </tr> - <tr> - <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> - <td><code>2</code></td> - </tr> - <tr> - <td><code>TEXT_NODE</code></td> - <td><code>3</code></td> - </tr> - <tr> - <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> - <td><code>4</code></td> - </tr> - <tr> - <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> - <td><code>5</code></td> - </tr> - <tr> - <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> - <td><code>6</code></td> - </tr> - <tr> - <td><code>PROCESSING_INSTRUCTION_NODE</code></td> - <td><code>7</code></td> - </tr> - <tr> - <td><code>COMMENT_NODE</code></td> - <td><code>8</code></td> - </tr> - <tr> - <td><code>DOCUMENT_NODE</code></td> - <td><code>9</code></td> - </tr> - <tr> - <td><code>DOCUMENT_TYPE_NODE</code></td> - <td><code>10</code></td> - </tr> - <tr> - <td><code>DOCUMENT_FRAGMENT_NODE</code></td> - <td><code>11</code></td> - </tr> - <tr> - <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> - <td><code>12</code></td> - </tr> - </tbody> - </table> - </dd> - <dt> - {{domxref("Node.nodeValue")}}</dt> - <dd> - É a {{domxref("DOMString")}} que representa o valor de um objecto. Para a maioria dos tipos de <code>Node</code>, isto retorna <code>null</code> e qualquer operação é ignorada. Para nodes do tipo <code>TEXT_NODE</code> (objectos {{domxref("Text")}}), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), e <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), o valor corresponde ao valor textual contido no objecto.</dd> - <dt> - {{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> - <dd> - Retorna o {{domxref("Document")}} a que este node pertence. Se nenhum documento está associado com este, retorna <code>null</code>.</dd> - <dt> - {{domxref("Node.parentNode")}} {{readonlyInline}}</dt> - <dd> - Retorna um {{domxref("Node")}} que é o ascendente deste node. Se não existir tal node, como por exemplo se este node se encontra no nível raiz da tree ou se não consta nesta, esta propriedade retorna <code>null</code>.</dd> - <dt> - {{domxref("Node.parentElement")}} {{readonlyInline}}</dt> - <dd> - Retorna um {{domxref("Element")}} que é o ascendente deste node. Caso este node não tenha ascendente ou se o seu ascendente não é um {{domxref("Element")}}, esta propriedade retorna <code>null</code>.</dd> - <dt> - {{domxref("Node.prefix")}} {{obsolete_inline}}</dt> - <dd> - É uma {{domxref("DOMString")}} que representa o prefixo do namespace do node, ou <code>null</code> caso nenhum prefixo seja especificado.</dd> - <dd> - Apesar da especificação requerer <code>localName</code> para ser definida no interface {{domxref("Node")}}, browsers Gecko-based implementam-no no interface {{domxref("Element")}}.</dd> - <dt> - {{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> - <dd> - Retorna um {{domxref("Node")}} que representa o node anterior na tree ou <code>null</code> caso o node não exista.</dd> - <dt> - {{domxref("Node.textContent")}}</dt> - <dd> - É uma {{domxref("DOMString")}} que representa o valor textual de um elemento e todos os seus descendentes.</dd> -</dl> -<h2 id="Métodos">Métodos</h2> -<p><em>Herda métodos dos seus pais {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> -<dl> - <dt> - {{domxref("Node.appendChild()")}}</dt> - <dd> - Insere um {{domxref("Node")}} como último descendente do elemento em causa.</dd> - <dt> - {{domxref("Node.cloneNode()")}}</dt> - <dd> - Clona um {{domxref("Node")}} e, opcionalmente, todo o seu conteúdo. Por omissão, clona o conteúdo do node.</dd> - <dt> - {{domxref("Node.compareDocumentPosition()")}}</dt> - <dd> - </dd> - <dt> - {{domxref("Node.contains()")}}</dt> - <dd> - </dd> - <dt> - {{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> - <dd> - ...</dd> - <dt> - {{domxref("Node.getUserData()")}} {{deprecated_inline}}</dt> - <dd> - Permite ao utilizador extrair alguma {{domxref("DOMUserData")}} do node.</dd> - <dt> - {{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> - <dd> - Retorna um {{domxref("Boolean")}} que indica se o elemento tem atributos ou não.</dd> - <dt> - {{domxref("Node.hasChildNodes()")}}</dt> - <dd> - Retorna um {{domxref("Boolean")}} que indica se o elemento tem descendentes ou não.</dd> - <dt> - {{domxref("Node.insertBefore")}}</dt> - <dd> - Insere o primeiro {{domxref("Node")}} dado num parâmetro imediatamente antes do segundo descendente deste {{domxref("Node")}}.</dd> - <dt> - {{domxref("Node.isDefaultNamespace")}}</dt> - <dd> - </dd> - <dt> - {{domxref("Node.isEqualNode")}}</dt> - <dd> - </dd> - <dt> - {{domxref("Node.isSameNode")}} {{obsolete_inline}}</dt> - <dd> - </dd> - <dt> - {{domxref("Node.isSupported")}} {{deprecated_inline}}</dt> - <dd> - Retorna uma flag <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> que contém o resultado de um teste à implementação do DOM para aferir o suporte deste ou do node a uma determinada propriedade.</dd> - <dt> - {{domxref("Node.lookupPrefix")}}</dt> - <dd> - </dd> - <dt> - {{domxref("Node.lookupNamespaceURI")}}</dt> - <dd> - </dd> - <dt> - {{domxref("Node.normalize")}}</dt> - <dd> - Limpa todos os nodes textuais abaixo deste (converge os adjacentes e remove os vazios)</dd> - <dt> - {{domxref("Node.removeChild")}}</dt> - <dd> - Remove um node descendenter do elemento actual. Este deve ser um descendente do node actual.</dd> - <dt> - {{domxref("Node.replaceChild")}}</dt> - <dd> - Substitui um {{domxref("Node")}} descendente do actual com o fornecido no segundo parâmetro.</dd> - <dt> - {{domxref("Node.setUserData")}} {{deprecated_inline}}</dt> - <dd> - Permite a um utilizador anexar, ou remover {{domxref("DOMUserData")}} do node.</dd> - <dd> - </dd> -</dl> -<h2 id="Exemplos">Exemplos</h2> -<h3 id="Percorrer_todos_os_nodes_descendentes">Percorrer todos os nodes descendentes</h3> -<p>A seguinte função itera sobre os nodes descendentes de um node recursivamente e executa uma função de callback sobre os mesmos (e sobre o próprio node-pai).</p> -<pre class="brush: js">function DOMComb (oParent, oCallback) { - if (oParent.hasChildNodes()) { - for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { - DOMComb(oNode, oCallback); - } - } - oCallback.call(oParent); -}</pre> -<h4 id="Síntaxe">Síntaxe</h4> -<pre>DOMComb(parentNode, callbackFunction);</pre> -<h4 id="Descrição">Descrição</h4> -<p>Recursivamente iterar sobre os nodes descendentes de um <code>parentNode </code>e o próprio <code>parentNode</code>, executando uma <code>callbackFunction</code> sobre estes como objectos <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a>.</p> -<h4 id="Parâmetros">Parâmetros</h4> -<dl> - <dt> - <code>parentNode</code></dt> - <dd> - O node ascendente (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd> - <dt> - <code>callbackFunction</code></dt> - <dd> - A função de callback (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> -</dl> -<h4 id="Exemplo_de_utilização">Exemplo de utilização</h4> -<p>O exemplo seguinte envia para a <code>console.log </code>o conteúdo textual do body:</p> -<pre class="brush: js">function printContent () { - if (this.nodeValue) { console.log(this.nodeValue); } -} - -onload = function () { - DOMComb(document.body, printContent); -};</pre> -<h2 id="Especificações">Especificações</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Removidas as seguintes propriedades: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, e <code>localName</code>.<br> - Removidos os seguintes métodos: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, e <code>getUserData()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>Os métodos <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, e <code>appendChild()</code> retornam mais um tipo de erro (<code>NOT_SUPPORTED_ERR</code>) caso sejam chamados no {{domxref("Document")}}.<br> - O método <code>normalize()</code> foi modificado para que o node {{domxref("Text")}} possa também ser normalizado se a flag correcta de {{domxref("DOMConfiguration")}} estiver definida.<br> - Adicionados os seguintes métodos: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, e <code>getUserData().</code><br> - Adicionadas as seguintes propriedades: <code>baseURI</code> e <code>textContent</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>A propriedade <code>ownerDocument</code> foi ligeiramente alterada para que um {{domxref("DocumentFragment")}} possa também retornar <code>null</code>.<br> - Adicionadas as seguintes propriedades: <code>namespaceURI</code>, <code>prefix</code>, e <code>localName</code>.<br> - Adicionados os seguintes métodos: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> -<p> </p> -<h2 id="Compatibilidade_por_browser">Compatibilidade por browser</h2> -<p>{{CompatibilityTable}}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>getFeature()</code>{{obsolete_inline}}</td> - <td>{{CompatNo}}</td> - <td>Suportada desde: {{CompatGeckoDesktop("1.0")}} até {{CompatGeckoDesktop("6.0")}}.<br> - Removida em: {{CompatGeckoDesktop("7.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>getUserData()</code>, <code>setUserData()</code> e <code>hasAttributes()</code> {{deprecated_inline}}</td> - <td>{{CompatNo}}</td> - <td>Suportada desde: {{CompatGeckoDesktop("1.0")}} até {{CompatGeckoDesktop("21.0")}}.<br> - Removida em: {{CompatGeckoDesktop("22.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>isSameNode()</code> {{obsolete_inline}}</td> - <td>{{CompatNo}}</td> - <td>Suportada desde: {{CompatGeckoDesktop("1.0")}} até {{CompatGeckoDesktop("9.0")}}.<br> - Removida em: {{CompatGeckoDesktop("10.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>isSupported()</code> {{obsolete_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>Suportada desde: {{CompatGeckoDesktop("1.0")}} até {{CompatGeckoDesktop("21.0")}}.<br> - Removida em: {{CompatGeckoDesktop("22.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>getFeature()</code>{{obsolete_inline}}</td> - <td>{{CompatNo}}</td> - <td>Suportade desde: {{CompatGeckoDesktop("1.0")}} até {{CompatGeckoDesktop("6.0")}}.<br> - Removida em: {{CompatGeckoDesktop("7.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> - </table> -</div> -<p>[1] Webkit e Blink incorrectamente não fazem com que <code>Node</code> herde de {{domxref("EventTarget")}}.</p> diff --git a/files/pt-pt/web/api/node/insertbefore/index.html b/files/pt-pt/web/api/node/insertbefore/index.html deleted file mode 100644 index 109b5a51b4..0000000000 --- a/files/pt-pt/web/api/node/insertbefore/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: element.insertBefore -slug: Web/API/Node/insertBefore -tags: - - Referência_do_DOM_Gecko -translation_of: Web/API/Node/insertBefore -original_slug: DOM/element.insertBefore ---- -<p>{{ ApiRef() }}</p> -<h3 id="Sum.C3.A1rio" name="Sum.C3.A1rio">Sumário</h3> -<p>Insere um nó filho ao nó atual, antes de um determinado elemento.</p> -<h3 id="S.C3.ADntaxe" name="S.C3.ADntaxe">Síntaxe</h3> -<pre class="eval">var<i>insertedElement</i> =<i>parentElement</i>.insertBefore(<i>newElement</i>,<i>referenceElement</i>) -</pre> -<p>If <var>referenceElement</var> is <code>null</code>, <var>newElement</var> is inserted at the end of the list of child nodes.</p> -<ul> - <li><code>insertedElement</code> é o novo inserido,ou seja é o <code>newElement</code></li> - <li><code>parentElement</code> é o elemento pai que receberá o novo nó inserido.</li> - <li><code>newElement</code> é o novo elemento que será inserido</li> - <li><code>referenceElement</code> o novo nó ficará antes desse elemento</li> -</ul> -<p>Se <var>referenceElement</var> é <code>null</code> o elemento é inserido em último lugar na lista de nós filhos. Ver <code><a href="pt/DOM/element.childNodes">childNodes</a></code></p> -<h3 id="Exemplo" name="Exemplo">Exemplo</h3> -<pre> <html> - - <head> - <title>Gecko DOM insertBefore test</title> - </head> - <body> - <div> - <span id="childSpan">foo bar</span> - </div> - - <script type="text/javascript"> - // cria um elemento vazio - // sem ID ou qualquer outro atributo - var sp1 = document.createElement("span"); - - // atribui o ID 'newSpan' para o elemento criado - sp1.setAttribute("id", "newSpan"); - - //cria um conteudo para o novo elemento,um texto curto - var sp1_content = document.createTextNode("This is a new span element. "); - // adiciona o conteúdo a novo elemento - sp1.appendChild(sp1_content); - - var sp2 = document.getElementById("childSpan"); - var parentDiv = sp2.parentNode; - - // insere o novo elemento antes sp2 - parentDiv.insertBefore(sp1, sp2); - </script> - - </body> - </html> -</pre> -<p>Não há um método <code>insertAfter</code>(insere depois), porém pode se obter um resultado semelhante usando a combinação entre <code>insertBefore</code> e <code><a href="pt/DOM/element.nextSibling">nextSibling</a></code>. Por exemplo, <code>sp1</code> pode inserido depois de <code>sp2</code> usando comando parentDiv.insertBefore(sp1, sp2.nextSibling); Se a propridade <code>nextSibling</code> retornar <code>null</code> indica que o elemento é o último nó filho, logo novo elemento será incluído no final da lista de nós filhos</p> -<p> </p> -<h3 id="Espefica.C3.A7.C3.A3o" name="Espefica.C3.A7.C3.A3o">Espeficação</h3> -<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore </a></p> -<p>{{ languages( { "en": "en/DOM/element.insertBefore", "pl": "pl/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore" } ) }}</p> diff --git a/files/pt-pt/web/api/notification/index.html b/files/pt-pt/web/api/notification/index.html deleted file mode 100644 index d584cb349c..0000000000 --- a/files/pt-pt/web/api/notification/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: Notificação -slug: Web/API/notification -translation_of: Web/API/Notification ---- -<p>{{APIRef("Web Notifications")}}</p> - -<p>The <code>Notification</code> interface of the {{domxref('Notifications_API','Notifications API')}} is used to configure and display desktop notifications to the user.</p> - -<h2 id="Criador">Criador</h2> - -<dl> - <dt>{{domxref("Notification.Notification()")}}</dt> - <dd>Cria uma nova instância do objeto de {{domxref('Notificação')}}.</dd> -</dl> - -<h2 id="Propriedades">Propriedades</h2> - -<h3 id="Propriedades_estáticas">Propriedades estáticas</h3> - -<p>These properties are available only on the <code>Notification</code> object itself.</p> - -<dl> - <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> - <dd>A string representing the current permission to display notifications. Possible value are: <code>denied</code> (the user refuses to have notifications displayed), <code>granted</code> (the user accepts having notifications displayed), or <code>default</code> (the user choice is unknown and therefore the browser will act as if the value were denied).</dd> -</dl> - -<h3 id="Propriedades_de_instância">Propriedades de instância</h3> - -<p>These properties are available only on instances of the <code>Notification</code> object.</p> - -<dl> - <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> - <dd>The title of the notification as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt> - <dd>The text direction of the notification as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt> - <dd>The language code of the notification as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt> - <dd>The body string of the notification as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt> - <dd>The ID of the notification (if any) as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt> - <dd>The URL of the image used as an icon of the notification as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt> - <dd>Returns a structured clone of the notification’s data.</dd> -</dl> - -<h4 id="Unsupported_properties">Unsupported properties</h4> - -<p>The following properties are listed in the most up-to-date spec, but are not supported in any browsers yet. It is advisable to keep checking back regularly to see if the status of these has updated, and let us know if you find any out of date information.</p> - -<dl> - <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt> - <dd>Specifies whether the notification firing should enable the device's screen or not.</dd> - <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt> - <dd>Specifies whether the user should be notified after a new notification replaces an old one.</dd> - <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt> - <dd>Specifies whether the notification should be silent, i.e. no sounds or vibrations should be issued, regardless of the device settings.</dd> - <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt> - <dd>Specifies a sound resource to play when the notification fires, in place of the default system notification sound.</dd> - <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt> - <dd>Specifies whether the notification should be 'sticky', i.e. not easily clearable by the user.</dd> - <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt> - <dd>Specifies a vibration pattern for devices with vibration hardware to emit.</dd> -</dl> - -<h4 id="Event_handlers">Event handlers</h4> - -<dl> - <dt>{{domxref("Notification.onclick")}}</dt> - <dd>A handler for the {{event("click")}} event. It is triggered each time the user clicks on the notification.</dd> - <dt>{{domxref("Notification.onerror")}}</dt> - <dd>A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.</dd> -</dl> - -<h4 id="Obsolete_handlers">Obsolete handlers</h4> - -<p>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. I is safe therefore to assume they are obsolete, and may stop working in future browser versions.</p> - -<dl> - <dt>{{domxref("Notification.onclose")}}</dt> - <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd> - <dt>{{domxref("Notification.onshow")}}</dt> - <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<h3 id="Métodos_estáticos">Métodos estáticos</h3> - -<p>These methods are available only on the <code>Notification</code> object itself.</p> - -<dl> - <dt>{{domxref("Notification.requestPermission()")}}</dt> - <dd>Requests permission from the user to display notifications.</dd> -</dl> - -<h3 id="Métodos_de_instância">Métodos de instância</h3> - -<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> object also inherits from the {{domxref("EventTarget")}} interface.</p> - -<dl> - <dt>{{domxref("Notification.close()")}}</dt> - <dd>Programmatically closes a notification.</dd> -</dl> - -<h2 id="Exemplo">Exemplo</h2> - -<p>Assume this basic HTML:</p> - -<pre class="brush: html"><button onclick="notifyMe()">Notify me!</button></pre> - -<p>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.</p> - -<pre class="brush: js">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 alredy 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. -}</pre> - -<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p> - -<p>In many cases, you don't need to be this verbose. For example, in our <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications:</p> - -<pre class="brush: js">Notification.requestPermission();</pre> - -<p>Then we run a simple <code>spawnNotification()</code> 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 <code>options</code> object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.</p> - -<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) { - var options = { - body: theBody, - icon: theIcon - } - var n = new Notification(theTitle,options); -}</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Notifications')}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Living standard</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>5 {{ property_prefix("webkit") }} (see notes)<br> - 22</td> - <td>4.0 {{ property_prefix("moz") }} (see notes)<br> - 22</td> - <td>{{ CompatNo() }}</td> - <td>25</td> - <td>6 (see notes)</td> - </tr> - <tr> - <td><code>icon</code></td> - <td>5 {{ property_prefix("webkit") }} (see notes)<br> - 22</td> - <td>4.0 {{ property_prefix("moz") }} (see notes)<br> - 22</td> - <td>{{ CompatNo() }}</td> - <td>25</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code>silent</code></td> - <td>{{CompatChrome(43.0)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td> - <p>{{CompatVersionUnknown}}</p> - </td> - <td>4.0 {{ property_prefix("moz") }} (see notes)<br> - 22</td> - <td>1.0.1 {{ property_prefix("moz") }} (see notes)<br> - 1.2</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td> - <p>{{CompatVersionUnknown}}</p> - </td> - </tr> - <tr> - <td><code>icon</code></td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>4.0 {{ property_prefix("moz") }} (see notes)<br> - 22</td> - <td>1.0.1 {{ property_prefix("moz") }} (see notes)<br> - 1.2</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>silent</code></td> - <td>{{ CompatNo() }}</td> - <td>{{CompatChrome(43.0)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{CompatChrome(43.0)}}</td> - </tr> - <tr> - <td><code>noscreen</code>, <code>renotify</code>, <code>sound</code>, <code>sticky</code></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Notas_do_Firefox_OS">Notas do Firefox OS</h3> - -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}</p> - -<h3 id="Notas_do_Chrome">Notas do Chrome</h3> - -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}</p> - -<h3 id="Notas_do_Safari">Notas do Safari</h3> - -<p>{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilizar API de Notificações</a></li> -</ul> diff --git a/files/pt-pt/web/api/notifications_api/index.html b/files/pt-pt/web/api/notifications_api/index.html deleted file mode 100644 index c41db167ce..0000000000 --- a/files/pt-pt/web/api/notifications_api/index.html +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: Notifications API -slug: Web/API/Notifications_API -tags: - - Landing - - NeedsTranslation - - Notifications - - TopicStub - - permission - - system -translation_of: Web/API/Notifications_API ---- -<p>{{DefaultAPISidebar("Web Notifications")}}</p> - -<p class="summary">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 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.</p> - -<h2 id="Concepts_and_usage">Concepts and usage</h2> - -<p>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:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/10819/notification-bubble.png" style="display: block; height: 205px; margin: 0 auto; width: 453px;"></p> - -<p>From here the user can choose to allow notifications from this origin, block notifications from this origin , or to not choose a this point. Once a choice has been made, the setting will generally persist for the current session. </p> - -<p>Next, a new notification is created using the {{domxref("Notification.Notification","Notification()")}} constructor. This has to 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.</p> - -<p>{{AvailableInWorkers}}</p> - -<p>In addition, the Notifications API spec specifies a number of additions to the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a>, to allow service workers to fire notifications.</p> - -<div class="note"> -<p><strong>Note</strong>: To find out more about using notifications in your own app, read <a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a>.</p> -</div> - -<h2 id="Notifications_interfaces">Notifications interfaces</h2> - -<dl> - <dt>{{domxref("Notification")}}</dt> - <dd>Defines a notification object.</dd> -</dl> - -<h3 id="Service_worker_additions">Service worker additions</h3> - -<dl> - <dt>{{domxref("ServiceWorkerRegistration")}}</dt> - <dd>Includes the {{domxref("ServiceWorkerRegistration.showNotification()")}} and {{domxref("ServiceWorkerRegistration.getNotifications()")}} method for controlling the display of notifications.</dd> - <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt> - <dd>Includes the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} handler for firing custom functions when a notification is clicked.</dd> - <dt>{{domxref("NotificationEvent")}}</dt> - <dd>A specific type of event object, based on {{domxref("ExtendableEvent")}}, which represents a notification that has fired.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Notifications')}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Living standard</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br> - 22</td> - <td>{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}<sup>[2]</sup><br> - {{CompatGeckoDesktop("22.0")}}</td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>6<sup>[3]</sup></td> - </tr> - <tr> - <td>Available in workers</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("41.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Service worker additions</td> - <td> - <p>{{CompatChrome(42.0)}}</p> - </td> - <td>{{CompatGeckoDesktop("42.0")}}<sup>[4]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td> - <p>{{CompatVersionUnknown}}</p> - </td> - <td>{{CompatGeckoMobile(2.0)}}{{property_prefix("moz")}}<sup>[2]</sup><br> - {{CompatGeckoMobile(22.0)}}</td> - <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> - 1.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td> - <p>{{CompatVersionUnknown}}</p> - </td> - </tr> - <tr> - <td>Available in workers</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(41.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Service worker additions</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(42.0)}}<sup>[4]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(42.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification. Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p> - -<p>[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 <code>createNotification()</code> method. In addition, the Notification was displayed when calling the <code>show()</code> method and supported only the <code>click</code> and <code>close</code> events (Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.)</p> - -<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p> - -<p>[4] Firefox 42 has shipped with web notifications from Service Workers disabled.</p> - -<h2 id="Firefox_OS_permissions">Firefox OS permissions</h2> - -<p>When using notifications in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above:</p> - -<pre class="brush: json">"permissions": { - "desktop-notification": {} -}</pre> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> -</ul> diff --git a/files/pt-pt/web/api/notifications_api/using_the_notifications_api/index.html b/files/pt-pt/web/api/notifications_api/using_the_notifications_api/index.html deleted file mode 100644 index 947521344c..0000000000 --- a/files/pt-pt/web/api/notifications_api/using_the_notifications_api/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: Utilizar a API de Notificações -slug: Web/API/Notifications_API/Using_the_Notifications_API -translation_of: Web/API/Notifications_API/Using_the_Notifications_API -original_slug: Web/API/Notifications_API/Utilizar_API_Notificações ---- -<p>{{APIRef("Web Notifications")}}</p> - -<p class="summary">The <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> lets a web page or app send notifications that are displayed outside the page at the system level; this lets web apps send information to a user even if the application is idle or in the background. This article looks at the basics of using this API in your own apps.</p> - -<p>{{AvailableInWorkers}}</p> - -<p>Typically, system notifications refer to the operating system's standard notification mechanism: think for example of how a typical desktop system or mobile device brodcasts notifications.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/10959/android-notification.png" style="display: block; height: 184px; margin: 0px auto; width: 300px;"><img alt="" src="https://mdn.mozillademos.org/files/10961/mac-notification.png" style="display: block; height: 97px; margin: 0px auto; width: 358px;"></p> - -<p>The system notification system will vary of course by platform and browser, but this is ok, and the Notifications API is written to be general enough for compatibility with most system notification systems.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<div class="column-container"> -<div class="column-half"> -<p>One of the most obvious use cases for web notifications is a web-based mail or IRC application that needs to notify the user when a new message is received, even if the user is doing something else with another application. Many real examples of this now exist, such as <a href="https://slack.com/">Slack</a>.</p> - -<p>We've written a couple of real world demos to give more of an idea of how web notifications can be used:</p> - -<ul> - <li><strong>To-do list</strong>: This is a simple to-do list app that stores data locally using <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> and notifies users when tasks are due using system notifications. <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">Download the To-do list code</a>, or <a href="http://mdn.github.io/to-do-notifications/">view the app running live</a>.</li> - <li><strong>Emogotchi</strong>: A rather silly parody of Tamagotchi, in which you have to keep your Emo miserable otherwise you lose the game. This uses system notifications to tell you how well you are doing, and to complain at you, ALL THE TIME. <a href="https://github.com/mdn/emogotchi">Download the Emogotchi code</a>, or <a href="http://mdn.github.io/emogotchi/">view it running live</a>.</li> -</ul> -</div> - -<div class="column-half"> -<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/10963/emogotchi.png" style="max-width: 300px; width: 70%;">.</p> -</div> -</div> - -<h2 id="Solicitar_permissão">Solicitar permissão</h2> - -<p>Before an app can send a notification, the user must grant the application the right to do so. This is a common requirement when an API tries to interact with something outside a web page — at least once, the user needs to specifically grant that application permission to present notifications, thereby letting the user control which apps/sites are allowed to display notifications.</p> - -<h3 id="Verificação_do_estado_da_permissão_atual">Verificação do estado da permissão atual</h3> - -<p>You can check to see if you already have permission by checking the value of the {{domxref("Notification.permission")}} read only property. It can have one of three possible values:</p> - -<dl> - <dt><code>default</code></dt> - <dd>The user hasn't been asked for permission yet, so notifications won't be displayed.</dd> - <dt><code>granted</code></dt> - <dd>The user has granted permission to display notifications, after having been asked previously.</dd> - <dt><code>denied</code></dt> - <dd>The user has explicitly declined permission to show notifications.</dd> -</dl> - -<h3 id="Obter_permissão">Obter permissão</h3> - -<p>If permission to display notifications hasn't been granted yet, the application needs to use the {{domxref("Notification.requestPermission()")}} method to request this form the user. In its simplest form, as used in the <a href="https://github.com/mdn/emogotchi/blob/gh-pages/main.js#L54">Emogotchi demo</a>, we just include the following:</p> - -<pre class="brush: js">Notification.requestPermission();</pre> - -<p>The method also optionally accepts a callback function that is called once the user has responded to the request to display permissions (as seen in the second <code>else ... if</code> block below.) Commonly, you'll ask for permission to display notifications when your app is first initialized, and before trying to instantiate any. If you wanted to be really thorough, you could use a construct like the following (see <a href="https://github.com/mdn/to-do-notifications/blob/gh-pages/scripts/todo.js#L305-L344">To-do List Notifications</a>):</p> - -<pre class="brush: js">function notifyMe() { - // Let's check if the browser supports notifications - if (!("Notification" in window)) { - alert("This browser does not support system notifications"); - } - - // 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!"); - } - }); - } - - // Finally, if the user has denied notifications and you - // want to be respectful there is no need to bother them any more. -}</pre> - -<div class="note"> -<p><strong>Note:</strong> Before version 37, Chrome doesn't let you call {{domxref("Notification.requestPermission()")}} in the <code>load</code> event handler (see <a href="https://code.google.com/p/chromium/issues/detail?id=274284" title="https://code.google.com/p/chromium/issues/detail?id=274284">issue 274284</a>).</p> -</div> - -<h3 id="Permissões_de_manifesto_do_Firefox_OS">Permissões de manifesto do Firefox OS</h3> - -<p>Please note that while the Notifications API is not {{Glossary("privileged")}} or {{Glossary("certified")}}, you should still include an entry in your <code>manifest.webapp</code> file when including it in an Firefox OS app:</p> - -<pre>"permissions": { - "desktop-notification": { - "description": "Needed for creating system notifications." - } -}, -"messages": [{"notification": "path/to/your/index.html"}] - -</pre> - -<div class="note"> -<p><strong>Note</strong>: When an application is installed, you shouldn't need to {{anch("Getting permission","explicitly request permission")}}, but you will still need the permissions and messages entries above for the notifications to be fired.</p> -</div> - -<h2 id="Criação_de_uma_notificação">Criação de uma notificação</h2> - -<p>Creating a notification is easy; just use the {{domxref("Notification")}} constructor. This constructor expects a title to display within the notification and some options to enhance the notification such as an {{domxref("Notification.icon","icon")}} or a text {{domxref("Notification.body","body")}}.</p> - -<p>For example, in the <a href="https://github.com/mdn/emogotchi/blob/gh-pages/main.js#L101-L117">Emogotchi example</a> we have two functions that can be called when a notification needs to be fired; which one is used depends on whether we want a set notification, or a notification that includes random body content:</p> - -<pre class="brush: js">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); -}</pre> - -<h2 id="Fechar_notificações">Fechar notificações</h2> - -<p>Firefox and Safari close notifications automatically after a few moments (around four seconds). This may also happen at the operating system level. Some browsers don't however, such as Chrome. To make sure that the notifications close in all browsers, at the end of the above functions, we call the {{domxref("Notification.close")}} func<code>tion</code> inside a {{domxref("WindowTimers.setTimeout","setTimeout()")}} function to close the notification after 4 seconds. Also note the use of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind()</a></code> to make sure the <code>close()</code> call is associated with the notification.</p> - -<pre class="brush: js">setTimeout(n.close.bind(n), 5000); -</pre> - -<div class="note"> -<p><strong>Note</strong>: When you receive a "close" event, there is no guarantee that it's the user who closed the notification. This is in line with the specification, which states: "When a notification is closed, either by the underlying notifications platform or by the user, the close steps for it must be run."</p> -</div> - -<h2 id="Eventos_de_notificação">Eventos de notificação</h2> - -<p>The notifications API spec lists two events that are triggered on the {{domxref("Notification")}} instance:</p> - -<dl> - <dt>{{event("click")}}</dt> - <dd>Triggered when the user clicks on the notification.</dd> - <dt>{{event("error")}}</dt> - <dd>Triggered if something goes wrong with the notification; this is usually because the notification couldn't be displayed for some reason.</dd> -</dl> - -<p>These events can be tracked using the {{domxref("Notification.onclick","onclick")}} and {{domxref("Notification.onerror","onerror")}} handlers. Because {{domxref("Notification")}} also inherits from {{domxref("EventTarget")}}, it's possible to use the {{domxref("EventTarget.addEventListener","addEventListener()")}} method on it.</p> - -<p>There are also two other events that used to be listed in the spec, but were recently removed. These may still work in browsers for a while, but they should be treated as obsolete and not used:</p> - -<dl> - <dt>{{event("close")}}</dt> - <dd>Triggered once the notification is closed.</dd> - <dt>{{event("show")}}</dt> - <dd>Triggered when the notification is displayed to the user.</dd> -</dl> - -<h2 id="Substituir_notificações_existentes">Substituir notificações existentes</h2> - -<p>It is usually undesirable for a user to receive a lot of notifications in a short space of time — for example, what if a messenger application notified a user for each incoming message, and they were being sent a lot? To avoid spamming the user with too many notifications, it's possible to modify the pending notifications queue, replacing single or multiple pending notifications with a new one.</p> - -<p>To do this, it's possible to add a tag to any new notification. If a notification already has the same tag and has not been displayed yet, the new notification replaces that previous notification. If the notification with the same tag has already <span style="line-height: 1.5;">been </span><span style="line-height: 1.5;">displayed, the previous notification is closed and the new one is displayed.</span></p> - -<h3 id="Exemplo_de_etiqueta">Exemplo de etiqueta</h3> - -<p>Assume the following basic HTML:</p> - -<pre class="brush: html"><button>Notify me!</button></pre> - -<p>It's possible to handle multiple notifications this way:</p> - -<pre class="brush: js">window.addEventListener('load', function () { - // At first, let's check if we have permission for notification - // If not, let's ask for it - 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 () { - // If the user agreed to get notified - // Let's try to send ten notifications - if (window.Notification && Notification.permission === "granted") { - var i = 0; - // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time. - var interval = window.setInterval(function () { - // Thanks to the tag, we should only see the "Hi! 9" notification - var n = new Notification("Hi! " + i, {tag: 'soManyNotification'}); - if (i++ == 9) { - window.clearInterval(interval); - } - }, 200); - } - - // If the user hasn't told if he wants to be notified or not - // Note: because of Chrome, we are not sure the permission property - // is set, therefore it's unsafe to check for the "default" value. - else if (window.Notification && Notification.permission !== "denied") { - Notification.requestPermission(function (status) { - if (Notification.permission !== status) { - Notification.permission = status; - } - - // If the user said okay - if (status === "granted") { - var i = 0; - // Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time. - var interval = window.setInterval(function () { - // Thanks to the tag, we should only see the "Hi! 9" notification - var n = new Notification("Hi! " + 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!"); - } - }); -});</pre> - -<p>See the live result below:</p> - -<p>{{ EmbedLiveSample('Tag_example', '100%', 30) }}</p> - -<h2 id="Receber_notificação_de_cliques_nas_notificações_da_aplicação">Receber notificação de cliques nas notificações da aplicação</h2> - -<p>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:</p> - -<ol> - <li>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.</li> - <li>A <a href="/en-US/docs/Web/API/Navigator/mozSetMessageHandler">system message</a> otherwise.</li> -</ol> - -<p>See <a href="https://github.com/mozilla/buddyup/commit/829cba7afa576052cf601c3e286b8d1981f93f45#diff-3">this code snippet</a> for an example of how to deal with this.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Notifications')}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Living standard</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> - -<p>{{page("/en-US/Web/API/Notification","Browser compatibility")}}</p> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li><a href="/en-US/Apps/Build/User_notifications">Referência das notificações do utilizador</a></li> - <li><a href="/en-US/Apps/Build/User_notifications/Notifying_users_via_the_Notification_and_Vibration">Notificação dos utilziadores via APIs de Notificação e Vibração</a></li> - <li>{{ domxref("Notificação") }}</li> -</ul> diff --git a/files/pt-pt/web/api/page_visibility_api/index.html b/files/pt-pt/web/api/page_visibility_api/index.html deleted file mode 100644 index de3ee0b3ab..0000000000 --- a/files/pt-pt/web/api/page_visibility_api/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: Page Visibility API -slug: Web/API/Page_Visibility_API -tags: - - API - - DOM - - Intermediário - - Tutoriais -translation_of: Web/API/Page_Visibility_API ---- -<div>{{DefaultAPISidebar("Page Visibility API")}}</div> - -<p><span class="seoSummary">A <strong>Page Visibility API</strong> </span>permite-lhe saber quando uma página da <em>Web </em>está visível ou em foco. Com a navegação por separadores, existe uma chance razoável de que qualquer página da <em>Web </em>esteja em segundo plano e, portanto, não seja visível para o utilizador. Quando o utilizador minimiza a página da <em>Web </em>ou move-se para outro separador, a API envia um evento {{event('visibilitychange')}} sobre a visibilidade da página. Pode detetar o evento e executar algumas ações ou comportar-se de forma diferente. Por exemplo, se a sua aplicação da <em>Web </em>estiver a reproduzir um vídeo, esta pausará o momento em que o utilizador olha para outro navegador, e reproduz novamente quando o utilizador volta ao separador. O utilizador não perde o seu lugar no vídeo e pode continuar a assistir.</p> - -<p>Estados de visibilidade de uma {{HTMLElement("iframe")}} são iguais ao documento original. Ocultar a iframe com propriedades CSS não desencadeia eventos de visibilidade nem altera o estado do documento de conteúdo.</p> - -<h3 id="Benefícios">Benefícios</h3> - -<p>The API is particularly useful for saving resources by giving developers the opportunity to not perform unnecessary tasks when the webpage is not visible.</p> - -<ul> -</ul> - -<h3 id="Casos_de_utilização">Casos de utilização</h3> - -<p>Alguns exemplos:</p> - -<ul> - <li>A site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page.</li> - <li>An application showing a dashboard of information doesn't want to poll the server for updates when the page isn't visible.</li> - <li>A page wants to detect when it is being prerendered so it can keep accurate count of page views.</li> - <li>A site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off)</li> -</ul> - -<p>Developers have historically used imperfect proxies to detect this. For example, registering an onblur/onfocus handler on the window helps you know when your page is not the active page, but it does not tell you that your page is hidden to the user. The Page Visibility API addresses this. (When compared with registering onblur/onfocus handlers on the window, a key difference is that a page does <em>not</em> become hidden when another window is made active and the browser window loses focus. A page only becomes hidden when the user switches to a different tab or minimizes the browser window.)</p> - -<h3 id="Políticas_em_vigor_para_auxiliar_o_desempenho_da_página_de_fundo">Políticas em vigor para auxiliar o desempenho da página de fundo</h3> - -<p>Along with the Page Visibility API, there are a number of policies in place to mitigate negative performance effects associated with background tabs:</p> - -<ul> - <li>{{domxref("Window.requestAnimationFrame()")}} calls are paused in most browsers when running in background tabs or hidden {{ HTMLElement("iframe") }}s in order to improve performance and battery life.</li> - <li>Timers such as {{domxref("WindowOrWorkerGlobalScope.setTimeout")}} are throttled in background/inactive tabs to help improve performance. See <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a> for more details.</li> - <li>Budget-based background timeout throttling is now available in modern browsers (Firefox 58+, Chrome 57+), placing an additional limit on background timer CPU usage. This operates in a similar way across modern browsers, with the details being as follows: - <ul> - <li>In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds.</li> - <li>Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a>.) In Chrome, this value is 10 seconds.</li> - <li>Timer tasks are only permitted when the budget is non-negative.</li> - <li>When a timer has executed, the execution time is deducted from the budget of the window where the timeout gets called from.</li> - <li>The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome.</li> - </ul> - </li> - <li>Some processes are exempt from this throttling behaviour: - <ul> - <li>Applications playing audio are considered foreground and aren’t throttled.</li> - <li>Applications with real-time connections (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> and <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>), to avoid closing these connections by timeout.</li> - <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> processes.</li> - </ul> - </li> -</ul> - -<h2 id="Exemplo">Exemplo</h2> - -<p>Ver <a href="http://daniemon.com/tech/webapps/page-visibility/">exemplo live </a>(vídeo com som).</p> - -<p>O exemplo, que pausa o vídeo quando muda para outro separador e reproduz novamente quando volta ao seu separador, foi criado com o seguinte código:</p> - -<pre class="brush: js">// Set the name of the hidden property and the change event for visibility -var hidden, visibilityChange; -if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support - hidden = "hidden"; - visibilityChange = "visibilitychange"; -} else if (typeof document.msHidden !== "undefined") { - hidden = "msHidden"; - visibilityChange = "msvisibilitychange"; -} else if (typeof document.webkitHidden !== "undefined") { - hidden = "webkitHidden"; - visibilityChange = "webkitvisibilitychange"; -} - -var videoElement = document.getElementById("videoElement"); - -// If the page is hidden, pause the video; -// if the page is shown, play the video -function handleVisibilityChange() { - if (document[hidden]) { - videoElement.pause(); - } else { - videoElement.play(); - } -} - -// Warn if the browser doesn't support addEventListener or the Page Visibility API -if (typeof document.addEventListener === "undefined" || typeof document.hidden === "undefined") { - console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API."); -} else { - // Handle page visibility change - document.addEventListener(visibilityChange, handleVisibilityChange, false); - - // When the video pauses, set the title. - // This shows the paused - videoElement.addEventListener("pause", function(){ - document.title = 'Paused'; - }, false); - - // When the video plays, set the title. - videoElement.addEventListener("play", function(){ - document.title = 'Playing'; - }, false); - -} -</pre> - -<h2 id="Resumo_das_propriedades">Resumo das propriedades</h2> - -<dl> - <dt> - <p id="document.hidden_Read_only">{{domxref("document.hidden")}} <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></p> - </dt> - <dd> - <p>Returns <code>true</code> if the page is in a state considered to be hidden to the user, and <code>false</code> otherwise.</p> - </dd> - <dt> - <p id="document.visibilityState_Read_only">{{domxref("document.visibilityState")}} <span class="inlineIndicator readOnly readOnlyInline" title="This value may not be changed.">Read only </span></p> - </dt> - <dd> - <p>Is a <code>string</code> denoting the visibility state of the document. Possible values:</p> - - <ul> - <li><code>visible</code> : the page content may be at least partially visible. In practice this means that the page is the foreground tab of a non-minimized window.</li> - <li><code>hidden</code> : the page content is not visible to the user. In practice this means that the document is either a background tab or part of a minimized window, or the OS screen lock is active.</li> - <li><code>prerender</code> : the page content is being prerendered and is not visible to the user (considered hidden for purposes of <code>document.hidden</code>). The document may start in this state, but will never transition to it from another value. Note: browser support is optional.</li> - <li><code>unloaded</code> : the page is being unloaded from memory. Note: browser support is optional.</li> - </ul> - - <pre class="brush: js">//startSimulation and pauseSimulation defined elsewhere -function handleVisibilityChange() { - if (document.hidden) { - pauseSimulation(); - } else { - startSimulation(); - } -} - -document.addEventListener("visibilitychange", handleVisibilityChange, false); -</pre> - </dd> - <dt> - <p>{{domxref("document.onvisibilitychange")}}</p> - </dt> - <dd> - <p>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.</p> - </dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Page Visibility API')}}</td> - <td>{{Spec2('Page Visibility API')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>13 {{property_prefix("webkit")}}<br> - 33</td> - <td>{{CompatGeckoDesktop(18)}}<sup>[2]</sup></td> - <td>10</td> - <td>12.10<sup>[1]</sup></td> - <td>7</td> - </tr> - <tr> - <td><code>onvisibilitychange</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(56)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Budget-based background timeout throttling</td> - <td>57</td> - <td>{{CompatGeckoDesktop(58)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>5.0<sup>[3]</sup></td> - <td>{{CompatGeckoMobile(18)}}<sup>[2]</sup></td> - <td>10</td> - <td>12.10<sup>[1]</sup></td> - <td>7<sup>[4]</sup></td> - </tr> - <tr> - <td><code>onvisibilitychange</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(56)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Budget-based background timeout throttling</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(58)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Doesn't fire the {{event("visibilitychange")}} event when the browser window is minimized, nor set <code>hidden</code> to <code>true</code>.</p> - -<p>[2] From Firefox 10 to Firefox 51 included, this property could be used prefixed with <code>moz</code>.</p> - -<p>[3] Android 4.4 supports this feature if prefixed with <code>webkit</code>.</p> - -<p>[4] From iOS 11.0.2 onwards, the values are not correct in standalone mode (when you press "Add to Homescreen") and when the screen is locked (you pressed the power button). The value for <code>hidden</code> is <code>false</code> and <code>visibilityState</code> is <code>visible</code>.</p> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li>Descrição da <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog">Page Visibility API</a> no IEBlog (inglês).</li> - <li>Descrição da <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">Page Visibility API</a> pela Google (inglês).</li> -</ul> diff --git a/files/pt-pt/web/api/push_api/index.html b/files/pt-pt/web/api/push_api/index.html deleted file mode 100644 index 9e94962adc..0000000000 --- a/files/pt-pt/web/api/push_api/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Push API -slug: Web/API/Push_API -tags: - - API - - Experimental - - Landing - - Notificações - - Push - - Referencia - - Service Workers -translation_of: Web/API/Push_API ---- -<div>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</div> - -<p class="summary"><strong>Push API</strong> permite que as aplicações da Web recebam as mensagens submetidas para as mesmas a partir de um servidor, se a aplicação da Web está em primeiro plano, ou mesmo atualmente carregada, num agente de utilizador. Isto permite que os programadores entreguem notificações e atualizações assíncronas aos utilizadores que optem, resultando num melhor compromisso com os novos conteúdos atualizados.</p> - -<h2 id="Conceitos_e_utilização_de_Push">Conceitos e utilização de <em>Push</em></h2> - -<p>For an app to receive push messages, it has to have an active <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a>. When the service worker is active, it can subscribe to push notifications, using {{domxref("PushManager.subscribe()")}}.</p> - -<p>The resulting {{domxref("PushSubscription")}} includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.</p> - -<p>The service worker will be started as necessary to handle incoming push messages, which are delivered to the {{domxref("ServiceWorkerGlobalScope.onpush")}} event handler. This allows apps to react to push messages being received, for example, by displaying a notification (using {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p> - -<p>Each subscription is unique to a service worker. The endpoint for the subscription is a unique <a href="http://www.w3.org/TR/capability-urls/">capability URL</a>: knowledge of the endpoint is all that is necessary to send a message to your application. The endpoint URL therefore needs to be kept secret, or other applications might be able to send push messages to your application.</p> - -<p>Activating a service worker to deliver a push message can result in increased resource usage, particularly of the battery. Different browsers have different schemes for handling this, there is currently no standard mechanism. Firefox allows a limited number (quota) of push messages to be sent to an application, although Push messages that generate notifications are exempt from this limit. The limit is refreshed each time the site is visited. In comparison, Chrome applies no limit, but requires that every push message causes a notification to be displayed.</p> - -<div class="note"> -<p><strong>Nota</strong>: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. This handles cases where a burst of notifications is received, and not all generate a visible notification.</p> -</div> - -<div class="note"> -<p><strong>Nota</strong>: Chrome versions earlier than 52 require you to set up a project on <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest, with some special parameters to use this service.</p> -</div> - -<h2 id="Interfaces">Interfaces</h2> - -<dl> - <dt>{{domxref("PushEvent")}}</dt> - <dd>Represents a push action, sent to the <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">global scope</a> of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.</dd> - <dt>{{domxref("PushManager")}}</dt> - <dd>Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.</dd> - <dt>{{domxref("PushMessageData")}}</dt> - <dd>Provides access to push data sent by a server, and includes methods to manipulate the received data.</dd> - <dt>{{domxref("PushSubscription")}}</dt> - <dd>Provides a subcription's URL endpoint, and allows unsubscription from a push service.</dd> -</dl> - -<h2 id="Service_worker_additions">Service worker additions</h2> - -<p>The following additions to the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.</p> - -<dl> - <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt> - <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.</dd> - <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt> - <dd>An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.</dd> - <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt> - <dd>An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)</dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<p>Mozilla's <a href="https://serviceworke.rs/">ServiceWorker Cookbook</a> contains many useful Push examples.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName("Push API")}}</td> - <td>{{Spec2("Push API")}}</td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatGeckoDesktop(44.0)}}<sup>[1][3]</sup></td> - <td>{{CompatNo}}<sup>[2]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("PushEvent.data")}},<br> - {{domxref("PushMessageData")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(44.0)}}<sup>[3]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}<sup>[2]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(42.0)}}</td> - </tr> - <tr> - <td>{{domxref("PushEvent.data")}},<br> - {{domxref("PushMessageData")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(48.0)}}<sup>[4]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<ul> - <li>[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.</li> - <li>[2] This is currently not implemented. See the <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/pushapi/">Microsoft Edge status information</a>.</li> - <li>[3] Push (and <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 and 52 Extended Support Releases</a> (ESR.)</li> - <li>[4] Push has been enabled by default on Firefox for Android version 48.</li> -</ul> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/">Sending VAPID identified WebPush Notifications via Mozilla’s Push Service</a></li> - <li><a href="https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/">Web Push Notifications: Timely, Relevant, and Precise</a>, Joseph Medley</li> - <li><a href="/pt-PT/docs/Web/API/Service_Worker_API">Service Worker API</a></li> -</ul> diff --git a/files/pt-pt/web/api/selection/index.html b/files/pt-pt/web/api/selection/index.html deleted file mode 100644 index 7d4f7d8731..0000000000 --- a/files/pt-pt/web/api/selection/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Selection (Seleção) -slug: Web/API/Selection -translation_of: Web/API/Selection -original_slug: DOM/Selection ---- -<h3 id="Introduction" name="Introduction">Introdução</h3> - -<p>Selection é a classe do objeto retornado por <code><a href="/en/DOM/window.getSelection" title="en/DOM/window.getSelection">window.getSelection()</a></code> e outros métodos. Um objeto Selection representa os intervalos que o usuário tenha selecionado. Normalmente, ele tem apenas um intervalo, acessada assim:</p> - -<pre>selection = window.getSelection(); -range = selection.getRangeAt(0);</pre> - -<p>Chamar o método <code><a href="/en/DOM/Selection/toString" title="en/DOM/Selection/toString">toString()</a></code> retorna o texto contido na seleção, por exemplo:</p> - -<pre>selection = window.getSelection(); -window.alert(selection); -</pre> - -<h3 id="Glossário">Glossário</h3> - -<p>Outros termos utilizados nesta seção.</p> - -<dl> - <dt>Âncora (anchor)</dt> - <dd>A âncora de uma seleção é o ponto de início da seleção. Ao fazer uma seleção com um mouse, a âncora no documento é o local onde o botão do mouse é inicialmente pressionado. Como o usuário muda a seleção usando o mouse ou o teclado, a âncora não se move.</dd> - <dt>Foco (focus)</dt> - <dd>O foco da seleção é o ponto final da seleção. Ao fazer uma seleção com o mouse, o foco está no documento onde o botão do mouse é liberado. Como o usuário muda a seleção usando o mouse ou o teclado, o foco é a final da seleção que se move.</dd> - <dt>Intervalo (range)</dt> - <dd>Um intervalo é uma parte contígua de um documento. Um intervalo pode conter nós inteiro, bem como partes de nós, como uma parte de um nó de texto. Um usuário normalmente só seleciona um intervalo de cada vez, mas é possível que um usuário selecione vários intervalos (por exemplo, usando a tecla Control). Um intervalo pode ser recuperado a partir de uma seleção como um objeto Range. Objetos Range também podem ser criadas através do DOM e programaticamente adicionado ou removido de uma seleção.</dd> -</dl> - -<h3 id="Properties" name="Properties">Propriedades</h3> - -<dl> - <dt><a href="/en/DOM/Selection/anchorNode" title="en/DOM/Selection/anchorNode">anchorNode</a></dt> - <dd>Retorna o nó em que a seleção começa.</dd> - <dt><a href="/en/DOM/Selection/anchorOffset" title="en/DOM/Selection/anchorOffset">anchorOffset</a></dt> - <dd>Retorna o número de caracteres que a âncora da seleção é compensada dentro do anchorNode.</dd> - <dt><a href="/en/DOM/Selection/focusNode" title="en/DOM/Selection/focusNode">focusNode</a></dt> - <dd>Retorna o nó em que a seleção termina.</dd> - <dt><a href="/en/DOM/Selection/focusOffset" title="en/DOM/Selection/focusOffset">focusOffset</a></dt> - <dd>Retorna o número de caracteres que o foco da seleção é compensado dentro do focusNode.</dd> - <dt><a href="/en/DOM/Selection/isCollapsed" title="en/DOM/Selection/isCollapsed">isCollapsed</a></dt> - <dd>Retorna um booleano indicando se os pontos de início e fim da seleção estão na mesma posição.</dd> - <dt><a href="/en/DOM/Selection/rangeCount" title="en/DOM/Selection/rangeCount">rangeCount</a></dt> - <dd>Retorna o número de faixas na seleção.</dd> -</dl> - -<h3 id="Methods" name="Methods">Métodos</h3> - -<dl> - <dt><a href="/en/DOM/Selection/addRange" title="en/DOM/Selection/addRange">addRange</a></dt> - <dd>Um objeto de intervalo (Range) que será adicionado à seleção.</dd> - <dt><a href="/en/DOM/Selection/collapse" title="en/DOM/Selection/collapse">collapse</a></dt> - <dd>Recolhe a seleção atual para um único ponto.</dd> - <dt><a href="/en/DOM/Selection/collapseToStart" title="en/DOM/Selection/collapseToStart">collapseToStart</a></dt> - <dd>Move o foco da seleção para o mesmo ponto da âncora.</dd> - <dt><a href="/en/DOM/Selection/collapseToEnd" title="en/DOM/Selection/collapseToEnd">collapseToEnd</a></dt> - <dd>Move a âncora da seleção para o mesmo ponto que o foco. O foco não se move.</dd> - <dt><a href="/en/DOM/Selection/containsNode" title="en/DOM/Selection/containsNode">containsNode</a></dt> - <dd>Indica se um determinado nó é parte da seleção.</dd> - <dt><a href="/en/DOM/Selection/deleteFromDocument" title="en/DOM/Selection/deleteFromDocument">deleteFromDocument</a></dt> - <dd>Apaga o conteúdo da seleção do documento.</dd> - <dt><a href="/en/DOM/Selection/extend" title="en/DOM/Selection/extend">extend</a></dt> - <dd>Move o foco da seleção para um ponto especificado.</dd> - <dt><a href="/en/DOM/Selection/getRangeAt" title="en/DOM/Selection/getRangeAt">getRangeAt</a></dt> - <dd>Retorna um objeto de intervalo (Range) representando um dos intervalos atualmente selecionados.</dd> - <dt><a href="/en/DOM/Selection/removeAllRanges" title="en/DOM/Selection/removeAllRanges">removeAllRanges</a></dt> - <dd>Remove todos os intervalos da seleção.</dd> - <dt><a href="/en/DOM/Selection/removeRange" title="en/DOM/Selection/removeRange">removeRange</a></dt> - <dd>Remove uma faixa (range) da seleção.</dd> - <dt><a href="/en/DOM/Selection/selectAllChildren" title="en/DOM/Selection/selectAllChildren">selectAllChildren</a></dt> - <dd>Adiciona todos os filhos do nó especificado para a seleção.</dd> - <dt><a href="/en/DOM/Selection/toString" title="en/DOM/Selection/toString">toString</a></dt> - <dd>Retorna uma string a ser representada pelo objeto de seleção, ou seja, o texto atualmente selecionado.</dd> -</dl> diff --git a/files/pt-pt/web/api/service_worker_api/index.html b/files/pt-pt/web/api/service_worker_api/index.html deleted file mode 100644 index 343635d6c2..0000000000 --- a/files/pt-pt/web/api/service_worker_api/index.html +++ /dev/null @@ -1,335 +0,0 @@ ---- -title: API de Service Worker -slug: Web/API/Service_Worker_API -tags: - - API - - Landing - - Off-line - - Referencia - - Resumo - - Service Workers - - Sinopse - - Workers -translation_of: Web/API/Service_Worker_API ---- -<div> -<p>{{ServiceWorkerSidebar}}</p> - -<p class="summary">Os <strong><em>service workers</em></strong> atuam essencialmente como servidores de <em>proxy </em>que ficam entre as aplicações da Web, e o navegador e a rede (quando disponível). Eles são destinados para (entre outras coisas) ativar a criação de experiências efetivas, intercetar pedidos de rede e tomando medidas adequadas com base na disponibilidade da rede e na atualização dos ativos no servidor. Eles também irão permitir o acesso para solicitar notificações e sincronizar as APIs em segundo plano.</p> -</div> - -<h2 id="Conceitos_e_utilização_do_service_worker">Conceitos e utilização do <em>service worker</em></h2> - -<p>A service worker is an event-driven <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">worker</a> registered against an origin and a path. It takes the form of a JavaScript file that can control the web page/site it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available.)</p> - -<p>A service worker is run in a worker context: it therefore has no DOM access, and runs on a different thread to the main JavaScript that powers your app, so it is not blocking. It is designed to be fully async; as a consequence, APIs such as synchronous <a href="/en-US/docs/Web/API/XMLHttpRequest">XHR</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> can't be used inside a service worker.</p> - -<p>Service workers only run over HTTPS, for security reasons. Having modified network requests wide open to man in the middle attacks would be really bad. In Firefox, Service Worker APIs are also hidden and cannot be used when the user is in <a href="https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history">private browsing mode</a>.</p> - -<div class="note"> -<p><strong>Nota</strong>: Service Workers win over previous attempts in this area such as <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> because they don't make assumptions about what you are trying to do and then break when those assumptions are not exactly right; you have granular control over everything.</p> -</div> - -<div class="note"> -<p><strong>Nota</strong>: Service workers make heavy use of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, as generally they will wait for responses to come through, after which they will respond with a success or failure action. The promises architecture is ideal for this.</p> -</div> - -<h3 id="Registo">Registo</h3> - -<p>A service worker is first registered using the {{domxref("ServiceWorkerContainer.register()")}} method. If successful, your service worker will be downloaded to the client and attempt installation/activation (see below) for URLs accessed by the user inside the whole origin, or inside a subset specified by you.</p> - -<h3 id="Transferir_instalar_e_ativar">Transferir, instalar e ativar</h3> - -<p>Neste ponto, o seu <em>service worker </em>observará o seguinte ciclo vital:</p> - -<ol> - <li>Transferir</li> - <li>Instalar</li> - <li>Ativar</li> -</ol> - -<p>The service worker is immediately downloaded when a user first accesses a service worker–controlled site/page.</p> - -<p>After that it is downloaded every 24 hours or so. It <em>may</em> be downloaded more frequently, but it <strong>must</strong> be downloaded every 24h to prevent bad scripts from being annoying for too long.</p> - -<p>Installation is attempted when the downloaded file is found to be new — either different to an existing service worker (byte-wise compared), or the first service worker encountered for this page/site.</p> - -<p>If this is the first time a service worker has been made available, installation is attempted, then after a successful installation it is activated.</p> - -<p>If there is an existing service worker available, the new version is installed in the background, but not yet activated — at this point it is called the <em>worker in waiting</em>. 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 (becoming the <em>active worker</em>). Activation can happen sooner using {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} and existing pages can be claimed by the active worker using {{domxref("Clients.claim()")}}.</p> - -<p>You can listen out for the {{domxref("InstallEvent")}}; a standard action is to prepare your service worker for usage when this fires, for example by creating a cache using the built in storage API, and placing assets inside it that you'll want for running your app offline.</p> - -<p>There is also an <code>activate</code> event. The point where this event fires is generally a good time to clean up old caches and other things associated with the previous version of your service worker.</p> - -<p>Your service worker can respond to requests using the {{domxref("FetchEvent")}} event. You can modify the response to these requests in any way you want, using the {{domxref("FetchEvent.respondWith")}} method.</p> - -<div class="note"> -<p><strong>Nota</strong>: Because <code>oninstall</code>/<code>onactivate</code> could take a while to complete, the service worker spec provides a <code>waitUntil</code> method that, when called <code>oninstall</code> or <code>onactivate</code>, passes a promise. Functional events are not dispatched to the service worker until the promise successfully resolves.</p> -</div> - -<p>Para um tutorial completo para mostrars como crair o seu primeiro exemplo básico, leia <a href="/pt-PT/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utilização de <em>Service Workers</em></a>.</p> - -<h2 id="Outras_ideas_de_casos_de_utilização">Outras ideas de casos de utilização</h2> - -<p>Service workers are also intended to be used for such things as:</p> - -<ul> - <li>Background data synchronization</li> - <li>Responding to resource requests from other origins</li> - <li>Receiving centralized updates to expensive-to-calculate data such as geolocation or gyroscope, so multiple pages can make use of one set of data</li> - <li>Client-side compiling and dependency management of CoffeeScript, less, CJS/AMD modules, etc. for dev purposes</li> - <li>Hooks for background services</li> - <li>Custom templating based on certain URL patterns</li> - <li>Performance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the next few pictures in a photo album.</li> -</ul> - -<p>In the future, service workers will be able to do a number of other useful things for the web platform that will bring it closer towards native app viability. Interestingly, other specifications can and will start to make use of the service worker context, for example:</p> - -<ul> - <li><a href="https://github.com/slightlyoff/BackgroundSync">Background synchronization</a>: Start up a service worker even when no users are at the site, so caches can be updated, etc.</li> - <li><a href="/en-US/docs/Web/API/Push_API">Reacting to push messages</a>: Start up a service worker to send users a message to tell them new content is available.</li> - <li>Reacting to a particular time & date</li> - <li>Entering a geo-fence</li> -</ul> - -<h2 id="Interfaces">Interfaces</h2> - -<dl> - <dt>{{domxref("Cache")}}</dt> - <dd>Represents the storage for {{domxref("Request")}} / {{domxref("Response")}} object pairs that are cached as part of the {{domxref("ServiceWorker")}} life cycle.</dd> - <dt>{{domxref("CacheStorage")}}</dt> - <dd>Represents the storage for {{domxref("Cache")}} objects. It provides a master directory of all the named caches that a {{domxref("ServiceWorker")}} can access and maintains a mapping of string names to corresponding {{domxref("Cache")}} objects.</dd> - <dt>{{domxref("Client")}}</dt> - <dd>Represents the scope of a service worker client. A service worker client is either a document in a browser context or a {{domxref("SharedWorker")}}, which is controlled by an active worker.</dd> - <dt>{{domxref("Clients")}}</dt> - <dd>Represents a container for a list of {{domxref("Client")}} objects; the main way to access the active service worker clients at the current origin.</dd> - <dt>{{domxref("ExtendableEvent")}}</dt> - <dd>Extends the lifetime of the <code>install</code> and <code>activate</code> events dispatched on the {{domxref("ServiceWorkerGlobalScope")}} as part of the service worker lifecycle. This ensures that any functional events (like {{domxref("FetchEvent")}} ) are not dispatched to the {{domxref("ServiceWorker")}} until it upgrades database schemas, deletes outdated cache entries, etc.</dd> - <dt>{{domxref("ExtendableMessageEvent")}}</dt> - <dd>The event object of a {{event("message_(ServiceWorker)","message")}} event fired on a service worker (when a channel message is received on the {{domxref("ServiceWorkerGlobalScope")}} from another context) — extends the lifetime of such events.</dd> - <dt>{{domxref("FetchEvent")}}</dt> - <dd>The parameter passed into the {{domxref("ServiceWorkerGlobalScope.onfetch")}} handler, <code>FetchEvent</code> represents a fetch action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. It contains information about the request and resulting response, and provides the {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} method, which allows us to provide an arbitrary response back to the controlled page.</dd> - <dt>{{domxref("InstallEvent")}}</dt> - <dd>The parameter passed into the {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} handler, the <code>InstallEvent</code> interface represents an install action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. As a child of {{domxref("ExtendableEvent")}}, it ensures that functional events such as {{domxref("FetchEvent")}} are not dispatched during installation. </dd> - <dt>{{domxref("NavigationPreloadManager")}}</dt> - <dd>Provides methods for managing the preloading of resources with a service worker. </dd> - <dt>{{domxref("Navigator.serviceWorker")}}</dt> - <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd> - <dt>{{domxref("NotificationEvent")}}</dt> - <dd>The parameter passed into the {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}} handler, the <code>NotificationEvent</code> interface represents a notification click event that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}.</dd> - <dt>{{domxref("ServiceWorker")}}</dt> - <dd>Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same <code>ServiceWorker</code> object.</dd> - <dt>{{domxref("ServiceWorkerContainer")}}</dt> - <dd>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.</dd> - <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt> - <dd>Represents the global execution context of a service worker.</dd> - <dt>{{domxref("ServiceWorkerMessageEvent")}} {{deprecated_inline}}</dt> - <dd>Represents a message sent to a {{domxref("ServiceWorkerGlobalScope")}}. <strong>Note that this interface is deprecated in modern browsers. Service worker messages will now use the {{domxref("MessageEvent")}} interface, for consistency with other web messaging features.</strong></dd> - <dt>{{domxref("ServiceWorkerRegistration")}}</dt> - <dd>Represents a service worker registration.</dd> - <dt>{{domxref("ServiceWorkerState")}} {{experimental_inline}}</dt> - <dd>Associated with its <a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker" title="The ServiceWorker interface of the ServiceWorker API provides a reference to a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same service worker, each through a unique ServiceWorker object."><code>ServiceWorker</code></a>'s state.</dd> - <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt> - <dd> - <p>The SyncEvent interface represents a sync action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a ServiceWorker. </p> - </dd> - <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt> - <dd>Provides an interface for registering and listing sync registrations.</dd> - <dt>{{domxref("WindowClient")}}</dt> - <dd>Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of {{domxref("Client")}} object, with some additional methods and properties available.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Service Workers')}}</td> - <td>{{Spec2('Service Workers')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<div>{{ CompatibilityTable() }}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(40)}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td> - <td>{{ CompatNo() }}</td> - <td>24</td> - <td>{{ CompatNo() }}<sup>[3]</sup></td> - </tr> - <tr> - <td>install/activate events</td> - <td>{{ CompatChrome(40) }}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>fetch event/request/<br> - <code>respondWith()</code></td> - <td>{{CompatChrome(40)}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{ CompatGeckoDesktop("44.0") }}<sup>[2]</sup></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>caches/cache</td> - <td> - <p class="p1">{{CompatChrome(42)}}</p> - </td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{ CompatGeckoDesktop("39.0") }}<sup>[2]</sup></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>{{domxref("ServiceWorkerMessageEvent")}} deprecated in favour of {{domxref("MessageEvent")}}</td> - <td> - <p class="p1">{{CompatChrome(57)}}</p> - </td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoDesktop("55.0") }}<sup>[2]</sup></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code>NavigationPreloadManager</code></td> - <td>{{CompatChrome(59)}}</td> - <td>{{ CompatNo() }}</td> - <td></td> - <td>{{ CompatNo() }}</td> - <td>{{CompatOpera(46)}}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>{{CompatChrome(40)}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{ CompatGeckoMobile("44.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatNo() }}<sup>[3]</sup></td> - </tr> - <tr> - <td> install/activate events</td> - <td>{{ CompatNo() }}</td> - <td>{{CompatChrome(40)}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{ CompatGeckoMobile("44.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>fetch event/request/<br> - <code>respondWith()</code></td> - <td>{{ CompatNo() }}</td> - <td>{{CompatChrome(40)}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{ CompatGeckoMobile("44.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>caches/cache</td> - <td>{{ CompatNo() }}</td> - <td>{{CompatChrome(40)}}</td> - <td>{{CompatNo}}<sup>[1]</sup></td> - <td>{{ CompatGeckoMobile("39.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td>{{domxref("ServiceWorkerMessageEvent")}} deprecated in favour of {{domxref("MessageEvent")}}</td> - <td>{{ CompatNo() }}</td> - <td> - <p class="p1">{{CompatChrome(57)}}</p> - </td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatGeckoMobile("55.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - <tr> - <td><code>NavigationPreloadManager</code></td> - <td>{{ CompatNo() }}</td> - <td>{{CompatChrome(59)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{CompatOperaMobile(46)}}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] This feature is not supported yet, though it's <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/serviceworker/">already in development</a>.</p> - -<p>[2] Service workers (and <a href="/en-US/docs/Web/API/Push_API">Push</a>) have been disabled in the <a href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 & 52 Extended Support Releases</a> (ESR.)</p> - -<p>[3] This feature is not supported yet, though it's <a href="https://bugs.webkit.org/show_bug.cgi?id=174541">currently</a> <a href="https://webkit.org/status/#specification-service-workers">in development</a>.</p> - -<h2 id="Consulte_também">Consulte também:</h2> - -<ul> - <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li> - <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> - <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> - <li><a href="https://www.fastly.com/blog/best-practices-for-using-the-vary-header">Best Practices for using the VARY header</a></li> -</ul> diff --git a/files/pt-pt/web/api/service_worker_api/using_service_workers/index.html b/files/pt-pt/web/api/service_worker_api/using_service_workers/index.html deleted file mode 100644 index bce8c7d4f1..0000000000 --- a/files/pt-pt/web/api/service_worker_api/using_service_workers/index.html +++ /dev/null @@ -1,459 +0,0 @@ ---- -title: Utilização de "Service Workers" -slug: Web/API/Service_Worker_API/Using_Service_Workers -tags: - - Guía - - ServiceWorker - - Serviço - - Workers - - básicos -translation_of: Web/API/Service_Worker_API/Using_Service_Workers ---- -<p>{{ServiceWorkerSidebar}}</p> - -<div class="summary"> -<p>This article provides information on getting started with service workers, including basic architecture, registering a service worker, the install and activation process for a new service worker, updating your service worker, cache control and custom responses, all in the context of a simple app with offline functionality. </p> -</div> - -<h2 id="The_premise_of_service_workers">The premise of service workers</h2> - -<p>One overriding problem that web users have suffered with for years is loss of connectivity. The best web app in the world will provide a terrible user experience if you can’t download it. There have been various attempts to create technologies to solve this problem, as our <a href="/en-US/Apps/Build/Offline">Offline</a> page shows, and some of the issues have been solved. But the overriding problem is that there still isn’t a good overall control mechanism for asset caching and custom network requests.<br> - <br> - The previous attempt — <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> — seemed to be a good idea because it allowed you to specify assets to cache really easily. However, it made many assumptions about what you were trying to do and then broke horribly when your app didn’t follow those assumptions exactly. Read Jake Archibald's (unfortunately-titled but well-written) <a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a> for more details.</p> - -<div class="note"> -<p><strong>Nota</strong>: As of Firefox 44, when <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a> is used to provide offline support for a page a warning message is now displayed in the console advising developers to use <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> instead ({{bug("1204581")}}.)</p> -</div> - -<p>Service workers should finally fix these issues. Service worker syntax is more complex than that of AppCache, but the trade off is that you can use JavaScript to control your AppCache-implied behaviors with a fine degree of granularity, allowing you to handle this problem and many more. Using a Service worker you can easily set an app up to use cached assets first, thus providing a default experience even when offline, before then getting more data from the network (commonly known as <a href="http://offlinefirst.org/">Offline First</a>). This is already available with native apps, which is one of the main reasons native apps are often chosen over web apps.</p> - -<h2 id="Setting_up_to_play_with_service_workers">Setting up to play with service workers</h2> - -<p>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:</p> - -<ul> - <li><strong>Firefox Nightly</strong>: Go to <code>about:config</code> and set <code>dom.serviceWorkers.enabled</code> to true; restart browser.</li> - <li><strong>Chrome Canary</strong>: Go to <code>chrome://flags</code> and turn on <code>experimental-web-platform-features</code>; restart browser (note that some features are now enabled by default in Chrome.)</li> - <li><strong>Opera</strong>: Go to <code>opera://flags</code> and enable <code>Support for ServiceWorker</code>; restart browser.</li> - <li><strong>Microsoft Edge</strong>: Go to <code>about:flags</code> and tick <code>Enable service workers</code>; restart browser.</li> -</ul> - -<p>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, <code>localhost</code> is considered a secure origin by browsers as well.</p> - -<h2 id="Basic_architecture">Basic architecture</h2> - -<p>With service workers, the following steps are generally observed for basic set up:</p> - -<ol> - <li>The service worker URL is fetched and registered via {{domxref("serviceWorkerContainer.register()")}}.</li> - <li>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.</li> - <li>The service worker is now ready to process events.</li> - <li>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.</li> - <li>When the <code>oninstall</code> handler completes, the service worker is considered installed.</li> - <li>Next is activation. When the service worker is installed, it then receives an activate event. The primary use of <code>onactivate</code> is for cleanup of resources used in previous versions of a Service worker script.</li> - <li>The Service worker will now control pages, but only those opened after the <code>register()</code> 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.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12636/sw-lifecycle.png" style="display: block; height: 867px; margin: 0px auto; width: 579px;"></p> - -<p>The below graphic shows a summary of the available service worker events:</p> - -<p><img alt="install, activate, message, fetch, sync, push" src="https://mdn.mozillademos.org/files/12632/sw-events.png" style="display: block; margin: 0px auto;"></p> - -<h3 id="Promises">Promises</h3> - -<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a great mechanism for running async operations, with success dependant on one another. This is central to the way service workers work.<br> - <br> - Promises can do a variety of things, but all you need to know for now is that if something returns a promise, you can attach <code>.then()</code> to the end and include callbacks inside it for success cases, or you can insert <code>.catch()</code> on the end if you want to include a failure callback.</p> - -<p>Let’s compare a traditional synchronous callback structure to its asynchronous promise equivalent.</p> - -<h4 id="sync">sync</h4> - -<pre class="brush: js">try { - const value = myFunction(); - console.log(value); -} catch(err) { - console.log(err); -}</pre> - -<h4 id="async">async</h4> - -<pre class="brush: js">myFunction().then((value) => { - console.log(value); -}).catch((err) => { - console.log(err); -});</pre> - -<p>In the first example, we have to wait for <code>myFunction()</code> to run and return <code>value</code> before any more of the code can execute. In the second example, <code>myFunction()</code> returns a promise for <code>value</code>, then the rest of the code can carry on running. When the promise resolves, the code inside <code>then</code> will be run, asynchronously.<br> - <br> - 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 <code>.onload</code> 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 <code>.complete</code>, but it’s still not foolproof, and what about multiple images? And, ummm, it’s still synchronous, so blocks the main thread.<br> - <br> - Instead, we could build our own promise to handle this kind of case. (See our <a href="https://github.com/mdn/js-examples/tree/master/promises-test">Promises test</a> example for the source code, or <a href="https://mdn.github.io/js-examples/promises-test/">look at it running live</a>.)</p> - -<p>{{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.")}}</p> - -<pre class="brush: js">const imgLoad = (url) => { - return new Promise((resolve, reject) => { - var request = new XMLHttpRequest(); - request.open('GET', url); - request.responseType = 'blob'; - - request.onload = () => { - if (request.status == 200) { - resolve(request.response); - } else { - reject(Error('Image didn\'t load successfully; error code:' + request.statusText)); - } - }; - - request.onerror = () => { - reject(Error('There was a network error.')); - }; - - request.send(); - }); -}</pre> - -<p>We return a new promise using the <code>Promise()</code> constructor, which takes as an argument a callback function with <code>resolve</code> and <code>reject</code> 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 <code>resolve</code> on success, or <code>reject</code> on failure. The rest of the contents of this function is fairly standard XHR stuff, so we won’t worry about that for now.</p> - -<p>When we come to call the <code>imgLoad()</code> 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:</p> - -<pre class="brush: js">let body = document.querySelector('body'); -let myImage = new Image(); - -imgLoad('myLittleVader.jpg').then((response) => { - var imageURL = window.URL.createObjectURL(response); - myImage.src = imageURL; - body.appendChild(myImage); -}, (Error) => { - console.log(Error); -});</pre> - -<p>On to the end of the function call, we chain the promise <code>then()</code> 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 <code>myImage</code> and append it to the body (it’s argument is the <code>request.response</code> contained inside the promise’s <code>resolve</code> method); in the rejected case we return an error to the console.</p> - -<p>This all happens asynchronously.</p> - -<div class="note"> -<p><strong>Note</strong>: You can also chain promise calls together, for example:<br> - <code>myPromise().then(success, failure).then(success).catch(failure);</code></p> -</div> - -<div class="note"> -<p><strong>Note</strong>: You can find a lot more out about promises by reading Jake Archibald’s excellent <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p> -</div> - -<h2 id="Service_workers_demo">Service workers demo</h2> - -<p>To demonstrate just the very basics of registering and installing a service worker, we have created a simple demo called <a href="https://github.com/mdn/sw-test">sw-test</a>, 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!</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8243/demo-screenshot.png" style="display: block; height: 410px; margin: 0px auto; width: 480px;"><br> - <br> - <br> - You can see the <a href="https://github.com/mdn/sw-test/">source code on GitHub</a>, and <a href="https://mdn.github.io/sw-test/">view the example live</a>. The one bit we’ll call out here is the promise (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L22-L47">app.js lines 22-47</a>), which is a modified version of what you read about above, in the <a href="https://mdn.github.io/js-examples/promises-test/">Promises test demo</a>. It is different in the following ways:</p> - -<ol> - <li>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 <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). 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 <code>for()</code> 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.)</li> - <li>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 <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L31-L34">app.js lines 31-34</a>). Promises will only resolve with a single argument, so if you want to resolve with multiple values, you need to use an array/object.</li> - <li>To access the resolved promise values, we then access this function as you’d then expect (see <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L60-L64">app.js lines 60-64</a>). This may seem a bit odd at first, but this is the way promises work.</li> -</ol> - -<h2 id="Enter_service_workers">Enter service workers</h2> - -<p><strong>NOTE</strong> : We're using the <a href="http://es6-features.org/" rel="noopener">es6</a> <strong>arrow functions</strong> syntax in the Service Worker Implementation</p> - -<p>Now let’s get on to service workers!</p> - -<h3 id="Registering_your_worker">Registering your worker</h3> - -<p>The first block of code in our app’s JavaScript file — <code>app.js</code> — is as follows. This is our entry point into using service workers.</p> - -<pre class="brush: js">if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('./sw-test/sw.js', {scope: './sw-test/'}) - .then((reg) => { - // registration worked - console.log('Registration succeeded. Scope is ' + reg.scope); - }).catch((error) => { - // registration failed - console.log('Registration failed with ' + error); - }); -}</pre> - -<ol> - <li>The outer block performs a feature detection test to make sure service workers are supported before trying to register one.</li> - <li>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.)</li> - <li>The <code>scope</code> 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 '<code>/sw-test/'</code>, 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.</li> - <li>The <code>.then()</code> promise function is used to chain a success case onto our promise structure. When the promise resolves successfully, the code inside it executes.</li> - <li>Finally, we chain a <code>.catch()</code> function onto the end that will run if the promise is rejected.</li> -</ol> - -<p>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.<br> - <br> - 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.</p> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<h4 id="Why_is_my_service_worker_failing_to_register">Why is my service worker failing to register?</h4> - -<p>This could be for the following reasons:</p> - -<ol> - <li>You are not running your application through HTTPS.</li> - <li>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 <code>https://mdn.github.io/sw-test/sw.js</code>, and the app’s root is <code>https://mdn.github.io/sw-test/</code>. But the path needs to be written as <code>/sw-test/sw.js</code>, not <code>/sw.js</code>.</li> - <li>The service worker being pointed to is on a different origin to that of your app. This is also not allowed.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12630/important-notes.png" style="display: block; height: 277px; margin: 0px auto; width: 574px;"></p> - -<p>Also note:</p> - -<ul> - <li>The service worker will only catch requests from clients under the service worker's scope.</li> - <li>The max scope for a service worker is the location of the worker.</li> - <li>If your service worker is active on a client being served with the <code>Service-Worker-Allowed</code> header, you can specify a list of max scopes for that worker.</li> - <li>In Firefox, Service Worker APIs are hidden and cannot be used when the user is in <a href="https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history">private browsing mode</a>.</li> -</ul> - -<h3 id="Install_and_activate_populating_your_cache">Install and activate: populating your cache</h3> - -<p>After your service worker is registered, the browser will attempt to install then activate the service worker for your page/site.<br> - <br> - 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 object 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.</p> - -<div class="note"> -<p><strong>Note</strong>: The Cache API is not supported in every browser. (See the {{anch("Browser compatibility")}} section for more information.) If you want to use this now, you could consider using a polyfill like the one available in <a href="https://github.com/Polymer/topeka/blob/master/sw.js">Google's Topeka demo</a>, or perhaps store your assets in <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p> -</div> - -<p>Let’s start this section by looking at a code sample — this is the <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">first block you’ll find in our service worker</a>:</p> - -<pre class="brush: js">self.addEventListener('install', (event) => { - event.waitUntil( - caches.open('v1').then((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' - ]); - }) - ); -});</pre> - -<ol> - <li>Here we add an <code>install</code> event listener to the service worker (hence <code>self</code>), and then chain a {{domxref("ExtendableEvent.waitUntil()") }} method onto the event — this ensures that the service worker will not install until the code inside <code>waitUntil()</code> has successfully occurred.</li> - <li>Inside <code>waitUntil()</code> we use the <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a> method to create a new cache called <code>v1</code>, 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 <code>addAll()</code> on the created cache, which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.</li> - <li>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.</li> - <li>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.)</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: <a href="/en-US/docs/Web/Guide/API/DOM/Storage">localStorage</a> works in a similar way to service worker cache, but it is synchronous, so not allowed in service workers.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> can be used inside a service worker for data storage if you require it.</p> -</div> - -<h3 id="Custom_responses_to_requests">Custom responses to requests</h3> - -<p>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 <code>fetch</code> event.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12634/sw-fetch.png" style="display: block; margin: 0 auto;"></p> - -<p>A <code>fetch</code> 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 <code>index.html</code> makes a cross origin request to embed an image, that still goes through its service worker.)</p> - -<p>You can attach a <code>fetch</code> event listener to the service worker, then call the <code>respondWith()</code> method on the event to hijack our HTTP responses and update them with your own magic.</p> - -<pre class="brush: js">self.addEventListener('fetch', (event) => { - event.respondWith( - // magic goes here - ); -});</pre> - -<p>We could start by simply responding with the resource whose url matches that of the network request, in each case:</p> - -<pre class="brush: js">self.addEventListener('fetch', (event) => { - event.respondWith( - caches.match(event.request) - ); -});</pre> - -<p><code>caches.match(event.request)</code> 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.</p> - -<p>Let’s look at a few other options we have when defining our magic (see our <a href="/en-US/docs/Web/API/Fetch_API">Fetch API documentation</a> for more information about {{domxref("Request")}} and {{domxref("Response")}} objects.)</p> - -<ol> - <li> - <p>The <code>{{domxref("Response.Response","Response()")}}</code> constructor allows you to create a custom response. In this case, we are just returning a simple text string:</p> - - <pre class="brush: js">new Response('Hello from your friendly neighbourhood service worker!');</pre> - </li> - <li> - <p>This more complex <code>Response</code> 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:</p> - - <pre class="brush: js">new Response('<p>Hello from your friendly neighbourhood service worker!</p>', { - headers: { 'Content-Type': 'text/html' } -});</pre> - </li> - <li> - <p>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:</p> - - <pre class="brush: js">fetch(event.request);</pre> - </li> - <li> - <p>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:</p> - - <pre class="brush: js">caches.match('./fallback.html');</pre> - </li> - <li> - <p>You can retrieve a lot of information about each request by calling parameters of the {{domxref("Request")}} object returned by the {{domxref("FetchEvent")}}:</p> - - <pre class="brush: js">event.request.url -event.request.method -event.request.headers -event.request.body</pre> - </li> -</ol> - -<h2 id="Recovering_failed_requests">Recovering failed requests</h2> - -<p>So <code>caches.match(event.request)</code> 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 <code>undefined</code> and we wouldn't get anything returned.</p> - -<p>Fortunately service workers’ promise-based structure makes it trivial to provide further options towards success. We could do this:</p> - -<pre class="brush: js">self.addEventListener('fetch', (event) => { - event.respondWith( - caches.match(event.request).then((response) => { - return response || fetch(event.request); - }) - ); -});</pre> - -<p>If the resources aren't in the cache, they are requested from the network.</p> - -<p>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:</p> - -<pre class="brush: js">self.addEventListener('fetch', (event) => { - event.respondWith( - caches.match(event.request).then((resp) => { - return resp || fetch(event.request).then((response) => { - return caches.open('v1').then((cache) => { - cache.put(event.request, response.clone()); - return response; - }); - }); - }) - ); -});</pre> - -<p>Here we return the default network request with <code>return fetch(event.request)</code>, which returns a promise. When this promise is resolved, we respond by running a function that grabs our cache using <code>caches.open('v1')</code>; this also returns a promise. When that promise resolves, <code>cache.put()</code> is used to add the resource to the cache. The resource is grabbed from <code>event.request</code>, and the response is then cloned with <code>response.clone()</code> 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.</p> - -<p>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.</p> - -<p>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:</p> - -<pre class="brush: js">self.addEventListener('fetch', (event) => { - event.respondWith( - caches.match(event.request).then((resp) => { - return resp || fetch(event.request).then((response) => { - let responseClone = response.clone(); - caches.open('v1').then((cache) => { - cache.put(event.request, responseClone); - }); - - return response; - }); - }).catch(() => { - return caches.match('./sw-test/gallery/myLittleVader.jpg'); - }) - ); -});</pre> - -<p>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 <code>install</code> event listener we saw earlier.</p> - -<h2 id="Updating_your_service_worker"><a id="Updating your service worker" name="Updating your service worker">Updating your service worker</a></h2> - -<p>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.</p> - -<p>You’ll want to update your <code>install</code> event listener in the new service worker to something like this (notice the new version number):</p> - -<pre class="brush: js">self.addEventListener('install', (event) => { - event.waitUntil( - caches.open('v2').then((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... - ]); - }) - ); -});</pre> - -<p>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 <code>v2</code>, so the previous <code>v1</code> cache isn't disturbed.</p> - -<p>When no pages are using the current version, the new worker activates and becomes responsible for fetches.</p> - -<h3 id="Deleting_old_caches">Deleting old caches</h3> - -<p>You also get an <code>activate</code> 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.</p> - -<p>Promises passed into <code>waitUntil()</code> 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 <code>fetch</code> event on the new cache.</p> - -<pre class="brush: js">self.addEventListener('activate', (event) => { - var cacheKeeplist = ['v2']; - - event.waitUntil( - caches.keys().then((keyList) => { - return Promise.all(keyList.map((key) => { - if (cacheKeeplist.indexOf(key) === -1) { - return caches.delete(key); - } - })); - }) - ); -});</pre> - -<h2 id="Developer_tools">Developer tools</h2> - -<p>Chrome has <code>chrome://inspect/#service-workers</code>, which shows current service worker activity and storage on a device, and <code>chrome://serviceworker-internals</code>, 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.</p> - -<p>Firefox has also started to implement some useful tools related to service workers:</p> - -<ul> - <li>You can navigate to <code><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></code> to see what SWs are registered and update/remove them.</li> - <li>When testing you can get around the HTTPS restriction by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the <a href="/en-US/docs/Tools/Settings">Firefox Developer Tools settings</a>.</li> - <li>The "Forget" button, available in Firefox's customization options, can be used to clear service workers and their caches ({{bug(1252998)}}).</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: You may serve your app from <code>http://localhost</code> (e.g. using <code>me@localhost:/my/app$ <strong>python -m SimpleHTTPServer</strong></code>) for local development. See <a href="https://www.w3.org/TR/service-workers/#security-considerations">Security considerations</a></p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="http://blog.88mph.io/2017/07/28/understanding-service-workers/">Understanding Service Workers</a></li> - <li><a href="https://serviceworke.rs/">The Service Worker Cookbook</a></li> - <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li> - <li>Download the <a href="https://mdn.mozillademos.org/files/12638/sw101.png">Service Workers 101 cheatsheet</a>.</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li> - <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li> -</ul> diff --git a/files/pt-pt/web/api/sharedworker/index.html b/files/pt-pt/web/api/sharedworker/index.html deleted file mode 100644 index bf476434fb..0000000000 --- a/files/pt-pt/web/api/sharedworker/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: SharedWorker -slug: Web/API/SharedWorker -tags: - - API - - Interface - - Referencia - - SharedWorker - - Web Workers - - Workers -translation_of: Web/API/SharedWorker ---- -<div>{{APIRef("Web Workers API")}}</div> - -<p>A interface <code><strong>SharedWorker</strong></code> representa um tipo de <em>worker </em>específico que pode ser acedido <em>a partir de vários contextos de navegação</em>, tais como várias janelas, <em>iframes</em> ou até <em>workers</em>. Eles implementam uma interface diferente do que os <em>workers </em>dedicados e têm um âmbito global diferente, {{domxref("SharedWorkerGlobalScope")}}.</p> - -<div class="note"> -<p><strong>Nota:</strong> Se o SharedWorker puder ser acedido a partir de vários contextos de navegação, todos esses contextos de navegação devem partilhar exatamente a mesma origem (mesmo protocolo, anfitrião e porto).</p> -</div> - -<h2 id="Construtor">Construtor</h2> - -<dl> - <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt> - <dd>Cria um <em>web worker</em> partilhado que executa uma <em>script</em> na URL indicada.</dd> -</dl> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em>Esta interface também herda propriedades de {{domxref("EventTarget")}} de qual se deriva, e implementa propriedades de {{domxref("AbstractWorker")}}.</em></p> - -<dl> - <dt>{{domxref("AbstractWorker.onerror")}}</dt> - <dd>É um {{domxref("EventListener")}} chamado quando um {{domxref("ErrorEvent")}} do tipo <code>error</code> sai do <em>worker</em>.</dd> - <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt> - <dd>Devolve um objeto {{domxref("MessagePort")}} usado para controlar e comunicar com o <em>worker</em> partilhado.</dd> -</dl> - -<dl> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p><em>Esta interface também herda métodos de {{domxref("EventTarget")}} de qual se deriva, e implementa métodos de </em><em>{{domxref("AbstractWorker")}}.</em></p> - -<h2 id="Exemplo">Exemplo</h2> - -<p>No nosso <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">exemplo básico dum <em>worker</em> partilhado</a>, temos duas páginas de HTML, cada qual usa JavaScript para fazer um simples cálculo. Os <em>scripts</em> diferentes estão a utilizar o mesmo ficheiro de <em>worker</em> para fazer os cálculos — ambos podem-no aceder, mesmo se as páginas estiverem a correr em janelas diferentes.</p> - -<p>O seguinte <em>snippet</em> de código demonstra a criação dum objeto {{domxref("SharedWorker")}} usando o construtor {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Ambas <em>scripts</em> contêm isto:</p> - -<pre class="brush: js notranslate">var myWorker = new SharedWorker('worker.js'); -</pre> - -<p>Ambas <em>scripts</em> acedem ao <em>worker</em> através dum objeto {{domxref("MessagePort")}} criado usando a propriedade {{domxref("SharedWorker.port")}}. Se o evento <code>onmessage</code> foi adicionado usando <code>addEventListener</code>, a porta é manualmente criada usando o seu método <code>start()</code>:</p> - -<pre class="brush: js notranslate">myWorker.port.start();</pre> - -<p>Quando a porta é iniciada, ambos <em>scripts</em> enviam mensagens ao <em>worker</em> e processão mensagens vindas do <em>worker</em> usando <code>port.postMessage()</code> e <code>port.onmessage</code>, respetivamente:</p> - -<pre class="brush: js notranslate">first.onchange = function() { - myWorker.port.postMessage([first.value,second.value]); - console.log(' Mensagem enviada ao worker'); -} - -second.onchange = function() { - myWorker.port.postMessage([first.value,second.value]); - console.log(' Mensagem enviada ao worker'); -} - -myWorker.port.onmessage = function(e) { - result1.textContent = e.data; - console.log(' Mensagem recebida do worker'); -}</pre> - -<p>Dentro do <em>worker</em> usamos o <em>handler</em> {{domxref("SharedWorkerGlobalScope.onconnect")}} para nos ligarmos à mesma porta a que referimos antes. As portas associadas a esse <em>worker</em> são acessíveis através da propriedade <code>ports</code> do evento {{event("connect")}} — nós depois usamos o método <code>start()</code> de {{domxref("MessagePort")}} para iniciar a porta, e o <em>handler</em> <code>onmessage</code> para lidar com as mensagens enviadas dos <em>threads</em> principais.</p> - -<pre class="brush: js notranslate">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(); // Necessário quando se usa addEventListener. Senão é chamado implicitamente pelo setter de onmessage. -}</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Sem diferenças em comparação a {{SpecName("Web Workers")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.SharedWorker")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{domxref("Worker")}}</li> - <li><a class="internal" href="/pt-PT/docs/Web/API/Web_Workers_API/Utilizacao_de_web_workers">Utilização de workers da Web</a></li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style=""></div> - -<div id="SL_shadow_translation_result2" class="hidden"></div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> - -<div id="SL_alert_cont"></div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"></div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"></div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"></div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"></div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"></div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"></div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"></div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result"></div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> - -<div id="SL_player2"></div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"></div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"></div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/storage_api/index.html b/files/pt-pt/web/api/storage_api/index.html deleted file mode 100644 index 28918cf371..0000000000 --- a/files/pt-pt/web/api/storage_api/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: API de armazenamento -slug: Web/API/Storage_API -tags: - - API - - API de armazenamento - - Armazenamento - - Contextod e segurança - - Quotas - - Referencia - - Resumo - - Sinopse - - Utilização -translation_of: Web/API/Storage_API -original_slug: Web/API/API_armazenamento ---- -<p>{{securecontext_header}}{{DefaultAPISidebar("Storage")}}</p> - -<p>The Storage Standard defines a common, shared storage system to be used by all APIs and technologies that store content-accessible data for individual Web sites. The Storage API gives sites' code the ability to find out how much space they can use, how much they are already using, and even control whether or not they need to be alerted before the {{Glossary("user agent")}} disposes of site data in order to make room for other things.</p> - -<p>{{AvailableInWorkers}}</p> - -<p>Site storage—the data stored for a Web site which is managed by the Storage Standard—includes:</p> - -<ul> - <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB databases</a></li> - <li><a href="/en-US/docs/Web/API/Cache">Cache API data</a></li> - <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker registrations</a></li> - <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API data</a> managed using {{domxref("window.localStorage")}}</li> - <li>History state information saved using {{domxref("History.pushState()")}}</li> - <li><a href="/pt-PT/docs/Web/HTML/Utilizar_a_cache_de_aplicacao">Caches de aplicação</a></li> - <li><a href="/en-US/docs/Web/API/Notifications_API">Notification data</a></li> - <li>Other kinds of site-accessible, site-specific data that may be maintained</li> -</ul> - -<h2 id="Unidades_de_armazenamento_de_site">Unidades de armazenamento de site</h2> - -<p>The site storage system described by the Storage Standard and interacted with using the Storage API consists of a single <strong>site storage unit</strong> for each {{Glossary("origin")}}. In essence, every Web site or Web application has its own storage unit into which its data gets placed. The diagram below shows a site storage pool with three storage units within, showing how storage units can have different data types stored within and may have different quotas (maximum storage limits).</p> - -<p><img alt="A diagram showing how the site storage pool consists of multiple storage units that contain data from various APIs as well as possible unused space left before the quota is reached." src="https://mdn.mozillademos.org/files/14379/StorageUnits.png" style="height: 412px; width: 600px;"></p> - -<ul> - <li>Origin 1 has some Web Storage data as well as some IndexedDB data, but also has some free space left; its current usage hasn't yet reached its quota.</li> - <li>Origin 2 has no data stored in it yet; it's just an empty box waiting for content. This origin, however, has a lower quota than the other two do. It may be a less-visited site, or one known to have lower data storage requirements.</li> - <li>Origin 3's storage unit is completely full; it's reached its quota and can't store any more data without some existing material being removed.</li> -</ul> - -<p>{{Glossary("User agent", "User agents")}} are likely to use various techniques to determine the quota for various origins. One of the most likely methods—one which the specification specifically encourages, in fact—would be to consider the popularity and/or usage levels of individual sites to determine what their quotas should be. It's also conceivable that the browser might offer a user interface to customize these quotas.</p> - -<h2 id="Modos_de_caixa_(Box)">Modos de caixa (Box)</h2> - -<p>The actual data storage within each site storage unit is called its <strong>box</strong>. Each site storage unit has exactly one box into which all of its data is placed, and has a <strong>box mode</strong> that describes the data retention policy for that box. There are two modes:</p> - -<dl> - <dt><code>"best-effort"</code></dt> - <dd>The user agent will try to retain the data contained in the box for as long as it can, <em>but will not warn users</em> if storage space runs low and it becomes necessary to clear the box in order to relieve the storage pressure.</dd> - <dt><code>"persistent"</code></dt> - <dd>The user agent will retain the data as long as possible, clearing all <code>"best-effort"</code> boxes before considering clearing a box marked <code>"persistent"</code>. If it becomes necessary to consider clearing persistent boxes, the user agent will notify the user and provide a way to clear one or more persistent boxes as needed.</dd> -</dl> - -<p>To change an origin's box mode requires permission to use the <code>"persistent-storage"</code> feature.</p> - -<h2 id="Persistência_de_dados_e_limpeza">Persistência de dados e limpeza</h2> - -<p>If the site or app has the <strong><code>"persistent-storage"</code></strong> feature permission, it can use the {{domxref("StorageManager.persist()")}} method to request that its box be made persistent. It's also possible for the user agent to decide to make the site's storage unit persistent due to usage characteristics or other metrics. The <code>"persistent-storage"</code> feature's permission-related flags, algorithms, and types are all set to the standard defaults for a permission, except that the <strong>permission state</strong> must be the same across the entire origin, and that if the permission state isn't <code>"granted"</code> (meaning that for whatever reason, access to the persistent storage feature was denied), the origin's site storage unit's box mode is always <code>"best-effort"</code>.</p> - -<div class="note"> -<p><strong>Nota</strong>: Consulte <a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a> para mais detalhes sobre como obter e gerir as permissões.</p> -</div> - -<p>When clearing site storage units, an origin's box is treated as a single entity; if the user agent needs to clear it and the user approves, the entire data store is cleared rather than providing some means of clearing only data from individual APIs.</p> - -<p>If a box is marked as <code>"persistent"</code>, the contents won't be cleared by the user agent without either the data's origin itself or the user specifically doing so. This includes scenarios such as the user selecting a "Clear Caches" or "Clear Recent History" option. The user will be asked specifically for permission to remove persistent site storage units.</p> - -<h2 id="Quotas_e_estimativas_de_utilização">Quotas e estimativas de utilização</h2> - -<p>The user agent determines, using whatever mechanism it chooses, the maximum amount of storage a given site can use. This maximum is the origin's <strong>quota</strong>. The amount of this space which is in use by the site is called its <strong>usage</strong>. Both of these values are estimates; there are several reasons why they're not precise:</p> - -<ul> - <li>User agents are encouraged to obscure the exact size of the data used by a given origin, to prevent these values from being used for fingerprinting purposes.</li> - <li>De-duplication, compression, and other methods to reduce the physical size of the stored data may be used.</li> - <li>Quotas are conservative estimates of the space available for the origin's use, and should be less than the available space on the device to help prevent overruns.</li> -</ul> - -<p>User agents may use any method they choose to determine the size of origins' quotas, and are encouraged by the specification to provide popular or frequently-used sites with extra space.</p> - -<p>To determine the estimated quota and usage values for a given origin, use the {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}} method, which returns a promise that, when resolved, receives a {{domxref("StorageEstimate")}} that contains these figures. For example:</p> - -<pre class="brush: js">navigator.storage.estimate().then(estimate => { - // estimate.quota is the estimated quota - // estimate.usage is the estimated number of bytes used -});</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('Storage')}}</td> - <td>{{Spec2('Storage')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<div> -<h3 id="StorageManager"><code>StorageManager</code></h3> - -<div> - - -<p>{{Compat("api.StorageManager")}}</p> -</div> -</div> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li>{{domxref("NavigatorStorage.storage", "navigator.storage")}}</li> - <li>{{domxref("StorageManager")}} (the object returned by <code>navigator.storage</code>)</li> - <li><a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a></li> -</ul> diff --git a/files/pt-pt/web/api/urlsearchparams/index.html b/files/pt-pt/web/api/urlsearchparams/index.html deleted file mode 100644 index 3cbed3eea5..0000000000 --- a/files/pt-pt/web/api/urlsearchparams/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: URLSearchParams -slug: Web/API/URLSearchParams -translation_of: Web/API/URLSearchParams ---- -<p>{{ApiRef("URL API")}}</p> - -<p>O interface <strong><code>URLSearchParams </code></strong>define métodos que permitem trabalhar com uma <em>query string</em> de um URL.</p> - -<p>Um objeto que implemente <code>URLSearchParams </code>pode ser utilizado diretamente numa estrutura {{jsxref("Statements/for...of", "for...of")}}, em vez de {{domxref('URLSearchParams.entries()', 'entries()')}}: <code>for (var p of mySearchParams) é equivalente a</code> <code>for (var p of mySearchParams.entries())</code>.</p> - -<h2 id="Construtor">Construtor</h2> - -<dl> - <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt> - <dd>O construtor devolve um objeto <code>URLSearchParams</code>.</dd> -</dl> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em>Este interface não herda nehuma propriedade.</em></p> - -<h2 id="Métodos">Métodos</h2> - -<p><em>Este interface não herda nehum método.</em></p> - -<dl> - <dt>{{domxref("URLSearchParams.append()")}}</dt> - <dd>Adiciona um par chave/valor como um novo parâmetro de pesquisa.</dd> - <dt>{{domxref("URLSearchParams.delete()")}}</dt> - <dd>Elimina o parâmetro de pesquisa e o seu valor, da lista de parâmetros de pesquisa.</dd> - <dt>{{domxref("URLSearchParams.entries()")}}</dt> - <dd>Devolve um {{jsxref("Iteration_protocols","iterator")}} que permite iterar pelos pares chave/valor neste objeto.</dd> - <dt>{{domxref("URLSearchParams.get()")}}</dt> - <dd>Devolve o primeiro valor relacionado com o parâmetro de pesquisa enviado.</dd> - <dt>{{domxref("URLSearchParams.getAll()")}}</dt> - <dd>Devolve todos os valores relacionados com um determinado parâmetro de pesquisa.</dd> - <dt>{{domxref("URLSearchParams.has()")}}</dt> - <dd>Devolve um {{jsxref("Boolean")}} , indicando de um determinado parâmetro de pesquisa existe.</dd> - <dt>{{domxref("URLSearchParams.keys()")}}</dt> - <dd>Devolve um {{jsxref("Iteration_protocols", "iterator")}} permitindo interar pelas <strong>chaves</strong> de todos os pares chave/valor existentes no objeto.</dd> - <dt>{{domxref("URLSearchParams.set()")}}</dt> - <dd>Define o valor associado a um parâmetro de pesquisa. Elimina outros valores se existirem.</dd> - <dt>{{domxref("URLSearchParams.toString()")}}</dt> - <dd>Devolve uma string com os parâmetros válidos para serem utilizados num URL.</dd> - <dt>{{domxref("URLSearchParams.values()")}}</dt> - <dd>Devolve um {{jsxref("Iteration_protocols", "iterator")}} que permite iterar por todos os <strong>valores</strong> dos pares chave/valor existentes neste objeto.</dd> -</dl> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&topic=api" -var searchParams = new URLSearchParams(paramsString); - -//Iterar pelos parâmetros de pesquisa. -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" -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}</td> - <td>{{Spec2('URL')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_Browsers">Compatibilidade Browsers</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatChrome(49)}}</td> - <td>{{CompatGeckoDesktop("29.0")}}</td> - <td>{{CompatNo}}</td> - <td>36</td> - <td>10.1</td> - </tr> - <tr> - <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, e suporte de <code>for...of</code></td> - <td>{{CompatChrome(49)}}</td> - <td>{{CompatGeckoDesktop("44.0")}}</td> - <td>{{CompatNo}}</td> - <td>36</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>USVString</code> for constructor <code>init</code> object</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("53.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Record for constructor <code>init</code> object</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("54.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome para Android</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(49)}}</td> - <td>{{CompatGeckoMobile("29.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(49)}}</td> - </tr> - <tr> - <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, e suport de <code>for...of</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(49)}}</td> - <td>{{CompatGeckoMobile("44.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(49)}}</td> - </tr> - <tr> - <td><code>USVString</code> for constructor <code>init</code> object</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("53.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Record for constructor <code>init</code> object</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("54.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>Outros interfaces relacionados com URL: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li> - <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Manipulação simples de URL com URLSearchParams</a></li> -</ul> - -<dl> -</dl> diff --git a/files/pt-pt/web/api/web_audio_api/index.html b/files/pt-pt/web/api/web_audio_api/index.html deleted file mode 100644 index 815ab1ad91..0000000000 --- a/files/pt-pt/web/api/web_audio_api/index.html +++ /dev/null @@ -1,512 +0,0 @@ ---- -title: API de Áudio da Web -slug: Web/API/Web_Audio_API -tags: - - API - - API de Áudio da Web - - Exemplo - - Guía - - Landing - - Overview - - Resumo - - Web Audio API -translation_of: Web/API/Web_Audio_API ---- -<div> -<p>The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.</p> -</div> - -<h2 id="Conceitos_e_utilização_de_áudio_da_Web">Conceitos e utilização de áudio da <em>Web</em></h2> - -<p>The Web Audio API involves handling audio operations inside an <strong>audio context</strong>, and has been designed to allow <strong>modular routing</strong>. Basic audio operations are performed with <strong>audio nodes</strong>, which are linked together to form an <strong>audio routing graph</strong>. Several sources — with different types of channel layout — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.</p> - -<p>Audio nodes are linked into chains and simple webs by their inputs and outputs. They typically start with one or more sources. Sources provide arrays of sound intensities (samples) at very small timeslices, often tens of thousands of them per second. These could be either computed mathematically (such as {{domxref("OscillatorNode")}}), or they can be recordings from sound/video files (like {{domxref("AudioBufferSourceNode")}} and {{domxref("MediaElementAudioSourceNode")}}) and audio streams ({{domxref("MediaStreamAudioSourceNode")}}). In fact, sound files are just recordings of sound intensities themselves, which come in from microphones or electric instruments, and get mixed down into a single, complicated wave.</p> - -<p>Outputs of these nodes could be linked to inputs of others, which mix or modify these streams of sound samples into different streams. A common modification is multiplying the samples by a value to make them louder or quieter (as is the case with {{domxref("GainNode")}}). Once the sound has been sufficiently processed for the intended effect, it can be linked to the input of a destination ({{domxref("AudioContext.destination")}}), which sends the sound to the speakers or headphones. This last connection is only necessary if the user is supposed to hear the audio.</p> - -<p>A simple, typical workflow for web audio would look something like this:</p> - -<ol> - <li>Create audio context</li> - <li>Inside the context, create sources — such as <code><audio></code>, oscillator, stream</li> - <li>Create effects nodes, such as reverb, biquad filter, panner, compressor</li> - <li>Choose final destination of audio, for example your system speakers</li> - <li>Connect the sources up to the effects, and the effects to the destination.</li> -</ol> - -<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12241/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> - -<p>Timing is controlled with high precision and low latency, allowing developers to write code that responds accurately to events and is able to target specific samples, even at a high sample rate. So applications such as drum machines and sequencers are well within reach.</p> - -<p>The Web Audio API also allows us to control how audio is <em>spatialized</em>. Using a system based on a <em>source-listener model</em>, it allows control of the <em>panning model</em> and deals with <em>distance-induced attenuation</em> or <em>doppler shift</em> induced by a moving source (or moving listener).</p> - -<div class="note"> -<p>You can read about the theory of the Web Audio API in a lot more detail in our article <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a>.</p> -</div> - -<h2 id="Interfaces_de_API_de_Áudio_da_Web">Interfaces de API de Áudio da <em>Web</em></h2> - -<p>The Web Audio API has a number of interfaces and associated events, which we have split up into nine categories of functionality.</p> - -<h3 id="General_audio_graph_definition">General audio graph definition</h3> - -<p>General containers and definitions that shape audio graphs in Web Audio API usage.</p> - -<dl> - <dt>{{domxref("AudioContext")}}</dt> - <dd>The <strong><code>AudioContext</code></strong> interface represents an audio-processing graph built from audio modules linked together, each represented by an {{domxref("AudioNode")}}. An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an <code>AudioContext</code> before you do anything else, as everything happens inside a context.</dd> - <dt>{{domxref("AudioNode")}}</dt> - <dd>The <strong><code>AudioNode</code></strong><strong> </strong>interface represents an audio-processing module like an <em>audio source</em> (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element), <em>audio destination</em>, <em>intermediate processing module</em> (e.g. a filter like {{domxref("BiquadFilterNode")}}, or <em>volume control</em> like {{domxref("GainNode")}}).</dd> - <dt>{{domxref("AudioParam")}}</dt> - <dd>The <strong><code>AudioParam</code></strong><strong> </strong>interface represents an audio-related parameter, like one of an {{domxref("AudioNode")}}. It can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern.</dd> - <dt>The {{event("ended")}} event</dt> - <dd>The <code>ended</code> event is fired when playback has stopped because the end of the media was reached.</dd> -</dl> - -<h3 id="Defining_audio_sources">Defining audio sources</h3> - -<p>Interfaces that define audio sources for use in the Web Audio API.</p> - -<dl> - <dt>{{domxref("OscillatorNode")}}</dt> - <dd>The <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>interface represents a periodic waveform, such as a sine or triangle wave. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>frequency</em> of wave to be created.</dd> - <dt>{{domxref("AudioBuffer")}}</dt> - <dd>The <strong><code>AudioBuffer</code></strong> interface represents a short audio asset residing in memory, created from an audio file using the {{ domxref("AudioContext.decodeAudioData()") }} method, or created with raw data using {{ domxref("AudioContext.createBuffer()") }}. Once decoded into this form, the audio can then be put into an {{ domxref("AudioBufferSourceNode") }}.</dd> - <dt>{{domxref("AudioBufferSourceNode")}}</dt> - <dd>The <strong><code>AudioBufferSourceNode</code></strong> interface represents an audio source consisting of in-memory audio data, stored in an {{domxref("AudioBuffer")}}. It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> - <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> - <dd>The <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of an HTML5 {{ htmlelement("audio") }} or {{ htmlelement("video") }} element. It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> - <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> - <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> interface represents an audio source consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (such as a webcam, microphone, or a stream being sent from a remote computer). It is an {{domxref("AudioNode")}} that acts as an audio source.</dd> -</dl> - -<h3 id="Defining_audio_effects_filters">Defining audio effects filters</h3> - -<p>Interfaces for defining effects that you want to apply to your audio sources.</p> - -<dl> - <dt>{{domxref("BiquadFilterNode")}}</dt> - <dd>The <strong><code>BiquadFilterNode</code></strong><strong> </strong>interface represents a simple low-order filter. It is an {{domxref("AudioNode")}} that can represent different kinds of filters, tone control devices, or graphic equalizers. A <code>BiquadFilterNode</code> always has exactly one input and one output.</dd> - <dt>{{domxref("ConvolverNode")}}</dt> - <dd>The <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>interface is an <span style="line-height: 1.5;">{{domxref("AudioNode")}} that</span><span style="line-height: 1.5;"> performs a Linear Convolution on a given {{domxref("AudioBuffer")}}, and is often used to achieve a reverb effect</span><span style="line-height: 1.5;">.</span></dd> - <dt>{{domxref("DelayNode")}}</dt> - <dd>The <strong><code>DelayNode</code></strong><strong> </strong>interface represents a <a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a>; an {{domxref("AudioNode")}} audio-processing module that causes a delay between the arrival of an input data and its propagation to the output.</dd> - <dt>{{domxref("DynamicsCompressorNode")}}</dt> - <dd>The <strong><code>DynamicsCompressorNode</code></strong> interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.</dd> - <dt>{{domxref("GainNode")}}</dt> - <dd>The <strong><code>GainNode</code></strong><strong> </strong>interface represents a change in volume. It is an {{domxref("AudioNode")}} audio-processing module that causes a given <em>gain</em> to be applied to the input data before its propagation to the output.</dd> - <dt>{{domxref("StereoPannerNode")}}</dt> - <dd>The <code><strong>StereoPannerNode</strong></code> interface represents a simple stereo panner node that can be used to pan an audio stream left or right.</dd> - <dt>{{domxref("WaveShaperNode")}}</dt> - <dd>The <strong><code>WaveShaperNode</code></strong><strong> </strong>interface represents a non-linear distorter. It is an {{domxref("AudioNode")}} that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.</dd> - <dt>{{domxref("PeriodicWave")}}</dt> - <dd>Describes a periodic waveform that can be used to shape the output of an {{ domxref("OscillatorNode") }}.</dd> -</dl> - -<h3 id="Defining_audio_destinations">Defining audio destinations</h3> - -<p>Once you are done processing your audio, these interfaces define where to output it.</p> - -<dl> - <dt>{{domxref("AudioDestinationNode")}}</dt> - <dd>The <strong><code>AudioDestinationNode</code></strong> interface represents the end destination of an audio source in a given context — usually the speakers of your device.</dd> - <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt> - <dd>The <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> interface represents an audio destination consisting of a <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} with a single <code>AudioMediaStreamTrack</code>, which can be used in a similar way to a {{domxref("MediaStream")}} obtained from {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}. It is an {{domxref("AudioNode")}} that acts as an audio destination.</dd> -</dl> - -<h3 id="Data_analysis_and_visualization">Data analysis and visualization</h3> - -<p>If you want to extract time, frequency, and other data from your audio, the <code>AnalyserNode</code> is what you need.</p> - -<dl> - <dt>{{domxref("AnalyserNode")}}</dt> - <dd>The <strong><code>AnalyserNode</code></strong> interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.</dd> -</dl> - -<h3 id="Splitting_and_merging_audio_channels">Splitting and merging audio channels</h3> - -<p>To split and merge audio channels, you'll use these interfaces.</p> - -<dl> - <dt>{{domxref("ChannelSplitterNode")}}</dt> - <dd>The <code><strong>ChannelSplitterNode</strong></code> interface separates the different channels of an audio source out into a set of <em>mono</em> outputs.</dd> - <dt>{{domxref("ChannelMergerNode")}}</dt> - <dd>The <code><strong>ChannelMergerNode</strong></code> interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.</dd> -</dl> - -<h3 id="Audio_spatialization">Audio spatialization</h3> - -<p>These interfaces allow you to add audio spatialization panning effects to your audio sources.</p> - -<dl> - <dt>{{domxref("AudioListener")}}</dt> - <dd>The <strong><code>AudioListener</code></strong><strong> </strong>interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.</dd> - <dt>{{domxref("PannerNode")}}</dt> - <dd>The <strong><code>PannerNode</code></strong><strong> </strong>interface represents the behavior of a signal in space. It is an {{domxref("AudioNode")}} audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.</dd> -</dl> - -<h3 id="Audio_processing_in_JavaScript">Audio processing in JavaScript</h3> - -<p>You can write JavaScript code to process audio data. To do so, you use the interfaces and events listed below.</p> - -<div class="note"> -<p>As of the August 29, 2014 version of the Web Audio API spec. these features have been marked as deprecated, and are soon to be replaced by {{ anch("Audio_Workers") }}.</p> -</div> - -<dl> - <dt>{{domxref("ScriptProcessorNode")}}</dt> - <dd>The <strong><code>ScriptProcessorNode</code></strong><strong> </strong>interface allows the generation, processing, or analyzing of audio using JavaScript. It is an {{domxref("AudioNode")}} audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the {{domxref("AudioProcessingEvent")}} interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.</dd> - <dt>{{event("audioprocess")}} (event)</dt> - <dd>The <code>audioprocess</code> event is fired when an input buffer of a Web Audio API {{domxref("ScriptProcessorNode")}} is ready to be processed.</dd> - <dt>{{domxref("AudioProcessingEvent")}}</dt> - <dd>The <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">Web Audio API</a> <code>AudioProcessingEvent</code> represents events that occur when a {{domxref("ScriptProcessorNode")}} input buffer is ready to be processed.</dd> -</dl> - -<h3 id="Offlinebackground_audio_processing">Offline/background audio processing</h3> - -<p>It is possible to process/render an audio graph very quickly in the background — rendering it to an {{domxref("AudioBuffer")}} rather than to the device's speakers — with the following.</p> - -<dl> - <dt>{{domxref("OfflineAudioContext")}}</dt> - <dd>The <strong><code>OfflineAudioContext</code></strong> interface is an {{domxref("AudioContext")}} interface representing an audio-processing graph built from linked together {{domxref("AudioNode")}}s. In contrast with a standard <code>AudioContext</code>, an <code>OfflineAudioContext</code> doesn't really render the audio but rather generates it, <em>as fast as it can</em>, in a buffer.</dd> - <dt>{{event("complete")}} (event)</dt> - <dd>The <code>complete</code> event is fired when the rendering of an {{domxref("OfflineAudioContext")}} is terminated.</dd> - <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt> - <dd>The <code>OfflineAudioCompletionEvent</code> represents events that occur when the processing of an {{domxref("OfflineAudioContext")}} is terminated. The {{event("complete")}} event implements this interface.</dd> -</dl> - -<h3 id="Audio_Workers" name="Audio_Workers">Audio Workers</h3> - -<p>Audio workers provide the ability for direct scripted audio processing to be done inside a <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a> context, and are defined by a couple of interfaces (new as of 29th August 2014). These are not implemented in any browsers yet. When implemented, they will replace {{domxref("ScriptProcessorNode")}}, and the other features discussed in the <a href="#Audio_processing_via_JavaScript">Audio processing in JavaScript</a> section above.</p> - -<dl> - <dt>{{domxref("AudioWorkerNode")}}</dt> - <dd>The AudioWorkerNode interface represents an {{domxref("AudioNode")}} that interacts with a worker thread to generate, process, or analyse audio directly.</dd> - <dt>{{domxref("AudioWorkerGlobalScope")}}</dt> - <dd>The <code>AudioWorkerGlobalScope</code> interface is a <code>DedicatedWorkerGlobalScope</code>-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worker thread.</dd> - <dt>{{domxref("AudioProcessEvent")}}</dt> - <dd>This is an <code>Event</code> object that is dispatched to {{domxref("AudioWorkerGlobalScope")}} objects to perform processing.</dd> -</dl> - -<h2 id="Example" name="Example">Interfaces obsoletas</h2> - -<p>The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.</p> - -<dl> - <dt>{{domxref("JavaScriptNode")}}</dt> - <dd>Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by {{domxref("ScriptProcessorNode")}}.</dd> - <dt>{{domxref("WaveTableNode")}}</dt> - <dd>Used to define a periodic waveform. This interface is obsolete, and has been replaced by {{domxref("PeriodicWave")}}.</dd> -</dl> - -<h2 id="Example" name="Example">Exemplo</h2> - -<p>This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> demo (also check out the <a href="https://github.com/mdn/voice-change-o-matic">full source code at Github</a>) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!</p> - -<p>The Web Audio API lines are highlighted; if you want to find out more about what the different methods, etc. do, have a search around the reference pages.</p> - -<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context -// Webkit/blink browsers need prefix, Safari won't work without window. - -var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options -var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options -var mute = document.querySelector('.mute'); // mute button -var drawVisual; // requestAnimationFrame - -var analyser = audioCtx.createAnalyser(); -var distortion = audioCtx.createWaveShaper(); -var gainNode = audioCtx.createGain(); -var biquadFilter = audioCtx.createBiquadFilter(); - -function makeDistortionCurve(amount) { // function to make curve shape for distortion/wave shaper node to use - var k = typeof amount === 'number' ? amount : 50, - n_samples = 44100, - curve = new Float32Array(n_samples), - deg = Math.PI / 180, - i = 0, - x; - for ( ; i < n_samples; ++i ) { - x = i * 2 / n_samples - 1; - curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) ); - } - return curve; -}; - -navigator.getUserMedia ( - // constraints - only audio needed for this app - { - audio: true - }, - - // Success callback - function(stream) { - source = audioCtx.createMediaStreamSource(stream); - source.connect(analyser); - analyser.connect(distortion); - distortion.connect(biquadFilter); - biquadFilter.connect(gainNode); - gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together - - visualize(stream); - voiceChange(); - - }, - - // Error callback - function(err) { - console.log('The following gUM error occured: ' + err); - } -); - -function visualize(stream) { - WIDTH = canvas.width; - HEIGHT = canvas.height; - - var visualSetting = visualSelect.value; - console.log(visualSetting); - - if(visualSetting == "sinewave") { - analyser.fftSize = 2048; - var bufferLength = analyser.frequencyBinCount; // half the FFT value - var dataArray = new Uint8Array(bufferLength); // create an array to store the data - - canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); - - function draw() { - - drawVisual = requestAnimationFrame(draw); - - analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above - - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // draw wave with canvas - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); - - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; - - canvasCtx.beginPath(); - - var sliceWidth = WIDTH * 1.0 / bufferLength; - var x = 0; - - for(var i = 0; i < bufferLength; i++) { - - var v = dataArray[i] / 128.0; - var y = v * HEIGHT/2; - - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } - - x += sliceWidth; - } - - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; - - draw(); - - } else if(visualSetting == "off") { - canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); - canvasCtx.fillStyle = "red"; - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); - } - -} - -function voiceChange() { - distortion.curve = new Float32Array; - biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run - - var voiceSetting = voiceSelect.value; - console.log(voiceSetting); - - if(voiceSetting == "distortion") { - distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node - } else if(voiceSetting == "biquad") { - biquadFilter.type = "lowshelf"; - biquadFilter.frequency.value = 1000; - biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad - } else if(voiceSetting == "off") { - console.log("Voice settings turned off"); // do nothing, as off option was chosen - } - -} - -// event listeners to change visualize and voice settings - -visualSelect.onchange = function() { - window.cancelAnimationFrame(drawVisual); - visualize(stream); -} - -voiceSelect.onchange = function() { - voiceChange(); -} - -mute.onclick = voiceMute; - -function voiceMute() { // toggle to mute and unmute sound - if(mute.id == "") { - gainNode.gain.value = 0; // gain set to 0 to mute sound - mute.id = "activated"; - mute.innerHTML = "Unmute"; - } else { - gainNode.gain.value = 1; // gain set to 1 to unmute sound - mute.id = ""; - mute.innerHTML = "Mute"; - } -} -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>14 {{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>23</td> - <td>{{CompatNo}}</td> - <td>15 {{property_prefix("webkit")}}<br> - 22 (unprefixed)</td> - <td>6 {{property_prefix("webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>28 {{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>25</td> - <td>1.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>6 {{property_prefix("webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> - <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li> - <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li> - <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li> - <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> - <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li> - <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> - <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li> -</ul> - -<section id="Quick_Links"> -<h3 id="Hiperligações_Rápidas">Hiperligações Rápidas</h3> - -<ol> - <li data-default-state="open"><strong><a href="#">Guias</a></strong> - - <ol> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">Exemplos</a></strong> - <ol> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Simple synth keyboard</a></li> - <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li> - <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li> - </ol> - </li> - <li data-default-state="open"><strong><a href="#">Interfaces</a></strong> - <ol> - <li>{{domxref("AnalyserNode")}}</li> - <li>{{domxref("AudioBuffer")}}</li> - <li>{{domxref("AudioBufferSourceNode")}}</li> - <li>{{domxref("AudioContext")}}</li> - <li>{{domxref("AudioDestinationNode")}}</li> - <li>{{domxref("AudioListener")}}</li> - <li>{{domxref("AudioNode")}}</li> - <li>{{domxref("AudioParam")}}</li> - <li>{{event("audioprocess")}} (event)</li> - <li>{{domxref("AudioProcessingEvent")}}</li> - <li>{{domxref("BiquadFilterNode")}}</li> - <li>{{domxref("ChannelMergerNode")}}</li> - <li>{{domxref("ChannelSplitterNode")}}</li> - <li>{{event("complete")}} (event)</li> - <li>{{domxref("ConvolverNode")}}</li> - <li>{{domxref("DelayNode")}}</li> - <li>{{domxref("DynamicsCompressorNode")}}</li> - <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li> - <li>{{domxref("GainNode")}}</li> - <li>{{domxref("MediaElementAudioSourceNode")}}</li> - <li>{{domxref("MediaStreamAudioDestinationNode")}}</li> - <li>{{domxref("MediaStreamAudioSourceNode")}}</li> - <li>{{domxref("OfflineAudioCompletionEvent")}}</li> - <li>{{domxref("OfflineAudioContext")}}</li> - <li>{{domxref("OscillatorNode")}}</li> - <li>{{domxref("PannerNode")}}</li> - <li>{{domxref("PeriodicWave")}}</li> - <li>{{domxref("ScriptProcessorNode")}}</li> - <li>{{domxref("WaveShaperNode")}}</li> - </ol> - </li> -</ol> -</section> diff --git a/files/pt-pt/web/api/web_audio_api/using_web_audio_api/index.html b/files/pt-pt/web/api/web_audio_api/using_web_audio_api/index.html deleted file mode 100644 index b4c7daf6c4..0000000000 --- a/files/pt-pt/web/api/web_audio_api/using_web_audio_api/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: Utilizar a API de Áudio da Web -slug: Web/API/Web_Audio_API/Using_Web_Audio_API -tags: - - API - - API de Áudio da Web - - Guía - - Referencia - - Utilização - - básicos -translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API -original_slug: Web/API/Web_Audio_API/Utilizar_api_audio_web ---- -<div>{{DefaultAPISidebar("Web Audio API")}}</div> - -<div class="summary"> -<p>Vamos ver como começar a utilizar a API de Áudio da Web. Nós iremos ver resumidamente alguns conceitos, e depois estudar um exemplo simples de caixa de som que nos permite carregar uma faixa de áudio, reproduzi-la e pausá-la, e alterar o seu volume e <em>panning</em> estéreo<span class="seoSummary">.</span></p> -</div> - -<div> -<p>The Web Audio API does not replace the <a href="/en-US/docs/Web/HTML/Element/audio"><audio></a> media element, but rather complements it, just like <a href="/en-US/docs/Web/HTML/Element/canvas"><canvas></a> coexists alongside the <a href="/en-US/docs/Web/HTML/Element/Img"><img></a> element. Your use case will determine what tools you use to implement audio. If you simply want to control playback of an audio track, the <audio> media element provides a better, quicker solution than the Web Audio API. If you want to carry out more complex audio processing, as well as playback, the Web Audio API provides much more power and control.</p> - -<p>A powerful feature of the Web Audio API is that it does not have a strict "sound call limitation". For example, there is no ceiling of 32 or 64 sound calls at one time. Some processors may be capable of playing more than 1,000 simultaneous sounds without stuttering.</p> -</div> - -<h2 id="Código_exemplo">Código exemplo</h2> - -<p>A nossa caixa de música parece-se com isto:</p> - -<p><img alt="A boombox with play, pan, and volume controls" src="https://mdn.mozillademos.org/files/16197/boombox.png" style="border-style: solid; border-width: 1px; height: 646px; width: 1200px;"></p> - -<p>Note the retro cassette deck with a play button, and vol and pan sliders to allow you to alter the volume and stereo panning. We could make this a lot more complex, but this is ideal for simple learning at this stage.</p> - -<p><a href="https://codepen.io/Rumyra/pen/qyMzqN/">Check out the final demo here on Codepen</a>, or see the <a href="https://github.com/mdn/webaudio-examples/tree/master/audio-basics">source code on GitHub</a>.</p> - -<h2 id="Suporte_para_navegador">Suporte para navegador</h2> - -<p>Modern browsers have good support for most features of the Web Audio API. There are a lot of features of the API, so for more exact information, you'll have to check the browser compatibility tables at the bottom of each reference page.</p> - -<h2 id="Gráficos_de_áudio">Gráficos de áudio</h2> - -<p>Everything within the Web Audio API is based around the concept of an audio graph, which is made up of nodes.</p> - -<p>The Web Audio API handles audio operations inside an <strong>audio context</strong>, and has been designed to allow <strong>modular routing</strong>. Basic audio operations are performed with <strong>audio nodes</strong>, which are linked together to form an <strong>audio routing graph</strong>. You have input nodes, which are the source of the sounds you are manipulating, modification nodes that change those sounds as desired, and output nodes (destinations), which allow you to save or hear those sounds.</p> - -<p>Several audio sources with different channel layouts are supported, even within a single context. Because of this modular design, you can create complex audio functions with dynamic effects.</p> - -<h2 id="Contxeto_de_Áudio">Contxeto de Áudio</h2> - -<p>To be able to do anything with the Web Audio API, we need to create an instance of the audio context. This then gives us access to all the features and functionality of the API.</p> - -<pre class="brush: js">// for legacy browsers -const AudioContext = window.AudioContext || window.webkitAudioContext; - -const audioCtx = new AudioContext(); -</pre> - -<p>So what's going on when we do this? A {{domxref("BaseAudioContext")}} is created for us automatically and extended to an online audio context. We'll want this because we're looking to play live sound.</p> - -<div class="note"> -<p><strong>Note</strong>: If you just want to process audio data, for instance, buffer and stream it but not play it, you might want to look into creating an {{domxref("OfflineAudioContext")}}.</p> -</div> - -<h2 id="Carregar_som">Carregar som</h2> - -<p>Now, the audio context we've created needs some sound to play through it. There are a few ways to do this with the API. Let's begin with a simple method — as we have a boombox, we most likely want to play a full song track. Also, for accessibility, it's nice to expose that track in the DOM. We'll expose the song on the page using an {{htmlelement("audio")}} element.</p> - -<pre class="brush: html"><audio src="myCoolTrack.mp3" type="audio/mpeg"></audio> -</pre> - -<div class="note"> -<p><strong>Nota</strong>: If the sound file you're loading is held on a different domain you will need to use the <code>crossorigin</code> attribute; see <a href="/en-US/docs/Web/HTTP/CORS">Cross Origin Resource Sharing (CORS)</a> for more information.</p> -</div> - -<p>To use all the nice things we get with the Web Audio API, we need to grab the source from this element and <em>pipe</em> it into the context we have created. Lucky for us there's a method that allows us to do just that — {{domxref("AudioContext.createMediaElementSource")}}:</p> - -<pre class="brush: js">// get the audio element -const audioElement = document.querySelector('audio'); - -// pass it into the audio context -const track = audioCtx.createMediaElementSource(audioElement); -</pre> - -<div class="note"> -<p><strong>Nota</strong>: The <code><audio></code> element above is represented in the DOM by an object of type {{domxref("HTMLMediaElement")}}, which comes with its own set of functionality. All of this has stayed intact; we are merely allowing the sound to be available to the Web Audio API.</p> -</div> - -<h2 id="Controlar_o_som">Controlar o som</h2> - -<p>When playing sound on the web, it's important to allow the user to control it. Depending on the use case, there's a myriad of options, but we'll provide functionality to play/pause the sound, alter the track's volume, and pan it from left to right.</p> - -<div class="note"> -<p><strong>Nota</strong>: We need to take into account the new autoplay policy that modern browsers have, which calls for a user gesture before media can play (see Chrome's <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes">Autoplay Policy Changes</a>, for example). This has been implemented because autoplaying media is really bad for many reasons — it is annoying and intrusive at the very least, and also causes accessibility problems. This is accounted for by our play/pause button.</p> -</div> - -<p>Let's take a look at our play and pause functionality to start with. We have a play button that changes to a pause button when the track is playing:</p> - -<pre class="brush: html"><button data-playing="false" role="switch" aria-checked="false"> - <span>Play/Pause</span> -</button> -</pre> - -<p>Before we can play our track we need to connect our audio graph from the audio source/input node to the destination.</p> - -<p>We've already created an input node by passing our audio element into the API. For the most part, you don't need to create an output node, you can just connect your other nodes to {{domxref("BaseAudioContext.destination")}}, which handles the situation for you:</p> - -<pre class="brush: js">track.connect(audioCtx.destination); -</pre> - -<p>A good way to visualise these nodes is by drawing an audio graph so you can visualize it. This is what our current audio graph looks like:</p> - -<p><img alt="an audio graph with an audio element source connected to the default destination" src="https://mdn.mozillademos.org/files/16195/graph1.jpg" style="border-style: solid; border-width: 1px; height: 486px; width: 1426px;"></p> - -<p>Now we can add the play and pause functionality.</p> - -<pre class="brush: js">// select our play button -const playButton = document.querySelector('button'); - -playButton.addEventListener('click', function() { - - // check if context is in suspended state (autoplay policy) - if (audioCtx.state === 'suspended') { - audioCtx.resume(); - } - - // play or pause track depending on state - if (this.dataset.playing === 'false') { - audioElement.play(); - this.dataset.playing = 'true'; - } else if (this.dataset.playing === 'true') { - audioElement.pause(); - this.dataset.playing = 'false'; - } - -}, false); -</pre> - -<p>We also need to take into account what to do when the track finishes playing. Our <code>HTMLMediaElement</code> fires an <code>ended</code> event once it's finished playing, so we can listen for that and run code accordingly:</p> - -<pre class="brush: js">audioElement.addEventListener('ended', () => { - playButton.dataset.playing = 'false'; -}, false); -</pre> - -<h2 id="Um_aparte_sobre_o_editor_de_Áudio_da_Web">Um aparte sobre o editor de Áudio da Web</h2> - -<p>Firefox has a tool available called the <a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio editor</a>. On any page that has an audio graph running on it, you can open the developer tools, and use the Web Audio tab to view the audio graph, see what properties each node has available, and change the values of those properties to see what effect that has.</p> - -<p><img alt="The Firefox web audio editor showing an audio graph with AudioBufferSource, IIRFilter, and AudioDestination" src="https://mdn.mozillademos.org/files/16198/web-audio-editor.png" style="border-style: solid; border-width: 1px; height: 365px; width: 1200px;"></p> - -<div class="note"> -<p><strong>Nota</strong>: The Web Audio editor is not enabled by default. To display it, you need to go into the Firefox developer tools settings and check the <em>Web Audio</em> checkbox in the <em>Default Developer Tools</em> section.</p> -</div> - -<h2 id="Modificar_o_som">Modificar o som</h2> - -<p>Let's delve into some basic modification nodes, to change the sound that we have. This is where the Web Audio API really starts to come in handy. First of all, let's change the volume. This can be done using a {{domxref("GainNode")}}, which represents how big our sound wave is.</p> - -<p>There are two ways you can create nodes with the Web Audio API. You can use the factory method on the context itself (e.g. <code>audioCtx.createGain()</code>) or via a constructor of the node (e.g. <code>new GainNode()</code>). We'll use the factory method in our code:</p> - -<pre class="brush: js">const gainNode = audioCtx.createGain(); -</pre> - -<p>Now we have to update our audio graph from before, so the input is connected to the gain, then the gain node is connected to the destination:</p> - -<pre class="brush: js">track.connect(gainNode).connect(audioCtx.destination); -</pre> - -<p>This will make our audio graph look like this:</p> - -<p><img alt="an audio graph with an audio element source, connected to a gain node that modifies the audio source, and then going to the default destination" src="https://mdn.mozillademos.org/files/16196/graph2.jpg" style="border-style: solid; border-width: 1px; height: 550px; width: 1774px;"></p> - -<p>The default value for gain is 1; this keeps the current volume the same. Gain can be set to a minimum of about -3.4 and a max of about 3.4. Here we'll allow the boombox to move the gain up to 2 (double the original volume) and down to 0 (this will effectively mute our sound).</p> - -<p>Let's give the user control to do this — we'll use a <a href="/en-US/docs/Web/HTML/Element/input/range">range input</a>:</p> - -<pre class="brush: html"><input type="range" id="volume" min="0" max="2" value="1" step="0.01" /> -</pre> - -<div class="note"> -<p><strong>Nota</strong>: Range inputs are a really handy input type for updating values on audio nodes. You can specify a range's values and use them directly with the audio node's parameters.</p> -</div> - -<p>So let's grab this input's value and update the gain value when the input node has its value changed by the user:</p> - -<pre class="brush: js">const volumeControl = document.querySelector('#volume'); - -volumeControl.addEventListener('input', function() { - gainNode.gain.value = this.value; -}, false); -</pre> - -<div class="note"> -<p><strong>Nota</strong>: The values of node objects (e.g. <code>GainNode.gain</code>) are not simple values; they are actually objects of type {{domxref("AudioParam")}} — these called parameters. This is why we have to set <code>GainNode.gain</code>'s <code>value</code> property, rather than just setting the value on <code>gain</code> directly. This enables them to be much more flexible, allowing for passing the parameter a specific set of values to change between over a set period of time, for example.</p> -</div> - -<p>Great, now the user can update the track's volume! The gain node is the perfect node to use if you want to add mute functionality.</p> - -<h2 id="Adicionar_panning_estéreo_à_sua_aplicação">Adicionar <em>panning</em> estéreo à sua aplicação</h2> - -<p>Let's add another modification node to practise what we've just learnt.</p> - -<p>There's a {{domxref("StereoPannerNode")}} node, which changes the balance of the sound between the left and right speakers, if the user has stereo capabilities.</p> - -<p>Note: The <code>StereoPannerNode</code> is for simple cases in which you just want stereo panning from left to right. There is also a {{domxref("PannerNode")}}, which allows for a great deal of control over 3D space, or sound <em>spatialisation</em>, for creating more complex effects. This is used in games and 3D apps to create birds flying overhead, or sound coming from behind the user for instance.</p> - -<p>To visualise it, we will be making our audio graph look like this:</p> - -<p><img alt="An image showing the audio graph showing an input node, two modification nodes (a gain node and a stereo panner node) and a destination node." src="https://mdn.mozillademos.org/files/16229/graphPan.jpg" style="border-style: solid; border-width: 1px; height: 532px; width: 2236px;"></p> - -<p>Let's use the constructor method of creating a node this time. When we do it this way, we have to pass in the context and any options that that particular node may take:</p> - -<pre class="brush: js">const pannerOptions = {pan: 0}; -const panner = new StereoPannerNode(audioCtx, pannerOptions); -</pre> - -<div class="note"> -<p><strong>Nota</strong>: The constructor method of creating nodes is not supported by all browsers at this time. The older factory methods are supported more widely.</p> -</div> - -<p>Here our values range from -1 (far left) and 1 (far right). Again let's use a range type input to vary this parameter:</p> - -<pre class="brush: html"><input type="range" id="panner" min="-1" max="1" value="0" step="0.01" /> -</pre> - -<p>We use the values from that input to adjust our panner values in the same way as we did before:</p> - -<pre class="brush: js">const pannerControl = document.querySelector('#panner'); - -pannerControl.addEventListener('input', function() { - panner.pan.value = this.value; -}, false); -</pre> - -<p>Let's adjust our audio graph again, to connect all the nodes together:</p> - -<pre class="brush: js">track.connect(gainNode).connect(panner).connect(audioCtx.destination); -</pre> - -<p>The only thing left to do is give the app a try: <a href="https://codepen.io/Rumyra/pen/qyMzqN/">Check out the final demo here on Codepen</a>.</p> - -<h2 id="Resumo">Resumo</h2> - -<p>Great! We have a boombox that plays our 'tape', and we can adjust the volume and stereo panning, giving us a fairly basic working audio graph.</p> - -<p>This makes up quite a few basics that you would need to start to add audio to your website or web app. There's a lot more functionality to the Web Audio API, but once you've grasped the concept of nodes and putting your audio graph together, we can move on to looking at more complex functionality.</p> - -<h2 id="Mais_exemplos">Mais exemplos</h2> - -<p>There are other examples available to learn more about the Web Audio API.</p> - -<p>The <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a> is a fun voice manipulator and sound visualization web app that allows you to choose different effects and visualizations. The application is fairly rudimentary, but it demonstrates the simultaneous use of multiple Web Audio API features. (<a href="https://mdn.github.io/voice-change-o-matic/">run the Voice-change-O-matic live</a>).</p> - -<p><img alt="A UI with a sound wave being shown, and options for choosing voice effects and visualizations." src="https://mdn.mozillademos.org/files/7921/voice-change-o-matic.png" style="border-style: solid; border-width: 1px; display: block; height: 500px; margin: 0px auto; width: 640px;"></p> - -<p>Another application developed specifically to demonstrate the Web Audio API is the <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, a simple web application that allows you to change pitch and volume by moving your mouse pointer. It also provides a psychedelic lightshow (<a href="https://github.com/mdn/violent-theremin">see Violent Theremin source code</a>).</p> - -<p><img alt="A page full of rainbow colours, with two buttons labeled Clear screen and mute. " src="https://mdn.mozillademos.org/files/7919/violent-theremin.png" style="border-style: solid; border-width: 1px; display: block; height: 458px; margin: 0px auto; width: 640px;"></p> - -<p>Consulte também a nossa <a href="https://github.com/mdn/webaudio-examples">repositório de exemplos de áudio</a> para mais exemplos.</p> diff --git a/files/pt-pt/web/api/web_authentication_api/index.html b/files/pt-pt/web/api/web_authentication_api/index.html deleted file mode 100644 index 65a1bf21aa..0000000000 --- a/files/pt-pt/web/api/web_authentication_api/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: APi de Autenticação da Web -slug: Web/API/Web_Authentication_API -tags: - - API - - API de Autenticação da Web - - Landing - - Referencia -translation_of: Web/API/Web_Authentication_API -original_slug: Web/API/API_Autenticacao_Web ---- -<div>{{draft}}{{SeeCompatTable}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}</div> - -<p class="summary">A "API de Autenticação da Web" é uma extensão de <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a> que permite uma autenticação forte com a criptografia de chave pública, permitindo a autenticação sem palavra-passe e/ou autenticação de segundo fator segura sem textos de SMS.</p> - -<h2 id="Conceitos_e_utilização_da_autenticação_da_Web">Conceitos e utilização da autenticação da Web</h2> - -<p>The Web Authtentication API (also referred to as WebAuthn) uses <a href="https://en.wikipedia.org/wiki/Public-key_cryptography">asymmetric (public-key) cryptography</a> instead of passwords or SMS texts for registering, authenticating, and <a href="https://en.wikipedia.org/wiki/Multi-factor_authentication">second-factor authentication</a> with websites. This resolves significant security problems related to <a href="https://en.wikipedia.org/wiki/Phishing">phishing</a>, <a href="https://en.wikipedia.org/wiki/Data_breach">data breaches</a>, and attacks against SMS texts or other second-factor authentication methods while at the same time significantly increasing ease of use (since users don't have to manage dozens of increasingly complicated passwords).</p> - -<p>Many websites already have pages that allow users to register new accounts or sign in to an existing account, and WebAuthn acts as a replacement or suppliment to those on those existing webpages. Similar to the other forms of the <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a>, the Web Authentication API has two basic methods that correspond to register and login:</p> - -<ul> - <li><a href="/en-US/docs/Web/API/CredentialsContainer/create">navigator.credentials.create()</a> - when used with the publicKey option, creates new credentials, either for registering a new account or for associating a new asymmetric key pair credentials with an existing account.</li> - <li><a href="/en-US/docs/Web/API/CredentialsContainer/get">navigator.credentials.get()</a> - when used with the publicKey option, uses an existing set of credentials to authenticate to a service, either logging a user in or as a form of second-factor authentication.</li> -</ul> - -<p><strong>Por favor, note:</strong> both create() and get() require a <a href="/en-US/docs/Web/Security/Secure_Contexts">Secure Context</a> (e.g. - the server is connected by https or is the localhost), and will not be available for use if the browser is not operating in a secure context.</p> - -<p>In their most basic forms, both create() and get() receive a very large random number called a challenge from the server and they return the challenge signed by the private key back to the server. This proves to the server that a user is in possession of the private key required for authentication without revealing any secrets over the network.</p> - -<p>In order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the browser:</p> - -<ol> - <li><strong>Servidor</strong> - the WebAuthn API is intended to register new credentials on a server (also referred to as a service or a <a href="https://en.wikipedia.org/wiki/Relying_party">relying party</a>) and later use those same credentials on that same server to authenticate a user.</li> - <li><strong>Autenticador</strong> - the credentials are created and stored in a device called an authenticator. This is a new concept in authentication: when authenticating using passwords, the password is stored in a user's brain and no other device is needed; when authenticating using WebAuthn, the password is replaced with a key pair that is stored in an authenticator. The authenticator may be embedded into an operating system, such as Windows Hello, or may be a physical token, such as a USB or Bluetooth Security Key.</li> -</ol> - -<h3 id="Registo">Registo</h3> - -<p>A typical registration process has six steps, as illustrated in Figure 1 and described further below. This is a simplification of the data required for the registration process that is only intended to provide an overview. The full set of required fields, optional fields, and their meanings for creating a registration request can be found in the {{domxref("PublicKeyCredentialCreationOptions")}} dictionary. Likewise, the full set of response fields can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAttestationResponse")}} interface). Note most JavaScript programmers that are creating an application will only really care about steps 1 and 5 where the create() function is called and subsequently returns; however, steps 2, 3, and 4 are essential to understanding the processing that takes place in the browser and authenticator and what the resulting data means.</p> - -<p><img alt="WebAuthn registration component and dataflow diagram" src="https://mdn.mozillademos.org/files/15801/MDN%20Webauthn%20Registration%20(r3).png" style="height: 546px; width: 1118px;"></p> - -<p><em>Figura 1 - a diagram showing the sequence of actions for a WebAuthn registration and the essential data associated with each action.</em></p> - -<p>Os passos de registo são:</p> - -<ol start="0"> - <li><strong>Registo de Pedidos da Aplicação</strong> - The application makes the initial registration request. The protocol and format of this request is outside of the scope of WebAuthn.</li> - <li><strong>Servidor Envia Desafio, Informação do Utilziador, e Envio de Informação de Confiança </strong>- The server sends a challenge, user information, and relying party information to the JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of WebAuthn. Typically, server communications would be <a href="/en-US/docs/Glossary/REST">REST</a> over https (probably using <a href="/en-US/docs/User:maybe/webidl_mdn/XMLHttpRequest_API">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>), but they could also be <a href="/en-US/docs/Glossary/SOAP">SOAP</a>, <a href="https://tools.ietf.org/html/rfc2549">RFC 2549</a> or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the <a href="/en-US/docs/Web/API/CredentialsContainer/create">create()</a> call, typically with little or no modification and returns a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> that will resolve to a {{domxref("PublicKeyCredential")}} containing an {{domxref("AuthenticatorAttestationResponse")}}. <strong>Note that it is absolutely critical that the challenge be a large buffer of random information (e.g. - more than 100 bytes) and it MUST be generated on the server in order to ensure the security of the registration process.</strong></li> - <li><strong>Navegador Chama o authenticatorMakeCredential() no Autenticador</strong> - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).</li> - <li><strong>Autenticador Cria Novo Par de Chave e Certificação </strong>- Before doing anything, the authenticator will typically ask for some form of user verficiation. This could be entering a PIN, using a fingerprint, doing an iris scan, etc. to prove that the user is present and consenting of the registration. After the user verification, the authenticator will create a new asymmetric key pair and safely store the private key for future reference. The public key will become part of the attestation, which the authtenticator will sign over with a private key that was burned into the authenticator during its manufacturing process and that has a certificate chain that can be validated back to a root of trust.</li> - <li><strong>Autenticador Devolve os Dados para o Navegador </strong>- The new public key, a globally unique credential id, and other attestation data are returned to the browser where they become the attestationObject.</li> - <li><strong>Navegador Cria os Dados Finais, a Aplicação envia a resposta para o Servidor</strong> - The create() Promise resolves to an {{domxref("PublicKeyCredential")}}, which has a {{domxref("PublicKeyCredential.rawId")}} that is the globally unique credential id along with a response that is the {{domxref("AuthenticatorAttestationResponse")}} containing the {{domxref("AuthenticatorResponse.clientDataJSON")}} and {{domxref("AuthenticatorAttestationResponse.attestationObject")}}. The {{domxref("PublicKeyCredential")}} is sent back to the server using any desired formatting and protocol (note that the ArrayBuffer properties need to be be base64 encoded or similar).</li> - <li><strong>Servidor Valida e Finaliza o Registo</strong> - Finally, the server is required to perform a series of checks to ensure that the registration was complete and not tampered with. These include: - <ol> - <li>Verifying that the challenge is the same as the challenge that was sent</li> - <li>Ensuring that the origin was the origin expected</li> - <li>Validating that the signature over the clientDataHash and the attestation using the certificate chain for that specific model of authenticator</li> - </ol> - A complete list of validation steps <a href="https://w3c.github.io/webauthn/#registering-a-new-credential">can be found in the WebAuthn specification</a>. Assuming that the checks pan out, the server will store the new public key associated with the user's account for future use -- that is, whenever the user desires to use the public key for authentication.</li> -</ol> - -<h3 id="Autenticação">Autenticação</h3> - -<p>After a user has registered with WebAuthn, they can subsequently authenticate (a.k.a. - login or sign-in) with the service. The authentication flow looks similar to the registration flow, and the illustration of actions in Figure 2 may be recognizable as being similar to the illustration of registration actions in Figure 1. The primary differences between registration and authentication are that: 1) authentication doesn't require user or relying party information; and 2) authentication creates an assertion using the previously generated key pair for the service rather than creating an attestation with the key pair that was burned into the authenticator during manufacturing. Again, the discription of authentication below is a broad overview rather than getting into all the options and features of WebAuthn. The specific options for authenticating can be found in the {{domxref("PublicKeyCredentialRequestOptions")}} dictionary, and the resulting data can be found in the {{domxref("PublicKeyCredential")}} interface (where {{domxref("PublicKeyCredential.response")}} is the {{domxref("AuthenticatorAssertionResponse")}} interface) .</p> - -<p><img alt="WebAuthn authentication component and dataflow diagram" src="https://mdn.mozillademos.org/files/15802/MDN%20Webauthn%20Authentication%20(r1).png" style="height: 527px; width: 1067px;"></p> - -<p><em>Figure 2 - similar to Figure 1, a diagram showing the sequence of actions for a WebAuthn authentication and the essential data associated with each action.</em></p> - -<ol start="0"> - <li><strong>Auyenticação dos Pedidos da Aplicação</strong> - The application makes the initial authentication request. The protocol and format of this request is outside of the scope of WebAuthn.</li> - <li><strong>Servidor Envia Desafio </strong>- The server sends a challenge JavaScript program. The protocol for communicating with the server is not specified and is outside of the scope of WebAuthn. Typically, server communications would be <a href="/en-US/docs/Glossary/REST">REST</a> over https (probably using <a href="/en-US/docs/User:maybe/webidl_mdn/XMLHttpRequest_API">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>), but they could also be <a href="/en-US/docs/Glossary/SOAP">SOAP</a>, <a href="https://tools.ietf.org/html/rfc2549">RFC 2549</a> or nearly any other protocol provided that the protocol is secure. The parameters received from the server will be passed to the <a href="/en-US/docs/Web/API/CredentialsContainer/get">get()</a> call, typically with little or no modification. <strong>Note that it is absolutely critical that the challenge be a large buffer of random information (e.g. - more than 100 bytes) and it MUST be generated on the server in order to ensure the security of the authentication process.</strong></li> - <li><strong>Navegador Chama o authenticatorGetCredential() no Autenticador</strong> - Internally, the browser will validate the parameters and fill in any defaults, which become the {{domxref("AuthenticatorResponse.clientDataJSON")}}. One of the most important parameters is the origin, which recorded as part of the clientData so that the origin can be verified by the server later. The parameters to the create() call are passed to the authenticator, along with a SHA-256 hash of the clientDataJSON (only a hash is sent because the link to the authenticator may be a low-bandwidth NFC or Bluetooth link and the authenticator is just going to sign over the hash to ensure that it isn't tampered with).</li> - <li><strong>Autenticador Cria uma Certificação </strong> - The authenticator finds a credential for this service that matches the Relying Party ID and prompts a user to consent to the authentication. Assuming both of those steps are successful, the authenticator will create a new assertion by signing over the clientDataHash and authenticatorData with the private key generated for this account during the registration call.</li> - <li><strong>Autenticador Devolve os Dados para o Navegador</strong> - The authenticator returns the authenticatorData and assertion signature back to the browser.</li> - <li><strong>Navegador Cria os Dados Finais, a Aplicação envia a resposta para o Servidor </strong>- The browser resolves the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> to a {{domxref("PublicKeyCredential")}} with a {{domxref("PublicKeyCredential.response")}} that contains the {{domxref("AuthenticatorAssertionResponse")}}. It is up to the JavaScript application to transmit this data back to the server using any protocol and format of its choice.</li> - <li><strong>Servidor Valida e Finaliza a Autenticação </strong>- Upon receiving the result of the authentication request, the server performs validation of the response such as: - <ol> - <li>Using the public key that was stored during the registration request to validate the signature by the authenticator.</li> - <li>Ensuring that the challenge that was signed by the authenticator matches the challenge that was generated by the server.</li> - <li>Checking that the Relying Party ID is the one expected for this service.</li> - </ol> - A full list of the <a href="https://w3c.github.io/webauthn/#verifying-assertion">steps for validating an assertion can be found in the WebAuthn specification</a>. Assuming the validation is successful, the server will note that the user is now authenticated. This is outside the scope of the WebAuthn specification, but one option would be to drop a new cookie for the user session.</li> -</ol> - -<h2 id="Interfaces">Interfaces</h2> - -<dl> - <dt>{{domxref("CredentialsContainer")}}</dt> - <dd>WebAuthn extends the <a href="/en-US/docs/Web/API/Credential_Management_API">Credential Management API</a>'s <a href="/en-US/docs/Web/API/CredentialsContainer/create">create()</a> and <a href="/en-US/docs/Web/API/CredentialsContainer/get">get()</a> methods to take a new option: publicKey. When the publicKey option is passed to create() and / or get(), the Credential Management API will create a new public key pair or get an authentication for a key pair, respectively.</dd> - <dt>{{domxref("PublicKeyCredential")}}</dt> - <dd>A credential for logging in to a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password.</dd> - <dt>{{domxref("AuthenticatorResponse")}}</dt> - <dd>Part of the PublicKeyCredential, the AuthenticatorResponse includes information from the browser (such as the challenge and origin); as well as information from the authenticator such as an AuthenticatorAttestationResponse (for new credentials) or an AuthenticatorAssertionResponse (when authenticating with existing credentials).</dd> - <dt>{{domxref("AuthenticatorAttestationResponse")}}</dt> - <dd>When a PublicKeyCredential has been created with the <a href="/en-US/docs/Web/API/CredentialsContainer/create">create()</a> call, it will include an AuthenticatorAttestationResponse. This is the authenticator's way of providing a cryptographic root of trust for the new key pair that has been generated.</dd> - <dt>{{domxref("AuthenticatorAssertionResponse")}}</dt> - <dd>When a PublicKeyCredential is the result of a <a href="/en-US/docs/Web/API/CredentialsContainer/get">get()</a> call, it will include an AuthenticatorAssertionResponse. This is the authenticator's way of proving to a service that it has the key pair and that the authentication request is valid and approved.</dd> -</dl> - -<h2 id="Opções">Opções</h2> - -<dl> - <dt>{{domxref("PublicKeyCredentialCreationOptions")}}</dt> - <dd>The options for creating a credential via <a href="/en-US/docs/Web/API/CredentialsContainer/create">navigator.credentials.create() </a></dd> - <dt>{{domxref("PublicKeyCredentialRequestOptions")}}</dt> - <dd>The options for using a credential via <a href="/en-US/docs/Web/API/CredentialsContainer/get">navigator.credentials.get() </a></dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<ul> - <li><a class="external" href="https://webauthn.bin.coffee/">Mozilla Demo</a> website and it's <a href="https://github.com/jcjones/webauthn.bin.coffee">source code</a>.</li> - <li><a class="external" href="http://webauthndemo.appspot.com/">Google Demo</a> website and it's <a href="https://github.com/google/webauthndemo">source code</a>.</li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('WebAuthn')}}</td> - <td>{{Spec2('WebAuthn')}}</td> - <td>Definção inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_do_Navegador">Compatibilidade do Navegador</h2> - -<div> -<div> - - -<p>{{Compat("api.PublicKeyCredential")}}</p> -</div> -</div> - -<h2 id="Consulte_também">Consulte também:</h2> - -<ul> - <li><a href="https://www.youtube.com/watch?v=UNI_Ad-9gX8">WebAuthentication and WebPayment demo</a> num dispositivo Android</li> -</ul> diff --git a/files/pt-pt/web/api/web_storage_api/index.html b/files/pt-pt/web/api/web_storage_api/index.html deleted file mode 100644 index 9a4332b272..0000000000 --- a/files/pt-pt/web/api/web_storage_api/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: DOM Storage -slug: Web/API/Web_Storage_API -original_slug: DOM/Storage ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">Resumo</h3> -<p>DOM Storage é o nome dado ao conjunto de características de armazenamento relacionadas (<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">storage-related features</a>) inicialmente apresentadas na especificação <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>, e agora dividida em sua própria especificação <a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. DOM Storage foi desenhado para proporcionar uma alternativa mais segura e fácil de usar, para o armazenamento de informações em cookies. Atualmente ela está disponível somente nos navegadores baseados no Mozilla e WebKit, começando notavelmente com o <a class="internal" href="/pt/Firefox_2_para_desenvolvedores" title="pt/Firefox 2 para desenvolvedores">Firefox 2</a> e o <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p> -<div class="note"> - <strong>Nota:</strong> DOM Storage não é o mesmo que <a href="/en/Storage" title="en/Storage">mozStorage</a> (Interface XPCOM da Mozilla para o SQLite) ou <a href="/en/Session_store_API" title="en/Session_store_API">Session store API</a> (uma ferramenta de armazenamento <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> para uso de extensões).</div> -<h3 id="Description" name="Description">Descrição</h3> -<p>O mecanismo DOM Storage é um meio através do qual pares de strings de chaves/valores podem ser armazenados com segurança e mais tarde recuperados para uso. A meta desta adição é proporcionar um meio compreensível através do qual aplicações interativas possam ser construídas (incluindo habilidades avançadas, tal como ser capaz de trabalhar "offline" por períodos de tempo maiores).</p> -<p>Atualmente, somente navegadores baseados no Mozilla, Internet Explorer 8 beta 2 e Safari (não outros navegadores baseados em webkit, por exemplo, o Google Chrome) proporcionam um trabalho de implementação da especificação do DOM Storage. O Internet Explorer anterior a versão 8 tem uma característica similar chamada "<a class="external" href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">userData behavior</a>" que permite guardar dados através de múltiplas sessões do navegador.</p> -<p>Dom Storage é útil porque não existem métodos diretamente nos navegadores, bons para guardar quantidades de dados razoáveis por qualquer período de tempo. Os cookies do navegador (<a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">Browser cookies</a>) tem uma capacidade limitada e não proporcionam suporte para organizar dados armazenados, e outros métodos (tal como <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage</a>) que requerem um plugin externo.</p> -<p>Umas dos primeiros aplicativos públicos a fazer uso da nova funcionalidade DOM Storage (em adição ao userData Behavior do Internet Explorer) foi o <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (um aplicativo de tomada de notas) escrito por <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a>. Em seu aplicativo, Aaron simultaneamente salvava notas no servidor (quando a conexão a internet estava disponível) e em um armazenamento local de dados. Isto permitia ao usuário escrever seguramente, cópias de notas mesmo com uma conexão esporádica à internet.</p> -<p>Embora o conceito e implementação apresentados no halfnote seja comparativamente simples, sua criação mostra a possibilidade para uma nova geração de aplicativos web que sejam utilizáveis tanto online quanto offline.</p> -<h3 id="Reference" name="Reference">Referência</h3> -<p>A seguir vem objetos globais que existem como propriedades de todos os <a href="/en/DOM/window" title="en/DOM/window"><code>window</code> object</a>. Isto significa que eles podem ser acessados por <code>sessionStorage</code> ou <code>window.sessionStorage</code>. (Isto é importante porque você pode então usar IFrames para armazenar, ou acessar, dados adicionais, além do que está imediatamente incluído em sua página).</p> -<h4 id="sessionStorage" name="sessionStorage"><code>Storage</code></h4> -<p>Este é um construtor (<code>Storage</code>) para todas as instâncias Storage (<code>sessionStorage</code> e <code>globalStorage[location.host]).</code> <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> assim configuradao, pode ser acessado como <code>localStorage.removeKey e sessionStorage.removeKey</code>.</p> -<p><code>Itens globalStorage</code> não são instâncias de <code>Storage</code>, e sim uma instância de <code>StorageObsolete</code>.</p> -<p><code>Storage</code> é definido pelo WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> como:</p> -<pre class="eval">interface <dfn>Storage</dfn> { - readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; - [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); - [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); - [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); - [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); - void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); -};</pre> -<p> </p> -<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4> -<p>Este é um objeto global (<code>sessionStorage</code>) que mantém uma área de armazenamento disponível enquanto durar a sessão da página. Uma sessão de página dura enquanto o navegador estiver aberto e continua mesmo sobre recarregamentos e restaurações. Abrindo uma página em uma nova aba ou janela causará o início de uma nova sessão.</p> -<pre class="eval">// Save data to a the current session's store -sessionStorage.username = "John"; - -// Access some stored data -alert( "username = " + sessionStorage.username ); -</pre> -<p>O objeto <code>sessionStorage</code> é útil para guardar dados temporários que devem ser salvos e restaurados se o navegador for atualizado acidentalmente.</p> -<p>{{ fx_minversion_note("3.5", "Nas versões anteriores ao Firefox 3.5, os dados em sessionStorage não eram restaurados automaticamente depois de recuperar-se de uma quebra no navegador. A partir do Firefox 3.5, isto funciona como na especificação.") }}</p> -<p><strong>Exemplos:</strong></p> -<p>Autosalvar o conteúdo de uma campo de texto, e se o navegador for atualizado acidentalmente , restaurar o conteúdo do campo de texto, não tendo perdas na escrita.</p> -<pre class="eval"> // Get the text field that we're going to track - var field = document.getElementById("field"); - - // See if we have an autosave value - // (this will only happen if the page is accidentally refreshed) - if ( sessionStorage.autosave ) { - // Restore the contents of the text field - field.value = sessionStorage.autosave; - } - - // Check the contents of the text field every second - setInterval(function(){ - // And save the results into the session storage object - sessionStorage.autosave = field.value; - }, 1000); -</pre> -<p><strong>Mais informações:</strong></p> -<ul> - <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li> -</ul> -<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4> -<p>{{ Non-standard_header() }} Este é um objeto global (<code>globalStorage</code>) que mantém múltiplas áreas de armazenamento privadas que podem ser usadas para guardar dados por um longo período de tempo (por exemplo, sobre múltiplas láginas e sessões do navegador).</p> -<div class="warning"> - Nota: <code>globalStorage</code> não é uma instância de <code>Storage</code>, mas uma instância <code>StorageList</code> contendo instâncias <code>StorageObsolete</code>.</div> -<pre class="eval">// Save data that only scripts on the mozilla.org domain can access -globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?"; -</pre> -<p>Especificamente, o objeto <code>globalStorage</code> fornece acesso a um número de diferentes objetos de armazenamento em que os dados sejam armazenados. Por exemplo, se construirmos uma página web que use <code>globalStorage</code> em seu domínio (developer.mozilla.org) é necessário termos o objeto de armazenamento a seguir disponível para nós:</p> -<ul> - <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - Todas as páginas web com o subdomínio developer.mozilla.org podem tanto ler quanto escrever dados neste objeto de armazenamento.</li> -</ul> -<p>{{ Fx_minversion_note(3, "O Firefox 2 passou a permitir acesso aos objetos de armazenamento superiores ao documento corrente na hierarquia do domínio. Por razões de segurança isto não é mais permitido no Firefox 3. Além disso, a proposta de adição ao HTML 5 foi removida da especificação do HTML 5 em favor de <code>localStorage</code>, que foi implementado no Firefox 3.5.") }}</p> -<p><strong>Exemplos:</strong></p> -<p>Todos estes exemplos requerem que você tenha uns script inserido (com o código seguinte) em todas as páginas que você quiser ver o resultado.</p> -<p>Lembrar o nome de usuário para o subdomínio particular que está sendo visitado:</p> -<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John"; -</pre> -<p>Manter o número de vezes que um usuário visitou todas as páginas do seu domínio:</p> -<pre class="eval"> // parseInt must be used since all data is stored as a string - globalStorage['mozilla.org'].visits = - parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1; -</pre> -<h4 id="globalStorage" name="globalStorage"><code>localStorage</code></h4> -<p><code>localStorage</code> é o mesmo que <code>globalStorage[location.hostname]</code>, com a exceção de ser projetado para a origem do HTML 5 (esquema + nome do host + porta não padrão) e <code>localStorage</code> é uma instância de <code>Storage</code> diferente de <code>globalStorage[location.hostname]</code> que é uma instância de <code>StorageObsolete</code>. Por exemplo, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> não está disponível para acessar o mesmo objeto <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> mas eles podem acessar o mesmo item <code>globalStorage</code>. <code>localStorage</code> é uma interface padrão enquanto <code>globalStorage</code> não é padrão. <code>localStorage</code> foi adicionada ao Firefox 3.5.</p> -<p>Por favor, note que configurar a propriedade <code>globalStorage[location.hostname]</code> <strong>não</strong> a configura em <code>localStorage</code> e por extensão <code>Storage.prototype</code> não afeta itens <code>globalStorage</code>, somente extendendo o que <code>StorageObsolete.prototype</code> faz.</p> -<div class="note"> - <strong>Nota:</strong> Quando o navegador entra em modo de navegação privada, um novo banco de dados temporário é criado para guardar dados de armazenamento local; este banco de dados é vazio, e é jogado fora qunado o modo de navegação privado é desativado.</div> -<h3 id="More_information" name="More_information">Mais informações</h3> -<ul> - <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> - <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> -</ul> -<h3 id="Examples" name="Examples">Exemplos</h3> -<ul> - <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Basic DOMStorage Examples</a> - Quebrado no Firefox 3 pelo uso de globalStorage em um nível de domínio acima do domínio atual, o que não é permitido no Firefox 3.</li> - <li><a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> - (exibido como quebrado no Firefox 3) Aplicativo de escrita de notas que usa DOM Storage.</li> - <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Aplicativo de escrita de notas que não armazena dados em um servidor. Todos os documentos são armazenados localmente. A tecla tab também trabalha na indentação de texto.</li> - <li><a class="external" href="http://www.eligrey.com/projects/jdata/" title="http://www.eligrey.com/projects/jdata/">jData</a> - Um objeto de interface localStorage compartilhado que pode ser acessado através de qualquer website na internet e trabalha no Firefox 3+, Webkit 3.1.2+ nightlies e IE8. É como uma pseudo-globalStorage[""] em que o acesso a escrita precisa de confirmação do usuário.</li> -</ul> -<h3 id="Related" name="Related">Relacionado</h3> -<ul> - <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en/DOM/document.cookie" title="en/DOM/document.cookie">document.cookie</a></code>)</li> - <li><a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage</a></li> - <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> -</ul> -<p>{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</p> diff --git a/files/pt-pt/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html b/files/pt-pt/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html deleted file mode 100644 index 14e44860a1..0000000000 --- a/files/pt-pt/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html +++ /dev/null @@ -1,443 +0,0 @@ ---- -title: Funções e classes disponíveis para os Workers da Web -slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers -tags: - - Referencia - - Web -translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers ---- -<p>In addition to the standard <a href="/en-US/docs/Web/JavaScript">JavaScript</a> set of functions (such as {{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("Object")}}, {{jsxref("JSON")}}, etc), there are a variety of functions available from the DOM to workers. This article provides a list of those.</p> - -<p><strong>Workers run in another global context, {{domxref("DedicatedWorkerGlobalScope")}}, different from the current window</strong>. By default, methods and properties of {{domxref("Window")}} are not available to them, but {{domxref("DedicatedWorkerGlobalScope")}}, like <code>Window</code>, implements {{domxref("WindowTimers")}} and {{domxref("WindowBase64")}}.</p> - -<h2 id="Comparação_das_propriedades_e_métodos_de_diferentes_tipos_de_workers">Comparação das propriedades e métodos de diferentes tipos de <em>workers</em></h2> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Função</td> - <td class="header">Workers dedicados</td> - <td class="header">Shared workers</td> - <td class="header">Service workers</td> - <td class="header">Chrome workers {{Non-standard_inline}}</td> - <td class="header">Outside workers</td> - </tr> - <tr> - <td>{{domxref("WindowBase64.atob", "atob()")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("Window")}}</td> - </tr> - <tr> - <td>{{domxref("WindowBase64.btoa", "btoa()")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("Window")}}</td> - </tr> - <tr> - <td>{{domxref("WindowTimers.clearInterval", "clearInterval()")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("Window")}}</td> - </tr> - <tr> - <td>{{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("Window")}}</td> - </tr> - <tr> - <td>{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("Window")}}</td> - </tr> - <tr> - <td>{{domxref("WindowTimers.setInterval", "setInterval()")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("Window")}}</td> - </tr> - <tr> - <td>{{domxref("WindowTimers.setTimeout", "setTimeout()")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("Window")}}</td> - </tr> - <tr> - <td>{{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>no</td> - </tr> - <tr> - <td>{{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, on {{domxref("WorkerGlobalScope")}}</td> - <td>yes, but is a no-op.</td> - <td>Unknown</td> - <td>no</td> - </tr> - <tr> - <td>{{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}</td> - <td>yes, on {{domxref("DedicatedWorkerGlobalScope")}}</td> - <td>no</td> - <td>no</td> - <td>Unknown</td> - <td>no</td> - </tr> - </tbody> -</table> - -<h2 id="APIs_disponíveis_nos_workers">APIs disponíveis nos <em>workers</em></h2> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Função</td> - <td class="header">Funcionalidade</td> - <td class="header">Suporte no Gecko (Firefox)</td> - <td class="header">Support in IE</td> - <td class="header">Support in Blink (Chrome and Opera)</td> - <td class="header">Support in WebKit (Safari)</td> - </tr> - <tr> - <td>{{domxref("Broadcast_Channel_API","Broadcast Channel API")}}</td> - <td>Allows simple communication between {{glossary("browsing context", "browsing contexts")}} (that is <em>windows</em>, <em>tabs</em>, <em>frames</em>, or <em>iframes</em>) with the same {{glossary("origin")}} (usually pages from the same site).</td> - <td>{{ CompatGeckoDesktop(38)}}</td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td> - </tr> - <tr> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("Cache", "Cache")}}</span></td> - <td>Cache API<span style="background-color: rgba(212, 221, 228, 0.14902);"> provides the ability to programmatically</span> control cache storage associated with current origin.</td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatVersionUnknown}}</span></td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatNo}}</span></td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{ CompatChrome(43) }}</span></td> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{CompatUnknown}}</span></td> - </tr> - <tr> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("Channel_Messaging_API", "Channel Messaging API")}}</span></td> - <td>Allows two separate scripts running in different browsing contexts attached to the same document (e.g., two IFrames, or the main document and an IFrame, two documents via a {{domxref("SharedWorker")}}, or two workers) to communicate directly via two ports.</td> - <td>{{ CompatGeckoDesktop(41)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("Console", "Console API")}}</span></td> - <td>Provides access to the browser's debugging console (e.g., the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> in Firefox). The specifics of how it works vary from browser to browser, but there is a <em>de facto</em> set of features that are typically provided.</td> - <td>{{ CompatGeckoDesktop(38)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><span style="background-color: rgba(212, 221, 228, 0.14902);">{{domxref("CustomEvent")}}</span></td> - <td>The <strong><code>CustomEvent</code></strong> interface represents events initialized by an application for any purpose.</td> - <td>{{ CompatGeckoDesktop(48)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>{{domxref("Data_Store_API", "Data Store")}}</td> - <td>A powerful, flexible storage mechanism for multiple Firefox OS applications to use to store and share data between one another quickly, efficiently, and securely.</td> - <td>Only in Firefox OS internal (certified) applications, since v1.0.1.</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("DOMRequest")}} and {{domxref("DOMCursor")}}</td> - <td>Respectively, these objects represents an ongoing operation (with listeners for reacting to the operation completely successfully, or failing, for example), and an ongoing operation over a list of results.</td> - <td>{{ CompatGeckoDesktop(41)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("Fetch_API", "Fetch")}}</td> - <td>The Fetch spec provides an up-to-date definition of, and API for, fetching resources (e.g. across the network.)</td> - <td>Mostly in {{ CompatGeckoDesktop(34)}} behind pref, although a few features are later.</td> - <td>{{CompatNo}}</td> - <td>{{ CompatChrome(42) }}<br> - {{ CompatChrome(41) }} behind pref</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("FileReader")}}</td> - <td>This API allows asynchronous read of {{domxref("Blob")}} and {{domxref("File")}} objects.</td> - <td>{{CompatGeckoDesktop(46)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("FileReaderSync")}}</td> - <td>This API allows synchronous read of {{domxref("Blob")}} and {{domxref("File")}} objects. This is an API that works only in workers.</td> - <td>{{CompatGeckoDesktop(8)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("FormData")}}</td> - <td><code>FormData</code> objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XMLHttpRequest <a href="/en-US/docs/DOM/XMLHttpRequest#send()" title="XMLHttpRequest#send()"><code>send()</code></a> method.</td> - <td>{{CompatUnknown}} (should be in {{CompatGeckoDesktop(39)}})</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("ImageData")}}</td> - <td>The underlying pixel data of an area of a {{domxref("canvas")}} element. Manipulating such data can be a complex task better suited to be delegated to a Web Worker.</td> - <td>{{CompatGeckoDesktop(25)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("IndexedDB_API", "IndexedDB")}}</td> - <td>Database to store records holding simple values and hierarchical objects.</td> - <td>{{CompatGeckoDesktop(37)}}, {{CompatGeckoDesktop(42)}} for {{domxref("IDBCursorWithValue")}}.</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></td> - <td>provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.).</td> - <td>{{CompatGeckoMobile(53)}} only on mobile</td> - <td>{{CompatVersionUnknown}} only on mobile</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("Notifications_API", "Notifications")}}</td> - <td>Allows web pages to control the display of system notifications to the end user</td> - <td>{{CompatGeckoDesktop(41)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("Performance")}}</td> - <td>The <strong><code>Performance</code></strong> interface represents timing-related performance information for the given page.</td> - <td>{{ CompatGeckoDesktop("34.0") }}</td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatChrome("33.0") }}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{jsxref("Promise")}}</td> - <td>JavaScript objects that allow you to write asynchronous functions.</td> - <td>{{CompatGeckoDesktop(28)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a></td> - <td>Allows a server to push data to a web page at any point, after a connection has been opened to it.</td> - <td>{{CompatGeckoDesktop(53)}} (currently only available in dedicated and shared workers; not service workers.)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>{{domxref("ServiceWorkerRegistration")}}</td> - <td>You can register a service worker from inside a standard worker, and use associated functionality.</td> - <td>{{CompatGeckoDesktop(40)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("TextEncoder")}} and {{domxref("TextDecoder")}}</td> - <td>Create and return a new {{domxref("TextEncoder")}}, or respectively {{domxref("TextDecoder")}}, allowing to encode or decode strings into specific encodings.</td> - <td>{{CompatGeckoDesktop(20)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{ domxref("URL") }}</td> - <td>Workers can use the static methods <a href="/en-US/docs/DOM/window.URL.createObjectURL" title="/en-US/docs/DOM/window.URL.createObjectURL">URL.createObjectURL</a> and <a href="/en-US/docs/DOM/window.URL.revokeObjectURL" title="/en-US/docs/DOM/window.URL.revokeObjectURL">URL.revokeObjectURL</a> with {{domxref("Blob")}} objects accesible to the worker.<br> - Workers can also create a new URL using the {{domxref("URL.URL", "URL()")}} constructor and call any normal method on the returned object.</td> - <td>{{CompatGeckoDesktop(21)}} and {{CompatGeckoDesktop(26)}} for URL() constructor</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> with {{domxref("OffscreenCanvas")}}</td> - <td>WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.</td> - <td>{{CompatGeckoDesktop(44)}} behind a feature preference setting. In <code>about:config</code>, set <code>gfx.offscreencanvas.enabled</code> to true.</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("WebSocket")}}</td> - <td>Creates and returns a new {{domxref("WebSocket")}} object; this mimics the behavior of the standard <code>WebSocket()</code> constructor.</td> - <td>{{CompatGeckoDesktop(37)}}</td> - <td>11.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>{{domxref("Worker")}}</td> - <td>Creates a new {{ domxref("Worker") }}. Yes, workers can spawn more workers.</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>10.0</td> - <td>{{CompatNo}} See <a class="external" href="https://code.google.com/p/chromium/issues/detail?id=31666" rel="external" title="http://code.google.com/p/chromium/issues/detail?id=31666">crbug.com/31666</a></td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>{{domxref("WorkerGlobalScope")}}</td> - <td>The global scope of workers. This objects defines <a href="#workerscope">worker-specific functions</a>.</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>{{domxref("WorkerLocation")}}</td> - <td>The subset of the {{domxref("Location")}} interface available to workers.</td> - <td>{{CompatGeckoDesktop(1.9.2)}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>{{domxref("WorkerNavigator")}}</td> - <td>The subset of the {{domxref("Navigator")}} interface available to workers.</td> - <td>Basic implementation {{CompatVersionUnknown}}<br> - {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}: {{CompatGeckoDesktop(28)}}<br> - {{domxref("WorkerNavigator.onLine", "onLine")}}: {{CompatGeckoDesktop(29)}}<br> - {{domxref("NavigatorLanguage")}}: {{CompatVersionUnknown}}</td> - <td>{{domxref("NavigatorID.appName", "appName")}}, {{domxref("NavigatorID.appVersion", "appVersion")}}, {{domxref("WorkerNavigator.onLine", "onLine")}}, {{domxref("NavigatorID.platform", "platform")}}, {{domxref("NavigatorID.userAgent", "userAgent")}}: 10.0<br> - Other: {{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>{{domxref("XMLHttpRequest")}}</td> - <td>Creates and returns a new {{domxref("XMLHttpRequest")}} object; this mimics the behavior of the standard <code>XMLHttpRequest()</code> constructor. Note that the <code>responseXML</code> and <code>channel</code> attributes on <code>XMLHttpRequest</code> always return <code>null</code>.</td> - <td> - <p>Basic: {{CompatGeckoDesktop("1.9.1")}}</p> - - <p>{{domxref("XMLHttpRequest.response", "response")}} and {{domxref("XMLHttpRequest.responseType", "responseType")}} are available since {{CompatGeckoDesktop("10")}}</p> - - <p>{{domxref("XMLHttpRequest.timeout", "timeout")}} and {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} are available since {{CompatGeckoDesktop("13")}}</p> - </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/Web_Workers_API/Utilizacao_de_web_workers">Utilização de workers da Web</a></li> - <li>{{domxref("Worker")}}</li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody><tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> -</tbody></table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody><tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> -</tbody></table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/web_workers_api/index.html b/files/pt-pt/web/api/web_workers_api/index.html deleted file mode 100644 index 9c1040b06f..0000000000 --- a/files/pt-pt/web/api/web_workers_api/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: Web Workers API -slug: Web/API/Web_Workers_API -tags: - - API - - NeedsTranslation - - Service Workers - - Shared Workers - - TopicStub - - Web Workers - - Workers -translation_of: Web/API/Web_Workers_API ---- -<p>{{DefaultAPISidebar("Web Workers API")}}</p> - -<p class="summary"><strong>Web Workers</strong> makes it possible to run a script operation in background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.</p> - -<h2 id="Web_Workers_concepts_and_usage">Web Workers concepts and usage</h2> - -<p>A worker is an object created using a constructor (e.g. {{domxref("Worker.Worker", "Worker()")}}) that runs a named JavaScript file — this file contains the code that will run in the worker thread; workers run in another global context that is different from the current {{domxref("window")}}. This context is represented by a {{domxref("DedicatedWorkerGlobalScope")}} object in the case of dedicated workers (standard workers that are utilized by a single script; shared workers use {{domxref("SharedWorkerGlobalScope")}}).</p> - -<p>You can run whatever code you like inside the worker thread, with some exceptions. For example, you can't directly manipulate the DOM from inside a worker, or use some default methods and properties of the {{domxref("window")}} object. But you can use a large number of items available under <code>window</code>, including <a href="/en-US/docs/WebSockets">WebSockets</a>, and data storage mechanisms like <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> and the Firefox OS-only <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>. See <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a> for more details.</p> - -<p>Data is sent between workers and the main thread via a system of messages — both sides send their messages using the <code>postMessage()</code> method, and respond to messages via the <code>onmessage</code> event handler (the message is contained within the {{event("Message")}} event's <code>data</code> property). The data is copied rather than shared.</p> - -<p>Workers may in turn spawn new workers, as long as those workers are hosted within the same origin as the parent page. In addition, workers may use <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> for network I/O, with the exception that the <code>responseXML</code> and <code>channel</code> attributes on <code>XMLHttpRequest</code> always return <code>null</code>.</p> - -<p>In addition to dedicated workers, there are other types of worker:</p> - -<ul> - <li>Shared workers are workers that can be utilized by multiple scripts running in different windows, IFrames, etc., as long as they are in the same domain as the worker. They are a little more complex than dedicated workers — scripts must communicate via an active port. See {{domxref("SharedWorker")}} for more details.</li> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.</li> - <li>Chrome Workers are a Firefox-only type of worker that you can use if you are developing add-ons and want to use workers in extensions and have access to <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> in your worker. See {{domxref("ChromeWorker")}} for more details. </li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> provide the ability for direct scripted audio processing to be done inside a web worker context.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: As per the <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, worker error events should not bubble (see {{bug(1188141)}}. This has been implemented in Firefox 42.</p> -</div> - -<h2 id="Web_Worker_interfaces">Web Worker interfaces</h2> - -<dl> - <dt>{{domxref("AbstractWorker")}}</dt> - <dd>Abstracts properties and methods common to all kind of workers (i.e. {{domxref("Worker")}} or {{domxref("SharedWorker")}}).</dd> - <dt>{{domxref("Worker")}}</dt> - <dd>Represents a running worker thread, allowing you to pass messages to the running worker code.</dd> - <dt>{{domxref("WorkerLocation")}}</dt> - <dd>Defines the absolute location of the script executed by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="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."><code>Worker</code></a>.</dd> -</dl> - -<dl> - <dt>{{domxref("SharedWorker")}}</dt> - <dd>Represents a specific kind of worker that can be <em>accessed</em> from several browsing contexts, being several windows, iframes or even workers.</dd> - <dt>{{domxref("WorkerGlobalScope")}}</dt> - <dd>Represents the generic scope of any worker (doing the same job as {{domxref("Window")}} does for normal web content). Different types of worker have scope objects that inherit from this interface and add more specific features.</dd> - <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt> - <dd>Represents the scope of a dedicated worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.</dd> - <dt>{{domxref("SharedWorkerGlobalScope")}}</dt> - <dd>Represents the scope of a shared worker, inheriting from {{domxref("WorkerGlobalScope")}} and adding some dedicated features.</dd> - <dt>{{domxref("WorkerNavigator")}}</dt> - <dd>Represents the identity and state of the user agent (the client):</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>We have created a couple of simple demos to show basic usage:</p> - -<ul> - <li><a href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</li> - <li><a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>).</li> -</ul> - -<p>You can find out more information on how these demos work in <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using web workers</a>.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#workers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>4</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(1.9.1)}}</td> - <td>10.0</td> - <td>10.6</td> - <td>4</td> - </tr> - <tr> - <td>Shared workers</td> - <td>4</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(29)}}</td> - <td>{{CompatNo}}</td> - <td>10.6</td> - <td>4</td> - </tr> - <tr> - <td>Passing data using structured cloning</td> - <td>13</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(8)}}</td> - <td>10.0</td> - <td>11.5</td> - <td>6</td> - </tr> - <tr> - <td>Passing data using transferable objects</td> - <td>17 {{property_prefix("webkit")}}<br> - 21</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(18)}}</td> - <td>{{CompatNo}}</td> - <td>15</td> - <td>6</td> - </tr> - <tr> - <td>Global {{domxref("window.URL", "URL")}}</td> - <td>10<sup>[1]</sup><br> - 23</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(21)}}</td> - <td>11</td> - <td>15</td> - <td>6<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.4</td> - <td>4</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(1.9.1)}}</td> - <td>1.0.1</td> - <td>10.0</td> - <td>11.5</td> - <td>5.1</td> - </tr> - <tr> - <td>Shared workers</td> - <td>{{CompatNo}}</td> - <td>4</td> - <td>{{CompatNo}}</td> - <td>29</td> - <td>1.4</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Passing data using structured cloning</td> - <td>{{CompatNo}}</td> - <td>4</td> - <td>{{CompatVersionUnknown}}</td> - <td>8</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Passing data using transferable objects</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>18</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] As <code>webkitURL</code>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">Worker Interface</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">SharedWorker interface</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a></li> - <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li> - <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: for using workers in privileged/chrome code</li> -</ul> diff --git a/files/pt-pt/web/api/web_workers_api/using_web_workers/index.html b/files/pt-pt/web/api/web_workers_api/using_web_workers/index.html deleted file mode 100644 index d0ec98c6c0..0000000000 --- a/files/pt-pt/web/api/web_workers_api/using_web_workers/index.html +++ /dev/null @@ -1,1092 +0,0 @@ ---- -title: Utilização de Web Workers -slug: Web/API/Web_Workers_API/Using_web_workers -tags: - - Avançado - - Firefox - - Guía - - JavaScript - - Operadores - - Workers -translation_of: Web/API/Web_Workers_API/Using_web_workers -original_slug: Web/API/Web_Workers_API/Utilizacao_de_web_workers ---- -<div class="summary"> -<p><em>Web Workers</em> é um meio simples para o conteúdo da Web para executar <em>scripts</em> em segmentos em segundo plano. O segmento do <em>worker</em> pode realizar tarefas sem interferir com a interface do utilizador. Em adição, eles podem executar I/O, utilizando <code><a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">XMLHttpRequest</a></code> (embora<code> e responseXML</code> e os atributos de <code>channel</code> são sempre nulos). Uma vez criado, um <em>worker </em>pode enviar mensagens para o código JavaScript que o criou publicando mensagens para um manipulador de evento especificado por esse código (e vice-versa.) Este artigo fornece uma introdução detalhada para utilizar <em>workers </em>da Web.</p> -</div> - -<h2 id="API_de_Workers_da_Web">API de Workers da Web</h2> - -<p>A worker is an object created using a constructor (e.g. {{domxref("Worker.Worker", "Worker()")}}) that runs a named JavaScript file — this file contains the code that will run in the worker thread; workers run in another global context that is different from the current {{domxref("window")}}. Thus, using the {{domxref("window")}} shortcut to get the current global scope (instead of {{domxref("window.self","self")}}) within a {{domxref("Worker")}} will return an error.</p> - -<p>The worker context is represented by a {{domxref("DedicatedWorkerGlobalScope")}} object in the case of dedicated workers (standard workers that are utilized by a single script; shared workers use {{domxref("SharedWorkerGlobalScope")}}). A dedicated worker is only accessible from the script that first spawned it, whereas shared workers can be accessed from multiple scripts.</p> - -<div class="note"> -<p><strong>Nota</strong>: See <a href="/en-US/docs/Web/API/Web_Workers_API">The Web Workers API landing page</a> for reference documentation on workers and additional guides.</p> -</div> - -<p>You can run whatever code you like inside the worker thread, with some exceptions. For example, you can't directly manipulate the DOM from inside a worker, or use some default methods and properties of the {{domxref("window")}} object. But you can use a large number of items available under <code>window</code>, including <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, and data storage mechanisms like <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> and the Firefox OS-only <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>. See <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Functions and classes available to workers</a> for more details.</p> - -<p>Data is sent between workers and the main thread via a system of messages — both sides send their messages using the <code>postMessage()</code> method, and respond to messages via the <code>onmessage</code> event handler (the message is contained within the {{event("Message")}} event's data attribute.) The data is copied rather than shared.</p> - -<p>Workers may, in turn, spawn new workers, as long as those workers are hosted within the same origin as the parent page. In addition, workers may use <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> for network I/O, with the exception that the <code>responseXML</code> and <code>channel</code> attributes on <code>XMLHttpRequest</code> always return <code>null</code>.</p> - -<h2 id="Workers_dedicados">Workers dedicados</h2> - -<p>As mentioned above, a dedicated worker is only accessible by the script that called it. In this section we'll discuss the JavaScript found in our <a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="https://mdn.github.io/simple-web-worker/">run dedicated worker</a>): This allows you to enter two numbers to be multiplied together. The numbers are sent to a dedicated worker, multiplied together, and the result is returned to the page and displayed.</p> - -<p>This example is rather trivial, but we decided to keep it simple while introducing you to basic worker concepts. More advanced details are covered later on in the article.</p> - -<h3 id="Detecção_da_funcionalidade_worker">Detecção da funcionalidade worker</h3> - -<p>For slightly more controlled error handling and backwards compatibility, it is a good idea to wrap your worker accessing code in the following (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> - -<pre class="brush: js">if (window.Worker) { - - ... - -}</pre> - -<h3 id="Geração_de_um_worker_dedicado">Geração de um <em>worker </em>dedicado</h3> - -<p>Creating a new worker is simple. All you need to do is call the {{domxref("Worker.Worker", "Worker()")}} constructor, specifying the URI of a script to execute in the worker thread (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> - -<div style="overflow: hidden;"> -<pre class="brush: js">var myWorker = new Worker('worker.js'); -</pre> -</div> - -<h3 id="Enviar_mensagens_para_e_de_um_worker_dedicado">Enviar mensagens para /e de um <em>worker </em>dedicado</h3> - -<p>The magic of workers happens via the {{domxref("Worker.postMessage", "postMessage()")}} method and the {{domxref("Worker.onmessage", "onmessage")}} event handler. When you want to send a message to the worker, you post messages to it like this (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>):</p> - -<pre class="brush: 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'); -}</pre> - -<p>So here we have two {{htmlelement("input")}} elements represented by the variables <code>first</code> and <code>second</code>; when the value of either is changed, <code>myWorker.postMessage([first.value,second.value])</code> is used to send the value inside both to the worker, as an array. You can send pretty much anything you like in the message.</p> - -<p>In the worker, we can respond when the message is received by writing an event handler block like this (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>):</p> - -<pre class="brush: js">onmessage = function(e) { - console.log('Message received from main script'); - var workerResult = 'Result: ' + (e.data[0] * e.data[1]); - console.log('Posting message back to main script'); - postMessage(workerResult); -}</pre> - -<p>The <code>onmessage</code> handler allows us to run some code whenever a message is received, with the message itself being available in the <code>message</code> event's <code>data</code> attribute. Here we simply multiply together the two numbers then use <code>postMessage()</code> again, to post the result back to the main thread.</p> - -<p>Back in the main thread, we use <code>onmessage</code> again, to respond to the message sent back from the worker:</p> - -<pre class="brush: js">myWorker.onmessage = function(e) { - result.textContent = e.data; - console.log('Message received from worker'); -}</pre> - -<p>Here we grab the message event data and set it as the <code>textContent</code> of the result paragraph, so the user can see the result of the calculation.</p> - -<div class="note"> -<p><strong>Nota</strong>: The URI passed as a parameter to the <code>Worker</code> constructor must obey the <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a> .</p> - -<p>There is currently disagreement among browsers vendors on what URIs are of the same-origin; Gecko 10.0 {{geckoRelease("10.0")}} and later do allow data URIs and Internet Explorer 10 does not allow Blob URIs as a valid script for workers.</p> -</div> - -<div class="note"><strong>Nota</strong>: Notice that <code>onmessage</code> and <code>postMessage()</code> need to be hung off the <code>Worker</code> object when used in the main script thread, but not when used in the worker. This is because, inside the worker, the worker is effectively the global scope.</div> - -<div class="note"><strong>Nota</strong>: When a message is passed between the main thread and worker, it is copied or "transferred" (moved), not shared. Read {{anch("Transferring data to and from workers further details", "Transferring data to and from workers: further details")}} for a much more thorough explanation.</div> - -<h3 id="Terminar_um_worker">Terminar um <em>worker</em></h3> - -<p>If you need to immediately terminate a running worker from the main thread, you can do so by calling the worker's {{domxref("Worker", "terminate")}} method:</p> - -<pre class="brush: js">myWorker.terminate();</pre> - -<p>The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.</p> - -<p>In the worker thread, workers may close themselves by calling their own {{domxref("WorkerGlobalScope", "close")}} method:</p> - -<pre class="brush: js">close();</pre> - -<h3 id="Lidar_com_erros">Lidar com erros</h3> - -<p>When a runtime error occurs in the worker, its <code>onerror</code> event handler is called. It receives an event named <code>error</code> which implements the <code>ErrorEvent</code> interface.</p> - -<p>The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's <a class="internal" href="/en-US/docs/Web/API/Event/preventDefault"> <code>preventDefault()</code> </a> method.</p> - -<p>The error event has the following three fields that are of interest:</p> - -<dl> - <dt><code>message</code></dt> - <dd>A human-readable error message.</dd> - <dt><code>filename</code></dt> - <dd>The name of the script file in which the error occurred.</dd> - <dt><code>lineno</code></dt> - <dd>The line number of the script file on which the error occurred.</dd> -</dl> - -<h3 id="Gerar_subworkers">Gerar <em>subworkers</em></h3> - -<p>Workers may spawn more workers if they wish. So-called sub-workers must be hosted within the same origin as the parent page. Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page. This makes it easier for workers to keep track of where their dependencies are.</p> - -<h3 id="Importar_scripts_e_bibliotecas">Importar <em>scripts</em> e bibliotecas</h3> - -<p>Worker threads have access to a global function, <code>importScripts()</code>, which lets them import scripts. It accepts zero or more URIs as parameters to resources to import; all of the following examples are valid:</p> - -<pre class="brush: js">importScripts(); /* imports nothing */ -importScripts('foo.js'); /* imports just "foo.js" */ -importScripts('foo.js', 'bar.js'); /* imports two scripts */ -importScripts('//example.com/hello.js'); /* You can import scripts from other origins */</pre> - -<p>The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, <code>NETWORK_ERROR</code> is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{domxref("window.setTimeout()")}}) will still be functional though. Function declarations <strong>after</strong> the <code>importScripts()</code> method are also kept, since these are always evaluated before the rest of the code.</p> - -<div class="note"><strong>Note</strong>: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into <code>importScripts()</code> . This is done synchronously; <code>importScripts()</code> does not return until all the scripts have been loaded and executed.</div> - -<h2 id="Shared_workers_(Partilhados)"><em>Shared workers (Partilhados)</em></h2> - -<p>A shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes or even workers. In this section we'll discuss the JavaScript found in our <a class="external external-icon" href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a class="external external-icon" href="https://mdn.github.io/simple-shared-worker/">run shared worker</a>): This is very similar to the basic dedicated worker example, except that it has two functions available handled by different script files: <em>multiplying two numbers</em>, or <em>squaring a number</em>. Both scripts use the same worker to do the actual calculation required.</p> - -<p>Here we'll concentrate on the differences between dedicated and shared workers. Note that in this example we have two HTML pages, each with JavaScript applied that uses the same single worker file.</p> - -<div class="note"> -<p><strong>Nota</strong>: If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host, and port).</p> -</div> - -<div class="note"> -<p><strong>Nota</strong>: In Firefox, shared workers cannot be shared between documents loaded in private and non-private windows ({{bug(1177621)}}).</p> -</div> - -<h3 id="Gerar_um_shared_worker">Gerar um <em>shared worker</em></h3> - -<p>Spawning a new shared worker is pretty much the same as with a dedicated worker, but with a different constructor name (see <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/index.html">index.html</a> and <a href="https://mdn.github.io/simple-shared-worker/index2.html">index2.html</a>) — each one has to spin up the worker using code like the following:</p> - -<pre class="brush: js">var myWorker = new SharedWorker('worker.js');</pre> - -<p>One big difference is that with a shared worker you have to communicate via a <code>port</code> object — an explicit port is opened that the scripts can use to communicate with the worker (this is done implicitly in the case of dedicated workers).</p> - -<p>The port connection needs to be started either implicitly by use of the <code>onmessage </code>event handler or explicitly with the <code>start()</code> method before any messages can be posted. Although the <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> and <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a> files in the demo currently call the <code>start()</code> method, those calls are not necessary since the <code>onmessage</code> event handler is being used. Calling <code>start()</code> is only needed if the <code>message</code> event is wired up via the <code>addEventListener()</code> method.</p> - -<p>When using the <code>start()</code> method to open the port connection, it needs to be called from both the parent thread and the worker thread if two-way communication is needed.</p> - -<pre class="brush: js">myWorker.port.start(); // called in parent thread</pre> - -<pre class="brush: js">port.start(); // called in worker thread, assuming the <code>port</code> variable references a port</pre> - -<h3 id="Enviar_mensagens_parae_de_um_shared_worker">Enviar mensagens para/e de um <em>shared worker</em></h3> - -<p>Now messages can be sent to the worker as before, but the <code>postMessage()</code> method has to be invoked through the port object (again, you'll see similar constructs in both <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> and <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> - -<pre class="brush: js">squareNumber.onchange = function() { - myWorker.port.postMessage([squareNumber.value,squareNumber.value]); - console.log('Message posted to worker'); -}</pre> - -<p>Now, on to the worker. There is a bit more complexity here as well (<a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>):</p> - -<pre class="brush: js">onconnect = function(e) { - var port = e.ports[0]; - - port.onmessage = function(e) { - var workerResult = 'Result: ' + (e.data[0] * e.data[1]); - port.postMessage(workerResult); - } -}</pre> - -<p>First, we use an <code>onconnect</code> handler to fire code when a connection to the port happens (i.e. when the <code>onmessage</code> event handler in the parent thread is setup, or when the <code>start()</code> method is explicitly called in the parent thread).</p> - -<p>We use the <code>ports</code> attribute of this event object to grab the port and store it in a variable.</p> - -<p>Next, we add a <code>message</code> handler on the port to do the calculation and return the result to the main thread. Setting up this <code>message</code> handler in the worker thread also implicitly opens the port connection back to the parent thread, so the call to <code>port.start()</code> is not actually needed, as noted above.</p> - -<p>Finally, back in the main script, we deal with the message (again, you'll see similar constructs in both <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> and <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p> - -<pre class="brush: js">myWorker.port.onmessage = function(e) { - result2.textContent = e.data; - console.log('Message received from worker'); -}</pre> - -<p>When a message comes back through the port from the worker, we check what result type it is, then insert the calculation result inside the appropriate result paragraph.</p> - -<h2 id="Sobre_a_segurança_de_segmento">Sobre a segurança de segmento</h2> - -<p>The {{domxref("Worker")}} interface spawns real OS-level threads, and mindful programmers may be concerned that concurrency can cause “interesting” effects in your code if you aren't careful.</p> - -<p>However, since web workers have carefully controlled communication points with other threads, it's actually very hard to cause concurrency problems. There's no access to non-threadsafe components or the DOM. And you have to pass specific data in and out of a thread through serialized objects. So you have to work really hard to cause problems in your code.</p> - -<p>An example of a catastrophy would be like the following:</p> - -<h3 id="Conteúdo_HTML">Conteúdo HTML</h3> - -<pre class="brush: html"><html> -<head> -<title>Multithreading Catastrophy</title> -<style> -body { margin: 0px; } -canvas { position: absolute; top: 0; bottom: 0; left: 0; right:0; width: 100%; height: 100%; } -</style> -<script src="main.js" async></script> -</head> -<body> -<canvas id="canvas"></canvas> -</body> -</html></pre> - -<h3 id="Conteúdo_main.js">Conteúdo main.js</h3> - -<pre class="brush: js">// main.js -var myworker = new Worker("worker.js"), width=window.innerWidth, height=window.innerHeight, context=document.getElementById('canvas').getContext('2d'); -var imagedatatmp=context.createImageData(width,height); - -myworker.onmessage = function(data){ - imageData = imagedatatmp.from(data); -}; - -setTimeout(function draw_canvas() { - context.putImageData(imageData); - setTimeout(draw_canvas, 1000/60); -},10); - -window.onresize = window.reload; // Quick (to type) n' dirty way to resize;</pre> - -<h3 id="Conteúdo_worker.js">Conteúdo worker.js</h3> - -<pre class="brush: js">// worker.js -window.onmessage = function(width, height){ -var noise = function(x, y, z) { - var p = new Array(512), permutation = [151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180]; - for (var i = 0;i < 256;i++) p[256 + i] = p[i] = permutation[i]; - var X = Math.floor(x) & 255, Y = Math.floor(y) & 255, Z = Math.floor(z) & 255; x -= Math.floor(x), y -= Math.floor(y), z -= Math.floor(z); - var u = fade(x), v = fade(y), w = fade(z); - var A = p[X] + Y, AA = p[A] + Z, AB = p[A + 1] + Z, B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z; - return scale(lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z), grad(p[BA], x - 1, y, z)), lerp(u, grad(p[AB], x, y - 1, z), grad(p[BB], x - 1, y - 1, z))), lerp(v, lerp(u, grad(p[AA + 1], x, y, z - 1), grad(p[BA + 1], x - 1, y, z - 1)), lerp(u, grad(p[AB + 1], x, y - 1, z - 1), grad(p[BB + 1], x - 1, y - 1, z - 1))))); -}; - function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); } - function lerp(t, a, b) { return a + t * (b - a); } - function grad(hash, x, y, z) { - var h = hash & 15; var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z; - return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v); - } - function scale(n) { return (1 + n) / 2; } -var length = width*height; var canvasnoisedata=new UInt32Array(length); - -setTimeout(function make_noise() { -var i=length, z=Math.random()*1024; - while ( i-- ) { - canvasnoisedata[i] = noise(i%width+z,i/width+z,z); - } - setTimeout(make_noise, 1000/60); -},1000/60); - -setTimeout(function post_noise() { - postMessage( canvasnoisedata ); - setTimeout(post_noise, 1000/60); -},1000/60); -}; -</pre> - -<h3 id="Resultado">Resultado</h3> - -<p>{{ EmbedLiveSample('ats.html') }}</p> - -<h2 id="Política_de_segurança_de_conteúdo">Política de segurança de conteúdo</h2> - -<p>Workers are considered to have their own execution context, distinct from the document that created them. For this reason they are, in general, not governed by the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">content security policy</a> of the document (or parent worker) that created them. So for example, suppose a document is served with the following header:</p> - -<pre>Content-Security-Policy: script-src 'self'</pre> - -<div>Among other things, this will prevent any scripts it includes from using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>. However, if the script constructs a worker, code running in the worker's context <em>will</em> be allowed to use <code>eval()</code>.<br> -<br> -To specify a content security policy for the worker, set a <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy">Content-Security-Policy</a> response header for the request which delivered the worker script itself.<br> -<br> -The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the CSP of the document or worker that created it.</div> - -<div> </div> - -<h2 id="Transferir_dados_parae_de_workers_detalhes_adicionais">Transferir dados para/e de <em>workers</em>: detalhes adicionais</h2> - -<p>Data passed between the main page and workers is <strong>copied</strong>, not shared. Objects are serialized as they're handed to the worker, and subsequently, de-serialized on the other end. The page and worker <strong>do not share the same instance</strong>, so the end result is that <strong>a duplicate</strong> is created on each end. Most browsers implement this feature as <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a>.</p> - -<p>To illustrate this, let's create for didactical purpose a function named <code>emulateMessage()</code>, which will simulate the behavior of a value that is <em>cloned and not shared</em> during the passage from a <code>worker</code> to the main page or vice versa:</p> - -<pre class="brush: js">function emulateMessage(vVal) { - return eval('(' + JSON.stringify(vVal) + ')'); -} - -// Tests - -// test #1 -var example1 = new Number(3); -console.log(typeof example1); // object -console.log(typeof emulateMessage(example1)); // number - -// test #2 -var example2 = true; -console.log(typeof example2); // boolean -console.log(typeof emulateMessage(example2)); // boolean - -// test #3 -var example3 = new String('Hello World'); -console.log(typeof example3); // object -console.log(typeof emulateMessage(example3)); // string - -// test #4 -var example4 = { - 'name': 'John Smith', - "age": 43 -}; -console.log(typeof example4); // object -console.log(typeof emulateMessage(example4)); // object - -// test #5 -function Animal(sType, nAge) { - this.type = sType; - this.age = nAge; -} -var example5 = new Animal('Cat', 3); -alert(example5.constructor); // Animal -alert(emulateMessage(example5).constructor); // Object</pre> - -<p>A value that is cloned and not shared is called <em>message</em>. As you will probably know by now, <em>messages</em> can be sent to and from the main thread by using <code>postMessage()</code>, and the <code>message</code> event's {{domxref("MessageEvent.data", "data")}} attribute contains data passed back from the worker.</p> - -<p><strong>example.html</strong>: (a página principal):</p> - -<pre class="brush: js">var myWorker = new Worker('my_task.js'); - -myWorker.onmessage = function(oEvent) { - console.log('Worker said : ' + oEvent.data); -}; - -myWorker.postMessage('ali');</pre> - -<p><strong>my_task.js</strong> (o <em>worker</em>):</p> - -<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\')."); - -onmessage = function(oEvent) { - postMessage('Hi ' + oEvent.data); -};</pre> - -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a> algorithm can accept JSON and a few things that JSON can't — like circular references.</p> - -<h3 id="Passagem_de_exemplos_de_dados">Passagem de exemplos de dados</h3> - -<h4 id="Exemplo_1_Criar_um_genérico_assíncrono_eval()">Exemplo #1: Criar um genérico "assíncrono <code>eval()</code>"</h4> - -<p>The following example shows how to use a worker in order to <strong>asynchronously</strong> execute any JavaScript code allowed in a worker, through <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> within the worker:</p> - -<pre class="brush: js">// Syntax: asyncEval(code[, listener]) - -var asyncEval = (function () { - var aListeners = [], oParser = new Worker('data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D'); - - oParser.onmessage = function(oEvent) { - if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); } - delete aListeners[oEvent.data.id]; - }; - - return function(sCode, fListener) { - aListeners.push(fListener || null); - oParser.postMessage({ - 'id': aListeners.length - 1, - 'code': sCode - }); - }; -})();</pre> - -<p>The <a href="/en-US/docs/Web/HTTP/data_URIs">data URL</a> is equivalent to a network request, with the following response:</p> - -<pre class="brush: js">onmessage = function(oEvent) { - postMessage({ - 'id': oEvent.data.id, - 'evaluated': eval(oEvent.data.code) - }); -}</pre> - -<p>Amostra de utilização:</p> - -<pre class="brush: js">// asynchronous alert message... -asyncEval('3 + 2', function(sMessage) { - alert('3 + 2 = ' + sMessage); -}); - -// asynchronous print message... -asyncEval("\"Hello World!!!\"", function(sHTML) { - document.body.appendChild(document.createTextNode(sHTML)); -}); - -// asynchronous void... -asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");</pre> - -<h4 id="Exemplo_2_Passagem_avançada_da_'Dados'_JSON_e_criar_um_sistema_de_troca">Exemplo #2: Passagem avançada da 'Dados' JSON e criar um sistema de troca</h4> - -<p>If you have to pass some complex data and have to call many different functions both on the main page and in the Worker, you can create a system which groups everything together.</p> - -<p>First, we create a QueryableWorker class that takes the <font face="Consolas, Liberation Mono, Courier, monospace">url</font> of the worker, a default listener, and an error handler, and this class is going to keep track of a list of listeners and help us communicate with the worker:</p> - -<pre class="brush: js">function QueryableWorker(url, defaultListener, onError) { - var instance = this, - worker = new Worker(url), - listeners = {}; - - this.defaultListener = defaultListener || function() {}; - - if (onError) {worker.onerror = onError;} - - this.postMessage = function(message) { - worker.postMessage(message); - } - - this.terminate = function() { - worker.terminate(); - } -}</pre> - -<p>Then we add the methods of adding/removing listeners:</p> - -<pre class="brush: js">this.addListeners = function(name, listener) { - listeners[name] = listener; -} - -this.removeListeners = function(name) { - delete listeners[name]; -}</pre> - -<p>Here we let the worker handle two simple operations for illustration: getting the difference of two numbers and making an alert after three seconds. In order to achieve that we first implement a sendQuery method which queries if the worker actually has the corresponding methods to do what we want.</p> - -<pre class="brush: js">/* - This functions takes at least one argument, the method name we want to query. - Then we can pass in the arguments that the method needs. - */ -this.sendQuery = function() { - if (arguments.length < 1) { - throw new TypeError('QueryableWorker.sendQuery takes at least one argument'); - return; - } - worker.postMessage({ - 'queryMethod': arguments[0], - 'queryArguments': Array.prototype.slice.call(arguments, 1) - }); -}</pre> - -<p>We finish QueryableWorker with the <code>onmessage</code> method. If the worker has the corresponding methods we queried, it should return the name of the corresponding listener and the arguments it needs, we just need to find it in <code>listeners</code>.:</p> - -<pre class="brush: js">worker.onmessage = function(event) { - if (event.data instanceof Object && - event.data.hasOwnProperty('queryMethodListener') && - event.data.hasOwnProperty('queryMethodArguments')) { - listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments); - } else { - this.defaultListener.call(instance, event.data); - } -} -</pre> - -<p>Now onto the worker. First we need to have the methods to handle the two simple operations:</p> - -<pre class="brush: js">var queryableFunctions = { - getDifference: function(a, b) { - reply('printStuff', a - b); - }, - waitSomeTime: function() { - setTimeout(function() { - reply('doAlert', 3, 'seconds'); - }, 3000); - } -} - -function reply() { - if (arguments.length < 1) { - throw new TypeError('reply - takes at least one argument'); - return; - } - postMessage({ - queryMethodListener: arguments[0], - queryMethodArguments: Array.prototype.slice.call(arguments, 1) - }); -} - -/* This method is called when main page calls QueryWorker's postMessage method directly*/ -function defaultReply(message) { - // do something -} -</pre> - -<p>And the <code>onmessage</code> method is now trivial:</p> - -<pre class="brush: js">onmessage = function(event) { - if (event.data instanceof Object && - event.data.hasOwnProperty('queryMethod') && - event.data.hasOwnProperty('queryMethodArguments')) { - queryableFunctions[event.data.queryMethod] - .apply(self, event.data.queryMethodArguments); - } else { - defaultReply(event.data); - } -} -</pre> - -<p>Here are the full implementation:</p> - -<p><strong>example.html</strong> (the main page):</p> - -<pre class="brush: html"><!doctype html> - <html> - <head> - <meta charset="UTF-8" /> - <title>MDN Example - Queryable worker</title> - <script type="text/javascript"> - /* - QueryableWorker instances methods: - * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function - * postMessage(string or JSON Data): see Worker.prototype.postMessage() - * terminate(): terminates the Worker - * addListener(name, function): adds a listener - * removeListener(name): removes a listener - QueryableWorker instances properties: - * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly - */ - function QueryableWorker(url, defaultListener, onError) { - var instance = this, - worker = new Worker(url), - listeners = {}; - - this.defaultListener = defaultListener || function() {}; - - if (onError) {worker.onerror = onError;} - - this.postMessage = function(message) { - worker.postMessage(message); - } - - this.terminate = function() { - worker.terminate(); - } - - this.addListener = function(name, listener) { - listeners[name] = listener; - } - - this.removeListener = function(name) { - delete listeners[name]; - } - - /* - This functions takes at least one argument, the method name we want to query. - Then we can pass in the arguments that the method needs. - */ - this.sendQuery = function() { - if (arguments.length < 1) { - throw new TypeError('QueryableWorker.sendQuery takes at least one argument'); - return; - } - worker.postMessage({ - 'queryMethod': arguments[0], - 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) - }); - } - - worker.onmessage = function(event) { - if (event.data instanceof Object && - event.data.hasOwnProperty('queryMethodListener') && - event.data.hasOwnProperty('queryMethodArguments')) { - listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments); - } else { - this.defaultListener.call(instance, event.data); - } - } - } - - // your custom "queryable" worker - var myTask = new QueryableWorker('my_task.js'); - - // your custom "listeners" - myTask.addListener('printStuff', function (result) { - document.getElementById('firstLink').parentNode.appendChild(document.createTextNode('The difference is ' + result + '!')); - }); - - myTask.addListener('doAlert', function (time, unit) { - alert('Worker waited for ' + time + ' ' + unit + ' :-)'); - }); -</script> -</head> -<body> - <ul> - <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li> - <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li> - <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li> - </ul> -</body> -</html></pre> - -<p><strong>my_task.js</strong> (o <em>worker</em>):</p> - -<pre class="brush: js">var queryableFunctions = { - // example #1: get the difference between two numbers: - getDifference: function(nMinuend, nSubtrahend) { - reply('printStuff', nMinuend - nSubtrahend); - }, - // example #2: wait three seconds - waitSomeTime: function() { - setTimeout(function() { reply('doAlert', 3, 'seconds'); }, 3000); - } -}; - -// system functions - -function defaultReply(message) { - // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly - // do something -} - -function reply() { - if (arguments.length < 1) { throw new TypeError('reply - not enough arguments'); return; } - postMessage({ 'queryMethodListener': arguments[0], 'queryMethodArguments': Array.prototype.slice.call(arguments, 1) }); -} - -onmessage = function(oEvent) { - if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty('queryMethod') && oEvent.data.hasOwnProperty('queryMethodArguments')) { - queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments); - } else { - defaultReply(oEvent.data); - } -};</pre> - -<p>It is possible to switch the content of each mainpage -> worker and worker -> mainpage message. And the property names "queryMethod", "queryMethodListeners", "queryMethodArguments" can be anything as long as they are consistent in <code>QueryableWorker</code> and the <code>worker</code>.</p> - -<h3 id="Passing_data_by_transferring_ownership_(transferable_objects)">Passing data by transferring ownership (transferable objects)</h3> - -<p>Google Chrome 17+ and Firefox 18+ contain an additional way to pass certain types of objects (transferable objects, that is objects implementing the {{domxref("Transferable")}} interface) to or from a worker with high performance. Transferable objects are transferred from one context to another with a zero-copy operation, which results in a vast performance improvement when sending large data sets. Think of it as pass-by-reference if you're from the C/C++ world. However, unlike pass-by-reference, the 'version' from the calling context is no longer available once transferred. Its ownership is transferred to the new context. For example, when transferring an {{domxref("ArrayBuffer")}} from your main app to a worker script, the original {{domxref("ArrayBuffer")}} is cleared and no longer usable. Its content is (quite literally) transferred to the worker context.</p> - -<pre class="brush: js">// Create a 32MB "file" and fill it. -var uInt8Array = new Uint8Array(1024 * 1024 * 32); // 32MB -for (var i = 0; i < uInt8Array.length; ++i) { - uInt8Array[i] = i; -} - -worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); -</pre> - -<div class="note"> -<p><strong>Nota</strong>: For more information on transferable objects, performance, and feature-detection for this method, read <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> on HTML5 Rocks.</p> -</div> - -<h2 id="Workers_integrados">Workers integrados</h2> - -<p>There is not an "official" way to embed the code of a worker within a web page, like {{HTMLElement("script")}} elements do for normal scripts. But a {{HTMLElement("script")}} element that does not have a <code>src</code> attribute and has a <code>type</code> attribute that does not identify an executable MIME type can be considered a data block element that JavaScript could use. "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> -<meta charset="UTF-8" /> -<title>MDN Example - Embedded worker</title> -<script type="text/js-worker"> - // This script WON'T be parsed by JS engines because its MIME type is text/js-worker. - var myVar = 'Hello World!'; - // Rest of your worker code goes here. -</script> -<script type="text/javascript"> - // This script WILL be parsed by JS engines because its MIME type is text/javascript. - function pageLog(sMsg) { - // Use a fragment: browser will only render/reflow once. - var oFragm = document.createDocumentFragment(); - oFragm.appendChild(document.createTextNode(sMsg)); - oFragm.appendChild(document.createElement('br')); - document.querySelector('#logDisplay').appendChild(oFragm); - } -</script> -<script type="text/js-worker"> - // This script WON'T be parsed by JS engines because its MIME type is text/js-worker. - onmessage = function(oEvent) { - postMessage(myVar); - }; - // Rest of your worker code goes here. -</script> -<script type="text/javascript"> - // This script WILL be parsed by JS engines because its MIME type is text/javascript. - - // In the past...: - // blob builder existed - // ...but now we use Blob...: - var blob = new Blob(Array.prototype.map.call(document.querySelectorAll('script[type=\'text\/js-worker\']'), function (oScript) { return oScript.textContent; }),{type: 'text/javascript'}); - - // Creating a new document.worker property containing all our "text/js-worker" scripts. - document.worker = new Worker(window.URL.createObjectURL(blob)); - - document.worker.onmessage = function(oEvent) { - pageLog('Received: ' + oEvent.data); - }; - - // Start the worker. - window.onload = function() { document.worker.postMessage(''); }; -</script> -</head> -<body><div id="logDisplay"></div></body> -</html></pre> - -<p>The embedded worker is now nested into a new custom <code>document.worker</code> property.</p> - -<p>It is also worth noting that you can also convert a function into a Blob, then generate an object URL from that blob. For example:</p> - -<pre class="brush: js">function fn2workerURL(fn) { - var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'}) - return URL.createObjectURL(blob) -}</pre> - -<h2 id="Exemplos_adicionais">Exemplos adicionais</h2> - -<p>This section provides further examples of how to use web workers.</p> - -<h3 id="Realizar_computações_em_segundo_plano">Realizar computações em segundo plano</h3> - -<p>Workers are mainly useful for allowing your code to perform processor-intensive calculations without blocking the user interface thread. In this example, a worker is used to calculate Fibonacci numbers.</p> - -<h4 id="O_código_de_JavaScript">O código de JavaScript</h4> - -<p>The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.</p> - -<pre class="brush: js">var results = []; - -function resultReceiver(event) { - results.push(parseInt(event.data)); - if (results.length == 2) { - postMessage(results[0] + results[1]); - } -} - -function errorReceiver(event) { - throw event.data; -} - -onmessage = function(event) { - var n = parseInt(event.data); - - if (n == 0 || n == 1) { - postMessage(n); - return; - } - - for (var i = 1; i <= 2; i++) { - var worker = new Worker('fibonacci.js'); - worker.onmessage = resultReceiver; - worker.onerror = errorReceiver; - worker.postMessage(n - i); - } - };</pre> - -<p>The worker sets the property <code>onmessage</code> to a function which will receive messages sent when the worker object's <code>postMessage()</code> is called (note that this differs from defining a global <em>variable</em> of that name, or defining a <em>function</em> with that name. <code>var onmessage</code> and <code>function onmessage</code> will define global properties with those names, but they will not register the function to receive messages sent by the web page that created the worker). This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.</p> - -<h4 id="O_código_de_HTML">O código de HTML</h4> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="UTF-8" /> - <title>Test threads fibonacci</title> - </head> - <body> - - <div id="result"></div> - - <script language="javascript"> - - var worker = new Worker('fibonacci.js'); - - worker.onmessage = function(event) { - document.getElementById('result').textContent = event.data; - dump('Got: ' + event.data + '\n'); - }; - - worker.onerror = function(error) { - dump('Worker error: ' + error.message + '\n'); - throw error; - }; - - worker.postMessage('5'); - - </script> - </body> -</html> -</pre> - -<p>The web page creates a <code>div</code> element with the ID <code>result</code> , which gets used to display the result, then spawns the worker. After spawning the worker, the <code>onmessage</code> handler is configured to display the results by setting the contents of the <code>div</code> element, and the <code>onerror</code> handler is set to <a href="/en-US/docs/Debugging_JavaScript#dump.28.29">dump</a> the error message.</p> - -<p>Finally, a message is sent to the worker to start it.</p> - -<p><a class="external" href="/samples/workers/fibonacci">Try this example</a>.</p> - -<h3 id="Executar_IO_da_Web_em_segundo_plano">Executar I/O da Web em segundo plano</h3> - -<p>You can find an example of this in the article <a class="internal" href="/en-US/docs/Using_workers_in_extensions">Using workers in extensions</a> .</p> - -<h3 id="Dividir_tarefas_entre_mútiplos_workers">Dividir tarefas entre mútiplos <em>workers</em></h3> - -<p>As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.</p> - -<h2 id="Outros_tipos_de_worker">Outros tipos de <em>worker</em></h2> - -<p>In addition to dedicated and shared web workers, there are other types of worker available:</p> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.</li> - <li>Chrome Workers are a Firefox-only type of worker that you can use if you are developing add-ons and want to use workers in extensions and have access to <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> in your worker. See {{domxref("ChromeWorker")}} for more details.</li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> provide the ability for direct scripted audio processing to be done in a web worker context.</li> -</ul> - -<h2 id="Funções_e_interfaces_disponíveis_nos_workers">Funções e interfaces disponíveis nos <em>workers</em></h2> - -<p>You can use most standard JavaScript features inside a web worker, including:</p> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("XMLHttpRequest")}}</li> - <li>{{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, and {{jsxref("Global_Objects/String", "String")}}</li> - <li>{{domxref("WindowTimers.setTimeout")}} and {{domxref("WindowTimers.setInterval")}}</li> -</ul> - -<p>The main thing you <em>can't</em> do in a Worker is directly affect the parent page. This includes manipulating the DOM and using that page's objects. You have to do it indirectly, by sending a message back to the main script via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, then actioning the changes from there.</p> - -<div class="note"> -<p><strong>Note</strong>: For a complete list of functions available to workers, see <a href="/en-US/docs/Web/Reference/Functions_and_classes_available_to_workers">Functions and interfaces available to workers</a>.</p> -</div> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#workers', 'Web workers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>4<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>10.0</td> - <td>10.6<sup>[1]</sup></td> - <td>4<sup>[2]</sup></td> - </tr> - <tr> - <td>Shared workers</td> - <td>4<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop(29)}}</td> - <td>{{CompatNo}}</td> - <td>10.6</td> - <td>5<br> - {{CompatNo}} 6.1<sup>[4]</sup></td> - </tr> - <tr> - <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td> - <td>13</td> - <td>{{CompatGeckoDesktop(8)}}</td> - <td>10.0</td> - <td>11.5</td> - <td>6</td> - </tr> - <tr> - <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td> - <td>17 {{property_prefix("webkit")}}<br> - 21</td> - <td>{{CompatGeckoDesktop(18)}}</td> - <td>{{CompatNo}}</td> - <td>15</td> - <td>6</td> - </tr> - <tr> - <td>Global {{domxref("window.URL", "URL")}}</td> - <td>10<sup>[3]</sup><br> - 23</td> - <td>{{CompatGeckoDesktop(21)}}</td> - <td>11</td> - <td>15</td> - <td>6<sup>[3]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.4</td> - <td>4<sup>[1]</sup></td> - <td>3.5</td> - <td>1.0.1</td> - <td>10.0</td> - <td>11.5<sup>[1]</sup></td> - <td>5.1<sup>[2]</sup></td> - </tr> - <tr> - <td>Shared workers</td> - <td>{{CompatNo}}</td> - <td>4<sup>[1]</sup></td> - <td>8</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Passing data using <a href="/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">structured cloning</a></td> - <td>{{CompatNo}}</td> - <td>4</td> - <td>8</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Passing data using <a class="external" href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#transferable-objects">transferable objects</a></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>18</td> - <td>1.0.1</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Chrome and Opera give an error "<code>Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'.</code>" when you try to run a worker locally. It needs to be on a proper domain.</p> - -<p>[2] As of Safari 7.1.2, you can call <code>console.log</code> from inside a worker, but it won't print anything to the console. Older versions of Safari don't allow you to call <code>console.log</code> from inside a worker.</p> - -<p>[3] This feature is implemented prefixed as <code>webkitURL</code>.</p> - -<p>[4] Safari <a href="https://bugs.webkit.org/show_bug.cgi?id=116359">removed SharedWorker support</a>.</p> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li>Interface de <em><code><a class="internal" href="/en-US/docs/Web/API/Worker">Worker</a></code></em></li> - <li>Interface de <em><code><a class="internal" href="/en-US/docs/Web/API/SharedWorker">SharedWorker</a></code></em></li> - <li><a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Funções disponíveis para os <em>workers</em></a></li> - <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Conceitos avançados e exemplos</a></li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div> - -<div id="SL_shadow_translation_result2" style="display: none; font-size: 14px; line-height: 20px; margin-top: 22168px; margin-left: 26px; direction: ltr; text-align: left;">Further</div> - -<div id="SL_shadow_translator" style="display: none; top: 152px; left: 25px; box-shadow: rgb(186, 185, 181) 0px 0px 0px; width: 467px;"> -<div id="SL_planshet" style="background: rgb(239, 239, 239) none repeat scroll 0% 0%;"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; display: none; left: 49px;"> </div> - -<div id="SL_Bproviders" style=""> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_OFF" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_OFF" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; cursor: not-allowed;" title="Se o idioma de origem é definido como 'Detectar idioma', esta função não está disponível."> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; display: block;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy_hand" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch" class="hidden"> </div> - - <div class="SL_font_on" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style="font-size: 14px; line-height: 20px; direction: ltr; text-align: left;">Further</div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; display: none;"> </div> - -<div id="SL_player2" style="display: none; height: 0px;"> </div> - -<div id="SL_alert100" class="hidden">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(239, 239, 239) none repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; display: block; left: 49px;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/webgl_api/constants/index.html b/files/pt-pt/web/api/webgl_api/constants/index.html deleted file mode 100644 index 2ebc509bcd..0000000000 --- a/files/pt-pt/web/api/webgl_api/constants/index.html +++ /dev/null @@ -1,4024 +0,0 @@ ---- -title: Contantes de WebGL -slug: Web/API/WebGL_API/Constants -tags: - - API - - Referencia - - WebGL - - constantes -translation_of: Web/API/WebGL_API/Constants -original_slug: Web/API/WebGL_API/Constantes ---- -<div>{{WebGLSidebar}}</div> - -<p>The <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> provides several constants that are passed into or returned by functions. All constants are of type {{domxref("GLenum")}}.</p> - -<p>Standard WebGL constants are installed on the {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} objects, so that you use them as <code>gl.CONSTANT_NAME</code>:</p> - -<pre class="brush: js">var canvas = document.getElementById('myCanvas'); -var gl = canvas.getContext('webgl'); - -gl.getParameter(gl.LINE_WIDTH); -</pre> - -<p>Some constants are also provided by <a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">WebGL extensions</a>. A <a href="#Constants_defined_in_WebGL_extensions">list</a> is provided below.</p> - -<pre class="brush: js">var debugInfo = gl.getExtension('WEBGL_debug_renderer_info'); -var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);</pre> - -<p>The <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> has more information, examples, and resources on how to get started with WebGL.</p> - -<h2 id="Tabela_de_conteúdos">Tabela de conteúdos</h2> - -<ul> - <li><a href="#Standard_WebGL_1_constants">Standard WebGL 1 constants</a></li> - <li><a href="#Additional_constants_defined_WebGL_2">Standard WebGL 2 constants</a></li> - <li><a href="#Constants_defined_in_WebGL_extensions">WebGL extension constants</a></li> -</ul> - -<h2 id="Standard_WebGL_1_constants">Standard WebGL 1 constants</h2> - -<p>These constants are defined on the {{domxref("WebGLRenderingContext")}} interface.</p> - -<h3 id="Limpar_buffers">Limpar <em>buffers</em></h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.clear()")}} to clear buffer masks.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>DEPTH_BUFFER_BIT</code></td> - <td>0x00000100</td> - <td>Passed to <code>clear</code> to clear the current depth buffer.</td> - </tr> - <tr> - <td><code>STENCIL_BUFFER_BIT</code></td> - <td>0x00000400</td> - <td>Passed to <code>clear</code> to clear the current stencil buffer.</td> - </tr> - <tr> - <td><code>COLOR_BUFFER_BIT</code></td> - <td>0x00004000</td> - <td>Passed to <code>clear</code> to clear the current color buffer.</td> - </tr> - </tbody> -</table> - -<h3 id="Renderizar_primitivos">Renderizar primitivos</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.drawElements()")}} or {{domxref("WebGLRenderingContext.drawArrays()")}} to specify what kind of primitive to render.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>POINTS</code></td> - <td>0x0000</td> - <td>Passed to <code>drawElements</code> or <code>drawArrays</code> to draw single points.</td> - </tr> - <tr> - <td><code>LINES</code></td> - <td>0x0001</td> - <td>Passed to <code>drawElements</code> or <code>drawArrays</code> to draw lines. Each vertex connects to the one after it.</td> - </tr> - <tr> - <td><code>LINE_LOOP</code></td> - <td>0x0002</td> - <td>Passed to <code>drawElements</code> or <code>drawArrays</code> to draw lines. Each set of two vertices is treated as a separate line segment.</td> - </tr> - <tr> - <td><code>LINE_STRIP</code></td> - <td>0x0003</td> - <td>Passed to <code>drawElements</code> or <code>drawArrays</code> to draw a connected group of line segments from the first vertex to the last.</td> - </tr> - <tr> - <td><code>TRIANGLES</code></td> - <td>0x0004</td> - <td>Passed to <code>drawElements</code> or <code>drawArrays</code> to draw triangles. Each set of three vertices creates a separate triangle.</td> - </tr> - <tr> - <td><code>TRIANGLE_STRIP</code></td> - <td>0x0005</td> - <td>Passed to <code>drawElements</code> or <code>drawArrays</code> to draw a connected group of triangles.</td> - </tr> - <tr> - <td><code>TRIANGLE_FAN</code></td> - <td>0x0006</td> - <td>Passed to <code>drawElements</code> or <code>drawArrays</code> to draw a connected group of triangles. Each vertex connects to the previous and the first vertex in the fan.</td> - </tr> - </tbody> -</table> - -<h3 id="Modos_de_mistura">Modos de mistura</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.blendFunc()")}} or {{domxref("WebGLRenderingContext.blendFuncSeparate()")}} to specify the blending mode (for both, RBG and alpha, or separately).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nome da constante</th> - <th scope="col">Valor</th> - <th scope="col">Descrição</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>ZERO</code></td> - <td>0</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to turn off a component.</td> - </tr> - <tr> - <td><code>ONE</code></td> - <td>1</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to turn on a component.</td> - </tr> - <tr> - <td><code>SRC_COLOR</code></td> - <td>0x0300</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to multiply a component by the source elements color.</td> - </tr> - <tr> - <td><code>ONE_MINUS_SRC_COLOR</code></td> - <td>0x0301</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to multiply a component by one minus the source elements color.</td> - </tr> - <tr> - <td><code>SRC_ALPHA</code></td> - <td>0x0302</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to multiply a component by the source's alpha.</td> - </tr> - <tr> - <td><code>ONE_MINUS_SRC_ALPHA</code></td> - <td>0x0303</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to multiply a component by one minus the source's alpha.</td> - </tr> - <tr> - <td><code>DST_ALPHA</code></td> - <td>0x0304</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to multiply a component by the destination's alpha.</td> - </tr> - <tr> - <td><code>ONE_MINUS_DST_ALPHA</code></td> - <td>0x0305</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to multiply a component by one minus the destination's alpha.</td> - </tr> - <tr> - <td><code>DST_COLOR</code></td> - <td>0x0306</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to multiply a component by the destination's color.</td> - </tr> - <tr> - <td><code>ONE_MINUS_DST_COLOR</code></td> - <td>0x0307</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to multiply a component by one minus the destination's color.</td> - </tr> - <tr> - <td><code>SRC_ALPHA_SATURATE</code></td> - <td>0x0308</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to multiply a component by the minimum of source's alpha or one minus the destination's alpha.</td> - </tr> - <tr> - <td><code>CONSTANT_COLOR</code></td> - <td>0x8001</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to specify a constant color blend function.</td> - </tr> - <tr> - <td><code>ONE_MINUS_CONSTANT_COLOR</code></td> - <td>0x8002</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to specify one minus a constant color blend function.</td> - </tr> - <tr> - <td><code>CONSTANT_ALPHA</code></td> - <td>0x8003</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to specify a constant alpha blend function.</td> - </tr> - <tr> - <td><code>ONE_MINUS_CONSTANT_ALPHA</code></td> - <td>0x8004</td> - <td>Passed to <code>blendFunc</code> or <code>blendFuncSeparate</code> to specify one minus a constant alpha blend function.</td> - </tr> - </tbody> -</table> - -<h3 id="Equações_de_mistura">Equações de mistura</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.blendEquation()")}} or {{domxref("WebGLRenderingContext.blendEquationSeparate()")}} to control how the blending is calculated (for both, RBG and alpha, or separately).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nome da constante</th> - <th scope="col">Valor</th> - <th scope="col">Descrição</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>FUNC_ADD</code></td> - <td>0x8006</td> - <td>Passed to <code>blendEquation</code> or <code>blendEquationSeparate</code> to set an addition blend function.</td> - </tr> - <tr> - <td><code>FUNC_SUBSTRACT</code></td> - <td>0x800A</td> - <td>Passed to <code>blendEquation</code> or <code>blendEquationSeparate</code> to specify a subtraction blend function (source - destination).</td> - </tr> - <tr> - <td><code>FUNC_REVERSE_SUBTRACT</code></td> - <td>0x800B</td> - <td>Passed to <code>blendEquation</code> or <code>blendEquationSeparate</code> to specify a reverse subtraction blend function (destination - source).</td> - </tr> - </tbody> -</table> - -<h3 id="Obter_informação_do_parâmetro_GL">Obter informação do parâmetro GL</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.getParameter()")}} to specify what information to return.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nome da constante</th> - <th scope="col">Valor</th> - <th scope="col">Descrição</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>BLEND_EQUATION</code></td> - <td>0x8009</td> - <td>Passed to <code>getParameter</code> to get the current RGB blend function.</td> - </tr> - <tr> - <td><code>BLEND_EQUATION_RGB</code></td> - <td>0x8009</td> - <td>Passed to <code>getParameter</code> to get the current RGB blend function. Same as BLEND_EQUATION</td> - </tr> - <tr> - <td><code>BLEND_EQUATION_ALPHA</code></td> - <td>0x883D</td> - <td>Passed to <code>getParameter</code> to get the current alpha blend function. Same as BLEND_EQUATION</td> - </tr> - <tr> - <td><code>BLEND_DST_RGB</code></td> - <td>0x80C8</td> - <td>Passed to <code>getParameter</code> to get the current destination RGB blend function.</td> - </tr> - <tr> - <td><code>BLEND_SRC_RGB</code></td> - <td>0x80C9</td> - <td>Passed to <code>getParameter</code> to get the current destination RGB blend function.</td> - </tr> - <tr> - <td><code>BLEND_DST_ALPHA</code></td> - <td>0x80CA</td> - <td>Passed to <code>getParameter</code> to get the current destination alpha blend function.</td> - </tr> - <tr> - <td><code>BLEND_SRC_ALPHA</code></td> - <td>0x80CB</td> - <td>Passed to <code>getParameter</code> to get the current source alpha blend function.</td> - </tr> - <tr> - <td><code>BLEND_COLOR</code></td> - <td>0x8005</td> - <td>Passed to <code>getParameter</code> to return a the current blend color.</td> - </tr> - <tr> - <td><code>ARRAY_BUFFER_BINDING</code></td> - <td>0x8894</td> - <td>Passed to <code>getParameter</code> to get the array buffer binding.</td> - </tr> - <tr> - <td><code>ELEMENT_ARRAY_BUFFER_BINDING</code></td> - <td>0x8895</td> - <td>Passed to <code>getParameter</code> to get the current element array buffer.</td> - </tr> - <tr> - <td><code>LINE_WIDTH</code></td> - <td>0x0B21</td> - <td>Passed to <code>getParameter</code> to get the current <code>lineWidth</code> (set by the <code>lineWidth</code> method).</td> - </tr> - <tr> - <td><code>ALIASED_POINT_SIZE_RANGE</code></td> - <td>0x846D</td> - <td>Passed to <code>getParameter</code> to get the current size of a point drawn with <code>gl.POINTS</code></td> - </tr> - <tr> - <td><code>ALIASED_LINE_WIDTH_RANGE</code></td> - <td>0x846E</td> - <td>Passed to <code>getParameter</code> to get the range of available widths for a line. Returns a length-2 array with the lo value at 0, and hight at 1.</td> - </tr> - <tr> - <td><code>CULL_FACE_MODE</code></td> - <td>0x0B45</td> - <td>Passed to <code>getParameter</code> to get the current value of <code>cullFace</code>. Should return <code>FRONT</code>, <code>BACK</code>, or <code>FRONT_AND_BACK</code></td> - </tr> - <tr> - <td><code>FRONT_FACE</code></td> - <td>0x0B46</td> - <td>Passed to <code>getParameter</code> to determine the current value of <code>frontFace</code>. Should return <code>CW</code> or <code>CCW</code>.</td> - </tr> - <tr> - <td><code>DEPTH_RANGE</code></td> - <td>0x0B70</td> - <td>Passed to <code>getParameter</code> to return a length-2 array of floats giving the current depth range.</td> - </tr> - <tr> - <td><code>DEPTH_WRITEMASK</code></td> - <td>0x0B72</td> - <td>Passed to <code>getParameter</code> to determine if the depth write mask is enabled.</td> - </tr> - <tr> - <td><code>DEPTH_CLEAR_VALUE</code></td> - <td>0x0B73</td> - <td>Passed to <code>getParameter</code> to determine the current depth clear value.</td> - </tr> - <tr> - <td><code>DEPTH_FUNC</code></td> - <td>0x0B74</td> - <td>Passed to <code>getParameter</code> to get the current depth function. Returns <code>NEVER</code>, <code>ALWAYS</code>, <code>LESS</code>, <code>EQUAL</code>, <code>LEQUAL</code>, <code>GREATER</code>, <code>GEQUAL</code>, or <code>NOTEQUAL</code>.</td> - </tr> - <tr> - <td><code>STENCIL_CLEAR_VALUE</code></td> - <td>0x0B91</td> - <td>Passed to <code>getParameter</code> to get the value the stencil will be cleared to.</td> - </tr> - <tr> - <td><code>STENCIL_FUNC</code></td> - <td>0x0B92</td> - <td>Passed to <code>getParameter</code> to get the current stencil function. Returns <code>NEVER</code>, <code>ALWAYS</code>, <code>LESS</code>, <code>EQUAL</code>, <code>LEQUAL</code>, <code>GREATER</code>, <code>GEQUAL</code>, or <code>NOTEQUAL</code>.</td> - </tr> - <tr> - <td><code>STENCIL_FAIL</code></td> - <td>0x0B94</td> - <td>Passed to <code>getParameter</code> to get the current stencil fail function. Should return <code>KEEP</code>, <code>REPLACE</code>, <code>INCR</code>, <code>DECR</code>, <code>INVERT</code>, <code>INCR_WRAP</code>, or <code>DECR_WRAP</code>.</td> - </tr> - <tr> - <td><code>STENCIL_PASS_DEPTH_FAIL</code></td> - <td>0x0B95</td> - <td>Passed to <code>getParameter</code> to get the current stencil fail function should the depth buffer test fail. Should return <code>KEEP</code>, <code>REPLACE</code>, <code>INCR</code>, <code>DECR</code>, <code>INVERT</code>, <code>INCR_WRAP</code>, or <code>DECR_WRAP</code>.</td> - </tr> - <tr> - <td><code>STENCIL_PASS_DEPTH_PASS</code></td> - <td>0x0B96</td> - <td>Passed to <code>getParameter</code> to get the current stencil fail function should the depth buffer test pass. Should return KEEP, REPLACE, INCR, DECR, INVERT, INCR_WRAP, or DECR_WRAP.</td> - </tr> - <tr> - <td><code>STENCIL_REF</code></td> - <td>0x0B97</td> - <td>Passed to <code>getParameter</code> to get the reference value used for stencil tests.</td> - </tr> - <tr> - <td><code>STENCIL_VALUE_MASK</code></td> - <td>0x0B93</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_WRITEMASK</code></td> - <td>0x0B98</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_BACK_FUNC</code></td> - <td>0x8800</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_BACK_FAIL</code></td> - <td>0x8801</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_BACK_PASS_DEPTH_FAIL</code></td> - <td>0x8802</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_BACK_PASS_DEPTH_PASS</code></td> - <td>0x8803</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_BACK_REF</code></td> - <td>0x8CA3</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_BACK_VALUE_MASK</code></td> - <td>0x8CA4</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_BACK_WRITEMASK</code></td> - <td>0x8CA5</td> - <td> </td> - </tr> - <tr> - <td><code>VIEWPORT</code></td> - <td>0x0BA2</td> - <td>Returns an {{jsxref("Int32Array")}} with four elements for the current viewport dimensions.</td> - </tr> - <tr> - <td><code>SCISSOR_BOX</code></td> - <td>0x0C10</td> - <td>Returns an {{jsxref("Int32Array")}} with four elements for the current scissor box dimensions.</td> - </tr> - <tr> - <td><code>COLOR_CLEAR_VALUE</code></td> - <td>0x0C22</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_WRITEMASK</code></td> - <td>0x0C23</td> - <td> </td> - </tr> - <tr> - <td><code>UNPACK_ALIGNMENT</code></td> - <td>0x0CF5</td> - <td> </td> - </tr> - <tr> - <td><code>PACK_ALIGNMENT</code></td> - <td>0x0D05</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_TEXTURE_SIZE</code></td> - <td>0x0D33</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_VIEWPORT_DIMS</code></td> - <td>0x0D3A</td> - <td> </td> - </tr> - <tr> - <td><code>SUBPIXEL_BITS</code></td> - <td>0x0D50</td> - <td> </td> - </tr> - <tr> - <td><code>RED_BITS</code></td> - <td>0x0D52</td> - <td> </td> - </tr> - <tr> - <td><code>GREEN_BITS</code></td> - <td>0x0D53</td> - <td> </td> - </tr> - <tr> - <td><code>BLUE_BITS</code></td> - <td>0x0D54</td> - <td> </td> - </tr> - <tr> - <td><code>ALPHA_BITS</code></td> - <td>0x0D55</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH_BITS</code></td> - <td>0x0D56</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_BITS</code></td> - <td>0x0D57</td> - <td> </td> - </tr> - <tr> - <td><code>POLYGON_OFFSET_UNITS</code></td> - <td>0x2A00</td> - <td> </td> - </tr> - <tr> - <td><code>POLYGON_OFFSET_FACTOR</code></td> - <td>0x8038</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_BINDING_2D</code></td> - <td>0x8069</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLE_BUFFERS</code></td> - <td>0x80A8</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLES</code></td> - <td>0x80A9</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLE_COVERAGE_VALUE</code></td> - <td>0x80AA</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLE_COVERAGE_INVERT</code></td> - <td>0x80AB</td> - <td> </td> - </tr> - <tr> - <td><code>COMPRESSED_TEXTURE_FORMATS</code></td> - <td>0x86A3</td> - <td> </td> - </tr> - <tr> - <td><code>VENDOR</code></td> - <td>0x1F00</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERER</code></td> - <td>0x1F01</td> - <td> </td> - </tr> - <tr> - <td><code>VERSION</code></td> - <td>0x1F02</td> - <td> </td> - </tr> - <tr> - <td><code>IMPLEMENTATION_COLOR_READ_TYPE</code></td> - <td>0x8B9A</td> - <td> </td> - </tr> - <tr> - <td><code>IMPLEMENTATION_COLOR_READ_FORMAT</code></td> - <td>0x8B9B</td> - <td> </td> - </tr> - <tr> - <td><code>BROWSER_DEFAULT_WEBGL</code></td> - <td>0x9244</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Buffers"><em>Buffers</em></h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.bufferData()")}}, {{domxref("WebGLRenderingContext.bufferSubData()")}}, {{domxref("WebGLRenderingContext.bindBuffer()")}}, or {{domxref("WebGLRenderingContext.getBufferParameter()")}}.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>STATIC_DRAW</code></td> - <td>0x88E4</td> - <td>Passed to <code>bufferData</code> as a hint about whether the contents of the buffer are likely to be used often and not change often.</td> - </tr> - <tr> - <td><code>STREAM_DRAW</code></td> - <td>0x88E0</td> - <td>Passed to <code>bufferData</code> as a hint about whether the contents of the buffer are likely to not be used often.</td> - </tr> - <tr> - <td><code>DYNAMIC_DRAW</code></td> - <td>0x88E8</td> - <td>Passed to <code>bufferData</code> as a hint about whether the contents of the buffer are likely to be used often and change often.</td> - </tr> - <tr> - <td><code>ARRAY_BUFFER</code></td> - <td>0x8892</td> - <td>Passed to <code>bindBuffer</code> or <code>bufferData</code> to specify the type of buffer being used.</td> - </tr> - <tr> - <td><code>ELEMENT_ARRAY_BUFFER</code></td> - <td>0x8893</td> - <td>Passed to <code>bindBuffer</code> or <code>bufferData</code> to specify the type of buffer being used.</td> - </tr> - <tr> - <td><code>BUFFER_SIZE</code></td> - <td>0x8764</td> - <td>Passed to <code>getBufferParameter</code> to get a buffer's size.</td> - </tr> - <tr> - <td><code>BUFFER_USAGE</code></td> - <td>0x8765</td> - <td>Passed to <code>getBufferParameter</code> to get the hint for the buffer passed in when it was created.</td> - </tr> - </tbody> -</table> - -<h3 id="Atributos_de_Vertex">Atributos de <em>Vertex</em></h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.getVertexAttrib()")}}.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nome da constante</th> - <th scope="col">Valor</th> - <th scope="col">Descrição</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>CURRENT_VERTEX_ATTRIB</code></td> - <td>0x8626</td> - <td>Passed to <code>getVertexAttrib</code> to read back the current vertex attribute.</td> - </tr> - <tr> - <td><code>VERTEX_ATTRIB_ARRAY_ENABLED</code></td> - <td>0x8622</td> - <td> </td> - </tr> - <tr> - <td><code>VERTEX_ATTRIB_ARRAY_SIZE</code></td> - <td>0x8623</td> - <td> </td> - </tr> - <tr> - <td><code>VERTEX_ATTRIB_ARRAY_STRIDE</code></td> - <td>0x8624</td> - <td> </td> - </tr> - <tr> - <td><code>VERTEX_ATTRIB_ARRAY_TYPE</code></td> - <td>0x8625</td> - <td> </td> - </tr> - <tr> - <td><code>VERTEX_ATTRIB_ARRAY_NORMALIZED</code></td> - <td>0x886A</td> - <td> </td> - </tr> - <tr> - <td><code>VERTEX_ATTRIB_ARRAY_POINTER</code></td> - <td>0x8645</td> - <td> </td> - </tr> - <tr> - <td><code>VERTEX_ATTRIB_ARRAY_BUFFER_BINDING</code></td> - <td>0x889F</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Culling">Culling</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.cullFace()")}}.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>CULL_FACE</code></td> - <td>0x0B44</td> - <td>Passed to <code>enable</code>/<code>disable</code> to turn on/off culling. Can also be used with <code>getParameter</code> to find the current culling method.</td> - </tr> - <tr> - <td><code>FRONT</code></td> - <td>0x0404</td> - <td>Passed to <code>cullFace</code> to specify that only front faces should be drawn.</td> - </tr> - <tr> - <td><code>BACK</code></td> - <td>0x0405</td> - <td>Passed to <code>cullFace</code> to specify that only back faces should be drawn.</td> - </tr> - <tr> - <td><code>FRONT_AND_BACK</code></td> - <td>0x0408</td> - <td>Passed to <code>cullFace</code> to specify that front and back faces should be drawn.</td> - </tr> - </tbody> -</table> - -<h3 id="Enabling_and_disabling">Enabling and disabling</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.enable()")}} or {{domxref("WebGLRenderingContext.disable()")}}.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>BLEND</code></td> - <td>0x0BE2</td> - <td>Passed to <code>enable</code>/<code>disable</code> to turn on/off blending. Can also be used with <code>getParameter</code> to find the current blending method.</td> - </tr> - <tr> - <td><code>DEPTH_TEST</code></td> - <td>0x0B71</td> - <td>Passed to <code>enable</code>/<code>disable</code> to turn on/off the depth test. Can also be used with <code>getParameter</code> to query the depth test.</td> - </tr> - <tr> - <td><code>DITHER</code></td> - <td>0x0BD0</td> - <td>Passed to <code>enable</code>/<code>disable</code> to turn on/off dithering. Can also be used with <code>getParameter</code> to find the current dithering method.</td> - </tr> - <tr> - <td><code>POLYGON_OFFSET_FILL</code></td> - <td>0x8037</td> - <td>Passed to <code>enable</code>/<code>disable</code> to turn on/off the polygon offset. Useful for rendering hidden-line images, decals, and or solids with highlighted edges. Can also be used with <code>getParameter</code> to query the scissor test.</td> - </tr> - <tr> - <td><code>SAMPLE_ALPHA_TO_COVERAGE</code></td> - <td>0x809E</td> - <td>Passed to <code>enable</code>/<code>disable</code> to turn on/off the alpha to coverage. Used in multi-sampling alpha channels.</td> - </tr> - <tr> - <td><code>SAMPLE_COVERAGE</code></td> - <td>0x80A0</td> - <td>Passed to <code>enable</code>/<code>disable</code> to turn on/off the sample coverage. Used in multi-sampling.</td> - </tr> - <tr> - <td><code>SCISSOR_TEST</code></td> - <td>0x0C11</td> - <td>Passed to <code>enable</code>/<code>disable</code> to turn on/off the scissor test. Can also be used with <code>getParameter</code> to query the scissor test.</td> - </tr> - <tr> - <td><code>STENCIL_TEST</code></td> - <td>0x0B90</td> - <td>Passed to <code>enable</code>/<code>disable</code> to turn on/off the stencil test. Can also be used with <code>getParameter</code> to query the stencil test.</td> - </tr> - <tr> - </tr> - </tbody> -</table> - -<h3 id="Errors">Errors</h3> - -<p>Constants returned from {{domxref("WebGLRenderingContext.getError()")}}.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>NO_ERROR</code></td> - <td>0</td> - <td>Returned from <code>getError</code>.</td> - </tr> - <tr> - <td><code>INVALID_ENUM</code></td> - <td>0x0500</td> - <td>Returned from <code>getError</code>.</td> - </tr> - <tr> - <td><code>INVALID_VALUE</code></td> - <td>0x0501</td> - <td>Returned from <code>getError</code>.</td> - </tr> - <tr> - <td><code>INVALID_OPERATION</code></td> - <td>0x0502</td> - <td>Returned from <code>getError</code>.</td> - </tr> - <tr> - <td><code>OUT_OF_MEMORY</code></td> - <td>0x0505</td> - <td>Returned from <code>getError</code>.</td> - </tr> - <tr> - <td><code>CONTEXT_LOST_WEBGL</code></td> - <td>0x9242</td> - <td>Returned from <code>getError</code>.</td> - </tr> - </tbody> -</table> - -<h3 id="Front_face_directions">Front face directions</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.frontFace()")}}.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>CW</code></td> - <td>0x0900</td> - <td>Passed to <code>frontFace</code> to specify the front face of a polygon is drawn in the clockwise direction</td> - </tr> - <tr> - <td><code>CCW</code></td> - <td>0x0901</td> - <td>Passed to <code>frontFace</code> to specify the front face of a polygon is drawn in the counter clockwise direction</td> - </tr> - </tbody> -</table> - -<h3 id="Hints">Hints</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.hint()")}}</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>DONT_CARE</code></td> - <td>0x1100</td> - <td>There is no preference for this behavior.</td> - </tr> - <tr> - <td><code>FASTEST</code></td> - <td>0x1101</td> - <td>The most efficient behavior should be used.</td> - </tr> - <tr> - <td><code>NICEST</code></td> - <td>0x1102</td> - <td>The most correct or the highest quality option should be used.</td> - </tr> - <tr> - <td><code>GENERATE_MIPMAP_HINT</code></td> - <td>0x8192</td> - <td>Hint for the quality of filtering when generating mipmap images with {{domxref("WebGLRenderingContext.generateMipmap()")}}.</td> - </tr> - </tbody> -</table> - -<h3 id="Data_types">Data types</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>BYTE</code></td> - <td>0x1400</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_BYTE</code></td> - <td>0x1401</td> - <td> </td> - </tr> - <tr> - <td><code>SHORT</code></td> - <td>0x1402</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_SHORT</code></td> - <td>0x1403</td> - <td> </td> - </tr> - <tr> - <td><code>INT</code></td> - <td>0x1404</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_INT</code></td> - <td>0x1405</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT</code></td> - <td>0x1406</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Pixel_formats">Pixel formats</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>DEPTH_COMPONENT</code></td> - <td>0x1902</td> - <td> </td> - </tr> - <tr> - <td><code>ALPHA</code></td> - <td>0x1906</td> - <td> </td> - </tr> - <tr> - <td><code>RGB</code></td> - <td>0x1907</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA</code></td> - <td>0x1908</td> - <td> </td> - </tr> - <tr> - <td><code>LUMINANCE</code></td> - <td>0x1909</td> - <td> </td> - </tr> - <tr> - <td><code>LUMINANCE_ALPHA</code></td> - <td>0x190A</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Pixel_types">Pixel types</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>UNSIGNED_BYTE</code></td> - <td>0x1401</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_SHORT_4_4_4_4</code></td> - <td>0x8033</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_SHORT_5_5_5_1</code></td> - <td>0x8034</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_SHORT_5_6_5</code></td> - <td>0x8363</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Shaders">Shaders</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.createShader()")}} or {{domxref("WebGLRenderingContext.getShaderParameter()")}}</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>FRAGMENT_SHADER</code></td> - <td>0x8B30</td> - <td>Passed to <code>createShader</code> to define a fragment shader.</td> - </tr> - <tr> - <td><code>VERTEX_SHADER</code></td> - <td>0x8B31</td> - <td>Passed to <code>createShader</code> to define a vertex shader</td> - </tr> - <tr> - <td><code>COMPILE_STATUS</code></td> - <td>0x8B81</td> - <td>Passed to <code>getShaderParamter</code> to get the status of the compilation. Returns false if the shader was not compiled. You can then query <code>getShaderInfoLog</code> to find the exact error</td> - </tr> - <tr> - <td><code>DELETE_STATUS</code></td> - <td>0x8B80</td> - <td>Passed to <code>getShaderParamter</code> to determine if a shader was deleted via <code>deleteShader</code>. Returns true if it was, false otherwise.</td> - </tr> - <tr> - <td><code>LINK_STATUS</code></td> - <td>0x8B82</td> - <td>Passed to <code>getProgramParameter</code> after calling <code>linkProgram</code> to determine if a program was linked correctly. Returns false if there were errors. Use <code>getProgramInfoLog</code> to find the exact error.</td> - </tr> - <tr> - <td><code>VALIDATE_STATUS</code></td> - <td>0x8B83</td> - <td>Passed to <code>getProgramParameter</code> after calling <code>validateProgram</code> to determine if it is valid. Returns false if errors were found.</td> - </tr> - <tr> - <td><code>ATTACHED_SHADERS</code></td> - <td>0x8B85</td> - <td>Passed to <code>getProgramParameter</code> after calling <code>attachShader</code> to determine if the shader was attached correctly. Returns false if errors occurred.</td> - </tr> - <tr> - <td><code>ACTIVE_ATTRIBUTES</code></td> - <td>0x8B89</td> - <td>Passed to <code>getProgramParameter</code> to get the number of attributes active in a program.</td> - </tr> - <tr> - <td><code>ACTIVE_UNIFORMS</code></td> - <td>0x8B86</td> - <td>Passed to <code>getProgramParamter</code> to get the number of uniforms active in a program.</td> - </tr> - <tr> - <td><code>MAX_VERTEX_ATTRIBS</code></td> - <td>0x8869</td> - <td>The maximum number of entries possible in the vertex attribute list.</td> - </tr> - <tr> - <td><code>MAX_VERTEX_UNIFORM_VECTORS</code></td> - <td>0x8DFB</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_VARYING_VECTORS</code></td> - <td>0x8DFC</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_COMBINED_TEXTURE_IMAGE_UNITS</code></td> - <td>0x8B4D</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_VERTEX_TEXTURE_IMAGE_UNITS</code></td> - <td>0x8B4C</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_TEXTURE_IMAGE_UNITS</code></td> - <td>0x8872</td> - <td>Implementation dependent number of maximum texture units. At least 8.</td> - </tr> - <tr> - <td><code>MAX_FRAGMENT_UNIFORM_VECTORS</code></td> - <td>0x8DFD</td> - <td> </td> - </tr> - <tr> - <td><code>SHADER_TYPE</code></td> - <td>0x8B4F</td> - <td> </td> - </tr> - <tr> - <td><code>SHADING_LANGUAGE_VERSION</code></td> - <td>0x8B8C</td> - <td> </td> - </tr> - <tr> - <td><code>CURRENT_PROGRAM</code></td> - <td>0x8B8D</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Depth_or_stencil_tests">Depth or stencil tests</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.depthFunc()")}} or {{domxref("WebGLRenderingContext.stencilFunc()")}}.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>NEVER</code></td> - <td>0x0200</td> - <td>Passed to <code>depthFunction</code> or <code>stencilFunction</code> to specify depth or stencil tests will never pass. i.e. Nothing will be drawn.</td> - </tr> - <tr> - <td><code>ALWAYS</code></td> - <td>0x0207</td> - <td>Passed to <code>depthFunction</code> or <code>stencilFunction</code> to specify depth or stencil tests will always pass. i.e. Pixels will be drawn in the order they are drawn.</td> - </tr> - <tr> - <td><code>LESS</code></td> - <td>0x0201</td> - <td>Passed to <code>depthFunction</code> or <code>stencilFunction</code> to specify depth or stencil tests will pass if the new depth value is less than the stored value.</td> - </tr> - <tr> - <td><code>EQUAL</code></td> - <td>0x0202</td> - <td>Passed to <code>depthFunction</code> or <code>stencilFunction</code> to specify depth or stencil tests will pass if the new depth value is equals to the stored value.</td> - </tr> - <tr> - <td><code>LEQUAL</code></td> - <td>0x0203</td> - <td>Passed to <code>depthFunction</code> or <code>stencilFunction</code> to specify depth or stencil tests will pass if the new depth value is less than or equal to the stored value.</td> - </tr> - <tr> - <td><code>GREATER</code></td> - <td>0x0204</td> - <td>Passed to <code>depthFunction</code> or <code>stencilFunction</code> to specify depth or stencil tests will pass if the new depth value is greater than the stored value.</td> - </tr> - <tr> - <td><code>GEQUAL</code></td> - <td>0x0206</td> - <td>Passed to <code>depthFunction</code> or <code>stencilFunction</code> to specify depth or stencil tests will pass if the new depth value is greater than or equal to the stored value.</td> - </tr> - <tr> - <td><code>NOTEQUAL</code></td> - <td>0x0205</td> - <td>Passed to <code>depthFunction</code> or <code>stencilFunction</code> to specify depth or stencil tests will pass if the new depth value is not equal to the stored value.</td> - </tr> - </tbody> -</table> - -<h3 id="Stencil_actions">Stencil actions</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.stencilOp()")}}.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>KEEP</code></td> - <td>0x1E00</td> - <td> </td> - </tr> - <tr> - <td><code>REPLACE</code></td> - <td>0x1E01</td> - <td> </td> - </tr> - <tr> - <td><code>INCR</code></td> - <td>0x1E02</td> - <td> </td> - </tr> - <tr> - <td><code>DECR</code></td> - <td>0x1E03</td> - <td> </td> - </tr> - <tr> - <td><code>INVERT</code></td> - <td>0x150A</td> - <td> </td> - </tr> - <tr> - <td><code>INCR_WRAP</code></td> - <td>0x8507</td> - <td> </td> - </tr> - <tr> - <td><code>DECR_WRAP</code></td> - <td>0x8508</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Textures">Textures</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.texParameteri()")}}, {{domxref("WebGLRenderingContext.texParameterf()")}}, {{domxref("WebGLRenderingContext.bindTexture()")}}, {{domxref("WebGLRenderingContext.texImage2D()")}}, and others.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>NEAREST</code></td> - <td>0x2600</td> - <td> </td> - </tr> - <tr> - <td><code>LINEAR</code></td> - <td>0x2601</td> - <td> </td> - </tr> - <tr> - <td><code>NEAREST_MIPMAP_NEAREST</code></td> - <td>0x2700</td> - <td> </td> - </tr> - <tr> - <td><code>LINEAR_MIPMAP_NEAREST</code></td> - <td>0x2701</td> - <td> </td> - </tr> - <tr> - <td><code>NEAREST_MIPMAP_LINEAR</code></td> - <td>0x2702</td> - <td> </td> - </tr> - <tr> - <td><code>LINEAR_MIPMAP_LINEAR</code></td> - <td>0x2703</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_MAG_FILTER</code></td> - <td>0x2800</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_MIN_FILTER</code></td> - <td>0x2801</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_WRAP_S</code></td> - <td>0x2802</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_WRAP_T</code></td> - <td>0x2803</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_2D</code></td> - <td>0x0DE1</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE</code></td> - <td>0x1702</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_CUBE_MAP</code></td> - <td>0x8513</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_BINDING_CUBE_MAP</code></td> - <td>0x8514</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_CUBE_MAP_POSITIVE_X</code></td> - <td>0x8515</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_CUBE_MAP_NEGATIVE_X</code></td> - <td>0x8516</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_CUBE_MAP_POSITIVE_Y</code></td> - <td>0x8517</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_CUBE_MAP_NEGATIVE_Y</code></td> - <td>0x8518</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_CUBE_MAP_POSITIVE_Z</code></td> - <td>0x8519</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_CUBE_MAP_NEGATIVE_Z</code></td> - <td>0x851A</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_CUBE_MAP_TEXTURE_SIZE</code></td> - <td>0x851C</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE0 - 31</code></td> - <td>0x84C0 - 0x84DF</td> - <td>A texture unit.</td> - </tr> - <tr> - <td><code>ACTIVE_TEXTURE</code></td> - <td>0x84E0</td> - <td>The current active texture unit.</td> - </tr> - <tr> - <td><code>REPEAT</code></td> - <td>0x2901</td> - <td> </td> - </tr> - <tr> - <td><code>CLAMP_TO_EDGE</code></td> - <td>0x812F</td> - <td> </td> - </tr> - <tr> - <td><code>MIRRORED_REPEAT</code></td> - <td>0x8370</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Uniform_types">Uniform types</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>FLOAT_VEC2</code></td> - <td>0x8B50</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_VEC3</code></td> - <td>0x8B51</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_VEC4</code></td> - <td>0x8B52</td> - <td> </td> - </tr> - <tr> - <td><code>INT_VEC2</code></td> - <td>0x8B53</td> - <td> </td> - </tr> - <tr> - <td><code>INT_VEC3</code></td> - <td>0x8B54</td> - <td> </td> - </tr> - <tr> - <td><code>INT_VEC4</code></td> - <td>0x8B55</td> - <td> </td> - </tr> - <tr> - <td><code>BOOL</code></td> - <td>0x8B56</td> - <td> </td> - </tr> - <tr> - <td><code>BOOL_VEC2</code></td> - <td>0x8B57</td> - <td> </td> - </tr> - <tr> - <td><code>BOOL_VEC3</code></td> - <td>0x8B58</td> - <td> </td> - </tr> - <tr> - <td><code>BOOL_VEC4</code></td> - <td>0x8B59</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_MAT2</code></td> - <td>0x8B5A</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_MAT3</code></td> - <td>0x8B5B</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_MAT4</code></td> - <td>0x8B5C</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLER_2D</code></td> - <td>0x8B5E</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLER_CUBE</code></td> - <td>0x8B60</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Shader_precision-specified_types">Shader precision-specified types</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>LOW_FLOAT</code></td> - <td>0x8DF0</td> - <td> </td> - </tr> - <tr> - <td><code>MEDIUM_FLOAT</code></td> - <td>0x8DF1</td> - <td> </td> - </tr> - <tr> - <td><code>HIGH_FLOAT</code></td> - <td>0x8DF2</td> - <td> </td> - </tr> - <tr> - <td><code>LOW_INT</code></td> - <td>0x8DF3</td> - <td> </td> - </tr> - <tr> - <td><code>MEDIUM_INT</code></td> - <td>0x8DF4</td> - <td> </td> - </tr> - <tr> - <td><code>HIGH_INT</code></td> - <td>0x8DF5</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Framebuffers_and_renderbuffers">Framebuffers and renderbuffers</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>FRAMEBUFFER</code></td> - <td>0x8D40</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER</code></td> - <td>0x8D41</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA4</code></td> - <td>0x8056</td> - <td> </td> - </tr> - <tr> - <td><code>RGB5_A1</code></td> - <td>0x8057</td> - <td> </td> - </tr> - <tr> - <td><code>RGB565</code></td> - <td>0x8D62</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH_COMPONENT16</code></td> - <td>0x81A5</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_INDEX</code></td> - <td>0x1901</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_INDEX8</code></td> - <td>0x8D48</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH_STENCIL</code></td> - <td>0x84F9</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_WIDTH</code></td> - <td>0x8D42</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_HEIGHT</code></td> - <td>0x8D43</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_INTERNAL_FORMAT</code></td> - <td>0x8D44</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_RED_SIZE</code></td> - <td>0x8D50</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_GREEN_SIZE</code></td> - <td>0x8D51</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_BLUE_SIZE</code></td> - <td>0x8D52</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_ALPHA_SIZE</code></td> - <td>0x8D53</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_DEPTH_SIZE</code></td> - <td>0x8D54</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_STENCIL_SIZE</code></td> - <td>0x8D55</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE</code></td> - <td>0x8CD0</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_OBJECT_NAME</code></td> - <td>0x8CD1</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL</code></td> - <td>0x8CD2</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE</code></td> - <td>0x8CD3</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT0</code></td> - <td>0x8CE0</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH_ATTACHMENT</code></td> - <td>0x8D00</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL_ATTACHMENT</code></td> - <td>0x8D20</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH_STENCIL_ATTACHMENT</code></td> - <td>0x821A</td> - <td> </td> - </tr> - <tr> - <td><code>NONE</code></td> - <td>0</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_COMPLETE</code></td> - <td>0x8CD5</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_INCOMPLETE_ATTACHMENT</code></td> - <td>0x8CD6</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT</code></td> - <td>0x8CD7</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_INCOMPLETE_DIMENSIONS</code></td> - <td>0x8CD9</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_UNSUPPORTED</code></td> - <td>0x8CDD</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_BINDING</code></td> - <td>0x8CA6</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_BINDING</code></td> - <td>0x8CA7</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_RENDERBUFFER_SIZE</code></td> - <td>0x84E8</td> - <td> </td> - </tr> - <tr> - <td><code>INVALID_FRAMEBUFFER_OPERATION</code></td> - <td>0x0506</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Pixel_storage_modes">Pixel storage modes</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.pixelStorei()")}}.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>UNPACK_FLIP_Y_WEBGL</code></td> - <td>0x9240</td> - <td> </td> - </tr> - <tr> - <td><code>UNPACK_PREMULTIPLY_ALPHA_WEBGL</code></td> - <td>0x9241</td> - <td> </td> - </tr> - <tr> - <td><code>UNPACK_COLORSPACE_CONVERSION_WEBGL</code></td> - <td>0x9243</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Constantes_adicionais_definidas_em_WebGL_2">Constantes adicionais definidas em WebGL 2</h2> - -<p>These constants are defined on the {{domxref("WebGL2RenderingContext")}} interface. All WebGL 1 constants are also available in a WebGL 2 context.</p> - -<h3 id="Obter_a_informação_do_parâmetro_GL">Obter a informação do parâmetro GL</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.getParameter()")}} to specify what information to return.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>READ_BUFFER</code></td> - <td>0x0C02</td> - <td> </td> - </tr> - <tr> - <td><code>UNPACK_ROW_LENGTH</code></td> - <td>0x0CF2</td> - <td> </td> - </tr> - <tr> - <td><code>UNPACK_SKIP_ROWS</code></td> - <td>0x0CF3</td> - <td> </td> - </tr> - <tr> - <td><code>UNPACK_SKIP_PIXELS</code></td> - <td>0x0CF4</td> - <td> </td> - </tr> - <tr> - <td><code>PACK_ROW_LENGTH</code></td> - <td>0x0D02</td> - <td> </td> - </tr> - <tr> - <td><code>PACK_SKIP_ROWS</code></td> - <td>0x0D03</td> - <td> </td> - </tr> - <tr> - <td><code>PACK_SKIP_PIXELS</code></td> - <td>0x0D04</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_BINDING_3D</code></td> - <td>0x806A</td> - <td> </td> - </tr> - <tr> - <td><code>UNPACK_SKIP_IMAGES</code></td> - <td>0x806D</td> - <td> </td> - </tr> - <tr> - <td><code>UNPACK_IMAGE_HEIGHT</code></td> - <td>0x806E</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_3D_TEXTURE_SIZE</code></td> - <td>0x8073</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_ELEMENTS_VERTICES</code></td> - <td>0x80E8</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_ELEMENTS_INDICES</code></td> - <td>0x80E9</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_TEXTURE_LOD_BIAS</code></td> - <td>0x84FD</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_FRAGMENT_UNIFORM_COMPONENTS</code></td> - <td>0x8B49</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_VERTEX_UNIFORM_COMPONENTS</code></td> - <td>0x8B4A</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_ARRAY_TEXTURE_LAYERS</code></td> - <td>0x88FF</td> - <td> </td> - </tr> - <tr> - <td><code>MIN_PROGRAM_TEXEL_OFFSET</code></td> - <td>0x8904</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_PROGRAM_TEXEL_OFFSET</code></td> - <td>0x8905</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_VARYING_COMPONENTS</code></td> - <td>0x8B4B</td> - <td> </td> - </tr> - <tr> - <td><code>FRAGMENT_SHADER_DERIVATIVE_HINT</code></td> - <td>0x8B8B</td> - <td> </td> - </tr> - <tr> - <td><code>RASTERIZER_DISCARD</code></td> - <td>0x8C89</td> - <td> </td> - </tr> - <tr> - <td><code>VERTEX_ARRAY_BINDING</code></td> - <td>0x85B5</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_VERTEX_OUTPUT_COMPONENTS</code></td> - <td>0x9122</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_FRAGMENT_INPUT_COMPONENTS</code></td> - <td>0x9125</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_SERVER_WAIT_TIMEOUT</code></td> - <td>0x9111</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_ELEMENT_INDEX</code></td> - <td>0x8D6B</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Texturas">Texturas</h3> - -<p>Constants passed to {{domxref("WebGLRenderingContext.texParameteri()")}}, {{domxref("WebGLRenderingContext.texParameterf()")}}, {{domxref("WebGLRenderingContext.bindTexture()")}}, {{domxref("WebGLRenderingContext.texImage2D()")}}, and others.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>RED</code></td> - <td>0x1903</td> - <td> </td> - </tr> - <tr> - <td><code>RGB8</code></td> - <td>0x8051</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA8</code></td> - <td>0x8058</td> - <td> </td> - </tr> - <tr> - <td><code>RGB10_A2</code></td> - <td>0x8059</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_3D</code></td> - <td>0x806F</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_WRAP_R</code></td> - <td>0x8072</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_MIN_LOD</code></td> - <td>0x813A</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_MAX_LOD</code></td> - <td>0x813B</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_BASE_LEVEL</code></td> - <td>0x813C</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_MAX_LEVEL</code></td> - <td>0x813D</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_COMPARE_MODE</code></td> - <td>0x884C</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_COMPARE_FUNC</code></td> - <td>0x884D</td> - <td> </td> - </tr> - <tr> - <td><code>SRGB</code></td> - <td>0x8C40</td> - <td> </td> - </tr> - <tr> - <td><code>SRGB8</code></td> - <td>0x8C41</td> - <td> </td> - </tr> - <tr> - <td><code>SRGB8_ALPHA8</code></td> - <td>0x8C43</td> - <td> </td> - </tr> - <tr> - <td><code>COMPARE_REF_TO_TEXTURE</code></td> - <td>0x884E</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA32F</code></td> - <td>0x8814</td> - <td> </td> - </tr> - <tr> - <td><code>RGB32F</code></td> - <td>0x8815</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA16F</code></td> - <td>0x881A</td> - <td> </td> - </tr> - <tr> - <td><code>RGB16F</code></td> - <td>0x881B</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_2D_ARRAY</code></td> - <td>0x8C1A</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_BINDING_2D_ARRAY</code></td> - <td>0x8C1D</td> - <td> </td> - </tr> - <tr> - <td><code>R11F_G11F_B10F</code></td> - <td>0x8C3A</td> - <td> </td> - </tr> - <tr> - <td><code>RGB9_E5</code></td> - <td>0x8C3D</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA32UI</code></td> - <td>0x8D70</td> - <td> </td> - </tr> - <tr> - <td><code>RGB32UI</code></td> - <td>0x8D71</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA16UI</code></td> - <td>0x8D76</td> - <td> </td> - </tr> - <tr> - <td><code>RGB16UI</code></td> - <td>0x8D77</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA8UI</code></td> - <td>0x8D7C</td> - <td> </td> - </tr> - <tr> - <td><code>RGB8UI</code></td> - <td>0x8D7D</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA32I</code></td> - <td>0x8D82</td> - <td> </td> - </tr> - <tr> - <td><code>RGB32I</code></td> - <td>0x8D83</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA16I</code></td> - <td>0x8D88</td> - <td> </td> - </tr> - <tr> - <td><code>RGB16I</code></td> - <td>0x8D89</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA8I</code></td> - <td>0x8D8E</td> - <td> </td> - </tr> - <tr> - <td><code>RGB8I</code></td> - <td>0x8D8F</td> - <td> </td> - </tr> - <tr> - <td><code>RED_INTEGER</code></td> - <td>0x8D94</td> - <td> </td> - </tr> - <tr> - <td><code>RGB_INTEGER</code></td> - <td>0x8D98</td> - <td> </td> - </tr> - <tr> - <td><code>RGBA_INTEGER</code></td> - <td>0x8D99</td> - <td> </td> - </tr> - <tr> - <td><code>R8</code></td> - <td>0x8229</td> - <td> </td> - </tr> - <tr> - <td><code>RG8</code></td> - <td>0x822B</td> - <td> </td> - </tr> - <tr> - <td>R16F</td> - <td>0x822D</td> - <td> </td> - </tr> - <tr> - <td>R32F</td> - <td>0x822E</td> - <td> </td> - </tr> - <tr> - <td>RG16F</td> - <td>0x822F</td> - <td> </td> - </tr> - <tr> - <td>RG32F</td> - <td>0x8230</td> - <td> </td> - </tr> - <tr> - <td>R8I</td> - <td>0x8231</td> - <td> </td> - </tr> - <tr> - <td>R8UI</td> - <td>0x8232</td> - <td> </td> - </tr> - <tr> - <td>R16I</td> - <td>0x8233</td> - <td> </td> - </tr> - <tr> - <td>R16UI</td> - <td>0x8234</td> - <td> </td> - </tr> - <tr> - <td>R32I</td> - <td>0x8235</td> - <td> </td> - </tr> - <tr> - <td>R32UI</td> - <td>0x8236</td> - <td> </td> - </tr> - <tr> - <td>RG8I</td> - <td>0x8237</td> - <td> </td> - </tr> - <tr> - <td>RG8UI</td> - <td>0x8238</td> - <td> </td> - </tr> - <tr> - <td>RG16I</td> - <td>0x8239</td> - <td> </td> - </tr> - <tr> - <td>RG16UI</td> - <td>0x823A</td> - <td> </td> - </tr> - <tr> - <td>RG32I</td> - <td>0x823B</td> - <td> </td> - </tr> - <tr> - <td>RG32UI</td> - <td>0x823C</td> - <td> </td> - </tr> - <tr> - <td>R8_SNORM</td> - <td>0x8F94</td> - <td> </td> - </tr> - <tr> - <td>RG8_SNORM</td> - <td>0x8F95</td> - <td> </td> - </tr> - <tr> - <td>RGB8_SNORM</td> - <td>0x8F96</td> - <td> </td> - </tr> - <tr> - <td>RGBA8_SNORM</td> - <td>0x8F97</td> - <td> </td> - </tr> - <tr> - <td><code>RGB10_A2UI</code></td> - <td>0x906F</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_IMMUTABLE_FORMAT </code></td> - <td>0x912F</td> - <td> </td> - </tr> - <tr> - <td><code>TEXTURE_IMMUTABLE_LEVELS</code></td> - <td>0x82DF</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Tipos_de_píxel">Tipos de píxel</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>UNSIGNED_INT_2_10_10_10_REV</code></td> - <td>0x8368</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_INT_10F_11F_11F_REV</code></td> - <td>0x8C3B</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_INT_5_9_9_9_REV</code></td> - <td>0x8C3E</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_32_UNSIGNED_INT_24_8_REV</code></td> - <td>0x8DAD</td> - <td> </td> - </tr> - <tr> - <td>UNSIGNED_INT_24_8</td> - <td>0x84FA</td> - <td> </td> - </tr> - <tr> - <td><code>HALF_FLOAT</code></td> - <td>0x140B</td> - <td> </td> - </tr> - <tr> - <td><code>RG</code></td> - <td>0x8227</td> - <td> </td> - </tr> - <tr> - <td><code>RG_INTEGER</code></td> - <td>0x8228</td> - <td> </td> - </tr> - <tr> - <td><code>INT_2_10_10_10_REV</code></td> - <td>0x8D9F</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Consultas">Consultas</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>CURRENT_QUERY</code></td> - <td>0x8865</td> - <td> </td> - </tr> - <tr> - <td><code>QUERY_RESULT </code></td> - <td>0x8866</td> - <td> </td> - </tr> - <tr> - <td><code>QUERY_RESULT_AVAILABLE</code></td> - <td>0x8867</td> - <td> </td> - </tr> - <tr> - <td><code>ANY_SAMPLES_PASSED</code></td> - <td>0x8C2F</td> - <td> </td> - </tr> - <tr> - <td><code>ANY_SAMPLES_PASSED_CONSERVATIVE</code></td> - <td>0x8D6A</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Draw_buffers">Draw buffers</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>MAX_DRAW_BUFFERS</code></td> - <td>0x8824</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER0</code></td> - <td>0x8825</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER1</code></td> - <td>0x8826</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER2</code></td> - <td>0x8827</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER3</code></td> - <td>0x8828</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER4</code></td> - <td>0x8829</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER5</code></td> - <td>0x882A</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER6</code></td> - <td>0x882B</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER7</code></td> - <td>0x882C</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER8</code></td> - <td>0x882D</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER9</code></td> - <td>0x882E</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER10</code></td> - <td>0x882F</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER11</code></td> - <td>0x8830</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER12</code></td> - <td>0x8831</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER13</code></td> - <td>0x8832</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER14</code></td> - <td>0x8833</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_BUFFER15</code></td> - <td>0x8834</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_COLOR_ATTACHMENTS</code></td> - <td>0x8CDF</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT1</code></td> - <td>0x8CE1</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT2</code></td> - <td>0x8CE2</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT3</code></td> - <td>0x8CE3</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT4</code></td> - <td>0x8CE4</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT5</code></td> - <td>0x8CE5</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT6</code></td> - <td>0x8CE6</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT7</code></td> - <td>0x8CE7</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT8</code></td> - <td>0x8CE8</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT9</code></td> - <td>0x8CE9</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT10</code></td> - <td>0x8CEA</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT11</code></td> - <td>0x8CEB</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT12</code></td> - <td>0x8CEC</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT13</code></td> - <td>0x8CED</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT14</code></td> - <td>0x8CEE</td> - <td> </td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT15</code></td> - <td>0x8CEF</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Samplers"><em>Samplers</em></h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>SAMPLER_3D</code></td> - <td>0x8B5F</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLER_2D_SHADOW</code></td> - <td>0x8B62</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLER_2D_ARRAY</code></td> - <td>0x8DC1</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLER_2D_ARRAY_SHADOW</code></td> - <td>0x8DC4</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLER_CUBE_SHADOW</code></td> - <td>0x8DC5</td> - <td> </td> - </tr> - <tr> - <td><code>INT_SAMPLER_2D</code></td> - <td>0x8DCA</td> - <td> </td> - </tr> - <tr> - <td><code>INT_SAMPLER_3D</code></td> - <td>0x8DCB</td> - <td> </td> - </tr> - <tr> - <td><code>INT_SAMPLER_CUBE</code></td> - <td>0x8DCC</td> - <td> </td> - </tr> - <tr> - <td><code>INT_SAMPLER_2D_ARRAY</code></td> - <td>0x8DCF</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_INT_SAMPLER_2D</code></td> - <td>0x8DD2</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_INT_SAMPLER_3D</code></td> - <td>0x8DD3</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_INT_SAMPLER_CUBE</code></td> - <td>0x8DD4</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_INT_SAMPLER_2D_ARRAY</code></td> - <td>0x8DD7</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_SAMPLES</code></td> - <td>0x8D57</td> - <td> </td> - </tr> - <tr> - <td><code>SAMPLER_BINDING</code></td> - <td>0x8919</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Buffers_2"><em>Buffers</em></h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>PIXEL_PACK_BUFFER</code></td> - <td>0x88EB</td> - <td> </td> - </tr> - <tr> - <td><code>PIXEL_UNPACK_BUFFER</code></td> - <td>0x88EC</td> - <td> </td> - </tr> - <tr> - <td><code>PIXEL_PACK_BUFFER_BINDING</code></td> - <td>0x88ED</td> - <td> </td> - </tr> - <tr> - <td><code>PIXEL_UNPACK_BUFFER_BINDING </code></td> - <td>0x88EF</td> - <td> </td> - </tr> - <tr> - <td><code>COPY_READ_BUFFER</code></td> - <td>0x8F36</td> - <td> </td> - </tr> - <tr> - <td><code>COPY_WRITE_BUFFER</code></td> - <td>0x8F37</td> - <td> </td> - </tr> - <tr> - <td><code>COPY_READ_BUFFER_BINDING</code></td> - <td>0x8F36</td> - <td> </td> - </tr> - <tr> - <td><code>COPY_WRITE_BUFFER_BINDING</code></td> - <td>0x8F37</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Tipos_de_dados">Tipos de dados</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>FLOAT_MAT2x3</code></td> - <td>0x8B65</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_MAT2x4</code></td> - <td>0x8B66</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_MAT3x2</code></td> - <td>0x8B67</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_MAT3x4 </code></td> - <td>0x8B68</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_MAT4x2</code></td> - <td>0x8B69</td> - <td> </td> - </tr> - <tr> - <td><code>FLOAT_MAT4x3</code></td> - <td>0x8B6A</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_INT_VEC2</code></td> - <td>0x8DC6</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_INT_VEC3</code></td> - <td>0x8DC7</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_INT_VEC4</code></td> - <td>0x8DC8</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_NORMALIZED</code></td> - <td>0x8C17</td> - <td> </td> - </tr> - <tr> - <td><code>SIGNED_NORMALIZED</code></td> - <td>0x8F9C</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Atributos_de_Vertex_2">Atributos de <em>Vertex</em></h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>VERTEX_ATTRIB_ARRAY_INTEGER </code></td> - <td>0x88FD</td> - <td> </td> - </tr> - <tr> - <td><code>VERTEX_ATTRIB_ARRAY_DIVISOR</code></td> - <td>0x88FE</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Transform_feedback">Transform feedback</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>TRANSFORM_FEEDBACK_BUFFER_MODE</code></td> - <td>0x8C7F</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_TRANSFORM_FEEDBACK_SEPARATE_COMPONENTS</code></td> - <td>0x8C80</td> - <td> </td> - </tr> - <tr> - <td><code>TRANSFORM_FEEDBACK_VARYINGS</code></td> - <td>0x8C83</td> - <td> </td> - </tr> - <tr> - <td><code>TRANSFORM_FEEDBACK_BUFFER_START</code></td> - <td>0x8C84</td> - <td> </td> - </tr> - <tr> - <td><code>TRANSFORM_FEEDBACK_BUFFER_SIZE</code></td> - <td>0x8C85</td> - <td> </td> - </tr> - <tr> - <td><code>TRANSFORM_FEEDBACK_PRIMITIVES_WRITTEN</code></td> - <td>0x8C88</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_TRANSFORM_FEEDBACK_INTERLEAVED_COMPONENTS</code></td> - <td>0x8C8A</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS</code></td> - <td>0x8C8B</td> - <td> </td> - </tr> - <tr> - <td><code>INTERLEAVED_ATTRIBS</code></td> - <td>0x8C8C</td> - <td> </td> - </tr> - <tr> - <td><code>SEPARATE_ATTRIBS</code></td> - <td>0x8C8D</td> - <td> </td> - </tr> - <tr> - <td><code>TRANSFORM_FEEDBACK_BUFFER</code></td> - <td>0x8C8E</td> - <td> </td> - </tr> - <tr> - <td><code>TRANSFORM_FEEDBACK_BUFFER_BINDING</code></td> - <td>0x8C8F</td> - <td> </td> - </tr> - <tr> - <td><code>TRANSFORM_FEEDBACK</code></td> - <td>0x8E22</td> - <td> </td> - </tr> - <tr> - <td><code>TRANSFORM_FEEDBACK_PAUSED</code></td> - <td>0x8E23</td> - <td> </td> - </tr> - <tr> - <td><code>TRANSFORM_FEEDBACK_ACTIVE</code></td> - <td>0x8E24</td> - <td> </td> - </tr> - <tr> - <td><code>TRANSFORM_FEEDBACK_BINDING</code></td> - <td>0x8E25</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Framebuffers_e_renderbuffers"><em>Framebuffers </em>e <em>renderbuffers</em></h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING</code></td> - <td>0x8210</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE</code></td> - <td>0x8211</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_RED_SIZE</code></td> - <td>0x8212</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_GREEN_SIZE</code></td> - <td>0x8213</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_BLUE_SIZE</code></td> - <td>0x8214</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_ALPHA_SIZE</code></td> - <td>0x8215</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_DEPTH_SIZE</code></td> - <td>0x8216</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_STENCIL_SIZE</code></td> - <td>0x8217</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_DEFAULT</code></td> - <td>0x8218</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH_STENCIL_ATTACHMENT</code></td> - <td>0x821A</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH_STENCIL</code></td> - <td>0x84F9</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH24_STENCIL8</code></td> - <td>0x88F0</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_FRAMEBUFFER_BINDING</code></td> - <td>0x8CA6</td> - <td> </td> - </tr> - <tr> - <td><code>READ_FRAMEBUFFER</code></td> - <td>0x8CA8</td> - <td> </td> - </tr> - <tr> - <td><code>DRAW_FRAMEBUFFER</code></td> - <td>0x8CA9</td> - <td> </td> - </tr> - <tr> - <td><code>READ_FRAMEBUFFER_BINDING</code></td> - <td>0x8CAA</td> - <td> </td> - </tr> - <tr> - <td><code>RENDERBUFFER_SAMPLES</code></td> - <td>0x8CAB</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_TEXTURE_LAYER</code></td> - <td>0x8CD4</td> - <td> </td> - </tr> - <tr> - <td><code>FRAMEBUFFER_INCOMPLETE_MULTISAMPLE</code></td> - <td>0x8D56</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Uniforms">Uniforms</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>UNIFORM_BUFFER</code></td> - <td>0x8A11</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BUFFER_BINDING</code></td> - <td>0x8A28</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BUFFER_START</code></td> - <td>0x8A29</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BUFFER_SIZE</code></td> - <td>0x8A2A</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_VERTEX_UNIFORM_BLOCKS</code></td> - <td>0x8A2B</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_FRAGMENT_UNIFORM_BLOCKS</code></td> - <td>0x8A2D</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_COMBINED_UNIFORM_BLOCKS</code></td> - <td>0x8A2E</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_UNIFORM_BUFFER_BINDINGS</code></td> - <td>0x8A2F</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_UNIFORM_BLOCK_SIZE</code></td> - <td>0x8A30</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_COMBINED_VERTEX_UNIFORM_COMPONENTS</code></td> - <td>0x8A31</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_COMBINED_FRAGMENT_UNIFORM_COMPONENTS</code></td> - <td>0x8A33</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BUFFER_OFFSET_ALIGNMENT</code></td> - <td>0x8A34</td> - <td> </td> - </tr> - <tr> - <td><code>ACTIVE_UNIFORM_BLOCKS</code></td> - <td>0x8A36</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_TYPE </code></td> - <td>0x8A37</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_SIZE</code></td> - <td>0x8A38</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BLOCK_INDEX</code></td> - <td>0x8A3A</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_OFFSET</code></td> - <td>0x8A3B</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_ARRAY_STRIDE</code></td> - <td>0x8A3C</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_MATRIX_STRIDE</code></td> - <td>0x8A3D</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_IS_ROW_MAJOR</code></td> - <td>0x8A3E</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BLOCK_BINDING</code></td> - <td>0x8A3F</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BLOCK_DATA_SIZE</code></td> - <td>0x8A40</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BLOCK_ACTIVE_UNIFORMS</code></td> - <td>0x8A42</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES</code></td> - <td>0x8A43</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADER</code></td> - <td>0x8A44</td> - <td> </td> - </tr> - <tr> - <td><code>UNIFORM_BLOCK_REFERENCED_BY_FRAGMENT_SHADER</code></td> - <td>0x8A46</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Objetos_de_sincronização">Objetos de sincronização</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>OBJECT_TYPE</code></td> - <td>0x9112</td> - <td> </td> - </tr> - <tr> - <td><code>SYNC_CONDITION</code></td> - <td>0x9113</td> - <td> </td> - </tr> - <tr> - <td><code>SYNC_STATUS</code></td> - <td>0x9114</td> - <td> </td> - </tr> - <tr> - <td><code>SYNC_FLAGS</code></td> - <td>0x9115</td> - <td> </td> - </tr> - <tr> - <td><code>SYNC_FENCE</code></td> - <td>0x9116</td> - <td> </td> - </tr> - <tr> - <td><code>SYNC_GPU_COMMANDS_COMPLETE</code></td> - <td>0x9117</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNALED</code></td> - <td>0x9118</td> - <td> </td> - </tr> - <tr> - <td><code>SIGNALED</code></td> - <td>0x9119</td> - <td> </td> - </tr> - <tr> - <td><code>ALREADY_SIGNALED</code></td> - <td>0x911A</td> - <td> </td> - </tr> - <tr> - <td><code>TIMEOUT_EXPIRED</code></td> - <td>0x911B</td> - <td> </td> - </tr> - <tr> - <td><code>CONDITION_SATISFIED</code></td> - <td>0x911C</td> - <td> </td> - </tr> - <tr> - <td><code>WAIT_FAILED</code></td> - <td>0x911D</td> - <td> </td> - </tr> - <tr> - <td><code>SYNC_FLUSH_COMMANDS_BIT</code></td> - <td>0x00000001</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Constantes_diversas">Constantes diversas</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>COLOR</code></td> - <td>0x1800</td> - <td> </td> - </tr> - <tr> - <td>DEPTH</td> - <td>0x1801</td> - <td> </td> - </tr> - <tr> - <td><code>STENCIL</code></td> - <td>0x1802</td> - <td> </td> - </tr> - <tr> - <td><code>MIN</code></td> - <td>0x8007</td> - <td> </td> - </tr> - <tr> - <td>MAX</td> - <td>0x8008</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH_COMPONENT24</code></td> - <td>0x81A6</td> - <td> </td> - </tr> - <tr> - <td><code>STREAM_READ</code></td> - <td>0x88E1</td> - <td> </td> - </tr> - <tr> - <td><code>STREAM_COPY</code></td> - <td>0x88E2</td> - <td> </td> - </tr> - <tr> - <td><code>STATIC_READ</code></td> - <td>0x88E5</td> - <td> </td> - </tr> - <tr> - <td><code>STATIC_COPY</code></td> - <td>0x88E6</td> - <td> </td> - </tr> - <tr> - <td><code>DYNAMIC_READ</code></td> - <td>0x88E9</td> - <td> </td> - </tr> - <tr> - <td><code>DYNAMIC_COPY</code></td> - <td>0x88EA</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH_COMPONENT32F</code></td> - <td>0x8CAC</td> - <td> </td> - </tr> - <tr> - <td><code>DEPTH32F_STENCIL8</code></td> - <td>0x8CAD</td> - <td> </td> - </tr> - <tr> - <td><code>INVALID_INDEX</code></td> - <td>0xFFFFFFFF</td> - <td> </td> - </tr> - <tr> - <td><code>TIMEOUT_IGNORED</code></td> - <td>-1</td> - <td> </td> - </tr> - <tr> - <td><code>MAX_CLIENT_WAIT_TIMEOUT_WEBGL</code></td> - <td>0x9247</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Constantes_definidas_nas_extensões_de_WebGL">Constantes definidas nas extensões de WebGL</h2> - -<h3 id="domxref(ANGLE_instanced_arrays)">{{domxref("ANGLE_instanced_arrays")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE</code></td> - <td>0x88FE</td> - <td>Describes the frequency divisor used for instanced rendering.</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(WEBGL_debug_renderer_info)">{{domxref("WEBGL_debug_renderer_info")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>UNMASKED_VENDOR_WEBGL</code></td> - <td>0x9245</td> - <td>Passed to <code>getParameter</code> to get the vendor string of the graphics driver.</td> - </tr> - <tr> - <td><code>UNMASKED_RENDERER_WEBGL</code></td> - <td>0x9246</td> - <td>Passed to <code>getParameter</code> to get the renderer string of the graphics driver.</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(EXT_texture_filter_anisotropic)">{{domxref("EXT_texture_filter_anisotropic")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>MAX_TEXTURE_MAX_ANISOTROPY_EXT</code></td> - <td>0x84FF</td> - <td>Returns the maximum available anisotropy.</td> - </tr> - <tr> - <td><code>TEXTURE_MAX_ANISOTROPY_EXT</code></td> - <td>0x84FE</td> - <td>Passed to <code>texParameter</code> to set the desired maximum anisotropy for a texture.</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(WEBGL_compressed_texture_s3tc)">{{domxref("WEBGL_compressed_texture_s3tc")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>COMPRESSED_RGB_S3TC_DXT1_EXT</code></td> - <td>0x83F0</td> - <td>A DXT1-compressed image in an RGB image format.</td> - </tr> - <tr> - <td><code>COMPRESSED_RGBA_S3TC_DXT1_EXT</code></td> - <td>0x83F1</td> - <td>A DXT1-compressed image in an RGB image format with a simple on/off alpha value.</td> - </tr> - <tr> - <td><code>COMPRESSED_RGBA_S3TC_DXT3_EXT</code></td> - <td>0x83F2</td> - <td>A DXT3-compressed image in an RGBA image format. Compared to a 32-bit RGBA texture, it offers 4:1 compression.</td> - </tr> - <tr> - <td><code>COMPRESSED_RGBA_S3TC_DXT5_EXT</code></td> - <td>0x83F3</td> - <td>A DXT5-compressed image in an RGBA image format. It also provides a 4:1 compression, but differs to the DXT3 compression in how the alpha compression is done.</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(WEBGL_compressed_texture_etc)">{{domxref("WEBGL_compressed_texture_etc")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>COMPRESSED_R11_EAC</code></td> - <td>0x9270</td> - <td>One-channel (red) unsigned format compression.</td> - </tr> - <tr> - <td><code>COMPRESSED_SIGNED_R11_EAC</code></td> - <td>0x9271</td> - <td>One-channel (red) signed format compression.</td> - </tr> - <tr> - <td><code>COMPRESSED_RG11_EAC</code></td> - <td>0x9272</td> - <td>Two-channel (red and green) unsigned format compression.</td> - </tr> - <tr> - <td><code>COMPRESSED_SIGNED_RG11_EAC</code></td> - <td>0x9273</td> - <td>Two-channel (red and green) signed format compression.</td> - </tr> - <tr> - <td><code>COMPRESSED_RGB8_ETC2</code></td> - <td>0x9274</td> - <td>Compresses RBG8 data with no alpha channel.</td> - </tr> - <tr> - <td><code>COMPRESSED_RGBA8_ETC2_EAC</code></td> - <td>0x9275</td> - <td>Compresses RGBA8 data. The RGB part is encoded the same as <code>RGB_ETC2</code>, but the alpha part is encoded separately.</td> - </tr> - <tr> - <td><code>COMPRESSED_SRGB8_ETC2</code></td> - <td>0x9276</td> - <td>Compresses sRBG8 data with no alpha channel.</td> - </tr> - <tr> - <td><code>COMPRESSED_SRGB8_ALPHA8_ETC2_EAC</code></td> - <td>0x9277</td> - <td>Compresses sRGBA8 data. The sRGB part is encoded the same as <code>SRGB_ETC2</code>, but the alpha part is encoded separately.</td> - </tr> - <tr> - <td><code>COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2</code></td> - <td>0x9278</td> - <td>Similar to <code>RGB8_ETC</code>, but with ability to punch through the alpha channel, which means to make it completely opaque or transparent.</td> - </tr> - <tr> - <td><code>COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2</code></td> - <td>0x9279</td> - <td>Similar to <code>SRGB8_ETC</code>, but with ability to punch through the alpha channel, which means to make it completely opaque or transparent.</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(WEBGL_compressed_texture_pvrtc)">{{domxref("WEBGL_compressed_texture_pvrtc")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>COMPRESSED_RGB_PVRTC_4BPPV1_IMG</code></td> - <td>0x8C00</td> - <td>RGB compression in 4-bit mode. One block for each 4×4 pixels.</td> - </tr> - <tr> - <td><code>COMPRESSED_RGBA_PVRTC_4BPPV1_IMG</code></td> - <td>0x8C02</td> - <td>RGBA compression in 4-bit mode. One block for each 4×4 pixels.</td> - </tr> - <tr> - <td><code>COMPRESSED_RGB_PVRTC_2BPPV1_IMG</code></td> - <td>0x8C01</td> - <td>RGB compression in 2-bit mode. One block for each 8×4 pixels.</td> - </tr> - <tr> - <td><code>COMPRESSED_RGBA_PVRTC_2BPPV1_IMG</code></td> - <td>0x8C03</td> - <td>RGBA compression in 2-bit mode. One block for each 8×4 pixe</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(WEBGL_compressed_texture_etc1)">{{domxref("WEBGL_compressed_texture_etc1")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>COMPRESSED_RGB_ETC1_WEBGL</code></td> - <td>0x8D64</td> - <td>Compresses 24-bit RGB data with no alpha channel.</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(WEBGL_compressed_texture_atc)">{{domxref("WEBGL_compressed_texture_atc")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>COMPRESSED_RGB_ATC_WEBGL</code></td> - <td>0x8C92</td> - <td>Compresses RGB textures with no alpha channel.</td> - </tr> - <tr> - <td><code>COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL</code></td> - <td>0x8C92</td> - <td>Compresses RGBA textures using explicit alpha encoding (useful when alpha transitions are sharp).</td> - </tr> - <tr> - <td><code>COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL</code></td> - <td>0x87EE</td> - <td>Compresses RGBA textures using interpolated alpha encoding (useful when alpha transitions are gradient).</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(WEBGL_depth_texture)">{{domxref("WEBGL_depth_texture")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>UNSIGNED_INT_24_8_WEBGL</code></td> - <td>0x84FA</td> - <td>Unsigned integer type for 24-bit depth texture data.</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(OES_texture_half_float)">{{domxref("OES_texture_half_float")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>HALF_FLOAT_OES</code></td> - <td>0x8D61</td> - <td>Half floating-point type (16-bit).</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(WEBGL_color_buffer_float)">{{domxref("WEBGL_color_buffer_float")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>RGBA32F_EXT</code></td> - <td>0x8814</td> - <td>RGBA 32-bit floating-point color-renderable format.</td> - </tr> - <tr> - <td><code>RGB32F_EXT</code></td> - <td>0x8815</td> - <td>RGB 32-bit floating-point color-renderable format.</td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_COMPONENT_TYPE_EXT</code></td> - <td>0x8211</td> - <td> </td> - </tr> - <tr> - <td><code>UNSIGNED_NORMALIZED_EXT</code></td> - <td>0x8C17</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="domxref(EXT_blend_minmax)">{{domxref("EXT_blend_minmax")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>MIN_EXT</code></td> - <td>0x8007</td> - <td>Produces the minimum color components of the source and destination colors.</td> - </tr> - <tr> - <td><code>MAX_EXT</code></td> - <td>0x8008</td> - <td>Produces the maximum color components of the source and destination colors.</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(EXT_sRGB)">{{domxref("EXT_sRGB")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>SRGB_EXT</code></td> - <td>0x8C40</td> - <td>Unsized sRGB format that leaves the precision up to the driver.</td> - </tr> - <tr> - <td><code>SRGB_ALPHA_EXT</code></td> - <td>0x8C42</td> - <td>Unsized sRGB format with unsized alpha component.</td> - </tr> - <tr> - <td><code>SRGB8_ALPHA8_EXT</code></td> - <td>0x8C43</td> - <td>Sized (8-bit) sRGB and alpha formats.</td> - </tr> - <tr> - <td><code>FRAMEBUFFER_ATTACHMENT_COLOR_ENCODING_EXT</code></td> - <td>0x8210</td> - <td>Returns the framebuffer color encoding.</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(OES_standard_derivatives)">{{domxref("OES_standard_derivatives")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>FRAGMENT_SHADER_DERIVATIVE_HINT_OES</code></td> - <td>0x8B8B</td> - <td>Indicates the accuracy of the derivative calculation for the GLSL built-in functions: <code>dFdx</code>, <code>dFdy</code>, and <code>fwidth</code>.</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(WEBGL_draw_buffers)">{{domxref("WEBGL_draw_buffers")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>COLOR_ATTACHMENT0_WEBGL</code></td> - <td>0x8CE0</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT1_WEBGL</code></td> - <td>0x8CE1</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT2_WEBGL</code></td> - <td>0x8CE2</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT3_WEBGL</code></td> - <td>0x8CE3</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT4_WEBGL</code></td> - <td>0x8CE4</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT5_WEBGL</code></td> - <td>0x8CE5</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT6_WEBGL</code></td> - <td>0x8CE6</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT7_WEBGL</code></td> - <td>0x8CE7</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT8_WEBGL</code></td> - <td>0x8CE8</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT9_WEBGL</code></td> - <td>0x8CE9</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT10_WEBGL</code></td> - <td>0x8CEA</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT11_WEBGL</code></td> - <td>0x8CEB</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT12_WEBGL</code></td> - <td>0x8CEC</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT13_WEBGL</code></td> - <td>0x8CED</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT14_WEBGL</code></td> - <td>0x8CEE</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>COLOR_ATTACHMENT15_WEBGL</code></td> - <td>0x8CEF</td> - <td>Framebuffer color attachment point</td> - </tr> - <tr> - <td><code>DRAW_BUFFER0_WEBGL</code></td> - <td>0x8825</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER1_WEBGL</code></td> - <td>0x8826</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER2_WEBGL</code></td> - <td>0x8827</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER3_WEBGL</code></td> - <td>0x8828</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER4_WEBGL</code></td> - <td>0x8829</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER5_WEBGL</code></td> - <td>0x882A</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER6_WEBGL</code></td> - <td>0x882B</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER7_WEBGL</code></td> - <td>0x882C</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER8_WEBGL</code></td> - <td>0x882D</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER9_WEBGL</code></td> - <td>0x882E</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER10_WEBGL</code></td> - <td>0x882F</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER11_WEBGL</code></td> - <td>0x8830</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER12_WEBGL</code></td> - <td>0x8831</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER13_WEBGL</code></td> - <td>0x8832</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER14_WEBGL</code></td> - <td>0x8833</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>DRAW_BUFFER15_WEBGL</code></td> - <td>0x8834</td> - <td>Draw buffer</td> - </tr> - <tr> - <td><code>MAX_COLOR_ATTACHMENTS_WEBGL</code></td> - <td>0x8CDF</td> - <td>Maximum number of framebuffer color attachment points</td> - </tr> - <tr> - <td><code>MAX_DRAW_BUFFERS_WEBGL</code></td> - <td>0x8824</td> - <td>Maximum number of draw buffers</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(OES_vertex_array_object)">{{domxref("OES_vertex_array_object")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Constant name</th> - <th scope="col">Value</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>VERTEX_ARRAY_BINDING_OES</code></td> - <td>0x85B5</td> - <td>The bound vertex array object (VAO).</td> - </tr> - </tbody> -</table> - -<h3 id="domxref(EXT_disjoint_timer_query)">{{domxref("EXT_disjoint_timer_query")}}</h3> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nome da constante</th> - <th scope="col">Valor</th> - <th scope="col">Descrição</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>QUERY_COUNTER_BITS_EXT</code></td> - <td>0x8864</td> - <td>The number of bits used to hold the query result for the given target.</td> - </tr> - <tr> - <td><code>CURRENT_QUERY_EXT</code></td> - <td>0x8865</td> - <td>The currently active query.</td> - </tr> - <tr> - <td><code>QUERY_RESULT_EXT</code></td> - <td>0x8866</td> - <td>The query result.</td> - </tr> - <tr> - <td><code>QUERY_RESULT_AVAILABLE_EXT</code></td> - <td>0x8867</td> - <td>A Boolean indicating whether or not a query result is available.</td> - </tr> - <tr> - <td><code>TIME_ELAPSED_EXT</code></td> - <td>0x88BF</td> - <td>Elapsed time (in nanoseconds).</td> - </tr> - <tr> - <td><code>TIMESTAMP_EXT</code></td> - <td>0x8E28</td> - <td>The current time.</td> - </tr> - <tr> - <td><code>GPU_DISJOINT_EXT</code></td> - <td>0x8FBB</td> - <td>A Boolean indicating whether or not the GPU performed any disjoint operation.</td> - </tr> - </tbody> -</table> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td> - <td>{{Spec2('WebGL')}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName('WebGL2', "#3.7", "WebGL2RenderingContext")}}</td> - <td>{{Spec2('WebGL2')}}</td> - <td>Defines additional constants.</td> - </tr> - </tbody> -</table> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>{{domxref("WebGLRenderingContext")}}</li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/webgl_api/data/index.html b/files/pt-pt/web/api/webgl_api/data/index.html deleted file mode 100644 index b085643358..0000000000 --- a/files/pt-pt/web/api/webgl_api/data/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Dados em WebGL -slug: Web/API/WebGL_API/Data -tags: - - 3D - - API de WebGL - - Atributos - - Desenho - - Gráficos 3D - - Guía - - Intermediário - - Uniforms - - Varyings - - WebGL - - graficos -translation_of: Web/API/WebGL_API/Data -original_slug: Web/API/WebGL_API/Dados ---- -<div>{{WebGLSidebar}}{{draft}}</div> - -<p>Shader programs have access to three kinds of data storage, each of which has a specific use case. Each kind of variable is accessible by one or both types of shader program (depending on the data store type) and possibly by the site's JavaScript code, depending on the specific type of variable.</p> - -<h2 id="Tipos_de_dados_GLSL">Tipos de dados GLSL</h2> - -<p><<document the basic types, vectors, etc; see <a href="https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)">Data Type (GLSL)</a> on the Khronos WebGL wiki>></p> - -<h2 id="Variáveis_de_GLSL">Variáveis de GLSL</h2> - -<p>There are three kinds of "variable" or data storage available in GLSL, each of which with its own purpose and use cases: <strong>{{anch("Attributes", "attributes")}}</strong>, <strong>{{anch("Varyings", "varyings")}}</strong>, and <strong>{{anch("Uniforms", "uniforms")}}</strong>.</p> - -<h3 id="Atributos">Atributos</h3> - -<p><strong>Attributes</strong> are GLSL variables which are only available to the vertex shader (as variables) and the JavaScript code. Attributes are typically used to store color information, texture coordinates, and any other data calculated or retrieved that needs to be shared between the JavaScript code and the vertex shader.</p> - -<p><<add how to use them>></p> - -<h3 id="Varyings"><em>Varyings</em></h3> - -<p><strong>Varyings</strong> are variables that are declared by the vertex shader and used to pass data from the vertex shader to the fragment shader. This is commonly used to share a vertex's {{interwiki("wikipedia", "Normal_(geometry)", "normal vector")}} after it has been computed by the vertex shader.</p> - -<p><<how to use>></p> - -<h3 id="Uniforms"><em>Uniforms</em></h3> - -<p><strong>Uniforms</strong> are set by the JavaScript code and are available to both the vertex and fragment shaders. They're used to provide values that will be the same for everything drawn in the frame, such as lighting positions and magnitudes, global transformation and perspective details, and so forth.</p> - -<p><<add details>></p> - -<h2 id="Buffers"><em>Buffers</em></h2> - -<p><<add information>></p> - -<h2 id="Texturas">Texturas</h2> - -<p><<add information>></p> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: none; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody><tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> -</tbody></table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody><tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> -</tbody></table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/webgl_api/index.html b/files/pt-pt/web/api/webgl_api/index.html deleted file mode 100644 index 69f79c67f6..0000000000 --- a/files/pt-pt/web/api/webgl_api/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: 'API de WebGL: Gráficos 2D e 3D para a Web' -slug: Web/API/WebGL_API -tags: - - 3D - - API de WebGL - - Avançado - - Gráficos 3D - - Multimedia - - Referencia - - Resumo - - Sinopse - - WebGL - - graficos -translation_of: Web/API/WebGL_API ---- -<div>{{WebGLSidebar}}</div> - -<div class="summary"> -<p>WebGL (Biblioteca de Gráficos da Web) é uma API de JavaScript para a renderização de gráficos 2D e 3D interativos dentro de qualquer navegador da Web compatível sem a utilização de plug-ins. WebGL fazi isso, ao introduzir uma API que está em conformidade com o OpenGL ES 2.0 que pode ser utilizado em elementos {{HTMLElement("canvas")}} de HTML5.</p> -</div> - -<p>O suporte para WebGL está presente no <a href="/pt-PT/docs/Mozilla/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+, e <a href="https://www.microsoft.com/pt-pt/windows/microsoft-edge">Microsoft Edge</a> build 10240+; contudo, o dispositivo do utilizador também deve ter hardware que suporte estas funcionalidades.</p> - -<p>O elemento {{HTMLElement("canvas")}} também é utilizado por <a href="/pt-PT/docs/Web/API/API_de_canvas">Canvas 2D</a> para gráficos 2D nas páginas da Web.</p> - -<h2 id="Referência">Referência</h2> - -<h3 id="Interfaces_padrão">Interfaces padrão</h3> - -<div class="index"> -<ul> - <li>{{domxref("WebGLRenderingContext")}}</li> - <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLActiveInfo")}}</li> - <li>{{domxref("WebGLBuffer")}}</li> - <li>{{domxref("WebGLContextEvent")}}</li> - <li>{{domxref("WebGLFramebuffer")}}</li> - <li>{{domxref("WebGLProgram")}}</li> - <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLRenderbuffer")}}</li> - <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLShader")}}</li> - <li>{{domxref("WebGLShaderPrecisionFormat")}}</li> - <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLTexture")}}</li> - <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li> - <li>{{domxref("WebGLUniformLocation")}}</li> - <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li> -</ul> -</div> - -<h3 id="Extensões">Extensões</h3> - -<div class="index"> -<ul> - <li>{{domxref("ANGLE_instanced_arrays")}}</li> - <li>{{domxref("EXT_blend_minmax")}}</li> - <li>{{domxref("EXT_color_buffer_float")}}</li> - <li>{{domxref("EXT_color_buffer_half_float")}}</li> - <li>{{domxref("EXT_disjoint_timer_query")}}</li> - <li>{{domxref("EXT_frag_depth")}}</li> - <li>{{domxref("EXT_sRGB")}}</li> - <li>{{domxref("EXT_shader_texture_lod")}}</li> - <li>{{domxref("EXT_texture_filter_anisotropic")}}</li> - <li>{{domxref("OES_element_index_uint")}}</li> - <li>{{domxref("OES_standard_derivatives")}}</li> - <li>{{domxref("OES_texture_float")}}</li> - <li>{{domxref("OES_texture_float_linear")}}</li> - <li>{{domxref("OES_texture_half_float")}}</li> - <li>{{domxref("OES_texture_half_float_linear")}}</li> - <li>{{domxref("OES_vertex_array_object")}}</li> - <li>{{domxref("WEBGL_color_buffer_float")}}</li> - <li>{{domxref("WEBGL_compressed_texture_astc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_atc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_etc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li> - <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li> - <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li> - <li>{{domxref("WEBGL_debug_renderer_info")}}</li> - <li>{{domxref("WEBGL_debug_shaders")}}</li> - <li>{{domxref("WEBGL_depth_texture")}}</li> - <li>{{domxref("WEBGL_draw_buffers")}}</li> - <li>{{domxref("WEBGL_lose_context")}}</li> -</ul> -</div> - -<h3 id="Eventos">Eventos</h3> - -<ul> - <li>{{Event("webglcontextlost")}}</li> - <li>{{Event("webglcontextrestored")}}</li> - <li>{{Event("webglcontextcreationerror")}}</li> -</ul> - -<h3 id="Constantes_e_tipos">Constantes e tipos</h3> - -<ul> - <li><a href="/pt-PT/docs/Web/API/WebGL_API/Constantes">Constantes de WebGL</a></li> - <li><a href="/pt-PT/docs/Web/API/WebGL_API/Tipos">Tipos de WebGL</a></li> -</ul> - -<h3 id="WebGL_2">WebGL 2</h3> - -<p>WebGL 2 é uma atualização muito importante para WebGL que é fornecida através da inteface de {{domxref("WebGL2RenderingContext")}}. Esta tem como base o OpenGL ES 3.0 e novas funcionalidades includas:</p> - -<ul> - <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D">3D textures</a>,</li> - <li><a href="/en-US/docs/Web/API/WebGLSampler">Sampler objects</a>,</li> - <li><a href="/en-US/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">Uniform Buffer objects</a>,</li> - <li><a href="/en-US/docs/Web/API/WebGLSync">Sync objects</a>,</li> - <li><a href="/en-US/docs/Web/API/WebGLQuery">Query objects</a>,</li> - <li><a href="/en-US/docs/Web/API/WebGLTransformFeedback">Transform Feedback objects</a>,</li> - <li>Promoted extensions that are now core to WebGL 2: <a href="/en-US/docs/Web/API/WebGLVertexArrayObject">Vertex Array objects</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instancing</a>, <a href="/en-US/docs/Web/API/WebGL2RenderingContext/drawBuffers">multiple render targets</a>, <a href="/en-US/docs/Web/API/EXT_frag_depth">fragment depth</a>.</li> -</ul> - -<p>See also the blog post <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> and <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> for a few demos.</p> - -<h2 id="Guias_e_tutoriais">Guias e tutoriais</h2> - -<p>Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.</p> - -<h3 id="Guias">Guias</h3> - -<dl> - <dt><a href="/pt-PT/docs/Web/API/WebGL_API/Dados">Dados em WebGL</a></dt> - <dd>A guide to variables, buffers, and other types of data used when writing WebGL code.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">WebGL best practices</a></dt> - <dd>Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Using extensions</a></dt> - <dd>A guide to using WebGL extensions.</dd> -</dl> - -<h3 id="Tutoriais">Tutoriais</h3> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a></dt> - <dd>A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.</dd> -</dl> - -<h3 id="Exemplos">Exemplos</h3> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Basic_2D_animation_example">A basic 2D WebGL animation example</a></dt> - <dd>This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/By_example">WebGL by example</a></dt> - <dd>A series of live samples with short explanations that showcase WebGL concepts and capabilities. The examples are sorted according to topic and level of difficulty, covering the WebGL rendering context, shader programming, textures, geometry, user interaction, and more.</dd> -</dl> - -<h3 id="Tutoriais_avançados">Tutoriais avançados</h3> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a></dt> - <dd>A detailed explanation of the three core matrices that are typically used to represent a 3D object view: the model, view and projection matrices.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt> - <dd>A useful guide to how 3D transform matrices work, and can be used on the web — both for WebGL calculations and in CSS3 transforms.</dd> -</dl> - -<h2 id="Recursos">Recursos</h2> - -<ul> - <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> A talk by Nick Desaulniers that introduces the basics of WebGL. This is a great place to start if you've never done low-level graphics programming.</li> - <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> The main web site for WebGL at the Khronos Group.</li> - <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> A site with tutorials on how to use WebGL.</li> - <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> A basic tutorial with fundamentals of WebGL.</li> - <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li> - <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> An HTML/JavaScript editor with tutorials to learn basics of webgl programming.</li> - <li><a href="http://webglstats.com/">WebGL Stats</a> A site with statistics about WebGL capabilities in browsers on different platforms.</li> -</ul> - -<h3 id="Bibliotecas">Bibliotecas</h3> - -<ul> - <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> is a JavaScript matrix and vector library for high-performance WebGL apps.</li> - <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding, and game development.</li> - <li><a href="http://www.pixijs.com/">Pixi.js</a> is a fast, open-source 2D WebGL renderer.</li> - <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open-source game engine.</li> - <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> is an open-source library for manipulating vectors and matrices. Not optimized for WebGL but extremely robust.</li> - <li><a href="https://threejs.org/">three.js</a> is an open-source, fully featured 3D WebGL library.</li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebGL')}}</td> - <td>{{Spec2('WebGL')}}</td> - <td>Initial definition. Based on OpenGL ES 2.0</td> - </tr> - <tr> - <td>{{SpecName('WebGL2')}}</td> - <td>{{Spec2('WebGL2')}}</td> - <td>Builds on top of WebGL 1. Based on OpenGL ES 3.0.</td> - </tr> - <tr> - <td>{{SpecName('OpenGL ES 2.0')}}</td> - <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('OpenGL ES 3.0')}}</td> - <td>{{Spec2('OpenGL ES 3.0')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<h3 id="WebGL_1">WebGL 1</h3> - -<div> - - -<p>{{Compat("api.WebGLRenderingContext", 0)}}</p> - -<h3 id="WebGL_2_2">WebGL 2</h3> - -<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> - -<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p> -</div> - -<h3 id="Notas_de_compatibilidade">Notas de compatibilidade</h3> - -<p>In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the <code>webgl</code> context name, but older ones need <code>experimental-webgl</code> as well. In addition, the upcoming <a href="/en-US/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> is fully backwards-compatible and will have the context name <code>webgl2</code>.</p> - -<h3 id="Notas_do_Gecko">Notas do Gecko</h3> - -<h4 id="Depuração_e_teste_de_WebGL">Depuração e teste de WebGL</h4> - -<p>Starting with Gecko 10.0 {{geckoRelease("10.0")}}, there are two preferences available which let you control the capabilities of WebGL for testing purposes:</p> - -<dl> - <dt><code>webgl.min_capability_mode</code></dt> - <dd>A Boolean property that, when <code>true</code>, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is <code>false</code> by default.</dd> - <dt><code>webgl.disable_extensions</code></dt> - <dd>A Boolean property that, when <code>true</code>, disables all WebGL extensions. This is <code>false</code> by default.</dd> -</dl> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/API_de_canvas">API de Canvas</a></li> - <li><a href="https://developer.mozilla.org/pt-PT/docs/Web/API/WebGLRenderingContext/getSupportedExtensions">informação de compatibilidade sobre as extensões WebGL</a></li> -</ul> diff --git a/files/pt-pt/web/api/webgl_api/types/index.html b/files/pt-pt/web/api/webgl_api/types/index.html deleted file mode 100644 index 1228b2a17a..0000000000 --- a/files/pt-pt/web/api/webgl_api/types/index.html +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: Tipos de WebGL -slug: Web/API/WebGL_API/Types -translation_of: Web/API/WebGL_API/Types -original_slug: Web/API/WebGL_API/Tipos ---- -<div>{{WebGLSidebar}}</div> - -<p>Os seguintes tipos são utilizados nas interfaces de <a href="/pt-PT/docs/Web/API/WebGL_API">WebGL</a>.</p> - -<h2 id="WebGL_1">WebGL 1</h2> - -<p>These types are used within a {{domxref("WebGLRenderingContext")}}.</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Tipo</td> - <td class="header">Tipo de IDL Web</td> - <td class="header">Descrição</td> - </tr> - <tr> - <td><code>GLenum</code></td> - <td><code>unsigned long</code></td> - <td>Used for enums. See also the list of <a href="/en-US/docs/Web/API/WebGL_API/Constants">constants</a>.</td> - </tr> - <tr> - <td><code>GLboolean</code></td> - <td><code>boolean</code></td> - <td>A {{jsxref("Boolean")}}.</td> - </tr> - <tr> - <td><code>GLbitfield</code></td> - <td><code>unsigned long</code></td> - <td>A bit field that stores multiple, logical bits. Used for example in {{domxref("WebGLRenderingContext.clear()")}}.</td> - </tr> - <tr> - <td><code>GLbyte</code></td> - <td><code>byte</code></td> - <td>8-bit twos complement signed integer.</td> - </tr> - <tr> - <td><code>GLshort</code></td> - <td><code>short</code></td> - <td>16-bit twos complement signed integer.</td> - </tr> - <tr> - <td><code>GLint</code></td> - <td><code>long</code></td> - <td>32-bit twos complement signed integer.</td> - </tr> - <tr> - <td><code>GLsizei</code></td> - <td><code>long</code></td> - <td>Used for sizes (e.g. width and height of the drawing buffer).</td> - </tr> - <tr> - <td><code>GLintptr</code></td> - <td><code>long long</code></td> - <td>Special type for pointer arithmetic.</td> - </tr> - <tr> - <td><code>GLsizeiptr</code></td> - <td><code>long long</code></td> - <td>Special type for pointer arithmetic.</td> - </tr> - <tr> - <td><code>GLubyte</code></td> - <td><code>octet</code></td> - <td>8-bit twos complement unsigned integer.</td> - </tr> - <tr> - <td><code>GLushort</code></td> - <td><code>unsigned short</code></td> - <td>16-bit twos complement unsigned integer.</td> - </tr> - <tr> - <td><code>GLuint</code></td> - <td><code>unsigned long</code></td> - <td>32-bit twos complement unsigned integer.</td> - </tr> - <tr> - <td><code>GLfloat</code></td> - <td><code>unrestricted float</code></td> - <td>32-bit IEEE floating point number.</td> - </tr> - <tr> - <td><code>GLclampf</code></td> - <td><code>unrestricted float</code></td> - <td>Clamped 32-bit IEEE floating point number.</td> - </tr> - </tbody> -</table> - -<h2 id="WebGL_2">WebGL 2</h2> - -<p>These types are used within a {{domxref("WebGL2RenderingContext")}}. All WebGL 1 types are used as well.</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Tipo</td> - <td class="header">Tipo IDL Web</td> - <td class="header">Descrição</td> - </tr> - <tr> - <td><code>GLint64</code></td> - <td><code>long long</code></td> - <td>Signed 64-bit integer number.</td> - </tr> - </tbody> -</table> - -<h2 id="WebGL_extensions">WebGL extensions</h2> - -<p>Estes tipos são utilziados dentro das <a href="/pt-PT/docs/Web/API/WebGL_API/Utilizar_Extensões">extensões de WebGL</a>.</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Tipo</td> - <td class="header">Tipo de IDL Web</td> - <td class="header">Descrição</td> - </tr> - <tr> - <td><code>GLuint64EXT</code></td> - <td><code>long long</code></td> - <td>Unsigned 64-bit integer number.</td> - </tr> - </tbody> -</table> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('WebGL', "#5.1", "Types")}}</td> - <td>{{Spec2('WebGL')}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName('WebGL2', "#3.1", "Types")}}</td> - <td>{{Spec2('WebGL2')}}</td> - <td>Defines additional types.</td> - </tr> - <tr> - <td>{{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}}</td> - <td>{{Spec2('EXT_disjoint_timer_query')}}</td> - <td>Adds <code>GLuint64EXT</code></td> - </tr> - </tbody> -</table> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>{{domxref("WebGLRenderingContext")}}</li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody><tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> -</tbody></table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody><tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> -</tbody></table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/webgl_api/using_extensions/index.html b/files/pt-pt/web/api/webgl_api/using_extensions/index.html deleted file mode 100644 index 30d87afbcd..0000000000 --- a/files/pt-pt/web/api/webgl_api/using_extensions/index.html +++ /dev/null @@ -1,719 +0,0 @@ ---- -title: Utilizar extensões de WebGL -slug: Web/API/WebGL_API/Using_Extensions -tags: - - Avançado - - WebGL -translation_of: Web/API/WebGL_API/Using_Extensions -original_slug: Web/API/WebGL_API/Utilizar_Extensões ---- -<div>{{WebGLSidebar}}</div> - -<p>WebGL, like its sister APIs (OpenGL and OpenGL ES), supports extensions. A complete list of extensions is available in the <a class="external" href="http://www.khronos.org/registry/webgl/extensions/">khronos webgl extension registry</a>.</p> - -<div class="note"><strong>Nota:</strong> In WebGL, unlike in other GL APIs, extensions are only available if explicitly requested.</div> - -<h2 id="Nomes_de_extensão_canónica_prefixos_e_preferências_da_empresa">Nomes de extensão canónica, prefixos e preferências da empresa</h2> - -<p>Extensions may be supported by browser vendors before being officially ratified (but only when they are in draft stage). In that case, their name can be prefixed by the vendor prefix (<code>MOZ_</code>, <code>WEBKIT_</code>, etc.) or the extension is only available once a browser preference has been toggled.</p> - -<p>If you wish to work with the bleeding edge of extensions, and want to keep working on upon ratification (assuming, of course, that the extension doesn't change in incompatible ways), that you query the canonical extension name as well as the vendor extension name. For instance:</p> - -<pre class="brush:js">var ext = ( - gl.getExtension('OES_vertex_array_object') || - gl.getExtension('MOZ_OES_vertex_array_object') || - gl.getExtension('WEBKIT_OES_vertex_array_object') -); -</pre> - -<p>Note that, vendor prefix have been discouraged more and more and thus most browser implement experimental extensions behind a feature flag rather than vendor prefix.</p> - -<p>The feature flags are:</p> - -<ul> - <li><code>webgl.enable-draft-extensions</code> in Firefox</li> - <li><code>chrome://flags/#enable-webgl-draft-extensions</code> in Chromium based browsers (Chrome, Opera).</li> -</ul> - -<h2 id="Convenções_de_nomeação">Convenções de nomeação</h2> - -<p>WebGL extensions are prefixed with "ANGLE", "OES", "EXT" or "WEBGL". These prefixes reflect origin and intent:</p> - -<ul> - <li>ANGLE_: Extensions that are written by the <a href="https://en.wikipedia.org/wiki/ANGLE_%28software%29">ANGLE library</a> authors.</li> - <li>OES_: Extensions that mirror functionality from OpenGL ES or OpenGL API extensions approved by the respective architecture review boards.</li> - <li>EXT_: Extensions that mirror other OpenGL ES or OpenGL API extensions.</li> - <li>WEBGL_: Extensions that are WebGL-specific and intended to be compatible with multiple web browsers. It should also be used for extensions which originated with the OpenGL ES or OpenGL APIs, but whose behavior has been significantly altered.</li> -</ul> - -<h2 id="Extensões_de_consulta_disponíveis">Extensões de consulta disponíveis</h2> - -<p>O contexto de WebGL suporta a consulta de quais as extensões que estão disponíveis.</p> - -<pre class="brush:js">var available_extensions = gl.getSupportedExtensions();</pre> - -<p>The {{domxref("WebGLRenderingContext.getSupportedExtensions()")}} method returns an array of strings, one for each supported extension.</p> - -<h2 id="Lista_de_extensões">Lista de extensões</h2> - -<p>As extensões atuais são:</p> - -<p>{{page("pt-PT/docs/Web/API/WebGL_API", "Extensões")}}</p> - -<h2 id="Ativar_uma_extensão">Ativar uma extensão</h2> - -<p>Before an extension can be used it has to be enabled using {{domxref("WebGLRenderingContext.getExtension()")}}. For example:</p> - -<pre class="brush:js">var float_texture_ext = gl.getExtension('OES_texture_float');</pre> - -<p>The return value is <code>null</code> if the extension is not supported, or an extension object otherwise.</p> - -<h2 id="Objetos_de_extensão">Objetos de extensão</h2> - -<p>If an extension defines specific symbols or functions that are not available in the core specification of WebGL, they will be available on the extension object returned by the call to <code>gl.getExtension()</code>.</p> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>9</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>11</td> - <td>12</td> - <td>5.1</td> - </tr> - <tr> - <td><code>ANGLE_instanced_arrays</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("33.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_blend_minmax</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("33.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_color_buffer_float</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("49.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_color_buffer_half_float</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("30.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_disjoint_timer_query</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("41.0")}} [1]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_frag_depth</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("30.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_sRGB</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("28.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_shader_texture_lod</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("50.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_texture_filter_anisotropic</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("17.0")}} [2]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_element_index_uint</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("24.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_standard_derivatives</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("10.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_texture_float</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("6.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_texture_float_linear</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("24.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_texture_half_float</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("29.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_texture_half_float_linear</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("30.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_vertex_array_object</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_color_buffer_float</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("30.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_astc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("53.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_atc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("18.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_etc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("51.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_etc1</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("30.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_pvrtc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("18.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_s3tc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("22.0")}} [2]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_s3tc_srgb</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("55.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_debug_renderer_info</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("19.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_debug_shaders</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("30.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_depth_texture</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("22.0")}} [2]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_draw_buffers</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("28.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_lose_context</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("22.0")}} [2]</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidades</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>25</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>12</td> - <td>8.0</td> - </tr> - <tr> - <td><code>ANGLE_instanced_arrays</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_blend_minmax</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_color_buffer_float</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_color_buffer_half_float</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_disjoint_timer_query</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_frag_depth</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_sRGB</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_shader_texture_lod</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>EXT_texture_filter_anisotropic</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_element_index_uint</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_standard_derivatives</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_texture_float</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_texture_float_linear</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_texture_half_float</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_texture_half_float_linear</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>OES_vertex_array_object</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_color_buffer_float</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_astc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_atc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_etc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_etc1</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_s3tc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_pvrtc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_s3tc</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_compressed_texture_s3tc_srgb</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_debug_renderer_info</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_debug_shaders</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_depth_texture</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_draw_buffers</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>WEBGL_lose_context</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Toggling the <code>webgl.enable-draft-extensions</code> preference in about:config is required.</p> - -<p>[2] This extension was prefixed with <code>MOZ_</code> in prior versions.</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</li> - <li>{{domxref("WebGLRenderingContext.getExtension()")}}</li> - <li><a href="webglreport.com">Relatório de WebGL</a></li> - <li><a href="http://webglstats.comhttp://webglstats.com">Estatísticas de WebGL</a></li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody><tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> -</tbody></table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody><tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> -</tbody></table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/webglrenderingcontext/index.html b/files/pt-pt/web/api/webglrenderingcontext/index.html deleted file mode 100644 index e1558755ca..0000000000 --- a/files/pt-pt/web/api/webglrenderingcontext/index.html +++ /dev/null @@ -1,444 +0,0 @@ ---- -title: WebGLRenderingContext -slug: Web/API/WebGLRenderingContext -tags: - - WebGL - - WebGLRenderingContext -translation_of: Web/API/WebGLRenderingContext ---- -<div>{{APIRef("WebGL")}}</div> - -<p>A interface de <code><strong>WebGLRenderingContext</strong></code> fornece o contexto de renderização de OpenGL ES 2.0 para a superfície de desenho de um elemento {{HTMLElement("canvas")}} de HTML.</p> - -<p>Para obter um objeto desta interface, <em>call</em> {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} num elemento de <code><canvas></code>, fornecendo "webgl" como um argumento:</p> - -<pre class="brush: js">var canvas = document.getElementById('myCanvas'); -var gl = canvas.getContext('webgl'); -</pre> - -<p>Once you have the WebGL rendering context for a canvas, you can render within it.</p> - -<p>The <a href="/en-US/docs/Web/API/WebGL_API/Tutorial" title="WebGL tutorial">WebGL tutorial</a> has more information, examples, and resources on how to get started with WebGL.</p> - -<h2 id="Constantes">Constantes</h2> - -<p>See the <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a> page.</p> - -<h2 id="O_contexto_de_WebGL">O contexto de WebGL</h2> - -<p>The following properties and methods provide general information and functionality to deal with the WebGL context:</p> - -<dl> - <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt> - <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> - <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt> - <dd> - <p>Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.</p> - </dd> - <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt> - <dd>The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.</dd> - <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt> - <dd>The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.</dd> - <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt> - <dd>Returns a <code>WebGLContextAttributes</code> object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.</dd> - <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt> - <dd>Returns <code>true</code> if the context is lost, otherwise returns <code>false</code>.</dd> -</dl> - -<h2 id="Visualização_e_recorte">Visualização e recorte</h2> - -<dl> - <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt> - <dd>Defines the scissor box.</dd> - <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt> - <dd>Sets the viewport.</dd> -</dl> - -<h2 id="Informação_de_estado">Informação de estado</h2> - -<dl> - <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt> - <dd>Selects the active texture unit.</dd> - <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt> - <dd>Sets the source and destination blending factors.</dd> - <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt> - <dd>Sets both the RGB blend equation and alpha blend equation to a single equation.</dd> - <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt> - <dd>Sets the RGB blend equation and alpha blend equation separately.</dd> - <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt> - <dd>Defines which function is used for blending pixel arithmetic.</dd> - <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt> - <dd>Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.</dd> - <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt> - <dd>Specifies the color values used when clearing color buffers.</dd> - <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt> - <dd>Specifies the depth value used when clearing the depth buffer.</dd> - <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt> - <dd>Specifies the stencil value used when clearing the stencil buffer.</dd> - <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt> - <dd>Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.</dd> - <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt> - <dd>Specifies whether or not front- and/or back-facing polygons can be culled.</dd> - <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt> - <dd>Specifies a function that compares incoming pixel depth to the current depth buffer value.</dd> - <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt> - <dd>Sets whether writing into the depth buffer is enabled or disabled.</dd> - <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt> - <dd>Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.</dd> - <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt> - <dd>Disables specific WebGL capabilities for this context.</dd> - <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt> - <dd>Enables specific WebGL capabilities for this context.</dd> - <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt> - <dd>Specifies whether polygons are front- or back-facing by setting a winding orientation.</dd> - <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt> - <dd>Returns a value for the passed parameter name.</dd> - <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt> - <dd>Returns error information.</dd> - <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt> - <dd>Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.</dd> - <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt> - <dd>Tests whether a specific WebGL capability is enabled or not for this context.</dd> - <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt> - <dd>Sets the line width of rasterized lines.</dd> - <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt> - <dd>Specifies the pixel storage modes</dd> - <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt> - <dd>Specifies the scale factors and units to calculate depth values.</dd> - <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt> - <dd>Specifies multi-sample coverage parameters for anti-aliasing effects.</dd> - <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt> - <dd>Sets the both front and back function and reference value for stencil testing.</dd> - <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt> - <dd>Sets the front and/or back function and reference value for stencil testing.</dd> - <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt> - <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd> - <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt> - <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd> - <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt> - <dd>Sets both the front and back-facing stencil test actions.</dd> - <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt> - <dd>Sets the front and/or back-facing stencil test actions.</dd> -</dl> - -<h2 id="Buffers"><em>Buffers</em></h2> - -<dl> - <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt> - <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd> - <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt> - <dd>Updates buffer data.</dd> - <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt> - <dd>Updates buffer data starting at a passed offset.</dd> - <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt> - <dd>Creates a <code>WebGLBuffer</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt> - <dd>Deletes a <code>WebGLBuffer</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt> - <dd>Returns information about the buffer.</dd> - <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt> - <dd>Returns a Boolean indicating if the passed buffer is valid.</dd> -</dl> - -<h2 id="Framebuffers"><em>Framebuffers</em></h2> - -<dl> - <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt> - <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd> - <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt> - <dd>Returns the status of the framebuffer.</dd> - <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt> - <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt> - <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt> - <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt> - <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt> - <dd>Returns information about the framebuffer.</dd> - <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt> - <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd> - <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt> - <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd> -</dl> - -<h2 id="Renderbuffers"><em>Renderbuffers</em></h2> - -<dl> - <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt> - <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd> - <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt> - <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt> - <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt> - <dd>Returns information about the renderbuffer.</dd> - <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt> - <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd> - <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt> - <dd>Creates a renderbuffer data store.</dd> -</dl> - -<h2 id="Texturas">Texturas</h2> - -<dl> - <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt> - <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd> - <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt> - <dd>Specifies a 2D texture image in a compressed format.</dd> - <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt> - <dd>Specifies a 2D texture sub-image in a compressed format.</dd> - <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt> - <dd>Copies a 2D texture image.</dd> - <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt> - <dd>Copies a 2D texture sub-image.</dd> - <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt> - <dd>Creates a <code>WebGLTexture</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt> - <dd>Deletes a <code>WebGLTexture</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt> - <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt> - <dd>Returns information about the texture.</dd> - <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt> - <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd> - <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt> - <dd>Specifies a 2D texture image.</dd> - <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt> - <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd> - <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt> - <dd>Sets texture parameters.</dd> - <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt> - <dd>Sets texture parameters.</dd> -</dl> - -<h2 id="Programas_e_shaders">Programas e <em>shaders</em></h2> - -<dl> - <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt> - <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd> - <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt> - <dd>Binds a generic vertex index to a named attribute variable.</dd> - <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt> - <dd>Compiles a <code>WebGLShader</code>.</dd> - <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt> - <dd>Creates a <code>WebGLProgram</code>.</dd> - <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt> - <dd>Creates a <code>WebGLShader</code>.</dd> - <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt> - <dd>Deletes a <code>WebGLProgram</code>.</dd> - <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt> - <dd>Deletes a <code>WebGLShader</code>.</dd> - <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt> - <dd>Detaches a <code>WebGLShader</code>.</dd> - <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt> - <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd> - <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt> - <dd>Returns information about the program.</dd> - <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt> - <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt> - <dd>Returns information about the shader.</dd> - <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt> - <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd> - <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt> - <dd>Returns the information log for a <code>WebGLShader</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt> - <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd> - <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt> - <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd> - <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt> - <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd> - <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt> - <dd>Links the passed <code>WebGLProgram</code> object.</dd> - <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt> - <dd>Sets the source code in a <code>WebGLShader</code>.</dd> - <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt> - <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd> - <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt> - <dd>Validates a <code>WebGLProgram</code>.</dd> -</dl> - -<h2 id="Uniforms_e_atributos"><em>Uniforms </em>e atributos</h2> - -<dl> - <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt> - <dd>Disables a vertex attribute array at a given position.</dd> - <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt> - <dd>Enables a vertex attribute array at a given position.</dd> - <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt> - <dd>Returns information about an active attribute variable.</dd> - <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt> - <dd>Returns information about an active uniform variable.</dd> - <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt> - <dd>Returns the location of an attribute variable.</dd> - <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt> - <dd>Returns the value of a uniform variable at a given location.</dd> - <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt> - <dd>Returns the location of a uniform variable.</dd> - <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt> - <dd>Returns information about a vertex attribute at a given position.</dd> - <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt> - <dd>Returns the address of a given vertex attribute.</dd> - <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt> - <dd>Specifies a value for a uniform variable.</dd> - <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt> - <dd>Specifies a matrix value for a uniform variable.</dd> - <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt> - <dd>Specifies a value for a generic vertex attribute.</dd> - <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt> - <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd> -</dl> - -<h2 id="Drawing_buffers">Drawing buffers</h2> - -<dl> - <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt> - <dd>Clears specified buffers to preset values.</dd> - <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt> - <dd>Renders primitives from array data.</dd> - <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt> - <dd>Renders primitives from element array data.</dd> - <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt> - <dd>Blocks execution until all previously called commands are finished.</dd> - <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt> - <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd> -</dl> - -<h2 id="Trabalhar_com_extensões">Trabalhar com extensões</h2> - -<p>These methods manage WebGL extensions:</p> - -<dl> - <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt> - <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd> - <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt> - <dd>Returns an extension object.</dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3> - -<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p> - -<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p> - -<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p> - -<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3> - -<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p> - -<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p> - -<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td> - <td>{{Spec2('WebGL')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> - -<p>{{Compat("api.WebGLRenderingContext")}}</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody><tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> -</tbody></table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody><tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> -</tbody></table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/webrtc_api/index.html b/files/pt-pt/web/api/webrtc_api/index.html deleted file mode 100644 index a9bc4acd29..0000000000 --- a/files/pt-pt/web/api/webrtc_api/index.html +++ /dev/null @@ -1,288 +0,0 @@ ---- -title: API de WebRTC -slug: Web/API/WebRTC_API -tags: - - API - - API de WebRTC - - API de WebRTCÁudio - - Multimedia - - Rede - - Video - - WebRTC - - emissão - - transmissão -translation_of: Web/API/WebRTC_API -original_slug: Web/API/API_WebRTC ---- -<div>{{APIRef("WebRTC")}}</div> - -<p><span class="seoSummary"><strong>WebRTC</strong> (Comunicações da <em>Web</em> em Tempo Real) é uma tecnologia que permite às aplicações e sites da <em>Web</em> capturar e opcionalmente transmitir multimédia de áudio e/ou vídeo, bem como trocar dados arbitrariamente entre navegadores sem a necessidade de um intermediário.</span> O conjunto de normas que compreende WebRTC torna possível a partilha de dados e realizar teleconferência <em>peer-to-peer</em>, sem precisar que o utilizador instale <em>plug-ins</em> ou qualquer outro software de terceiros.</p> - -<p>WebRTC consiste em diversos protocolos e APIs inter-relacionadas que trabalham em conjunto para obter isto. A documentação que irá encontrar aqui irá ajudá-lo a compreender o essencial de WebRTC, como configurar e utilizar ligações de dados e multimédia, e muito mais.</p> - -<h2 id="Conceitos_e_utilização_de_WebRTC">Conceitos e utilização de WebRTC</h2> - -<p>O WebRTC atende múltiplos propósitos e se destaca consideravelmente com <em>Media Capture</em> e <em>Streams API</em>. Juntos, eles fornecem recursos multimídia poderosos para a Web, incluindo suporte para conferências de áudio e vídeo, troca de arquivos, gerenciamento de identidade e interface com sistemas telefônicos legados, enviando sinais {{Glossary("DTMF")}} . As conexões entre pares podem ser feitas sem exigir drivers especiais ou plug-ins, e muitas vezes podem ser feitas sem nenhum servidor intermediário.</p> - -<p>As conexões entre dois pares são criadas usando - e representadas pela interface - {{domxref("RTCPeerConnection")}} . Uma vez que uma conexão foi estabelecida e aberta, os fluxos de mídia ({{domxref("MediaStream")}}s) e / ou canais de dados ({{domxref("RTCDataChannel")}}s) podem ser adicionados à conexão.</p> - -<p>Os fluxos de mídia podem ser constituídos de qualquer número de faixas de informações de mídia; As faixas, que são representadas por objetos com base na interface {{domxref("MediaStreamTrack")}} , podem conter um dos vários tipos de dados de mídia, incluindo áudio, vídeo e texto (como legendas ou nomes de capítulos) . A maioria dos fluxos consistem em pelo menos uma faixa de áudio e provavelmente também uma faixa de vídeo, e pode ser usados para enviar e receber mídia ao vivo ou informações de mídia armazenada (como um filme transmitido).</p> - -<p>Você também pode usar a conexão entre dois pares para trocar dados binários arbitrários usando a interface {{domxref("RTCDataChannel")}} . Isso pode ser usado para informações <em>back-channel</em>, troca de metadados, pacotes com status de jogos, transferências de arquivos ou mesmo como um canal primário para transferência de dados.</p> - -<p><em><strong>Mais detalhes e links para guias relevantes e tutoriais necessários</strong></em></p> - -<h2 id="Interfaces_de_WebRTC">Interfaces de WebRTC</h2> - -<p>Como a WebRTC fornece interfaces que trabalham juntas para realizar uma variedade de tarefas, dividimos as interfaces na lista abaixo por categoria. Veja a barra lateral para uma lista alfabética.</p> - -<h3 id="Gestão_e_configuração_de_ligação">Gestão e configuração de ligação</h3> - -<p>Essas interfaces são usadas para configurar, abrir e gerenciar conexões WebRTC.</p> - -<dl> - <dt>{{domxref("RTCPeerConnection")}}</dt> - <dd>Representa uma conexão WebRTC entre o computador local e um ponto remoto. Ele é usado para lidar com transmissão eficiente de dados entre os dois pares.</dd> - <dt>{{domxref("RTCDataChannel")}}</dt> - <dd>Representa um canal de dados bidirecional entre dois pares de uma conexão.</dd> - <dt>{{domxref("RTCDataChannelEvent")}}</dt> - <dd>Representa eventos que ocorrem ao anexar um {{domxref("RTCDataChannel")}} a um {{domxref("RTCPeerConnection")}} . O único evento enviado com esta interface é {{event("datachannel")}} .</dd> - <dt>{{domxref("RTCSessionDescription")}}</dt> - <dd>Representa os parâmetros de uma sessão. Cada RTCSessionDescription consiste em um tipo de descrição que indica qual parte do processo de negociação de oferta(offer) / resposta(answer) isso descreve e do SDP descritor da sessão.</dd> - <dt>{{domxref("RTCStatsReport")}}</dt> - <dd>Fornece informações detalhando estatísticas para uma conexão ou para uma faixa individual na conexão; O relatório pode ser obtido chamando {{domxref("RTCPeerConnection.getStats()")}} .</dd> - <dt>{{domxref("RTCIceCandidate")}}</dt> - <dd>Representa um servidor candidato que estabelece a conectividade de internet (ICE -internet connectivity establishment) para estabelecer um {{domxref("RTCPeerConnection")}} .</dd> - <dt>{{domxref("RTCIceTransport")}}</dt> - <dd>Representa informações sobre o transporte referentes ao estabelecimento de conectividade de internet (ICE - internet connectivity establishment).</dd> - <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt> - <dd>Representa eventos que ocorrem em relação aos candidatos ICE com o destino, geralmente um {{domxref("RTCPeerConnection")}} . Apenas um evento é deste tipo: {{event("icecandidate")}} .</dd> - <dt>{{domxref("RTCRtpSender")}}</dt> - <dd>Gerencia a codificação e a transmissão de dados para um {{domxref("MediaStreamTrack")}} em {{domxref("RTCPeerConnection")}}.</dd> - <dt>{{domxref("RTCRtpReceiver")}}</dt> - <dd>Gerencia a recepção e decodificação de dados para um {{domxref("MediaStreamTrack")}} em um {{domxref("RTCPeerConnection")}}.</dd> - <dt>{{domxref("RTCTrackEvent")}}</dt> - <dd>Indica que uma nova entrada {{domxref("MediaStreamTrack")}} foi criada e um objeto associado {{domxref("RTCRtpReceiver")}} foi adicionado ao objeto {{domxref("RTCPeerConnection")}} .</dd> -</dl> - -<h3 id="Identidade_e_segurança">Identidade e segurança</h3> - -<p>A API WebRTC inclui uma série de interfaces para gerenciar segurança e identidade.</p> - -<dl> - <dt>{{domxref("RTCIdentityProvider")}}</dt> - <dd>Permite que um agente do usuário possa solicitar que uma confirmação de identidade seja gerada ou validada.</dd> - <dt>{{domxref("RTCIdentityAssertion")}}</dt> - <dd>Representa a identidade de um ponto remoto da conexão atual. Caso nenhum par (peer) seja configurado e verificado, esta interface retorna <em>null</em>. Uma vez configurado, este não poderá ser alterado.</dd> - <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt> - <dd>Registra um provedor de identidade (idP).</dd> - <dt>{{domxref("RTCIdentityEvent")}}</dt> - <dd>Representa uma confirmação de identidade gerada por um provedor de identidade (idP). Isso geralmente é para um {{domxref("RTCPeerConnection")}}. O único evento enviado com este tipo é {{event("identityresult")}}.</dd> - <dt>{{domxref("RTCIdentityErrorEvent")}}</dt> - <dd>Representa um erro associado ao provedor de identidade (idP). Isso geralmente é para um {{domxref("RTCPeerConnection")}} . Dois eventos são enviados com este tipo: {{event("idpassertionerror")}} e {{event("idpvalidationerror")}} .</dd> - <dt>{{domxref("RTCCertificate")}}</dt> - <dd>Representa um certificado que um {{domxref("RTCPeerConnection")}} usa para autenticar.</dd> -</dl> - -<h3 id="Telefonia">Telefonia</h3> - -<p>Essas interfaces estão relacionadas à interatividade com redes telefônicas de comutação pública (PTSNs).</p> - -<dl> - <dt>{{domxref("RTCDTMFSender")}}</dt> - <dd>Gerencia a codificação e a transmissão da sinalização multi-frequência de dois tons (DTMF) para um {{domxref("RTCPeerConnection")}}.</dd> - <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt> - <dd>Indica uma ocorrência de uma multi-frequência de dois tons (DTMF). Este evento não faz bolha (bubble) (exceto quando indicado de outra forma) e não é cancelável (exceto quando indicado de outra forma).</dd> -</dl> - -<h3 id="Outros">Outros</h3> - -<dl> - <dt>{{domxref("RTCIceServer")}}</dt> - <dd>Define como ligar a um único servidor de ICE (tais como um servidor STUN ou TURN).</dd> -</dl> - -<p> </p> - -<h2 id="Guias">Guias</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Introduction to WebRTC protocols</a></dt> - <dd>This article introduces the protocols on top of which the WebRTC API is built.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></dt> - <dd>A guide to how WebRTC connections work and how the various protocols and interfaces can be used together to build powerful communication apps.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></dt> - <dd>WebRTC lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a browser application. In this article, we'll look at the lifetime of a WebRTC session, from establishing the connection all the way through closing the connection when it's no longer needed.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and two-way video calling</a></dt> - <dd>A tutorial and example which turbs a WebSocket-based chat system created for a previous example and adds support for opening video calls among participants. The chat server's WebSocket connection is used for WebRTC signaling.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Using WebRTC data channels</a></dt> - <dd>This guide covers how you can use a peer connection and an associated {{domxref("RTCDataChannel")}} to exchange arbitrary data between two peers.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_DTMF">Using DTMF with WebRTC</a></dt> - <dd>WebRTC's support for interacting with gateways that link to old-school telephone systems includes support for sending DTMF tones using the {{domxref("RTCDTMFSender")}} interface. This guide shows how to do so.</dd> -</dl> - -<h2 id="Tutoriais">Tutoriais</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a></dt> - <dd>The WebRTC organization <a href="https://github.com/webrtc/adapter/">provides on GitHub the WebRTC adapter</a> 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.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking still photos with WebRTC</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></dt> - <dd>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 <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, so that the same programming model can be used for each.</dd> -</dl> - -<h2 id="Recursos">Recursos</h2> - -<h3 id="Protocolos">Protocolos</h3> - -<h4 id="WebRTC-proper_protocols">WebRTC-proper protocols</h4> - -<ul> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Application Layer Protocol Negotiation for Web Real-Time Communications</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC Audio Codec and Processing Requirements</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>RTCWeb Data Channels</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>RTCWeb Data Channel Protocol</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Web Real-Time Communication (WebRTC): Media Transport and Use of RTP</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC Security Architecture</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports for RTCWEB</cite></a></li> -</ul> - -<h4 id="Related_supporting_protocols">Related supporting protocols</h4> - -<ul> - <li><a href="https://tools.ietf.org/html/rfc5245">Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol</a></li> - <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Session Traversal Utilities for NAT (STUN)</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc7064"><cite>URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc3264"><cite>An Offer/Answer Model with Session Description Protocol (SDP)</cite></a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization</cite></a></li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebRTC 1.0')}}</td> - <td>{{Spec2('WebRTC 1.0')}}</td> - <td>A definição inicial da API do WebRTC.</td> - </tr> - <tr> - <td>{{SpecName('Media Capture')}}</td> - <td>{{Spec2('Media Capture')}}</td> - <td>A definição inicial do objeto que transmite o fluxo de conteúdo de mídia.</td> - </tr> - <tr> - <td>{{SpecName('Media Capture DOM Elements')}}</td> - <td>{{Spec2('Media Capture DOM Elements')}}</td> - <td>A definição inicial sobre como obter fluxo de conteúdo de Elementos DOM</td> - </tr> - </tbody> -</table> - -<p>Em adição a estas especificações que definem a API necessária para usar o WebRTC, existem vários protocolos, listados em <a href="#Protocols">recursos</a>.</p> - -<h2 class="Related_Topics" id="Consulte_também">Consulte também</h2> - -<ul> - <li>{{domxref("MediaDevices")}}</li> - <li>{{domxref("MediaStreamEvent")}}</li> - <li>{{domxref("MediaStreamConstraints")}}</li> - <li>{{domxref("MediaStreamTrack")}}</li> - <li>{{domxref("MessageEvent")}}</li> - <li>{{domxref("MediaStream")}}</li> - <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multistream and renegotiation for Jitsi Videobridge</a></li> - <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering Through the WebRTC Fog with SocketPeer</a></li> - <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics</a></li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 1; display: none; left: -8px; top: -25px;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/webrtc_api/taking_still_photos/index.html b/files/pt-pt/web/api/webrtc_api/taking_still_photos/index.html deleted file mode 100644 index 6ee8a1f0e8..0000000000 --- a/files/pt-pt/web/api/webrtc_api/taking_still_photos/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Tirar fotografias com a câmara da Web -slug: Web/API/WebRTC_API/Taking_still_photos -tags: - - API - - Avançado - - Código amostra - - Exemplo - - Vídeo(2) - - WebRTC - - cãmara da Web -translation_of: Web/API/WebRTC_API/Taking_still_photos -original_slug: Web/API/API_WebRTC/Tirar_fotografias ---- -<p>{{WebRTCSidebar}}</p> - -<p><span class="seoSummary">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.</span> <a href="https://mdn-samples.mozilla.org/s/webrtc-capturestill">Try this sample</a> then read on to learn how it works.</p> - -<p>You can also jump straight to the <a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill" rel="noopener">code on Github</a> if you like.</p> - -<h2 id="The_HTML_markup">The HTML markup</h2> - -<p><a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill/index.html" rel="noopener">Our HTML interface</a> has two main operational sections: the stream and capture panel and the presentation panel. Each of these is presented side-by-side in its own {{HTMLElement("div")}} to facilitate styling and control.</p> - -<p>The first panel on the left contains two components: a {{HTMLElement("video")}} element, which will receive the stream from WebRTC, and a {{HTMLElement("button")}} the user clicks to capture a video frame.</p> - -<pre class="brush: html"> <div class="camera"> - <video id="video">Video stream not available.</video> - <button id="startbutton">Take photo</button> - </div></pre> - -<p>This is straightforward, and we'll see how it ties together when we get into the JavaScript code.</p> - -<p>Next, we have a {{HTMLElement("canvas")}} element into which the captured frames are stored, potentially manipulated in some way, and then converted into an output image file. This canvas is kept hidden by styling the canvas with {{cssxref("display")}}<code>:none</code>, to avoid cluttering up the screen — the user does not need to see this intermediate stage.</p> - -<p>We also have an {{HTMLElement("img")}} element into which we will draw the image — this is the final display shown to the user.</p> - -<pre class="brush: html"> <canvas id="canvas"> - </canvas> - <div class="output"> - <img id="photo" alt="The screen capture will appear in this box."> - </div></pre> - -<p>That's all of the relevant HTML. The rest is just some page layout fluff and a bit of text offering a link back to this page.</p> - -<h2 id="O_código_de_JavaScript"><span style="font-size: 30px;">O código de JavaScript</span></h2> - -<p>Now let's take a look at the <a class="external" href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill/capture.js" rel="noopener">JavaScript code</a>. We'll break it up into a few bite-sized pieces to make it easier to explain.</p> - -<h3 id="Initialização">Initialização</h3> - -<p>We start by wrapping the whole script in an anonymous function to avoid global variables, then setting up various variables we'll be using.</p> - -<pre class="brush: js">(function() { - var width = 320; // We will scale the photo width to this - var height = 0; // This will be computed based on the input stream - - var streaming = false; - - var video = null; - var canvas = null; - var photo = null; - var startbutton = null;</pre> - -<p>Those variables are:</p> - -<dl> - <dt><code>largura</code></dt> - <dd>Whatever size the incoming video is, we're going to scale the resulting image to be 320 pixels wide.</dd> - <dt><code>altura</code></dt> - <dd>The output height of the image will be computed given the <code>width</code> and the aspect ratio of the stream.</dd> - <dt><code>transmissão</code></dt> - <dd>Indicates whether or not there is currently an active stream of video running.</dd> - <dt><code>vídeo</code></dt> - <dd>This will be a reference to the {{HTMLElement("video")}} element after the page is done loading.</dd> - <dt><code>canvas</code></dt> - <dd>This will be a reference to the {{HTMLElement("canvas")}} element after the page is done loading.</dd> - <dt><code>foto</code></dt> - <dd>This will be a reference to the {{HTMLElement("img")}} element after the page is done loading.</dd> - <dt><code>startbutton</code></dt> - <dd>This will be a reference to the {{HTMLElement("button")}} element that's used to trigger capture. We'll get that after the page is done loading.</dd> -</dl> - -<h3 id="The_startup()_function">The startup() function</h3> - -<p>The <code>startup()</code> function is run when the page has finished loading, courtesy of {{domxref("window.addEventListener()")}}. This function's job is to request access to the user's webcam, initialize the output {{HTMLElement("img")}} to a default state, and to establish the event listeners needed to receive each frame of video from the camera and react when the button is clicked to capture an image.</p> - -<h4 id="Getting_element_references">Getting element references</h4> - -<p>First, we grab references to the major elements we need to be able to access.</p> - -<pre class="brush: js"> function startup() { - video = document.getElementById('video'); - canvas = document.getElementById('canvas'); - photo = document.getElementById('photo'); - startbutton = document.getElementById('startbutton');</pre> - -<h4 id="Get_the_media_stream">Get the media stream</h4> - -<p>The next task is to get the media stream:</p> - -<pre class="brush: js"> navigator.mediaDevices.getUserMedia({ video: true, audio: false }) - .then(function(stream) { - video.srcObject = stream; - video.play(); - }) - .catch(function(err) { - console.log("An error occured! " + err); - }); -</pre> - -<p>Here, we're calling {{domxref("MediaDevices.getUserMedia()")}} and requesting a video stream (without audio). It returns a promise which we attach success and failure callbacks to.</p> - -<p>The success callback receives a <code>stream</code> object as input. It the {{HTMLElement("video")}} element's source to our new stream.</p> - -<p>Once the stream is linked to the <code><video></code> element, we start it playing by calling <code><a href="/en-US/docs/Web/API/HTMLMediaElement#play">HTMLMediaElement.play()</a></code>.</p> - -<p>The error callback is called if opening the stream doesn't work. This will happen for example if there's no compatible camera connected, or the user denied access.</p> - -<h4 id="Listen_for_the_video_to_start_playing">Listen for the video to start playing</h4> - -<p>After calling <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement#play">HTMLMediaElement.play()</a></code> on the {{HTMLElement("video")}}, there's a (hopefully brief) period of time that elapses before the stream of video begins to flow. To avoid blocking until that happens, we add an event listener to <code>video</code>, <code>canplay</code>, which is delivered when the video playback actually begins. At that point, all the properties in the <code>video</code> object have been configured based on the stream's format.</p> - -<pre class="brush: js"> video.addEventListener('canplay', function(ev){ - if (!streaming) { - height = video.videoHeight / (video.videoWidth/width); - - video.setAttribute('width', width); - video.setAttribute('height', height); - canvas.setAttribute('width', width); - canvas.setAttribute('height', height); - streaming = true; - } - }, false);</pre> - -<p>This callback does nothing unless it's the first time it's been called; this is tested by looking at the value of our <code>streaming</code> variable, which is <code>false</code> the first time this method is run.</p> - -<p>If this is indeed the first run, we set the video's height based on the size difference between the video's actual size, <code>video.videoWidth</code>, and the width at which we're going to render it, <code>width</code>.</p> - -<p>Finally, the <code>width</code> and <code>height</code> of both the video and the canvas are set to match each other by calling {{domxref("Element.setAttribute()")}} on each of the two properties on each element, and setting widths and heights as appropriate. Finally, we set the <code>streaming</code> variable to <code>true</code> to prevent us from inadvertently running this setup code again.</p> - -<h4 id="Handle_clicks_on_the_button">Handle clicks on the button</h4> - -<p>To capture a still photo each time the user clicks the <code>startbutton</code>, we need to add an event listener to the button, to be called when the <code>click</code> event is issued:</p> - -<pre class="brush: js"> startbutton.addEventListener('click', function(ev){ - takepicture(); - ev.preventDefault(); - }, false);</pre> - -<p>This method is simple enough: it just calls our <code>takepicture()</code> function, defined below in the section {{anch("Capturing a frame from the stream")}}, then calls {{domxref("Event.preventDefault()")}} on the received event to prevent the click from being handled more than once.</p> - -<h4 id="Wrapping_up_the_startup()_method">Wrapping up the startup() method</h4> - -<p>There are only two more lines of code in the <code>startup()</code> method:</p> - -<pre class="brush: js"> clearphoto(); - }</pre> - -<p>This is where we call the <code>clearphoto()</code> method we'll describe below in the section {{anch("Clearing the photo box")}}.</p> - -<h3 id="Clearing_the_photo_box">Clearing the photo box</h3> - -<p>Clearing the photo box involves creating an image, then converting it into a format usable by the {{HTMLElement("img")}} element that displays the most recently captured frame. That code looks like this:</p> - -<pre class="brush: js"> function clearphoto() { - var context = canvas.getContext('2d'); - context.fillStyle = "#AAA"; - context.fillRect(0, 0, canvas.width, canvas.height); - - var data = canvas.toDataURL('image/png'); - photo.setAttribute('src', data); - }</pre> - -<p>We start by getting a reference to the hidden {{HTMLElement("canvas")}} element that we use for offscreen rendering. Next we set the <code>fillStyle</code> to <code>#AAA</code> (a fairly light grey), and fill the entire canvas with that color by calling {{domxref("CanvasRenderingContext2D.fillRect()","fillRect()")}}.</p> - -<p>Last in this function, we convert the canvas into a PNG image and call <code>{{domxref("Element.setAttribute", "photo.setAttribute()")}}</code> to make our captured still box display the image.</p> - -<h3 id="Capturing_a_frame_from_the_stream">Capturing a frame from the stream</h3> - -<p>There's one last function to define, and it's the point to the entire exercise: the <code>takepicture()</code> function, whose job it is to capture the currently displayed video frame, convert it into a PNG file, and display it in the captured frame box. The code looks like this:</p> - -<pre class="brush: js"> function takepicture() { - var context = canvas.getContext('2d'); - if (width && height) { - canvas.width = width; - canvas.height = height; - context.drawImage(video, 0, 0, width, height); - - var data = canvas.toDataURL('image/png'); - photo.setAttribute('src', data); - } else { - clearphoto(); - } - }</pre> - -<p>As is the case any time we need to work with the contents of a canvas, we start by getting the {{domxref("CanvasRenderingContext2D","2D drawing context")}} for the hidden canvas.</p> - -<p>Then, if the width and height are both non-zero (meaning that there's at least potentially valid image data), we set the width and height of the canvas to match that of the captured frame, then call {{domxref("CanvasRenderingContext2D.drawImage()", "drawImage()")}} to draw the current frame of the video into the context, filling the entire canvas with the frame image.</p> - -<div class="note"> -<p><strong>Note:</strong> This takes advantage of the fact that the {{domxref("HTMLVideoElement")}} interface looks like a {{domxref("HTMLImageElement")}} to any API that accepts an <code>HTMLImageElement</code> as a parameter, with the video's current frame presented as the image's contents.</p> -</div> - -<p>Once the canvas contains the captured image, we convert it to PNG format by calling {{domxref("HTMLCanvasElement.toDataURL()")}} on it; finally, we call {{domxref("Element.setAttribute", "photo.setAttribute()")}} to make our captured still box display the image.</p> - -<p>If there isn't a valid image available (that is, the <code>width</code> and <code>height</code> are both 0), we clear the contents of the captured frame box by calling <code>clearphoto()</code>.</p> - -<h2 id="Fun_with_filters">Fun with filters</h2> - -<p>Since we're capturing images from the user's webcam by grabbing frames from a {{HTMLElement("video")}} element, we can very easily apply filters and fun effects to the video. As it turns out, any CSS filters you apply to the element using the {{cssxref("filter")}} property affect the captured photo. These filters can range from the simple (making the image black and white) to the extreme (gaussian blurs and hue rotation).</p> - -<p>You can play with this effect using, for example, the Firefox developer tools' <a href="/en-US/docs/Tools/Style_Editor">style editor</a>; see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit CSS filters</a> for details on how to do so.</p> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li><a href="https://mdn-samples.mozilla.org/s/webrtc-capturestill">Try this sample</a></li> - <li><a href="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill">Sample code on Github</a></li> - <li>{{domxref("Navigator.getUserMedia()")}}</li> - <li>{{SectionOnPage("/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images", "Using frames from a video")}}</li> - <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li> -</ul> diff --git a/files/pt-pt/web/api/websocket/index.html b/files/pt-pt/web/api/websocket/index.html deleted file mode 100644 index 9820afc0b5..0000000000 --- a/files/pt-pt/web/api/websocket/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: WebSocket -slug: Web/API/WebSocket -tags: - - API - - Interface - - WebSocket - - WebSockets -translation_of: Web/API/WebSocket ---- -<div>{{APIRef("Web Sockets API")}}</div> - -<p>O objeto <code>WebSocket</code> fornece a API para criar e gerir uma ligação <a href="/pt-PT/docs/Web/API/WebSockets_API">WebSocket</a> a um servidor, bem como para enviar e receber dados sobre a ligação.</p> - -<p>Para criar uma <code>WebSocket</code>, use o construtor <code><a href="/pt-PT/docs/Web/API/WebSocket/WebSocket">WebSocket()</a></code>.</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("WebSocket.WebSocket", "WebSocket(url[, protocols])")}}</dt> - <dd>Devolve um objeto <code>WebSocket</code> acabado de criar.</dd> -</dl> - -<h2 id="Constantes">Constantes</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">Constante</td> - <td class="header">Valor</td> - </tr> - <tr> - <td><code>WebSocket.CONNECTING</code></td> - <td><code>0</code></td> - </tr> - <tr> - <td><code>WebSocket.OPEN</code></td> - <td><code>1</code></td> - </tr> - <tr> - <td><code>WebSocket.CLOSING</code></td> - <td><code>2</code></td> - </tr> - <tr> - <td><code>WebSocket.CLOSED</code></td> - <td><code>3</code></td> - </tr> - </tbody> -</table> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt>{{domxref("WebSocket.binaryType")}}</dt> - <dd>O tipo de dados binarios usado pela conexão.</dd> - <dt>{{domxref("WebSocket.bufferedAmount")}} {{readonlyinline}}</dt> - <dd>O numero de bytes de dados em fila.</dd> - <dt>{{domxref("WebSocket.extensions")}} {{readonlyinline}}</dt> - <dd>As extensões selecionadas pelo servidor.</dd> - <dt>{{domxref("WebSocket.onclose")}}</dt> - <dd>Um <em>event listener</em> para ser chamado quando a ligação terminar.</dd> - <dt>{{domxref("WebSocket.onerror")}}</dt> - <dd>Um <em>event listener</em> para ser chamado quando um erro ocorre.</dd> - <dt>{{domxref("WebSocket.onmessage")}}</dt> - <dd>Um <em>event listener</em> para ser chamado quando uma mensagem é recebida do servidor.</dd> - <dt>{{domxref("WebSocket.onopen")}}</dt> - <dd>Um <em>event listener</em> para ser chamado quando a ligação é iniciada.</dd> - <dt>{{domxref("WebSocket.protocol")}} {{readonlyinline}}</dt> - <dd>O sub-protocolo selecionado pelo servidor.</dd> - <dt>{{domxref("WebSocket.readyState")}} {{readonlyinline}}</dt> - <dd>O estado atual da conexão.</dd> - <dt>{{domxref("WebSocket.url")}} {{readonlyinline}}</dt> - <dd>O URL absoluto da WebSocket.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{domxref("WebSocket.close", "WebSocket.close([code[, reason]])")}}</dt> - <dd>Termina a conexão.</dd> - <dt>{{domxref("WebSocket.send", "WebSocket.send(data)")}}</dt> - <dd>Adiciona dados à fila para ser transmitida.</dd> -</dl> - -<h2 id="Eventos">Eventos</h2> - -<p>Observe estes eventos usando <code>addEventListener()</code> ou atribuindo um agente de escuta de eventos à propriedade <code>oneventname</code> desta interface.</p> - -<dl> - <dt>{{domxref("WebSocket/close_event", "close")}}</dt> - <dd>Lançado quando uma ligação com um <code>WebSocket</code> é fechada.<br> - Também disponível através da propriedade {{domxref("WebSocket/onclose", "onclose")}}.</dd> - <dt>{{domxref("WebSocket/error_event", "error")}}</dt> - <dd>Lançado quando uma ligação com um <code>WebSocket</code> foi fechada devido a um erro, como quando alguns dados não puderam ser enviados.<br> - Também disponível através da propriedade {{domxref("WebSocket/onerror", "onerror")}}.</dd> - <dt>{{domxref("WebSocket/message_event", "message")}}</dt> - <dd>Lançado quando os dados são recebidos através de um <code>WebSocket</code>.<br> - Também disponível através da propriedade {{domxref("WebSocket/onmessage", "onmessage")}}.</dd> - <dt>{{domxref("WebSocket/open_event", "open")}}</dt> - <dd>Lançado quando uma ligação com um <code>WebSocket</code> é aberta.<br> - Também disponível através da propriedade {{domxref("WebSocket/onopen", "onopen")}}.</dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<pre class="brush: js notranslate">// Criar ligação WebSocket. -const socket = new WebSocket('ws://localhost:8080'); - -// Ligação conectada -socket.addEventListener('open', function (event) { - socket.send('Hello Server!'); -}); - -// Ficar a ouvir por mensagens -socket.addEventListener('message', function (event) { - console.log('Message from server ', event.data); -});</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Especificação</th> - <th>Estado</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "#network", "WebSocket")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - -<div> - - -<p>{{Compat("api.WebSocket")}}</p> -</div> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/WebSockets_API/Escrever_aplica%C3%A7%C3%A3o_cliente_de_WebSocket">Escrever aplicação cliente de WebSocket</a></li> -</ul> diff --git a/files/pt-pt/web/api/websocket/websocket/index.html b/files/pt-pt/web/api/websocket/websocket/index.html deleted file mode 100644 index 6c7a39f7ac..0000000000 --- a/files/pt-pt/web/api/websocket/websocket/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: WebSocket() -slug: Web/API/WebSocket/WebSocket -tags: - - API - - Construtor - - Referencia - - Web API - - WebSocket -translation_of: Web/API/WebSocket/WebSocket ---- -<p>{{APIRef("Web Sockets API")}}</p> - -<p>O construtor <code><strong>WebSocket()</strong></code> devolve um novo objeto de {{domxref("WebSocket")}}.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">var <em>aWebSocket</em> = new WebSocket(<em>url</em> [, protocols]);</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code>url</code></dt> - <dd>O URL a qual se conectar; este deve ser o URL a qual o servidor WebSocket responderá.</dd> - <dt><code>protocols</code> {{optional_inline}}</dt> - <dd>Uma <em>string</em> ou uma matriz de <em>strings</em> que representam protocolos. Estas <em>strings</em> representam sub-protocolos, para que um servidor possa implementar vários sub-protocolos WebSocket (por exemplo, pode querer que um servidor seja capaz de lidar com diferentes tipos de interações dependendo do <code>protocol</code> indicado). Se não é dado um valor ao parâmetro, fica pré-definido como uma <em>string</em> vazia.</dd> -</dl> - -<h3 id="Exceções_lançadas">Exceções lançadas</h3> - -<dl> - <dt><code>SECURITY_ERR</code></dt> - <dd>A porta a qual a que se está a tentar ligar está bloqueada.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></dt> - <dd>O URL é invalido.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-websocket', 'the WebSocket constructor')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.WebSocket.WebSocket")}}</p> diff --git a/files/pt-pt/web/api/websockets_api/index.html b/files/pt-pt/web/api/websockets_api/index.html deleted file mode 100644 index 5fa4e252e2..0000000000 --- a/files/pt-pt/web/api/websockets_api/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: WebSocket API (WebSockets) -slug: Web/API/WebSockets_API -tags: - - API - - Client - - Comunicação - - Servidor - - Sumario - - Two-Way - - WebSocket - - WebSocket API - - WebSockets - - dados - - interativo -translation_of: Web/API/WebSockets_API ---- -<p>{{DefaultAPISidebar("Websockets API")}}</p> - -<p>A <strong>WebSocket API</strong> é uma tecnologia que permite abrir uma sessão de comunicação interativa bidirecional entre o navegador do utilizador e um servidor. Com esta API, é possível enviar mensagens para um servidor e receber respostas orientadas por eventos sem ter de sondar o servidor para obter uma resposta.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> Enquanto a conexão WebSocket é funcionalmente semelhante aos <em>sockets</em> de estilo Unix, não são relacionados.</p> -</div> - -<h2 id="Interfaces">Interfaces</h2> - -<dl> - <dt><a href="/pt-PT/docs/Web/API/WebSocket"><code>WebSocket</code></a></dt> - <dd>A interface principal para fazer conexão a um servidor de WebSocket e depois enviar e receber dados na mesma conexão.</dd> - <dt><code><a href="/pt-PT/docs/Web/API/CloseEvent">CloseEvent</a></code></dt> - <dd>O evento enviado pelo objeto WebSocket quando a conexão termina.</dd> - <dt><a href="/pt-PT/docs/Web/API/MessageEvent"><code>MessageEvent</code></a></dt> - <dd>O evento enviado pelo objeto WebSocket quando uma mensagem é recebida do servidor.</dd> -</dl> - -<h2 id="Guias">Guias</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/WebSockets_API/Escrever_aplicação_cliente_de_WebSocket">Escrever aplicação cliente de WebSocket </a></li> - <li><a href="/pt-PT/docs/Web/API/WebSockets_API/Escrever_servidores_de_WebSocket">Escrever servidores de WebSocket </a></li> - <li><a href="/pt-PT/docs/Web/API/WebSockets_API/Escrever_um_servidor_WebSocket_em_C%23">Escrever um servidor WebSocket em C#</a></li> - <li><a href="/pt-PT/docs/Web/API/WebSockets_API/Escrever_um_servidor_WebSocket_em_Java">Escrever um servidor WebSocket em Java</a></li> -</ul> - -<h2 id="Tools" name="Tools">Ferramentas</h2> - -<ul> - <li><a href="https://hacks.mozilla.org/2017/06/introducing-humblenet-a-cross-platform-networking-library-that-works-in-the-browser/">HumbleNet</a>: Uma biblioteca em rede multi-plataformas que funciona no navegador. Consiste num wrapper em C em torno de WebSockets e WebRTC que abstrai as diferenças entre navegadores, facilitando a criação de funcionalidades de rede multi-utilizador para jogos e outras aplicações.</li> - <li><a href="https://github.com/uWebSockets/uWebSockets">µWebSockets</a>: Implementação de servidor e cliente WebSocket altamente escalável para <a href="https://isocpp.org/">C++11</a> e <a href="https://nodejs.org">Node.js</a>.</li> - <li><a href="https://github.com/ClusterWS/ClusterWS">ClusterWS</a>: Framework leve, rápida e poderosa para construir aplicações WebSocket escaláveis no <a href="https://nodejs.org">Node.js</a>.</li> - <li><a href="https://github.com/ClusterWS/cWS">CWS</a>: Implementação rápida WebSocket de C++ para Node.js (uWebSockets v0.14 fork)</li> - <li><a class="external" href="https://socket.io">Socket.IO</a>: Um protocolo de transferência de terceiros, baseado em long polling/WebSocket para <a href="https://nodejs.org">Node.js</a>.</li> - <li><a href="http://socketcluster.io/">SocketCluster</a>: Uma pub/sub WebSocket framework para <a href="https://nodejs.org">Node.js</a> com foco na escalabilidade.</li> - <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: Uma implementação da API de servidores WebSocket para <a href="https://nodejs.org">Node.js</a>.</li> - <li><a href="http://www.totaljs.com">Total.js</a>: Uma <em>framework</em> de aplicações web para <a href="https://www.nodejs.org">Node.js</a> (Example: <a href="https://github.com/totaljs/examples/tree/master/websocket">WebSocket chat</a>)</li> - <li><a href="https://www.npmjs.com/package/faye-websocket">Faye</a>: Uma <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a> (ligações bidireccionais) e <a href="/en-US/docs/Web/API/EventSource/">EventSource</a> (ligações unidireccionais) para <a href="https://nodejs.org">Node.js</a> Server e Client.</li> - <li><a href="http://signalr.net/">SignalR</a>: SignalR usa WebSockets quando está disponível, e discretamente volta para outras técnicas e tecnologias quando não está, enquanto o seu código de aplicação permanece o mesmo.</li> - <li><a href="https://caddyserver.com/docs/websocket">Caddy</a>: Um servidor web capaz de substituir comandos arbitrários (stdin/stdout) com uma <em>web socket</em>.</li> - <li><a href="https://github.com/websockets/ws">ws</a>: uma biblioteca de cliente e servidor WebSocket popular para <a href="https://nodejs.org/">Node.js</a>.</li> - <li><a href="https://github.com/bigstepinc/jsonrpc-bidirectional">jsonrpc-bidirectional</a>: RPC assíncrono que, numa única ligação, pode ter funções exportadas no servidor e, e ao mesmo tempo, no cliente (cliente pode chamar servidor, servidor também pode chamar cliente).</li> - <li><a href="https://github.com/ninenines/cowboy">cowboy</a>: Cowboy é um pequeno, rápido e moderno servidor HTTP para Erlang/OTP com suporte para WebSocket.</li> -</ul> - -<h2 id="Related_Topics" name="Related_Topics">Tópicos Relacionados</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/Guide/AJAX">AJAX</a></li> - <li><a href="/pt-PT/docs/Web/JavaScript">JavaScript</a></li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "web-sockets.html", "WebSocket API")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td><a href="https://www.w3.org/TR/websockets/">WebSockets</a></td> - <td><span class="spec-CR">Candidate Recommendation</span></td> - <td></td> - </tr> - <tr> - <td>{{RFC(6455, "The WebSocket Protocol")}}</td> - <td><span class="spec-RFC">IETF RFC</span></td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade">Compatibilidade</h2> - - - -<p>{{Compat("api.WebSocket")}}</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 — O Protocolo WebSocket</a></li> - <li><a class="external" href="https://www.w3.org/TR/websockets/">Especificação da API WebSocket</a></li> - <li><em><a href="/en-US/docs/Server-sent_events">Server-Sent Events</a></em></li> -</ul> diff --git a/files/pt-pt/web/api/websockets_api/writing_a_websocket_server_in_java/index.html b/files/pt-pt/web/api/websockets_api/writing_a_websocket_server_in_java/index.html deleted file mode 100644 index d41f7c7b3e..0000000000 --- a/files/pt-pt/web/api/websockets_api/writing_a_websocket_server_in_java/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: Escrever um servidor WebSocket em Java -slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java -tags: - - HTML5 - - Handshaking - - Tutorial - - WebSockets -translation_of: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java -original_slug: Web/API/WebSockets_API/Escrever_um_servidor_WebSocket_em_Java ---- -<h2 id="Introdução">Introdução</h2> - -<p>Este exemplo mostra-lhe como criar um servidor com API de WebSocket utilizando Oracle Java.<br> - <br> - Embora outras linguagens do lado do servidor possam ser utilizadas para criar um servidor WebSocket, este exemplo utiliza Oracle Java para simplificar o código do exemplo.</p> - -<p>Este servidor está em conformidade com o <a href="http://tools.ietf.org/html/rfc6455">RFC 6455</a>, pelo que apenas trata de ligações a partir das seguintes versões dos navegadores; Chrome 16, Firefox 11, IE 10 e superior.</p> - -<h2 id="Primeiros_passos">Primeiros passos</h2> - -<p>Os WebSockets comunicam através de uma ligação <em>{{interwiki("wikipedia", "Transmission_Control_Protocol", "TCP (Transmission Control Protocol)")}}</em>. A classe <a href="http://docs.oracle.com/javase/8/docs/api/java/net/ServerSocket.html">ServerSocket</a> do Java está localizada no pacote java.net.</p> - -<h3 id="ServerSocket">ServerSocket</h3> - -<h4 id="Construtor">Construtor</h4> - -<dl> - <dt><code>ServerSocket(int port)</code></dt> - <dd>Quando se instância a classe ServerSocket, esta é ligada ao número da porta que se especificou pelo argumento <code>port</code>.<br> - <br> - Aqui está uma implementação dividida em partes:</dd> -</dl> - -<pre class="brush: java notranslate">import java.io.IOException; -import java.io.InputStream; -import java.io.OutputStream; -import java.net.ServerSocket; -import java.net.Socket; -import java.security.MessageDigest; -import java.security.NoSuchAlgorithmException; -import java.util.Base64; -import java.util.Scanner; -import java.util.regex.Matcher; -import java.util.regex.Pattern; - -public class WebSocket { - public static void main(String[] args) throws IOException, NoSuchAlgorithmException { - ServerSocket server = new ServerSocket(80); - try { - System.out.println("Server has started on 127.0.0.1:80.\r\nWaiting for a connection..."); - Socket client = server.accept(); - System.out.println("A client connected.");</pre> - -<h3 id="Socket">Socket</h3> - -<h4 id="Métodos">Métodos</h4> - -<dl> - <dt><code><span class="memberNameLink"><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getInputStream--">getInputStream</a></span>()</code></dt> - <dd>Devolve uma <em>input stream</em> para este socket.</dd> - <dt><code><span class="memberNameLink"><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getOutputStream--">getOutputStream</a></span>()</code></dt> - <dd>Devolve uma <em>output stream</em> para este socket.</dd> -</dl> - -<h3 id="OutputStream">OutputStream</h3> - -<h4 id="Métodos_2">Métodos</h4> - -<dl> - <dt><code>write(byte[] b, int off, int len)</code></dt> - <dd>Escreve o número de bytes especificado por <code>len</code> a partir da matriz de bytes especificada por <code>b</code>, começando no índice indicado por <code>off</code> para este <em>output stream</em>.</dd> -</dl> - -<h3 id="InputStream">InputStream</h3> - -<h4 id="Métodos_3">Métodos</h4> - -<dl> - <dt><code><span class="brush: cpp" style="line-height: 1.572;">read</span>(byte[] b, int off, int len)</code></dt> - <dd>Lê até um número de bytes especificado por <code>len</code> da matriz de bytes especificada por <code>b</code>, começando no índice indicado por <code>off</code> para este <em>input stream</em>.<em> </em></dd> -</dl> - -<p>Vamos continuar o nosso exemplo.</p> - -<pre class="brush: java notranslate"> InputStream in = client.getInputStream(); - OutputStream out = client.getOutputStream(); - Scanner s = new Scanner(in, "UTF-8");</pre> - -<h2 id="Handshaking_aperto_de_mão"><em>Handshaking</em> (a<strong>perto de mão</strong>)</h2> - -<p>Quando um cliente se liga a um servidor, envia um pedido GET para actualizar a ligação do protocolo HTTP a uma ligação WebSocket. Isto é conhecido como aperto de mão.</p> - -<pre class="brush: java notranslate"> try { - String data = s.useDelimiter("\\r\\n\\r\\n").next(); - Matcher get = Pattern.compile("^GET").matcher(data);</pre> - -<p>Criar a resposta é mais fácil do que compreender porque o deve fazer desta forma.</p> - -<p>Você deve,</p> - -<ol> - <li>Obter o valor do cabeçalho de pedido da <code>Sec-WebSocket-Key</code> sem qualquer espaço em branco</li> - <li>Combine esse valor com "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"</li> - <li>Calcule o código SHA-1 e Base64 do mesmo</li> - <li>Devolve-o como o valor do cabeçalho de resposta Sec-WebSocket-Accept numa resposta HTTP.</li> -</ol> - -<pre class="brush: java notranslate"> if (get.find()) { - Matcher match = Pattern.compile("Sec-WebSocket-Key: (.*)").matcher(data); - match.find(); - byte[] response = ("HTTP/1.1 101 Switching Protocols\r\n" - + "Connection: Upgrade\r\n" - + "Upgrade: websocket\r\n" - + "Sec-WebSocket-Accept: " - + Base64.getEncoder().encodeToString(MessageDigest.getInstance("SHA-1").digest((match.group(1) + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").getBytes("UTF-8"))) - + "\r\n\r\n").getBytes("UTF-8"); - out.write(response, 0, response.length); -</pre> - -<h2 id="Descodificar_mensagens">Descodificar mensagens</h2> - -<p>Após um aperto de mão bem-sucedido, o cliente pode enviar mensagens para o servidor, mas agora estas estão codificadas.<br> - <br> - Se enviarmos "abcdef", recebemos estes bytes:</p> - -<table> - <tbody> - <tr> - <td>129</td> - <td>134</td> - <td>167</td> - <td>225</td> - <td>225</td> - <td>210</td> - <td>198</td> - <td>131</td> - <td>130</td> - <td>182</td> - <td>194</td> - <td>135</td> - </tr> - </tbody> -</table> - -<h4 id="129_FIN_RSV1_RSV2_RSV3_opcode">129 (FIN, RSV1, RSV2, RSV3, <em>opcode</em>)</h4> - -<p>Pode enviar a sua mensagem em fragmentos, mas por enquanto o FIN é 1 indicando que a mensagem está toda num fragmento. RSV1, RSV2 e RSV3 são sempre 0, a não ser que um significado para os bytes é negociado. <em>Opcode</em> 0x1 significa que isto é um texto (ver <a href="http://tools.ietf.org/html/rfc6455#section-5.2">lista completa de <em>opcodes</em></a>).</p> - -<table> - <thead> - <tr> - <th scope="col">FIN (É o último fragmento da mensagem?)</th> - <th scope="col">RSV1</th> - <th scope="col">RSV2</th> - <th scope="col">RSV3</th> - <th scope="col"><em>Opcode</em></th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>0x1=0001</td> - </tr> - </tbody> -</table> - -<h4 id="134_comprimento_da_mensagem">134 (comprimento da mensagem)</h4> - -<p>O comprimento da mensagem é indicada das seguintes formas:</p> - -<ul> - <li>Se o segundo byte menos 128 estiver entre 0 e 125, este é o comprimento da mensagem,</li> - <li>Se o resultado é 126, os seguintes 2 bytes (inteiro de 16 bits sem assinatura) ditam o comprimento,</li> - <li>E se o resultado é 127, os 8 bytes seguintes (64-bit inteiro não assinado, o bit mais significativo DEVE ser 0) são o comprimento.</li> -</ul> - -<h4 id="167_225_225_e_210_chave_para_descodificar">167, 225, 225 e 210 (chave para descodificar)</h4> - -<p>Estes são os bytes da chave para descodificar. A chave muda para cada mensagem.</p> - -<h4 id="198_131_130_182_194_135_conteúdo_da_mensagem">198, 131, 130, 182, 194, 135 (conteúdo da mensagem)</h4> - -<p>Os restantes bytes codificados são a mensagem.</p> - -<h3 id="Algoritmo_para_descodificar">Algoritmo para descodificar</h3> - -<p>O algoritmo usado para descodificar a mensagem é o seguinte:</p> - -<p><em>D<sub>i</sub></em> = <em>E<sub>i</sub></em> XOR <em>M</em><sub>(<em>i</em> mod 4)</sub></p> - -<p>onde <em>D</em> é a série de bytes da mensagem descodificados, <em>E</em> é a série de bytes da mensagem codificados, <em>M</em> é a série de bytes da chave, e <em>i</em> é o índice do byte da mensagem a ser descodificado.</p> - -<p>Exemplo em Java:</p> - -<pre class="brush: java notranslate"> byte[] decoded = new byte[6]; - byte[] encoded = new byte[] { (byte) 198, (byte) 131, (byte) 130, (byte) 182, (byte) 194, (byte) 135 }; - byte[] key = new byte[] { (byte) 167, (byte) 225, (byte) 225, (byte) 210 }; - for (int i = 0; i < encoded.length; i++) { - decoded[i] = (byte) (encoded[i] ^ key[i & 0x3]); - } - } - } finally { - s.close(); - } - } finally { - server.close(); - } - } -}</pre> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/WebSockets_API/Escrever_servidores_de_WebSocket">Escrever servidores de WebSocket</a></li> -</ul> - -<div id="cke_pastebin"></div> diff --git a/files/pt-pt/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/pt-pt/web/api/websockets_api/writing_websocket_client_applications/index.html deleted file mode 100644 index 08b86ecca8..0000000000 --- a/files/pt-pt/web/api/websockets_api/writing_websocket_client_applications/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Escrever aplicação cliente de WebSocket -slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications -tags: - - Client - - Exemplo - - Guía - - Networking - - Web Sockets API - - WebSocket - - WebSocket API - - WebSockets -translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications -original_slug: Web/API/WebSockets_API/Escrever_aplicação_cliente_de_WebSocket ---- -<div>{{APIRef("Websockets API")}}</div> - -<p>WebSocket client applications use the <a href="/en-US/docs/Web/API/Websockets_API">WebSocket API</a> to communicate with <a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_servers">WebSocket servers</a> using the WebSocket protocol.</p> - -<p>{{AvailableInWorkers}}</p> - -<div class="note"> -<p><strong>Note:</strong> The example snippets in this article are taken from our WebSocket chat client/server sample. <a href="https://github.com/mdn/samples-server/tree/master/s/websocket-chat">See the code</a>, then <a href="https://mdn-samples.mozilla.org/s/websocket-chat">try out the example for yourself</a>.</p> -</div> - -<h2 id="Creating_a_WebSocket_object">Creating a WebSocket object</h2> - -<p>In order to communicate using the WebSocket protocol, you need to create a {{domxref("WebSocket")}} object; this will automatically attempt to open the connection to the server.</p> - -<p>The WebSocket constructor accepts one required and one optional parameter:</p> - -<pre class="syntaxbox notranslate"><em>webSocket</em> = new WebSocket(<em>url</em>, <em>protocols</em>); -</pre> - -<dl> - <dt><code>url</code></dt> - <dd>The URL to which to connect; this should be the URL to which the WebSocket server will respond. This should use the URL scheme <code>wss://</code>, although some software may allow you to use the insecure <code>ws://</code> for local connections.</dd> - <dt><code>protocols</code> {{ optional_inline() }}</dt> - <dd>Either a single protocol string or an array of protocol strings. These strings are used to indicate sub-protocols, so that a single server can implement multiple WebSocket sub-protocols (for example, you might want one server to be able to handle different types of interactions depending on the specified <code>protocol</code>). If you don't specify a protocol string, an empty string is assumed.</dd> -</dl> - -<p>The constructor will throw a <code>SecurityError</code> if the destination doesn't allow access. This may happen if you attempt to use an insecure connection (most {{Glossary("user agent", "user agents")}} now require a secure link for all WebSocket connections unless they're on the same device or possibly on the same network).</p> - -<h3 id="Connection_errors">Connection errors</h3> - -<p>If an error occurs while attempting to connect, first a simple event with the name <code>error</code> is sent to the {{domxref("WebSocket")}} object (thereby invoking its {{domxref("WebSocket.onerror", "onerror")}} handler), and then the {{domxref("CloseEvent")}} is sent to the <code>WebSocket</code> object (thereby invoking its {{domxref("WebSocket.onclose", "onclose")}} handler) to indicate the reason for the connection's closing.</p> - -<p>The browser may also output to its console a more descriptive error message as well as a closing code as defined in <a class="external" href="http://tools.ietf.org/html/rfc6455#section-7.4" title="RFC 6455 Section 7.4">RFC 6455, Section 7.4</a> through the {{domxref("CloseEvent")}}.</p> - -<h3 id="Examples">Examples</h3> - -<p>This simple example creates a new WebSocket, connecting to the server at <code><span class="nowiki">wss://www.example.com/socketserver</span></code>. A custom protocol of "protocolOne" is named in the request for the socket in this example, though this can be omitted.</p> - -<pre class="brush: js notranslate">var exampleSocket = new WebSocket("wss://www.example.com/socketserver", "protocolOne"); -</pre> - -<p>On return, {{domxref("WebSocket.readyState", "exampleSocket.readyState")}} is <code>CONNECTING</code>. The <code>readyState</code> will become <code>OPEN</code> once the connection is ready to transfer data.</p> - -<p>If you want to open a connection and are flexible about the protocols you support, you can specify an array of protocols:</p> - -<pre class="brush: js notranslate">var exampleSocket = new WebSocket("wss://www.example.com/socketserver", ["protocolOne", "protocolTwo"]); -</pre> - -<p>Once the connection is established (that is, <code>readyState</code> is <code>OPEN</code>), {{domxref("WebSocket.protocol", "exampleSocket.protocol")}} will tell you which protocol the server selected.</p> - -<p>Establishing a WebSocket relies on the <a href="/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism">HTTP Upgrade mechanism</a>, so the request for the protocol upgrade is implicit when we address the web server as <code><span class="nowiki">ws://www.example.com</span></code> or <code><span class="nowiki">wss://www.example.com</span></code>.</p> - -<h2 id="Sending_data_to_the_server">Sending data to the server</h2> - -<p>Once you've opened your connection, you can begin transmitting data to the server. To do this, simply call the <code>WebSocket</code> object's {{domxref("WebSocket.send", "send()")}} method for each message you want to send:</p> - -<pre class="brush: js notranslate">exampleSocket.send("Here's some text that the server is urgently awaiting!"); -</pre> - -<p>You can send data as a string, {{ domxref("Blob") }}, or {{jsxref("ArrayBuffer")}}.</p> - -<p>As establishing a connection is asynchronous and prone to failure there is no guarantee that calling the <code>send()</code> method immediately after creating a WebSocket object will be successful. We can at least be sure that attempting to send data only takes place once a connection is established by defining an {{domxref("WebSocket.onopen", "onopen")}} event handler to do the work:</p> - -<pre class="brush: js notranslate">exampleSocket.onopen = function (event) { - exampleSocket.send("Here's some text that the server is urgently awaiting!"); -}; -</pre> - -<h3 id="Using_JSON_to_transmit_objects">Using JSON to transmit objects</h3> - -<p>One handy thing you can do is use {{glossary("JSON")}} to send reasonably complex data to the server. For example, a chat program can interact with a server using a protocol implemented using packets of JSON-encapsulated data:</p> - -<pre class="brush: js notranslate">// Send text to all users through the server -function sendText() { - // Construct a msg object containing the data the server needs to process the message from the chat client. - 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 = ""; -} -</pre> - -<h2 id="Receiving_messages_from_the_server">Receiving messages from the server</h2> - -<p>WebSockets is an event-driven API; when messages are received, a <code>message</code> event is sent to the <code>WebSocket</code> object. To handle it, add an event listener for the <code>message</code> event, or use the {{domxref("WebSocket.onmessage", "onmessage")}} event handler. To begin listening for incoming data, you can do something like this:</p> - -<pre class="brush: js notranslate">exampleSocket.onmessage = function (event) { - console.log(event.data); -} -</pre> - -<h3 id="Receiving_and_interpreting_JSON_objects">Receiving and interpreting JSON objects</h3> - -<p>Let's consider the chat client application first alluded to in {{ anch("Using JSON to transmit objects") }}. There are assorted types of data packets the client might receive, such as:</p> - -<ul> - <li>Login handshake</li> - <li>Message text</li> - <li>User list updates</li> -</ul> - -<p>The code that interprets these incoming messages might look like this:</p> - -<pre class="brush: js notranslate">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); - } -}; -</pre> - -<p>Here we use {{jsxref("JSON.parse()")}} to convert the JSON object back into the original object, then examine and act upon its contents.</p> - -<h3 id="Text_data_format">Text data format</h3> - -<p>Text received over a WebSocket connection is in UTF-8 format.</p> - -<h2 id="Closing_the_connection">Closing the connection</h2> - -<p>When you've finished using the WebSocket connection, call the WebSocket method {{domxref("WebSocket.close", "close()")}}:</p> - -<pre class="brush: js notranslate">exampleSocket.close(); -</pre> - -<p>It may be helpful to examine the socket's {{domxref("WebSocket.bufferedAmount", "bufferedAmount")}} attribute before attempting to close the connection to determine if any data has yet to be transmitted on the network. If this value isn't 0, there's pending data still, so you may wish to wait before closing the connection.</p> - -<h2 id="Security_considerations">Security considerations</h2> - -<p>WebSockets should not be used in a mixed content environment; that is, you shouldn't open a non-secure WebSocket connection from a page loaded using HTTPS or vice-versa. Most browsers now only allow secure WebSocket connections, and no longer support using them in insecure contexts.</p> diff --git a/files/pt-pt/web/api/websockets_api/writing_websocket_server/index.html b/files/pt-pt/web/api/websockets_api/writing_websocket_server/index.html deleted file mode 100644 index a842c9d7d1..0000000000 --- a/files/pt-pt/web/api/websockets_api/writing_websocket_server/index.html +++ /dev/null @@ -1,442 +0,0 @@ ---- -title: Escrever um servidor WebSocket em C# -slug: Web/API/WebSockets_API/Writing_WebSocket_server -tags: - - HTML5 - - Tutorial - - WebSockets -translation_of: Web/API/WebSockets_API/Writing_WebSocket_server -original_slug: Web/API/WebSockets_API/Escrever_um_servidor_WebSocket_em_C ---- -<h2 id="Introdução">Introdução</h2> - -<p>Se desejar utilizar o WebSocket API, é útil dispor de um servidor. Neste artigo pode ver como escrever um em C#. Pode fazê-lo em qualquer língua do lado do servidor, mas para manter as coisas simples e mais compreensíveis, vamos usar a linguagem da Microsoft.</p> - -<p>Este servidor está em conformidade com o <a href="http://tools.ietf.org/html/rfc6455">RFC 6455</a>, pelo que só tratará de ligações a partir das versões de navegadores; Chrome 16, Firefox 11, e IE 10 ou superior.</p> - -<h2 id="Primeiros_passos">Primeiros passos</h2> - -<p>Os WebSockets comunicam através de uma ligação interwiki("wikipedia","Transmission_Control_Protocol","TCP (Transmission Control Protocol)"). Felizmente, C# tem uma classe TcpListener que serve para escutar ligações de TCP. Encontra-se no espaço de nomes <code>System.Net.Sockets</code>.</p> - -<div class="note"> -<p><span style="line-height: 1.572;"><strong>Nota:</strong> É aconselhável incluir o namespace com <code>using</code> a fim de escrever menos. Permite a utilização das classes de um namespace sem escrever sempre o namespace completo.</span></p> -</div> - -<h3 id="TcpListener">TcpListener</h3> - -<h4 id="Construtor">Construtor</h4> - -<dl> - <dt><code>TcpListener(System.Net.IPAddress localaddr, int port)</code></dt> - <dd><code>localaddr</code> indica o endereço IP do ouvinte e <code>port</code> indica a porta.</dd> -</dl> - -<div class="note"> -<p><span style="line-height: 1.572;"><strong>Nota:</strong> Para criar um objeto <code>IPAddress</code> a partir de uma <code>string</code>, use o método <em>static</em> </span><code>Parse</code><span style="line-height: 1.572;"> de </span><code>IPAddress</code><em>.</em></p> -</div> - -<h4 id="Métodos"><span style="line-height: 1.572;">Métodos</span></h4> - -<dl> - <dt><code><span style="line-height: 1.572;">Start()</span></code></dt> - <dd>Começa a escutar os pedidos de ligação recebidos.</dd> -</dl> - -<dl> - <dt><code><span style="line-height: 1.572;">AcceptTcpClient()</span></code></dt> - <dd>Espera por uma ligação TCP, aceita-a e devolve-a como um objeto <a href="https://docs.microsoft.com/pt-pt/dotnet/api/system.net.sockets.tcpclient">TcpClient</a>.</dd> -</dl> - -<h4 class="syntaxbox" id="Exemplo">Exemplo</h4> - -<p><span style="line-height: 1.572;">Aqui tem uma implementação básica do servidor:</span></p> - -<pre class="brush: cpp notranslate">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("O servidor começou com endreço 127.0.0.1:80.{0}Esperando por uma conexão...", Environment.NewLine); - - TcpClient client = server.AcceptTcpClient(); - - Console.WriteLine("Um cliente está conectado."); - } -} -</pre> - -<h3 id="TcpClient"><span style="line-height: 1.572;">TcpClient</span></h3> - -<h4 id="Métodos_2">Métodos</h4> - -<dl> - <dt><code>GetStream()</code></dt> - <dd>Obtém o <em>stream</em> que é o canal de comunicação. Ambos os lados do canal têm capacidade de leitura e escrita.</dd> -</dl> - -<h4 id="Propriedades">Propriedades</h4> - -<dl> - <dt><code>int Available</code></dt> - <dd>Esta propriedade indica quantos bytes de dados foram enviados. O valor é zero até que a propriedade <code>NetworkStream.DataAvailable</code> seja <code>true</code>.</dd> -</dl> - -<h3 id="NetworkStream">NetworkStream</h3> - -<h4 id="Métodos_3">Métodos</h4> - -<dl> - <dt><code>Write(Byte[] buffer, int offset, int size)</code></dt> - <dd>Escreve bytes vindos do <code>buffer</code>. <code>offset</code> e <code>size</code> determinam o comprimento da mensagem.</dd> - <dt><code><span class="brush: cpp" style="line-height: 1.572;">Read(Byte[] buffer, int offset, int size)</span></code></dt> - <dd><span class="brush: cpp" style="line-height: 1.572;">Lê bytes do <code>buffer</code>. <code>offset</code> e <code>size</code> </span>determinam o comprimento da mensagem<span class="brush: cpp" style="line-height: 1.572;">.</span></dd> -</dl> - -<h4 id="Exemplo_2">Exemplo</h4> - -<p>Vamos continuar o nosso exemplo:</p> - -<pre class="brush: cpp notranslate">TcpClient client = server.AcceptTcpClient(); - -Console.WriteLine("Um cliente está conectado."); - -NetworkStream stream = client.GetStream(); - -// entrar num ciclo infinito para poder processar qualquer mudança no stream -while (true) { - while (!stream.DataAvailable); - - Byte[] bytes = new Byte[client.Available]; - - stream.Read(bytes, 0, bytes.Length); -}</pre> - -<h2 id="Handshaking_aperto_de_mão"><em>Handshaking </em>(aperto de mão)</h2> - -<p>Quando um cliente se liga a um servidor, envia um pedido GET para atualizar a ligação do protocolo HTTP a uma ligação WebSocket. Isto é conhecido como aperto de mão.</p> - -<p>Este código de amostra pode detetar um GET do cliente. Note que isto irá bloquear até que os primeiros 3 bytes de uma mensagem estejam disponíveis. Deverão ser investigadas soluções alternativas para ambientes de produção.</p> - -<pre class="brush: cpp notranslate">using System.Text; -using System.Text.RegularExpressions; - -while(client.Available < 3) -{ - // esperar para que hajam bytes suficientes disponiveis -} - -Byte[] bytes = new Byte[client.Available]; - -stream.Read(bytes, 0, bytes.Length); - -//traduzir bytes do pedido para uma string -String data = Encoding.UTF8.GetString(bytes); - -if (Regex.IsMatch(data, "^GET")) { - -} else { - -}</pre> - -<p>A resposta é fácil de construir, mas pode ser um pouco difícil de compreender. A explicação completa do aperto de mão do servidor pode ser encontrada em <a href="https://tools.ietf.org/html/rfc6455#section-4.2.2">RFC 6455, secção 4.2.2</a>. Para os nossos propósitos, vamos apenas construir uma resposta simples.</p> - -<p>Deve:</p> - -<ol> - <li>Obter o valor do cabeçalho de pedido da <code>Sec-WebSocket-Key</code> sem qualquer espaço em branco</li> - <li>Combine esse valor com "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (um GUID especificado pela RFC 6455)</li> - <li>Calcule o código SHA-1 e Base64 do mesmo</li> - <li>Devolve-o como o valor do cabeçalho de resposta Sec-WebSocket-Accept numa resposta HTTP.</li> -</ol> - -<pre class="brush: cpp notranslate"><em> -</em>if (new System.Text.RegularExpressions.Regex("^GET").IsMatch(data)) -{ - const string eol = "\r\n"; // HTTP/1.1 define a sequencia "CR LF" como o marcador de fim de linha - - Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + eol - + "Connection: Upgrade" + eol - + "Upgrade: websocket" + eol - + "Sec-WebSocket-Accept: " + Convert.ToBase64String( - System.Security.Cryptography.SHA1.Create().ComputeHash( - Encoding.UTF8.GetBytes( - new System.Text.RegularExpressions.Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" - ) - ) - ) + eol - + eol); - - stream.Write(response, 0, response.Length); -} -</pre> - -<h2 id="Descodificar_mensagens">Descodificar mensagens</h2> - -<p>Após um aperto de mão bem-sucedido, o cliente pode enviar mensagens para o servidor, mas agora estas estão codificadas.</p> - -<p>Se enviarmos "MDN", recebemos estes bytes:</p> - -<table> - <tbody> - <tr> - <td>129</td> - <td>131</td> - <td>61</td> - <td>84</td> - <td>35</td> - <td>6</td> - <td>112</td> - <td>16</td> - <td>109</td> - </tr> - </tbody> -</table> - -<p>Vejamos o que significam estes bytes.</p> - -<p>O primeiro byte, que tem actualmente um valor de 129, é um bitfield que se decompõe da seguinte forma:</p> - -<table> - <thead> - <tr> - <th scope="col">FIN (Bit 0)</th> - <th scope="col">RSV1 (Bit 1)</th> - <th scope="col">RSV2 (Bit 2)</th> - <th scope="col">RSV3 (Bit 3)</th> - <th scope="col">Opcode (Bit 4:7)</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>0x1=0001</td> - </tr> - </tbody> -</table> - -<ul> - <li>FIN bit: Este bit indica se a mensagem completa foi enviada pelo cliente. As mensagens podem ser enviadas em <em>frames</em>, mas por agora vamos manter as coisas simples.</li> - <li>RSV1, RSV2, RSV3: Estes bits devem ser 0, a menos que seja negociada uma extensão que lhes forneça um valor não nulo.</li> - <li><span style="line-height: 1.572;"><em>Opcode</em>: Estes bits descrevem o tipo de mensagem recebida. O código <em>Opcode </em>0x1 significa que se trata de uma mensagem de texto (ver <a href="http://tools.ietf.org/html/rfc6455#section-5.2">lista completa de <em>Opcodes</em></a>).</span></li> -</ul> - -<p>O segundo byte, que tem atualmente um valor de 131, é outro campo de bits que se decompõe assim:</p> - -<table> - <thead> - <tr> - <th scope="col">MASK (Bit 0)</th> - <th scope="col">Comprimento do conteúdo da mensagem (Bit 1:7)</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>0x83=0000011</td> - </tr> - </tbody> -</table> - -<ul> - <li>MASK bit: Define se os "dados de <em>payload</em>" são mascarados. Se definida como 1, uma chave de máscara está presente em Masking-Key, e é utilizada para desmascarar os "dados de <em>payload</em>". Todas as mensagens do cliente para o servidor têm este bit definido.</li> - <li>Comprimento do <em>payload</em>: Se este valor estiver entre 0 e 125, então é o comprimento da mensagem. Se for 126, os 2 bytes seguintes (inteiro de 16 bits sem assinatura) são o comprimento. Se for 127, os 8 bytes seguintes (inteiro de 64 bits sem assinatura) são o comprimento.</li> -</ul> - -<div class="note"> -<p>Porque o primeiro bit é sempre 1 para mensagens cliente-servidor, pode subtrair 128 deste byte para se livrar do bit MASK.</p> -</div> - -<p>Note que o bit MASK está definido na nossa mensagem. Isto significa que os quatro bytes seguintes (61, 84, 35, e 6) são os bytes de máscara utilizados para descodificar a mensagem. Estes bytes mudam com cada mensagem.</p> - -<p>Os restantes bytes são a <em>payload</em> da mensagem codificada.</p> - -<h3 id="Algoritmo_para_descodificar">Algoritmo para descodificar</h3> - -<p><em>D<sub>i</sub></em> = <em>E<sub>i</sub></em> XOR <em>M</em><sub>(<em>i</em> mod 4)</sub></p> - -<p>onde <em>D</em> é a série de bytes da mensagem descodificados, <em>E</em> é a série de bytes da mensagem codificados, <em>M</em> é a série de bytes da chave, e <em>i</em> é o índice do byte da mensagem a ser descodificado.</p> - -<p>Exemplo em C#:</p> - -<pre class="brush: cpp notranslate">Byte[] decoded = new Byte[3]; -Byte[] encoded = new Byte[3] {112, 16, 109}; -Byte[] mask = new Byte[4] {61, 84, 35, 6}; - -for (int i = 0; i < encoded.Length; i++) { - decoded[i] = (Byte)(encoded[i] ^ mask[i % 4]); -}</pre> - -<h2 id="Exemplo_completo">Exemplo completo</h2> - -<p>Aqui tem o código, que foi explorado, na sua totalidade; isto inclui o código do cliente e do servidor.</p> - -<h3 id="wsserver.cs">wsserver.cs</h3> - -<pre class="notranslate">// -// csc wsserver.cs -// wsserver.exe - -using System; -using System.Net; -using System.Net.Sockets; -using System.Text; -using System.Text.RegularExpressions; - -class Server { - public static void Main() { - string ip = "127.0.0.1"; - int port = 80; - var server = new TcpListener(IPAddress.Parse(ip), port); - - server.Start(); - Console.WriteLine("Server has started on {0}:{1}, Waiting for a connection...", ip, port); - - TcpClient client = server.AcceptTcpClient(); - Console.WriteLine("A client connected."); - - NetworkStream stream = client.GetStream(); - - // enter to an infinite cycle to be able to handle every change in stream - while (true) { - while (!stream.DataAvailable); - while (client.Available < 3); // match against "get" - - byte[] bytes = new byte[client.Available]; - stream.Read(bytes, 0, client.Available); - string s = Encoding.UTF8.GetString(bytes); - - if (Regex.IsMatch(s, "^GET", RegexOptions.IgnoreCase)) { - Console.WriteLine("=====Handshaking from client=====\n{0}", s); - - // 1. Obtain the value of the "Sec-WebSocket-Key" request header without any leading or trailing whitespace - // 2. Concatenate it with "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (a special GUID specified by RFC 6455) - // 3. Compute SHA-1 and Base64 hash of the new value - // 4. Write the hash back as the value of "Sec-WebSocket-Accept" response header in an HTTP response - string swk = Regex.Match(s, "Sec-WebSocket-Key: (.*)").Groups[1].Value.Trim(); - string swka = swk + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"; - byte[] swkaSha1 = System.Security.Cryptography.SHA1.Create().ComputeHash(Encoding.UTF8.GetBytes(swka)); - string swkaSha1Base64 = Convert.ToBase64String(swkaSha1); - - // HTTP/1.1 defines the sequence CR LF as the end-of-line marker - byte[] response = Encoding.UTF8.GetBytes( - "HTTP/1.1 101 Switching Protocols\r\n" + - "Connection: Upgrade\r\n" + - "Upgrade: websocket\r\n" + - "Sec-WebSocket-Accept: " + swkaSha1Base64 + "\r\n\r\n"); - - stream.Write(response, 0, response.Length); - } else { - bool fin = (bytes[0] & 0b10000000) != 0, - mask = (bytes[1] & 0b10000000) != 0; // must be true, "All messages from the client to the server have this bit set" - - int opcode = bytes[0] & 0b00001111, // expecting 1 - text message - msglen = bytes[1] - 128, // & 0111 1111 - offset = 2; - - if (msglen == 126) { - // was ToUInt16(bytes, offset) but the result is incorrect - msglen = BitConverter.ToUInt16(new byte[] { bytes[3], bytes[2] }, 0); - offset = 4; - } else if (msglen == 127) { - Console.WriteLine("TODO: msglen == 127, needs qword to store msglen"); - // i don't really know the byte order, please edit this - // msglen = BitConverter.ToUInt64(new byte[] { bytes[5], bytes[4], bytes[3], bytes[2], bytes[9], bytes[8], bytes[7], bytes[6] }, 0); - // offset = 10; - } - - if (msglen == 0) - Console.WriteLine("msglen == 0"); - else if (mask) { - byte[] decoded = new byte[msglen]; - byte[] masks = new byte[4] { bytes[offset], bytes[offset + 1], bytes[offset + 2], bytes[offset + 3] }; - offset += 4; - - for (int i = 0; i < msglen; ++i) - decoded[i] = (byte)(bytes[offset + i] ^ masks[i % 4]); - - string text = Encoding.UTF8.GetString(decoded); - Console.WriteLine("{0}", text); - } else - Console.WriteLine("mask bit not set"); - - Console.WriteLine(); - } - } - } -}</pre> - -<h3 id="client.html">client.html</h3> - -<pre class="brush: html notranslate"><!doctype html> -<style> - textarea { vertical-align: bottom; } - #output { overflow: auto; } - #output > p { overflow-wrap: break-word; } - #output span { color: blue; } - #output span.error { color: red; } -</style> -<h2>WebSocket Test</h2> -<textarea cols=60 rows=6></textarea> -<button>send</button> -<div id=output></div> -<script> - // http://www.websocket.org/echo.html - - var button = document.querySelector("button"), - output = document.querySelector("#output"), - textarea = document.querySelector("textarea"), - // wsUri = "ws://echo.websocket.org/", - wsUri = "ws://127.0.0.1/", - websocket = new WebSocket(wsUri); - - button.addEventListener("click", onClickButton); - - websocket.onopen = function (e) { - writeToScreen("CONNECTED"); - doSend("WebSocket rocks"); - }; - - websocket.onclose = function (e) { - writeToScreen("DISCONNECTED"); - }; - - websocket.onmessage = function (e) { - writeToScreen("<span>RESPONSE: " + e.data + "</span>"); - }; - - websocket.onerror = function (e) { - writeToScreen("<span class=error>ERROR:</span> " + e.data); - }; - - function doSend(message) { - writeToScreen("SENT: " + message); - websocket.send(message); - } - - function writeToScreen(message) { - output.insertAdjacentHTML("afterbegin", "<p>" + message + "</p>"); - } - - function onClickButton() { - var text = textarea.value; - - text && doSend(text); - textarea.value = ""; - textarea.focus(); - } -</script></pre> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a href="/pt-PT/docs/Web/API/WebSockets_API/Escrever_servidores_de_WebSocket">Escrever servidores de WebSocket</a></li> -</ul> - -<div id="cke_pastebin"><em> </em></div> diff --git a/files/pt-pt/web/api/websockets_api/writing_websocket_servers/index.html b/files/pt-pt/web/api/websockets_api/writing_websocket_servers/index.html deleted file mode 100644 index 173a3066fe..0000000000 --- a/files/pt-pt/web/api/websockets_api/writing_websocket_servers/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Escrever servidores de WebSocket -slug: Web/API/WebSockets_API/Writing_WebSocket_servers -tags: - - Guía - - HTML5 - - Tutorial - - WebSocket - - WebSocket API - - WebSockets -translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers -original_slug: Web/API/WebSockets_API/Escrever_servidores_de_WebSocket ---- -<div>{{APIRef("Websockets API")}}</div> - -<p>Um servidor WebSocket não é nada mais que uma aplicação que escuta qualquer porta de um servidor TCP que possui um protocolo específico. A tarefa de criar um servidor personalizado é uma tarefa complexa para a maioria; no entanto, é simples implementar um servidor simples de WebSocket numa plataforma á sua escolha.</p> - -<p>Um servidor WebSocket pode ser escrito em qualquer linguagem de servidor que suporte <a href="https://en.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>, como C(++), Python, PHP, ou <a href="/en-US/docs/Web/JavaScript/Server-Side_JavaScript">server-side JavaScript</a>. Este tutorial não se foca em nenhuma linguagem em específico, mas serve como guia para facilitar o desenvolver do seu próprio server.</p> - -<p>A WebSocket server can be written in any server-side programming language that is capable of <a href="https://en.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>, such as C(++), Python, <a href="/en-US/docs/PHP">PHP</a>, or <a href="/en-US/docs/Web/JavaScript/Server-Side_JavaScript">server-side JavaScript</a>. This is not a tutorial in any specific language, but serves as a guide to facilitate writing your own server.</p> - -<p>This article assumes you're already familiar with how {{Glossary("HTTP")}} works, and that you have a moderate level of programming experience. Depending on language support, knowledge of TCP sockets may be required. The scope of this guide is to present the minimum knowledge you need to write a WebSocket server.</p> - -<div class="note"> -<p><strong>Note:</strong> Read the latest official WebSockets specification, <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>. Sections 1 and 4-7 are especially interesting to server implementors. Section 10 discusses security and you should definitely peruse it before exposing your server.</p> -</div> - -<p>A WebSocket server is explained on a very low level here. WebSocket servers are often separate and specialized servers (for load-balancing or other practical reasons), so you will often use a <a href="https://en.wikipedia.org/wiki/Reverse_proxy">reverse proxy</a> (such as a regular HTTP server) to detect WebSocket handshakes, pre-process them, and send those clients to a real WebSocket server. This means that you don't have to bloat your server code with cookie and authentication handlers (for example).</p> - -<h2 id="The_WebSocket_handshake">The WebSocket handshake</h2> - -<p>First, the server must listen for incoming socket connections using a standard TCP socket. Depending on your platform, this may be handled for you automatically. For example, let's assume that your server is listening on <code>example.com</code>, port 8000, and your socket server responds to {{HTTPMethod("GET")}} requests at <code>example.com/chat</code>.</p> - -<div class="warning"> -<p><strong>Warning:</strong> The server may listen on any port it chooses, but if it chooses any port other than 80 or 443, it may have problems with firewalls and/or proxies. Browsers generally require a secure connection for WebSockets, although they may offer an exception for local devices.</p> -</div> - -<p>The handshake is the "Web" in WebSockets. It's the bridge from HTTP to WebSockets. In the handshake, details of the connection are negotiated, and either party can back out before completion if the terms are unfavorable. The server must be careful to understand everything the client asks for, otherwise security issues can occur.</p> - -<div class="blockIndicator note"> -<p><strong>Tip:</strong> The request-uri (<code>/chat</code> here) has no defined meaning in the spec. So, many people use it to let one server handle multiple WebSocket applications. For example, <code>example.com/chat</code> could invoke a multiuser chat app, while <code>/game</code> on the same server might invoke a multiplayer game.</p> -</div> - -<h3 id="Client_handshake_request">Client handshake request</h3> - -<p>Even though you're building a server, a client still has to start the WebSocket handshake process by contacting the server and requesting a WebSocket connection. So, you must know how to interpret the client's request. The <strong>client</strong> will send a pretty standard HTTP request with headers that looks like this (the HTTP version <strong>must</strong> be 1.1 or greater, and the method <strong>must</strong> be <code>GET</code>):</p> - -<pre class="notranslate">GET /chat HTTP/1.1 -Host: example.com:8000 -<strong>Upgrade: websocket</strong> -<strong>Connection: Upgrade</strong> -Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== -Sec-WebSocket-Version: 13 - -</pre> - -<p>The client can solicit extensions and/or subprotocols here; see <a href="#Miscellaneous">Miscellaneous</a> for details. Also, common headers like {{HTTPHeader("User-Agent")}}, {{HTTPHeader("Referer")}}, {{HTTPHeader("Cookie")}}, or authentication headers might be there as well. Do whatever you want with those; they don't directly pertain to the WebSocket. It's also safe to ignore them. In many common setups, a reverse proxy has already dealt with them.</p> - -<div class="blockIndicator note"> -<p><strong>Tip:</strong> All <strong>browsers</strong> send an <a href="https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Origin"><code>Origin</code> header</a>. You can use this header for security (checking for same origin, automatically allowing or denying, etc.) and send a <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes#403">403 Forbidden</a> if you don't like what you see. However, be warned that non-browser agents can send a faked <code>Origin</code>. Most applications reject requests without this header.</p> -</div> - -<p>If any header is not understood or has an incorrect value, the server should send a {{HTTPStatus("400")}} ("Bad Request")} response and immediately close the socket. As usual, it may also give the reason why the handshake failed in the HTTP response body, but the message may never be displayed (browsers do not display it). If the server doesn't understand that version of WebSockets, it should send a {{HTTPHeader("Sec-WebSocket-Version")}} header back that contains the version(s) it does understand. In the example above, it indicates version 13 of the WebSocket protocol.</p> - -<p>The most interesting header here is {{HTTPHeader("Sec-WebSocket-Key")}}. Let's look at that next.</p> - -<div class="note"> -<p><strong>Note:</strong> <a href="https://developer.mozilla.org/en-US/docs/HTTP/Response_codes">Regular HTTP status codes</a> can be used only before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).</p> -</div> - -<h3 id="Server_handshake_response">Server handshake response</h3> - -<p>When the <strong>server</strong> receives the handshake request, it should send back a special response that indicates that the protocol will be changing from HTTP to WebSocket. That header looks something like the following (remember each header line ends with <code>\r\n</code> and put an extra <code>\r\n</code> after the last one to indicate the end of the header):</p> - -<pre class="notranslate"><strong>HTTP/1.1 101 Switching Protocols</strong> -Upgrade: websocket -Connection: Upgrade -<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= - -</strong></pre> - -<p>Additionally, the server can decide on extension/subprotocol requests here; see <a href="#Miscellaneous">Miscellaneous</a> for details. The <code>Sec-WebSocket-Accept</code> header is important in that the server must derive it from the {{HTTPHeader("Sec-WebSocket-Key")}} that the client sent to it. To get it, c<span style="line-height: 1.5em;">oncatenate the client's </span><code style="font-size: 14px;">Sec-WebSocket-Key</code><span style="line-height: 1.5em;"> and the string "</span><code style="font-size: 14px;">258EAFA5-E914-47DA-95CA-C5AB0DC85B11</code><span style="line-height: 1.5em;">" together (it's a "</span><a href="https://en.wikipedia.org/wiki/Magic_string" style="line-height: 1.5em;">magic string</a><span style="line-height: 1.5em;">"), </span><span style="line-height: 1.5em;">take the </span><a href="https://en.wikipedia.org/wiki/SHA-1" style="line-height: 1.5em;">SHA-1 hash</a><span style="line-height: 1.5em;"> of the result, and </span><span style="line-height: 1.5em;">return the </span><a href="https://en.wikipedia.org/wiki/Base64" style="line-height: 1.5em;">base64</a><span style="line-height: 1.5em;"> encoding of that hash.</span></p> - -<div class="note"> -<p><strong>Note:</strong> This seemingly overcomplicated process exists so that it's obvious to the client whether the server supports WebSockets. This is important because security issues might arise if the server accepts a WebSockets connection but interprets the data as a HTTP request.</p> -</div> - -<p>So if the Key was "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", the <code>Sec-WebSocket-Accept</code> header's value is "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Once the server sends these headers, the handshake is complete and you can start swapping data!</p> - -<div class="note"> -<p><strong>Note:</strong> The server can send other headers like {{HTTPHeader("Set-Cookie")}}, or ask for authentication or redirects via other status codes, before sending the reply handshake.</p> -</div> - -<h3 id="Keeping_track_of_clients">Keeping track of clients</h3> - -<p>This doesn't directly relate to the WebSocket protocol, but it's worth mentioning here: your server must keep track of clients' sockets so you don't keep handshaking again with clients who have already completed the handshake. The same client IP address can try to connect multiple times. However, the server can deny them if they attempt too many connections in order to save itself from <a href="https://en.wikipedia.org/wiki/Denial_of_service">Denial-of-Service attacks</a>.</p> - -<p>For example, you might keep a table of usernames or ID numbers along with the corresponding {{domxref("WebSocket")}} and other data that you need to associate with that connection.</p> - -<h2 id="Exchanging_data_frames">Exchanging data frames</h2> - -<p>Either the client or the server can choose to send a message at any time — that's the magic of WebSockets. However, extracting information from these so-called "frames" of data is a not-so-magical experience. Although all frames follow the same specific format, data going from the client to the server is masked using <a href="https://en.wikipedia.org/wiki/XOR_cipher">XOR encryption</a> (with a 32-bit key). Section 5 of the specification describes this in detail.</p> - -<h3 id="Format">Format</h3> - -<p>Each data frame (from the client to the server or vice-versa) follows this same format:</p> - -<pre class="notranslate">Frame format: - - 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 ... | - +---------------------------------------------------------------+</pre> - -<p>The MASK bit tells whether the message is encoded. Messages from the client must be masked, so your server must expect this to be 1. (In fact, <a href="http://tools.ietf.org/html/rfc6455#section-5.1">section 5.1 of the spec</a> says that your server must disconnect from a client if that client sends an unmasked message.) When sending a frame back to the client, do not mask it and do not set the mask bit. We'll explain masking later. <em>Note: You must mask messages even when using a secure socket. </em>RSV1-3 can be ignored, they are for extensions.</p> - -<p>The opcode field defines how to interpret the payload data: <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;"><code>0x0</code> </span><span style="line-height: 1.5;">for continuation,</span><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">0x1</code><span style="line-height: 1.5;"> for text (which is always encoded in UTF-8), </span><code style="font-style: normal; line-height: 1.5;">0x2</code><span style="line-height: 1.5;"> for binary, and other so-called "control codes" that will be discussed later. In this version of WebSockets, <code>0x3</code> to <code>0x7</code> and <code>0xB</code> to <code>0xF</code> have no meaning.</span></p> - -<p>The FIN bit tells whether this is the last message in a series. If it's 0, then the server keeps listening for more parts of the message; otherwise, the server should consider the message delivered. More on this later.</p> - -<h3 id="Decoding_Payload_Length">Decoding Payload Length</h3> - -<p>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:</p> - -<ol> - <li>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 <strong>done</strong>. If it's 126, go to step 2. If it's 127, go to step 3.</li> - <li>Read the next 16 bits and interpret those as an unsigned integer. You're <strong>done</strong>.</li> - <li>Read the next 64 bits and interpret those as an unsigned integer. (The most significant bit <em>must</em> be 0.) You're <strong>done</strong>.</li> -</ol> - -<h3 id="Reading_and_Unmasking_the_Data">Reading and Unmasking the Data</h3> - -<p>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. <span style="line-height: 1.5;">Once the payload length and masking key is decoded, you can read that number of bytes from the socket. Let's call the data <strong>ENCODED</strong>, and the key <strong>MASK</strong>. To get <strong>DECODED</strong>, loop through the octets (bytes a.k.a. characters for text data) of <strong>ENCODED</strong> and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):</span></p> - -<pre class="notranslate">var DECODED = ""; -for (var i = 0; i < ENCODED.length; i++) { - DECODED[i] = ENCODED[i] ^ MASK[i % 4]; -<span style="line-height: 1.5;">}</span></pre> - -<p><span style="line-height: 1.5;">Now you can figure out what <strong>DECODED</strong> means depending on your application.</span></p> - -<h3 id="Message_Fragmentation">Message Fragmentation</h3> - -<p>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 <code>0x0</code> to <code>0x2</code>.</p> - -<p><span style="line-height: 1.5;">Recall that the opcode tells what a frame is meant to do. If it's <code>0x1</code>, the payload is text. If it's <code>0x2</code>, the payload is binary data.</span><span style="line-height: 1.5;"> However, if it's </span><code style="font-style: normal; line-height: 1.5;">0x0,</code><span style="line-height: 1.5;"> 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.</span><span style="line-height: 1.5;"> 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:</span></p> - -<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello" -<strong>Server:</strong> <em>(process complete message immediately) </em>Hi. -<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a" -<strong>Server:</strong> <em>(listening, new message containing text started)</em> -<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new" -<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em> -<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!" -<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre> - -<p>Notice the first frame contains an entire message (has <code>FIN=1</code> and <code>opcode!=0x0</code>), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (<code>opcode=0x1</code>), but the entire message has not arrived yet (<code>FIN=0</code>). All remaining parts of that message are sent with continuation frames (<code>opcode=0x0</code>), and the final frame of the message is marked by <code>FIN=1</code>. <a href="http://tools.ietf.org/html/rfc6455#section-5.4">Section 5.4 of the spec</a> describes message fragmentation.</p> - -<h2 id="Pings_and_Pongs_The_Heartbeat_of_WebSockets">Pings and Pongs: The Heartbeat of WebSockets</h2> - -<p>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.</p> - -<p>A ping or pong is just a regular frame, but it's a <strong>control frame</strong>. Pings have an opcode of <code>0x9</code>, and pongs have an opcode of <code>0xA</code>. 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.</p> - -<div class="note"> -<p>If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.</p> -</div> - -<h2 id="Closing_the_connection">Closing the connection</h2> - -<p>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 <a href="http://tools.ietf.org/html/rfc6455#section-5.5.1">Section 5.5.1</a>). 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. </p> - -<h2 id="Miscellaneous_2"><a name="Miscellaneous">Miscellaneous</a></h2> - -<div class="note"> -<p>WebSocket codes, extensions, subprotocols, etc. are registered at the <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p> -</div> - -<p>WebSocket extensions and subprotocols are negotiated via headers during <a href="#Handshake">the handshake</a>. Sometimes extensions and subprotocols very similar, but there is a clear distinction. Extensions control the WebSocket <em>frame</em> and <em>modify</em> the payload, while subprotocols structure the WebSocket <em>payload</em> and <em>never modify</em> anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).</p> - -<h3 id="Extensions">Extensions</h3> - -<div class="note"> -<p><strong>This section needs expansion. Please edit if you are equipped to do so.</strong></p> -</div> - -<p>Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the <em>same</em> 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.</p> - -<div class="note"> -<p>Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.</p> -</div> - -<p><em>TODO</em></p> - -<h3 id="Subprotocols">Subprotocols</h3> - -<p>Think of a subprotocol as a custom <a href="https://en.wikipedia.org/wiki/XML_schema">XML schema</a> or <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">doctype declaration</a>. 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.</p> - -<div class="note"> -<p>Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.</p> -</div> - -<p>A client has to ask for a specific subprotocol. To do so, it will send something like this <em>as part of the original handshake</em>:</p> - -<pre class="notranslate">GET /chat HTTP/1.1 -... -Sec-WebSocket-Protocol: soap, wamp - -</pre> - -<p>or, equivalently:</p> - -<pre class="notranslate">... -Sec-WebSocket-Protocol: soap -Sec-WebSocket-Protocol: wamp - -</pre> - -<p>Now the server must pick one of the protocols that the client suggested and it supports. If there is more than one, send the first one the client sent. Imagine our server can use both <code>soap</code> and <code>wamp</code>. Then, in the response handshake, it sends:</p> - -<pre class="notranslate">Sec-WebSocket-Protocol: soap - -</pre> - -<div class="warning"> -<p>The server can't send more than one <code>Sec-Websocket-Protocol</code> header.<br> - <span style="line-height: 1.5;">If the server doesn't want to use a</span><span style="line-height: 1.5;">ny subprotocol, </span><em><strong style="line-height: 1.5;">it shouldn't send any <code>Sec-WebSocket-Protocol</code> header</strong></em><span style="line-height: 1.5;">. Sending a blank header is incorrect. The client may close the connection if it doesn't get the subprotocol it wants.</span></p> -</div> - -<p>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 <code>json</code>. In this subprotocol, all data is passed as <a href="https://en.wikipedia.org/wiki/JSON">JSON</a>. If the client solicits this protocol and the server wants to use it, the server needs to have a JSON parser. Practically speaking, this will be part of a library, but the server needs to pass the data around.</p> - -<div class="note"> -<p><strong>Tip:</strong> 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: <code>Sec-WebSocket-Protocol: chat.example.com</code>. Note that this isn't required, it's just an optional convention, and you can use any string you wish.</p> -</div> - -<h2 id="Related">Related</h2> - -<ul> - <li><a href="https://github.com/alexhultman/libwshandshake">WebSocket handshake library in C++</a></li> - <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li> - <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li> - <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li> - <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java">Tutorial: Websocket server in Java</a></li> -</ul> diff --git a/files/pt-pt/web/api/window/console/index.html b/files/pt-pt/web/api/window/console/index.html deleted file mode 100644 index 80abc2170c..0000000000 --- a/files/pt-pt/web/api/window/console/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Window.console -slug: Web/API/Window/console -tags: - - API - - Consola - - Referencia - - Só-de-leitura - - Window - - console -translation_of: Web/API/Window/console ---- -<p>{{ APIRef }}</p> - -<p>A propriedade só-de-leitura <em><strong><code>Window.console</code></strong></em> devolve uma referência para o objeto {{domxref("Console")}}, que fornece métodos para registar informação na <em>console </em>do navegador. Estes métodos são destinados apenas para fins de depuração e não deverão ser invocados para apresentar informação aos utilizadores finais.</p> - -<h2 id="Syntax" name="Syntax">Sintaxe</h2> - -<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console; -</pre> - -<h2 id="Example" name="Example">Exemplos</h2> - -<h3 id="Registar_para_console">Registar para console</h3> - -<p>The first example logs text to the console.</p> - -<pre class="brush: js">console.log("An error occurred while loading the content"); -</pre> - -<p>The next example logs an object to the console, with the object's fields expandable using disclosure widgets:</p> - -<pre class="brush: js">console.dir(someObject);</pre> - -<p>See {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} for more thorough examples.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('Console API')}}</td> - <td>{{Spec2('Console API')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p>Currently there are many implementation differences among browsers, but work is being done to bring them together and make them more consistent with one another.</p> -</div> diff --git a/files/pt-pt/web/api/window/index.html b/files/pt-pt/web/api/window/index.html deleted file mode 100644 index 29deceb028..0000000000 --- a/files/pt-pt/web/api/window/index.html +++ /dev/null @@ -1,479 +0,0 @@ ---- -title: Window -slug: Web/API/Window -tags: - - API - - DOM - - Interface - - JavaScript - - NeedsTranslation - - Reference - - TopicStub - - Window -translation_of: Web/API/Window ---- -<p>{{APIRef}}</p> - -<p><span class="seoSummary">O objeto <em><code>window</code></em> representa uma janela contendo um documento DOM; a propriedade <em><code>document</code></em> aponta para o <a href="/en-US/docs/DOM/document">documento DOM</a> carregado nessa janela.</span> Uma janela para um determinado documento pode ser obtida utilizando a propriedade {{Domxref("document.defaultView")}}.</p> - -<p>This section provides a brief reference for all of the methods, properties, and events available through the DOM <code>window</code> object. The <code>window</code> object implements the <code>Window</code> interface, which in turn inherits from the <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> and <a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a>.</p> - -<p>In a tabbed browser, such as Firefox, each tab contains its own <code>window</code> object (and if you're writing an extension, the browser window itself is a separate window too - see <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> for more information). That is, the <code>window</code> object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the <code>window</code> object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> - -<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> - -<dl> - <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt> - <dd>This property indicates whether the current window is closed or not.</dd> - <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> - <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</dd> - <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns the XUL controller objects for the current chrome window.</dd> - <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> - <dd>Returns the browser crypto object.</dd> - <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> - <dd>Gets/sets the status bar text for the given window.</dd> - <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> - <dt>{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}</dt> - <dd>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")}}.</dd> - <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> - <dd>Synonym of {{domxref("window.personalbar")}}</dd> - <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the document that the window contains.</dd> - <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> - <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> - <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> - <dd>Returns an array of the subframes in the current window.</dd> - <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> - <dd>This property indicates whether the window is displayed in full screen or not.</dd> - <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> - <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> - Was: Multiple storage objects that are used for storing data across multiple pages.</dd> - <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the history object.</dd> - <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> - <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> - <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> - <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> - <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt> - <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> - <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> - <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> - <dt>{{domxref("Window.location")}}</dt> - <dd>Gets/sets the location, or current URL, of the window object.</dd> - <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> - <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt> - <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> - <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> - <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> - <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt> - <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd> - <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> - <dd>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 <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> - <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt> - <dd>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 <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> - <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>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.</dd> - <dt>{{domxref("Window.name")}}</dt> - <dd>Gets/sets the name of the window.</dd> - <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the navigator object.</dd> - <dt>{{domxref("Window.opener")}}</dt> - <dd>Returns a reference to the window that opened this current window.</dd> - <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt> - <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> - <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> - <dd>Gets the height of the outside of the browser window.</dd> - <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> - <dd>Gets the width of the outside of the browser window.</dd> - <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> - <dd>An alias for {{domxref("window.scrollX")}}.</dd> - <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt> - <dd>An alias for {{domxref("window.scrollY")}}</dd> - <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> - <dt>{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt> - <dd>Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.</dd> - <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the parent of the current window or subframe.</dd> - <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> - <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd> - <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> - <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> - <dd>Formerly provided access to install and remove PKCS11 modules.</dd> - <dt>{{domxref("Window.returnValue")}}</dt> - <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> - <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the screen object associated with the window.</dd> - - <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt> - <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd> - <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt> - <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd> - <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> - <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> - <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> - <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> - <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> - <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> - <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> - <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> - <dd>Returns an object reference to the window object itself.</dd> - <dt>{{domxref("Window.sessionStorage")}}</dt> - <dd>Returns a storage object for storing data within a single page session.</dd> - <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt> - <dd>Returns a reference to the window object of the sidebar.</dd> - <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> - <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> - <dt>{{domxref("Window.status")}}</dt> - <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> - <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> - <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> - <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> - <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> - <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd> - <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the current window.</dd> - <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt> - <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> -</dl> - -<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> - -<dl> - <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> - <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> - <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> - <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> - <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("Window.alert()")}}</dt> - <dd>Displays an alert dialog.</dd> - - <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Moves back one in the window history.</dd> - <dt>{{domxref("Window.blur()")}}</dt> - <dd>Sets focus away from the window.</dd> - <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> - <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd> - <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> - <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> - <dd>Registers the window to capture all events of the specified type.</dd> - <dt>{{domxref("Window.clearImmediate()")}}</dt> - <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> - <dt>{{domxref("Window.close()")}}</dt> - <dd>Closes the current window.</dd> - <dt>{{domxref("Window.confirm()")}}</dt> - <dd>Displays a dialog with a message that the user needs to respond to.</dd> - <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.dispatchEvent()")}}</dt> - <dd>Used to trigger an event.</dd> - <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> - <dd>Writes a message to the console.</dd> - <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.find()")}}</dt> - <dd>Searches for a given string in a window.</dd> - <dt>{{domxref("Window.focus()")}}</dt> - <dd>Sets focus on the current window.</dd> - <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Moves the window one document forward in the history.</dd> - <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Flashes the application icon.</dd> - <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.getComputedStyle()")}}</dt> - <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> - <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> - <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> - <dt>{{domxref("Window.getSelection()")}}</dt> - <dd>Returns the selection object representing the selected item(s).</dd> - <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Returns the browser to the home page.</dd> - <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> - <dt>{{domxref("Window.maximize()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> - <dd>Minimizes the window.</dd> - <dt>{{domxref("Window.moveBy()")}}</dt> - <dd>Moves the current window by a specified amount.</dd> - <dt>{{domxref("Window.moveTo()")}}</dt> - <dd>Moves the window to the specified coordinates.</dd> - <dt>{{domxref("Window.open()")}}</dt> - <dd>Opens a new window.</dd> - <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Opens a new dialog window.</dd> - <dt>{{domxref("Window.postMessage()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("Window.print()")}}</dt> - <dd>Opens the Print Dialog to print the current document.</dd> - <dt>{{domxref("Window.prompt()")}}</dt> - <dd>Returns the text entered by the user in a prompt dialog.</dd> - <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> - <dd>Releases the window from trapping events of a specific type.</dd> - <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd> - <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> - <dt>{{domxref("Window.resizeBy()")}}</dt> - <dd>Resizes the current window by a certain amount.</dd> - <dt>{{domxref("Window.resizeTo()")}}</dt> - <dd>Dynamically resizes window.</dd> - <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.scroll()")}}</dt> - <dd>Scrolls the window to a particular place in the document.</dd> - <dt>{{domxref("Window.scrollBy()")}}</dt> - <dd>Scrolls the document in the window by the given amount.</dd> - <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> - <dd>Scrolls the document by the given number of lines.</dd> - <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> - <dd>Scrolls the current document by the specified number of pages.</dd> - <dt>{{domxref("Window.scrollTo()")}}</dt> - <dd>Scrolls to a particular set of coordinates in the document.</dd> - <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> - <dd>Changes the cursor for the current window</dd> - <dt>{{domxref("Window.setImmediate()")}}</dt> - <dd>Executes a function after the browser has finished other heavy tasks</dd> - <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> - <dd>Toggles a user's ability to resize a window.</dd> - <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> - <dd>Sizes the window according to its content.</dd> - <dt>{{domxref("Window.stop()")}}</dt> - <dd>This method stops window loading.</dd> - <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> - <dd>Updates the state of commands of the current chrome window (UI).</dd> -</dl> - -<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> - -<dl> - <dt>{{domxref("EventTarget.addEventListener()")}}</dt> - <dd>Register an event handler to a specific event type on the window.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> - <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> - <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> - <dd>Starts the process of fetching a resource from the network.</dd> - <dt>{{domxref("EventTarget.removeEventListener")}}</dt> - <dd>Removes an event listener from the window.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> - <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> - <dd>Schedules a function to execute in a given amount of time.</dd> -</dl> - -<h3 id="Métodos_obsoletos">Métodos obsoletos</h3> - -<dl> - <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> - <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></dd> -</dl> - -<h2 id="Manipuladores_de_evento">Manipuladores de evento</h2> - -<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> - -<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> - -<div class="note"> -<p><strong>Nota:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> -</div> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> - <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> - <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> - <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> - <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> - <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> - <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> - <dd>An event handler property for before-unload events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> - <dd>Called after the window loses focus, such as due to a popup.</dd> - <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> - <dd>An event handler property for change events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> - <dd>Called after the ANY mouse button is pressed & released</dd> - <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> - <dd>Called when a double click is made with ANY mouse button.</dd> - <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> - <dd>Called after the window is closed</dd> - <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> - <dd>Called when the RIGHT mouse button is pressed</dd> - <dt>{{domxref("Window.ondevicelight")}}</dt> - <dd>An event handler property for any ambient light levels changes</dd> - <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Called if accelerometer detects a change (For mobile devices)</dd> - <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Called when the orientation is changed (For mobile devices)</dd> - <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> - <dd>An event handler property for any device orientation changes.</dd> - <dt>{{domxref("Window.ondeviceproximity")}}</dt> - <dd>An event handler property for device proximity event</dd> - <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> - <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> - <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> - <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> - <dt>{{domxref("Window.onappinstalled")}}</dt> - <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> - <dt>{{domxref("Window.ongamepadconnected")}}</dt> - <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd> - <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> - <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd> - <dt>{{domxref("Window.oninput")}}</dt> - <dd>Called when the value of an <input> element changes</dd> - <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> - <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> - <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> - <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> - <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> - <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> - <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> - <dd>Called when ANY mouse button is pressed.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> - <dd>Called continously when the mouse is moved inside the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> - <dd>Called when the pointer leaves the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> - <dd>Called when the pointer enters the window</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> - <dd>Called when ANY mouse button is released</dd> - <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> - <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> - <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> - <dd>Called when network connection is established. See {{event("online")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> - <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> - <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> - <dt>{{domxref("Window.onpaint")}}</dt> - <dd>An event handler property for paint events on the window.</dd> - <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Called when a back button is pressed.</dd> - <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> - <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> - <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> - <dd>Called when a form is reset</dd> - <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> - <dd>Called continuously as you are resizing the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> - <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> - <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> - <dd>Called when the mouse wheel is rotated around any axis</dd> - <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> - <dd>Called after text in an input field is selected</dd> - <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> - <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> - <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> - <dd>Called when a form is submitted</dd> - <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> - <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> - <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> - <dd>Called when the user navigates away from the page.</dd> - <dt>{{domxref("Window.onuserproximity")}}</dt> - <dd>An event handler property for user proximity events.</dd> - <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> - <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> - <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> - <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> - <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> - <dd>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.</dd> - <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> - <dd>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.</dd> - <dt>{{domxref("Window.onvrdisplayblur")}}</dt> - <dd>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.</dd> - <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> - <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd> - <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> - <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd> -</dl> - -<h2 id="Construtores">Construtores</h2> - -<p>Consulte também as <a href="/pt-PT/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Interfaces de DOM</a>.</p> - -<dl> - <dt>{{domxref("DOMParser")}}</dt> - <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd> - <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Image")}}</dt> - <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> - <dt>{{domxref("Option")}}</dt> - <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> - <dt>{{domxref("Window.QueryInterface")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.XMLSerializer")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Worker")}}</dt> - <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> - <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> -</dl> - -<h2 id="Interfaces">Interfaces</h2> - -<p>Consulte <a href="/pt-PT/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">Referência de DOM</a></p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li><a href="/pt-PT/docs/Mozilla/trabalhar_com_janelas_no_codigo_chrome">Working with windows in chrome code</a></li> -</ul> diff --git a/files/pt-pt/web/api/window/open/index.html b/files/pt-pt/web/api/window/open/index.html deleted file mode 100644 index 0638235527..0000000000 --- a/files/pt-pt/web/api/window/open/index.html +++ /dev/null @@ -1,748 +0,0 @@ ---- -title: Window.open() -slug: Web/API/Window/open -tags: - - API - - DOM - - Janela - - Referencia - - abrir - - metodo -translation_of: Web/API/Window/open ---- -<div>{{APIRef}}</div> - -<p>The {{domxref("Window")}} interface's <strong><code>open()</code></strong> method loads the specified resource into the browsing context (window, {{HTMLElement("iframe")}} or tab) with the specified name. If the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><code>var <em>window</em> = window.open(<em>url</em>, <em>windowName</em>, [<var>windowFeatures</var>]);</code></pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code>url</code></dt> - <dd>A {{domxref("DOMString")}} indicating the URL of the resource to be loaded. This can be a path or URL to an HTML page, image file, or any other resource which is supported by the browser. If the empty string ("") is specified as <code>url</code>, a blank page is opened into the targeted browsing context.</dd> - <dt><code>windowName</code></dt> - <dd>A {{domxref("DOMString")}} specifying the name of the browsing context (window, {{HTMLElement("iframe")}} or tab) into which to load the specified resource; if the name doesn't indicate an existing context, a new window is created and is given the name specified by <code>windowName</code>. This name can then be used as the target of links and forms by specifying it as the <code>target</code> attribute of {{HTMLElement("a")}} or {{HTMLElement("form")}} elements. The name should not contain whitespace. Keep in mind that this will <em>not</em> be used as the window's displayed title.</dd> - <dt><code>windowFeatures</code> {{optional_inline}}</dt> - <dd>A {{domxref("DOMString")}} containing a comma-separated list of window features given with their corresponding values in the form "name=value". These features include options such as the window's default size and position, whether or not to include scroll bars, and so forth. There must be no whitespace in the string. See {{anch("Window features")}} below for documentation of each of the features that can be specified.</dd> -</dl> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>A {{domxref("Window")}} object representing to the newly created window. If the window couldn't be opened, the returned value is instead <code>null</code>. The returned <code>Window</code> reference can be used to access properties and methods of the new window as long as it complies with <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">Same-origin policy</a> security requirements.</p> - -<h2 id="Descrição">Descrição</h2> - -<p>The <code>open()</code> method creates a new secondary browser window, similar to choosing New Window from the File menu. The <code>strUrl</code> parameter specifies the URL to be fetched and loaded in the new window. If <code>strUrl</code> is an empty string, then a new blank, empty window (URL <code>about:blank</code>) is created with the default toolbars of the main window.</p> - -<p>Note that remote URLs won't load immediately. When <code>window.open()</code> returns, the window always contains <code>about:blank</code>. The actual fetching of the URL is deferred and starts after the current script block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<pre class="brush:js">var windowObjectReference; -var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"; - -function openRequestedPopup() { - windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures); -}</pre> - -<pre class="brush:js">var windowObjectReference; - -function openRequestedPopup() { - windowObjectReference = window.open( - "http://www.domainname.ext/path/ImageFile.png", - "DescriptiveWindowName", - "resizable,scrollbars,status" - ); -}</pre> - -<p>If a window with the name already exists, then <code>strUrl</code> is loaded into the <em>existing</em> window. In this case the return value of the method is the existing window and <code>strWindowFeatures</code> is ignored. Providing an empty string for <code>strUrl</code> is a way to get a reference to an open window by its name without changing the window's location. To open a <em>new</em> window on every call of <code>window.open()</code>, use the special value <code>_blank</code> for <code>strWindowName</code>.</p> - -<div class="note"> -<p><a href="#Note_on_use_of_window_open" id="Note_on_use_of_window_open">Note on the use of window.open to reopen an existing window</a> with name <code>strWindowName</code> : This functionality is not valid for all browsers and more with variable conditions. Firefox (50.0.1) functions as described: from the same domain+port reopen with same name will access the previously created window. Google Chrome (55.0.2883.87 m ) on the other hand will do it only from the same parent (as if the window was created dependent, which is the "opener"). This is a wide limitation and generates unbelievable complexity of development. Firefox (51.) gets the handle but cannot run any Element.focus() while Chrome can run focus() from opener to child but not between siblings nor, reverse, from child to opener. This function is the lonely key to get back the handle on a window if the developer has access only to its name (the name can be saved with cookies or local storage but not the window object handle). For now 10/01/2017 the differencies of behavior found recently have not still been tested for others Browsers. </p> -</div> - -<h2 id="Funcionalidades_de_janela">Funcionalidades de janela</h2> - -<p><code>strWindowFeatures</code> 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 <code>strWindowName</code> does not specify an existing window and the <code>strWindowFeatures</code> parameter is not provided (or if the <code>strWindowFeatures</code> parameter is an empty string), then the new secondary window will render the default toolbars of the main window.</p> - -<p>If the <code>strWindowFeatures</code> 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.</p> - -<p>If the <code>strWindowFeatures</code> 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 IE6 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.</p> - -<p><strong>If the <code>strWindowFeatures</code> parameter is used, the features that are not listed will be disabled or removed</strong> (except <code>titlebar</code> and <code>close</code>, which are by default <code>yes</code>).</p> - -<div class="note"> -<p><strong>Tip</strong>: If using the <code>strWindowFeatures</code> parameter, only list the features to be enabled or rendered; the others (except <code>titlebar</code> and <code>close</code>) will be disabled or removed. Note that in some browsers, users can override the <code>strWindowFeatures</code> settings and enable (or prevent the disabling of) features.</p> -</div> - -<p><img alt="Firefox Toolbars Illustration" src="/@api/deki/files/210/=FirefoxChromeToolbarsDescription7a.gif" style="display: block; margin: 0px auto;"></p> - -<h3 id="Funcionalidades_de_posição_e_tamanho">Funcionalidades de posição e tamanho</h3> - -<div>{{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.")}}</div> - -<p><a href="#Note_on_position_and_dimension_error_correction">Note on position and dimension error correction</a></p> - -<div class="bug">{{bug(176320)}}</div> - -<p><a href="#Note_on_precedence">Note on precedence</a></p> - -<dl> - <dt id="left">left</dt> - <dd>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.</dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd> - <dt id="top">top</dt> - <dd>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.</dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd> - <dt id="height">height</dt> - <dd>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.</dd> - <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd> - <dt id="width">width</dt> - <dd>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.</dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd> - <dt>screenX</dt> - <dd>Deprecated. Same as <a href="#left">left</a> but only supported by Netscape and Mozilla-based browsers.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>screenY</dt> - <dd>Deprecated. Same as <a href="#topS">top</a> but only supported by Netscape and Mozilla-based browsers.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>centerscreen</dt> - <dd>Centers the window in relation to its parent's size and position. Requires chrome=yes.</dd> - <dt>outerHeight</dt> - <dd>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.</dd> - <dd><strong>Note</strong>: since titlebar is always rendered, then requesting outerHeight=100 will make the innerHeight of the browser window under the minimal 100 pixels.</dd> - <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>outerWidth</dt> - <dd>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.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>innerHeight</dt> - <dd>Same as <a href="#height">height</a> 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 <var>innerHeight</var> value includes the height of the horizontal scrollbar if present. Minimal required value is 100.</dd> - <dd><a href="#Note_on_outerHeight_versus_height">Note on outerHeight versus height (or innerHeight)</a></dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>innerWidth</dt> - <dd>Same as <a href="#width">width</a> 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.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> -</dl> - -<h3 id="Funcionalidades_da_barra_de_ferramentas_e_chrome">Funcionalidades da barra de ferramentas e chrome</h3> - -<dl> - <dt>NOTE: All features can be set to <var>yes</var> or <var>1</var>, or just be present to be "on". Set them to <var>no</var> or <var>0</var>, or in most cases just omit them, to be "off".</dt> - <dd>Example: "status=yes", "status=1", and "status" have identical results.</dd> - <dt>menubar</dt> - <dd>If this feature is on, then the new secondary window renders the menubar.</dd> - <dd>Mozilla and Firefox users can force new windows to always render the menubar by setting <code>dom.disable_window_open_feature.menubar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>toolbar</dt> - <dd>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 <var>no</var> all toolbars in the window will be invisible, for example extension toolbars).</dd> - <dd>Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting <code>dom.disable_window_open_feature.toolbar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>location</dt> - <dd>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.</dd> - <dd>Mozilla and Firefox users can force new windows to always render the location bar by setting <code>dom.disable_window_open_feature.location</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>. {{Fx_minversion_note(3, "In Firefox 3, <code>dom.disable_window_open_feature.location</code> now defaults to <var>true</var>, forcing the presence of the Location Bar much like in IE7. See bug 337344 for more information.")}}</dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png">, <img alt="Opera 6+" src="/@api/deki/files/288/=Opera6.gif"></dd> - <dt>personalbar</dt> - <dd>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.</dd> - <dd>Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting <code>dom.disable_window_open_feature.personalbar</code> to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>directories {{obsolete_inline("2")}}</dt> - <dd>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.</dd> - <dt>status</dt> - <dd>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 (<a href="#Note_on_security_issues_of_the_status_bar_presence">Note on status bar in XP SP2</a>) 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.</dd> - <dd><a href="#Note_on_status_bar">Note on status bar</a></dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> -</dl> - -<h3 id="Funcionalidades_da_função_da_janela">Funcionalidades da função da janela</h3> - -<dl> - <dt>attention {{NonStandardBadge}}</dt> - <dd>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/Apps/Build/App_permissions", "Certified app permissions")}} for more information.</dd> - <dd>Supported in: <img alt="" src="https://mdn.mozillademos.org/files/8003/firefox_os_logo_wordmark-75px.png" style="height: 25px; width: 83px;"></dd> - <dt>dependent</dt> - <dd>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.</dd> - <dd>Dependent windows are not implemented on MacOS X, this option will be ignored.</dd> - <dd>The dependent feature is currently under revision to be removed ({{Bug(214867)}})</dd> - <dd>In MSIE 6, the nearest equivalent to this feature is the <code>showModelessDialog()</code> method.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>minimizable</dt> - <dd>This setting can only apply to dialog windows; "minimizable" requires <code>dialog=yes</code>. If <code>minimizable</code> 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 <code>minimizable=no</code> will be ignored.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>fullscreen</dt> - <dd>Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.</dd> - <dd>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.</dd> - <dd><code>fullscreen</code> always upsets users with large monitor screen or with dual monitor screen. Forcing <code>fullscreen</code> onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.</dd> - <dd><a href="#Note_on_fullscreen">Note on fullscreen</a></dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png"></dd> - <dd><code>fullscreen</code> does not really work in MSIE 6 SP2.</dd> - <dt><a id="noopener" name="noopener">noopener</a></dt> - <dd>If this feature is set, the newly-opened window will open as normal, except that it will not have access back to the originating window (via {{domxref("Window.opener")}} — it returns <code>null</code>). In addition, the <code>window.open()</code> call will also return <code>null</code>, so the originating window will not have access to the new one either. This is useful for preventing untrusted sites opened via <code>window.open()</code> from tampering with the originating window, and vice versa.</dd> - <dd>Note that when <code>noopener</code> is used, nonempty target names other than <code>_top</code>, <code>_self</code>, and <code>_parent</code> are all treated like <code>_blank</code> in terms of deciding whether to open a new window/tab.<br> - <br> - This is supported in modern browsers including Chrome, and Firefox 52+. See also <code><a href="/en-US/docs/Web/HTML/Link_types#noopener">rel="noopener"</a></code>.</dd> - <dt>resizable</dt> - <dd>If this feature is on, the new secondary window will be resizable.</dd> - <dd><strong>Note</strong>: 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. - <p>Starting with Firefox 3, secondary windows are always resizable ({{Bug(177838)}})</p> - - <div class="note"> - <p><strong>Dica</strong>: For accessibility reasons, it is strongly recommended to set this feature always on</p> - </div> - </dd> - <dd>Mozilla and Firefox users can force new windows to be easily resizable by setting <code>dom.disable_window_open_feature.resizable</code> to <code><var>true</var></code> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>scrollbars</dt> - <dd>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. - <div class="note"> - <p><strong>Dica</strong>: For accessibility reasons, it is strongly encouraged to set this feature always on.</p> - </div> - </dd> - <dd>Mozilla and Firefox users can force this option to be always enabled for new windows by setting {{pref("dom.disable_window_open_feature.scrollbars")}} to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>. <strong>Starting in Firefox 49, this feature is on by default, and the {{pref("dom.disable_window_open_feature.scrollbars")}} preference has been removed.</strong></dd> - <dd><a href="#Note_on_scrollbars">Note on scrollbars</a></dd> - <dd>Supported in: <img alt="Internet Explorer 5+" src="/@api/deki/files/260/=MSIE_ico.png">, <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> -</dl> - -<h3 id="Funcionalidades_que_requerem_privilégios">Funcionalidades que requerem privilégios</h3> - -<p>The following features require the <code>UniversalBrowserWrite</code> privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the PrivilegeManager.</p> - -<dl> - <dt>chrome</dt> - <dd><strong>Note</strong>: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{Bug(244965)}}). Without this privilege, it is ignored.</dd> - <dd>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).</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>dialog</dt> - <dd><strong>Note</strong>: Starting with Firefox 44, this feature can only be used with chrome privileges. If content attempts to toggle this feature, it will be ignored.</dd> - <dd><a href="/@api/deki/files/268/=MenuSystemCommands.png" title="MenuSystemCommands.png"><img alt="MenuSystemCommands.png" class="internal lwrap" src="/@api/deki/files/268/=MenuSystemCommands.png?size=webview" style="float: left; height: 170px; width: 170px;"> </a> The <code>dialog</code> 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.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>modal</dt> - <dd><strong>Note</strong>: Starting with Mozilla 1.2.1, this feature requires the <code>UniversalBrowserWrite</code> privilege ({{Bug(180048)}}). Without this privilege, it is ignored.</dd> - <dd>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 <a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert() function</a>.</dd> - <dd>The exact behavior of modal windows depends on the platform and on the Mozilla release version. - <div class="note"> - <p><strong>Nota:</strong> 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.</p> - </div> - </dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>titlebar</dt> - <dd>By default, all new secondary windows have a titlebar. If set to <var>no or 0</var>, this feature removes the titlebar from the new secondary window.</dd> - <dd>Mozilla and Firefox users can force new windows to always render the titlebar by setting<br> - <code>dom.disable_window_open_feature.titlebar</code><br> - to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>alwaysRaised</dt> - <dd>If on, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>alwaysLowered</dt> - <dd>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.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> - <dt>z-lock</dt> - <dd>Same as <code>alwaysLowered</code>.</dd> - <dt>close</dt> - <dd>When set to <var>no or 0</var>, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (<code>dialog</code> feature set). <code>close=no</code> will override <code>minimizable=yes</code>.</dd> - <dd>Mozilla and Firefox users can force new windows to always have a close button by setting<br> - <code>dom.disable_window_open_feature.close</code><br> - to <var>true</var> in <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#about_config">about:config</a> or in their <a href="http://support.mozilla.com/en-US/kb/Editing+configuration+files#user_js">user.js file</a>.</dd> - <dd>Supported in: <img alt="Netscape 6.x" src="/@api/deki/files/785/=Ns6.gif">, <img alt="Netscape 7.x" src="/@api/deki/files/281/=NS7_ico4.gif">, <img alt="Mozilla 1.x" src="/@api/deki/files/277/=Mozilla1_ico.png">, <img alt="Firefox 1.x" src="/@api/deki/files/200/=FF1x.png"></dd> -</dl> - -<p>The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a <var>yes</var> or <var>no</var>; you can use <var>1</var> instead of <var>yes</var> and <var>0</var> instead of <var>no</var>. 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 <var>features</var> string. If you supply the <var>features</var> parameter, then the <code>titlebar</code> and <code>close</code> are still <var>yes</var> by default, but the other features which have a <var>yes</var>/<var>no</var> choice will be <var>no</var> by default and will be turned off.</p> - -<p>Example:</p> - -<pre class="brush:js">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" - ); -}</pre> - -<p>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.</p> - -<h2 id="As_melhores_práticas">As melhores práticas</h2> - -<pre class="brush:js"><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> -</pre> - -<p>The above code solves a few usability problems related to links opening secondary window. The purpose of the <code>return false</code> 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".</p> - -<p>More reading on the use of the target attribute:</p> - -<p><a href="http://www.w3.org/TR/html401/present/frames.html#h-16.3.2">HTML 4.01 Target attribute specifications</a></p> - -<p><a href="http://www.htmlhelp.com/faq/html/links.html#new-window">How do I create a link that opens a new window?</a></p> - -<p>You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:</p> - -<pre class="brush:js"><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> -</pre> - -<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:</p> - -<pre class="brush:js"><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> -</pre> - -<h2 id="Perguntas_Mais_Frequentes">Perguntas Mais Frequentes</h2> - -<dl> - <dt>How can I prevent the confirmation message asking the user whether he wants to close the window?</dt> - <dd>You can not. <strong>New windows not opened by javascript can not as a rule be closed by JavaScript.</strong> The JavaScript Console in Mozilla-based browsers will report the warning message: <code>"Scripts may not close windows that were not opened by script."</code> Otherwise the history of URLs visited during the browser session would be lost.</dd> - <dd><a href="/en-US/docs/DOM/window.close" title="DOM/window.close">More on the window.close()</a> method</dd> - <dt>How can I bring back the window if it is minimized or behind another window?</dt> - <dd>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 <a href="/en-US/docs/DOM/window.focus" title="DOM/window.focus">focus()</a> method. There is no other reliable way. You can examine an <a href="#Best_practices">example explaining how to use the focus() method</a>.</dd> - <dt>How do I force a maximized window?</dt> - <dd>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.</dd> - <dt>How do I turn off window resizability or remove toolbars?</dt> - <dd>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 <code>about:config</code>. 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.</dd> - <dt>How do I resize a window to fit its content?</dt> - <dd>You can not reliably because the users can prevent the window from being resized by unchecking the <code>Edit/Preferences/Advanced/Scripts & Plug-ins/Allow Scripts to/ Move or resize existing windows</code> checkbox in Mozilla or <code>Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows</code> checkbox in Firefox or by setting <code>dom.disable_window_move_resize</code> to <var>true</var> in <code>about:config</code> or by editing accordingly their <a href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a>.</dd> - <dd>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.</dd> - <dd>The window method <a href="/en-US/docs/DOM/window.sizeToContent" title="DOM/window.sizeToContent">sizeToContent()</a> is also disabled if the user unchecks the preference <code>Move or resize existing windows</code> 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.</dd> - <dt>How do I open a referenced resource of a link in a new tab? or in a specific tab?</dt> - <dd>To open a resource in a new tab see <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser">Tabbed browser</a>. Some <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&redirectslug=Code_snippets%2FTabbed_browser">Code snippets</a> are available. If you are using the SDK, tabs are <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">handled a bit differently</a></dd> - <dd><a href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, 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.</dd> - <dd>In a few years, the <a href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">target property of the CSS3 hyperlink module</a> 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.</dd> - <dt>How do I know whether a window I opened is still open?</dt> - <dd>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 <var>windowObjectReference</var>.closed return value is <var>false</var>.</dd> - <dt>How can I tell when my window was blocked by a popup blocker?</dt> - <dd>With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of <code>window.open()</code>: it will be <var>null</var> if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.</dd> - <dt>What is the JavaScript relationship between the main window and the secondary window?</dt> - <dd>The <code>window.open()</code> method gives a main window a reference to a secondary window; the <a href="/en-US/docs/DOM/window.opener" title="DOM/window.opener">opener</a> property gives a secondary window a reference to its main window.</dd> - <dt>I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error<span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property <property_name or method_name>. Why is that?</dt> - <dd>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) <strong>cannot get nor set</strong> 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.</dd> - <dd>More reading on the cross-domain script security restriction: <a href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a></dd> -</dl> - -<h2 id="Problemas_de_usabilidade">Problemas de usabilidade</h2> - -<h3 id="Evitar_o_recurso_a_window.open()">Evitar o recurso a <code>window.open()</code></h3> - -<p>Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:</p> - -<ul> - <li>All Mozilla-based browsers offer <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser">tab-browsing</a> and this is the preferred mode of <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&redirectslug=Code_snippets%2FTabbed_browser">opening referenced resources</a> (<a href="https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs">SDK</a>)... not just in Mozilla-based browsers but in all other browsers offering tab-browsing. In other words, tab-capable browser users overall prefer opening new tabs than opening new windows in a majority of webpage situations. Tab-capable browsers have rapidly gained support and enthusiasm on internet in the last 3 years; this trend will not revert back. MSIE 7, released in October 2006, has full support for tab browsing.</li> - <li>There are now <a href="https://addons.mozilla.org/seamonkey/browse/type:1/cat:48/sort:updated">several Mozilla extensions</a> (like Multizilla) and <a href="https://addons.update.mozilla.org/firefox/browse/type:1/cat:14/sort:updated">Firefox extensions</a> (like <a href="https://addons.mozilla.org/firefox/addon/158">Tabbrowser preferences</a>), features, settings and advanced preferences based on tab-browsing and based on converting window.open() calls into opening tabs, based on neutralizing window.open() calls, in particular in neutralizing unrequested openings of new windows (often referred as blocking unrequested popups or as blocking script-initiated windows opening automatically). Such features found in extensions include opening a link in a new window or not, in the same window, in a new tab or not, in "background" or not. Coding carelessly to open new windows can no longer be assured of success, can not succeed by force and, if it does, it will annoy a majority of users.</li> - <li>New windows can have menubar missing, scrollbars missing, status bar missing, window resizability disabled, etc.; new tabs can not be missing those functionalities or toolbars (or at least, the toolbars which are present by default). Therefore, tab-browsing is preferred by a lot of users because the normal user-interface of the browser window they prefer is kept intact, remains stable.</li> - <li>Opening new windows, even with reduced features, uses considerably a lot of the user's system resources (cpu, RAM) and involves considerably a lot of coding in the source code (security management, memory management, various code branchings sometimes quite complex, window frame/chrome/toolbars building, window positioning and sizing, etc.). Opening new tabs is less demanding on the user's system resources (and faster to achieve) than opening new windows.</li> -</ul> - -<h3 id="Oferecer_para_abrir_uma_hiperligação_numa_nova_janela_utilizando_estas_linhas_diretrizes">Oferecer para abrir uma hiperligação numa nova janela, utilizando estas linhas diretrizes</h3> - -<p>If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:</p> - -<h4 id="Never_use_this_form_of_code_for_links_<a_hrefjavascriptwindow.open(...)_...>"><em>Never</em> use this form of code for links: <code><a href="javascript:window.open(...)" ...></code></h4> - -<p>"javascript:" links break accessibility and usability of webpages in every browser.</p> - -<ul> - <li>"javascript:" pseudo-links become dysfunctional when javascript support is disabled or inexistent. Several corporations allow their employees to surf on the web but under strict security policies: no javascript enabled, no java, no activeX, no Flash. For various reasons (security, public access, text browsers, etc..), about 5% to 10% of users on the web surf with javascript disabled.</li> - <li>"javascript:" links will interfere with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, tab-browsing features in extensions, etc.</li> - <li>"javascript:" links will interfere with the process of indexing webpages by search engines.</li> - <li>"javascript:" links interfere with assistive technologies (e.g. voice browsers) and several web-aware applications (e.g. <abbr title="Personal Digital Assistant">PDAs</abbr> and mobile browsers).</li> - <li>"javascript:" links also interfere with "mouse gestures" features implemented in browsers.</li> - <li>Protocol scheme "javascript:" will be reported as an error by link validators and link checkers.</li> -</ul> - -<p><strong>Further reading:</strong></p> - -<ul> - <li><a href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, December 2002</li> - <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a>, Jeff Howden, February 2002</li> - <li><a href="http://jibbering.com/faq/#FAQ4_24">comp.lang.javascript newsgroup discussion FAQ on "javascript:" links</a></li> -</ul> - -<h4 id="Never_use_<a_href_onclickwindow.open(...)>">Never use <code><a href="#" onclick="window.open(...);"></code></h4> - -<p>Such pseudo-link also breaks accessibility of links. <strong>Always use a real URL for the href attribute value</strong> 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.</p> - -<h4 id="Always_identify_links_which_will_create_(or_will_re-use)_a_new_secondary_window">Always identify links which will create (or will re-use) a new, secondary window</h4> - -<p>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.</p> - -<p>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).</p> - -<blockquote> -<p>"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 <em>Back</em> button."<br> - quote from <a href="http://www.useit.com/alertbox/990530.html">The Top Ten <em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, May 1999</p> -</blockquote> - -<p>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).</p> - -<p><strong>Referências</strong></p> - -<ul> - <li>"If your link spawns a new window, or causes another windows to 'pop up' on your display, or move the focus of the system to a new FRAME or Window, then the nice thing to do is to tell the user that something like that will happen." <a href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li> - <li>"Use link titles to provide users with a preview of where each link will take them, before they have clicked on it." <a href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, October 1999</li> - <li><a href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, January 1998</li> -</ul> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header" colspan="4">Example "New Window" Icons & Cursors</td> - </tr> - <tr> - <td><img alt="New window icon from yahoo.com" src="/@api/deki/files/782/=NewwindowYahoo.png"></td> - <td><img alt="New window icon from microsoft.com" src="/@api/deki/files/780/=NewwinMSIE.gif"></td> - <td><img alt="New window icon from webaim.org" src="/@api/deki/files/296/=Popup_requested_new_window.gif"></td> - <td><img alt="New window icon from sun.com" src="/@api/deki/files/811/=PopupImageSun.gif"></td> - </tr> - <tr> - <td><img alt="New window icon from bbc.co.uk" src="/@api/deki/files/795/=Opennews_rb.gif"></td> - <td><img alt="New window icon from Accessible Internet Solutions" src="/@api/deki/files/15/=AIS_NewWindowIcon.png"></td> - <td><img alt="New window icon from accessify.com" src="/@api/deki/files/809/=Pop-up-launcher.gif"></td> - <td><img alt="New window icon from webstyleguide.com" src="/@api/deki/files/417/=Webstyleguide_com_newwind.gif"></td> - </tr> - <tr> - <td><img alt="New window icon from an unknown source" src="/@api/deki/files/810/=Popicon_1.gif"></td> - <td><img alt="New window icon from an unknown source" src="/@api/deki/files/779/=New.gif"></td> - <td><img alt="New window icon from an unknown source" src="/@api/deki/files/419/=WillCreateOrRecycleNewWindow.gif"></td> - <td><img alt="New window icon from gtalbot.org" src="/@api/deki/files/287/=OpenRequestedPopup.png"></td> - </tr> - <tr> - <td colspan="2"><img alt="New window cursor from draig.de" src="/@api/deki/files/169/=Cursor_LinkNewWindowTargetBlank.png"></td> - <td colspan="2"><img alt="New window cursor from mithgol.ru" src="/@api/deki/files/170/=Cursor_newwindowSergeySokoloff.png"></td> - </tr> - </tbody> -</table> - -<h4 id="Utilziar_sempre_o_atributo_target">Utilziar sempre o atributo <em>target</em></h4> - -<p>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 - <strong>not impose</strong> - 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.</p> - -<h4 id="Não_utilizar_target_blank">Não utilizar <code>target="_blank"</code></h4> - -<p>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).</p> - -<h2 id="Glossário">Glossário</h2> - -<dl> - <dt>Opener window, parent window, main window, first window</dt> - <dd>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.</dd> - <dt>Sub-window, child window, secondary window, second window</dt> - <dd>Terms often used to describe or to identify the same window. It is the new window which was created.</dd> - <dt>Unrequested popup windows</dt> - <dd>Script-initiated windows opening automatically without the user's consent.</dd> -</dl> - -<h2 id="Especificação">Especificação</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-open', 'Window.open()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{ SpecName('CSSOM View', '#the-features-argument-to-the-open()-method', 'The features argument to the open() method') }}</td> - <td>{{ Spec2('CSSOM View') }}</td> - <td>Defines the effect of the <code>features</code> argument</td> - </tr> - </tbody> -</table> - -<h2 id="Notas">Notas</h2> - -<h3 id="Nota_na_precedência">Nota na precedência</h3> - -<p>In cases where <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) have conflicting values, then <code>left</code> and <code>top</code> have precedence over <code>screenX</code> and <code>screenY</code> respectively. If <code>left</code> and <code>screenX</code> (and/or <code>top</code> and <code>screenY</code>) are defined in the <var>features</var> list, then <code>left</code> (and/or <code>top</code>) 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.</p> - -<pre class="brush:js">windowObjectReference = window.open( - "http://news.bbc.co.uk/", - "BBCWorldNewsWindowName", - "left=100,screenX=200,resizable,scrollbars,status" -);</pre> - -<p>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.</p> - -<p>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.</p> - -<pre class="brush:js">windowObjectReference = window.open( - "http://www.wwf.org/", - "WWildlifeOrgWindowName", - "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status" -);</pre> - -<h3 id="Nota_na_correção_de_erro_da_posição_e_dimensão">Nota na correção de erro da posição e dimensão</h3> - -<p>Requested position and requested dimension values in the <var>features</var> list will not be honored and <strong>will be corrected</strong> 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. <strong>No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.</strong></p> - -<p><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">MSIE 6 SP2 has a similar error correction mechanism</a> but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.</p> - -<h3 id="Nota_nas_scrollbars">Nota nas <em>scrollbars</em></h3> - -<p>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:</p> - -<ul> - <li>user resizes the window</li> - <li>user increases the text size of fonts via View/Text Zoom (%) menuitem in Mozilla or View/Text Size/Increase or Decrease in Firefox</li> - <li>user sets a minimum font size for pages which is bigger than the font-size the web author requested. People over 40 years old or with particular viewing habit or reading preference often set a minimal font size in Mozilla-based browsers.</li> - <li>web author is not aware of default margin (and/or border and/or padding) values applying to root element or body node in various browsers and various browser versions</li> - <li>user uses an user stylesheet (<a href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) for his viewing habits which increases document box dimensions (margin, padding, default font size)</li> - <li>user can customize individually the size (height or width) of most toolbars via operating system settings. E.g. window resizing borders, height of browser titlebar, menubar, scrollbars, font size are entirely customizable by the user in Windows XP operating system. These toolbars dimensions can also be set via browser themes and skins or by operating system themes</li> - <li>web author is unaware that the user default browser window has custom toolbar(s) for specific purpose(s); e.g.: prefs bar, web developer bar, accessibility toolbar, popup blocking and search toolbar, multi-feature toolbar, etc.</li> - <li>user uses assistive technologies or add-on features which modify the operating system's work area for applications: e.g. MS-Magnifier</li> - <li>user repositions and/or resizes directly or indirectly the operating system's work area for applications: e.g. user resizes the Windows taskbar, user positions the Windows taskbar on the left side (arabic language based) or right side (Hebrew language), user has a permanent MS-Office quick launch toolbar, etc.</li> - <li>some operating system (Mac OS X) forces presence of toolbars which can then fool the web author's anticipations, calculations of the effective dimensions of the browser window</li> -</ul> - -<h3 id="Nota_na_barra_de_estado">Nota na barra de estado</h3> - -<p>You should assume that a large majority of 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 <abbr title="Secure Socket Layer">SSL</abbr> connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. <strong>Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.</strong></p> - -<h3 id="Nota_nos_problemas_de_segurança_da_presença_da_barra_de_estado">Nota nos problemas de segurança da presença da barra de estado</h3> - -<p>In MSIE 6 for XP SP2: For windows opened using <code>window.open()</code>:</p> - -<blockquote> -<p>"For windows opened using window.open():<br> - Expect the status bar to be present, and code for it. <strong>The status bar will be on by default</strong> and is 20-25 pixels in height. (...)"<br> - quote from <a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p> -</blockquote> - -<blockquote> -<p>"(...) 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.<br> - 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. (...)<br> - <strong>Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar.</strong> (...)<br> - Script management of Internet Explorer status bar<br> - Detailed description<br> - <strong>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.</strong> (...) 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.<br> - 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 (...)"<br> - quote from <a href="http://technet.microsoft.com/en-us/library/bb457150.aspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p> -</blockquote> - -<h3 id="Nota_no_ecrã_completo">Nota no ecrã completo</h3> - -<p>In MSIE 6 for XP SP2:</p> - -<ul> - <li>"window.open() with fullscreen=yes will now result in a maximized window, not a kiosk mode window."</li> - <li>"The definition of the fullscreen=yes specification is changed to mean 'show the window as maximized,' which will keep the title bar, address bar, and status bar visible."</li> -</ul> - -<h4 id="Referências">Referências:</h4> - -<ul> - <li><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li> - <li><a href="http://technet.microsoft.com/en-us/library/bb457150.aspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li> -</ul> - -<h3 id="Nota_em_outerHeight_versus_height">Nota em outerHeight <em>versus </em>height</h3> - -<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/212/=FirefoxInnerVsOuterHeight.png"></p> - -<h3 id="Nota_na_atualização_(recarregar_página)_vs._abrir_uma_nova_janelaseparador">Nota na atualização (recarregar página) vs. abrir uma nova janela/separador</h3> - -<p>If the <code>strWindowName</code> parameter is omitted, a new window or tab is opened. If a window with the same name already exists, the existing window is refreshed.</p> - -<pre class="brush:js">//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");</pre> - -<h2 id="Tutoriais">Tutoriais</h2> - -<ul> - <li><a href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> by Lasse Reichstein Nielsen</li> - <li><a href="http://accessify.com/features/tutorials/the-perfect-popup/" title="http://accessify.com/features/tutorials/the-perfect-popup/">The perfect pop-up (tutorial)</a> by Ian Lloyd</li> - <li><a href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> by Gérard Talbot</li> -</ul> - -<h2 id="Referências_2">Referências</h2> - -<ul> - <li><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</li> - <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a> by Jeff Howden</li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/window/postmessage/index.html b/files/pt-pt/web/api/window/postmessage/index.html deleted file mode 100644 index 2787caaa32..0000000000 --- a/files/pt-pt/web/api/window/postmessage/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Window.postMessage() -slug: Web/API/Window/postMessage -tags: - - API - - DOM - - Janela - - Referencia - - metodo -translation_of: Web/API/Window/postMessage ---- -<div>{{ApiRef("HTML DOM")}}</div> - -<p>O método <strong><code>window.postMessage()</code></strong> permite a comunicação segura de origem cruzada. Normalmente, é permitido que os <em>scripts </em>em páginas diferentes podem aceder a cada uma delas, se e apenas se as páginas que os executaram estão em localizações com o mesmo protocolo (normalmente ambas <code>https</code>), número da porta (<code>443</code>, por predefinição para <code>https</code>), e anfitrião (módulo {{domxref("Document.domain")}}, sendo definidos por ambas as páginas para o mesmo valor). <code>window.postMessage()</code> fornece um mecanismo para contornar esta restrição de um modo que é seguro quando utilizado corretamente.</p> - -<p>The <code>window.postMessage()</code> method, when called, causes a {{domxref("MessageEvent")}} to be dispatched at the target window when any pending script that must be executed completes (e.g., remaining event handlers if <code>window.postMessage()</code> is called from an event handler, previously-set pending timeouts, etc.) The {{domxref("MessageEvent")}} has the type <code>message</code>, a <code>data</code> property which is set to the value of the first argument provided to <code>window.postMessage()</code>, an <code>origin</code> property corresponding to the origin of the main document in the window calling <code>window.postMessage</code> at the time <code>window.postMessage()</code> was called, and a <code>source</code> property which is the window from which <code>window.postMessage()</code> is called. (Other standard properties of events are present with their expected values.)</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><em>otherWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre> - -<dl> - <dt><code><em>otherWindow</em></code></dt> - <dd>A reference to another window; such a reference may be obtained, for example, using the <code>contentWindow</code> property of an <code>iframe</code> element, the object returned by <a href="/en-US/docs/DOM/window.open">window.open</a>, or by named or numeric index on {{domxref("Window.frames")}}, if you're trying to start the communication from iframe to parent window then <a href="/en-US/docs/Web/API/Window/parent">parent</a> is also a valid reference</dd> - <dt><code><em>message</em></code></dt> - <dd>Data to be sent to the other window. The data is serialized using <a href="/en-US/docs/DOM/The_structured_clone_algorithm">the structured clone algorithm</a>. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself. [<a href="/en-US/docs/">1</a>]</dd> - <dt><code><em>targetOrigin</em></code></dt> - <dd>Specifies what the origin of <code>otherWindow</code> must be for the event to be dispatched, either as the literal string <code>"*"</code> (indicating no preference) or as a URI. If at the time the event is scheduled to be dispatched the scheme, hostname, or port of <code>otherWindow</code>'s document does not match that provided in <code>targetOrigin</code>, the event will not be dispatched; only if all three match will the event be dispatched. This mechanism provides control over where messages are sent; for example, if <code>postMessage()</code> was used to transmit a password, it would be absolutely critical that this argument be a URI whose origin is the same as the intended receiver of the message containing the password, to prevent interception of the password by a malicious third party. <strong>Always provide a specific <code>targetOrigin</code>, not <code>*</code>, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site.</strong></dd> - <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt> - <dd>Is a sequence of {{domxref("Transferable")}} objects that are transferred with the message. The ownership of these objects is given to the destination side and they are no longer usable on the sending side.</dd> -</dl> - -<h2 id="O_evento_expedido">O evento expedido</h2> - -<p><code>otherWindow</code> can listen for dispatched messages by executing the following JavaScript:</p> - -<pre class="brush: js">window.addEventListener("message", receiveMessage, false); - -function receiveMessage(event) -{ - if (event.origin !== "http://example.org:8080") - return; - - // ... -} -</pre> - -<p>The properties of the dispatched message are:</p> - -<dl> - <dt><code>data</code></dt> - <dd>The object passed from the other window.</dd> - <dt><code>origin</code></dt> - <dd>The <a href="/en-US/docs/Origin">origin</a> of the window that sent the message at the time <code>postMessage</code> was called. This string is the concatenation of the protocol and "://", the host name if one exists, and ":" followed by a port number if a port is present and differs from the default port for the given protocol. Examples of typical origins are <code class="nowiki">https://example.org</code> (implying port <code>443</code>), <code class="nowiki">http://example.net</code> (implying port <code>80</code>), and <code class="nowiki">http://example.com:8080</code>. Note that this origin is <em>not</em> guaranteed to be the current or future origin of that window, which might have been navigated to a different location since <code>postMessage</code> was called.</dd> - <dt><code>source</code></dt> - <dd>A reference to the <code><a href="/en-US/docs/DOM/window">window</a></code> object that sent the message; you can use this to establish two-way communication between two windows with different origins.</dd> -</dl> - -<h2 id="Preocupações_de_segurança">Preocupações de segurança</h2> - -<p><strong>If you do not expect to receive messages from other sites, <em>do not</em> add any event listeners for <code>message</code> events.</strong> This is a completely foolproof way to avoid security problems.</p> - -<p>If you do expect to receive messages from other sites, <strong>always verify the sender's identity</strong> using the <code>origin</code> and possibly <code>source</code> properties. Any window (including, for example, <code class="nowiki">http://evil.example.com</code>) can send a message to any other window, and you have no guarantees that an unknown sender will not send malicious messages. Having verified identity, however, you still should <strong>always verify the syntax of the received message</strong>. Otherwise, a security hole in the site you trusted to send only trusted messages could then open a cross-site scripting hole in your site.</p> - -<p><strong>Always specify an exact target origin, not <code>*</code>, when you use <code>postMessage</code> to send data to other windows.</strong> A malicious site can change the location of the window without your knowledge, and therefore it can intercept the data sent using <code>postMessage</code>.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js">/* - * In window A's scripts, with A being on <http://example.com:8080>: - */ - -var popup = window.open(...popup details...); - -// When the popup has fully loaded, if not blocked by a popup blocker: - -// This does nothing, assuming the window hasn't changed its location. -popup.postMessage("The user is 'bob' and the password is 'secret'", - "https://secure.example.net"); - -// This will successfully queue a message to be sent to the popup, assuming -// the window hasn't changed its location. -popup.postMessage("hello there!", "http://example.com"); - -function receiveMessage(event) -{ - // Do we trust the sender of this message? (might be - // different from what we originally opened, for example). - if (event.origin !== "http://example.com") - return; - - // event.source is popup - // event.data is "hi there yourself! the secret response is: rheeeeet!" -} -window.addEventListener("message", receiveMessage, false); -</pre> - -<pre class="brush: js">/* - * In the popup's scripts, running on <http://example.com>: - */ - -// Called sometime after postMessage is called -function receiveMessage(event) -{ - // Do we trust the sender of this message? - if (event.origin !== "http://example.com:8080") - return; - - // event.source is window.opener - // event.data is "hello there!" - - // Assuming you've verified the origin of the received message (which - // you must do in any case), a convenient idiom for replying to a - // message is to call postMessage on event.source and provide - // event.origin as the targetOrigin. - event.source.postMessage("hi there yourself! the secret response " + - "is: rheeeeet!", - event.origin); -} - -window.addEventListener("message", receiveMessage, false); -</pre> - -<h3 id="Notas">Notas</h3> - -<p>Any window may access this method on any other window, at any time, regardless of the location of the document in the window, to send it a message. Consequently, any event listener used to receive messages <strong>must</strong> first check the identity of the sender of the message, using the <code>origin</code> and possibly <code>source</code> properties. This cannot be overstated: <strong>Failure to check the <code>origin</code> and possibly <code>source</code> properties enables cross-site scripting attacks.</strong></p> - -<p>As with any asynchronously-dispatched script (timeouts, user-generated events), it is not possible for the caller of <code>postMessage</code> to detect when an event handler listening for events sent by <code>postMessage</code> throws an exception.</p> - -<p>The value of the <code>origin</code> property of the dispatched event is not affected by the current value of <code>document.domain</code> in the calling window.</p> - -<p>For IDN host names only, the value of the <code>origin</code> property is not consistently Unicode or punycode; for greatest compatibility check for both the IDN and punycode values when using this property if you expect messages from IDN sites. This value will eventually be consistently IDN, but for now you should handle both IDN and punycode forms.</p> - -<p>The value of the <code>origin</code> property when the sending window contains a <code>javascript:</code> or <code>data:</code> URL is the origin of the script that loaded the URL.</p> - -<h3 id="Utilizar_window.postMessage_nas_extensões_Non-standard_inline">Utilizar window.postMessage nas extensões {{Non-standard_inline}}</h3> - -<p><code>window.postMessage</code> is available to JavaScript running in chrome code (e.g., in extensions and privileged code), but the <code>source</code> property of the dispatched event is always <code>null</code> as a security restriction. (The other properties have their expected values.)</p> - -<p>It is not possible for content or web context scripts to specify a <code>targetOrigin</code> to communicate directly with an extension (either the background script or a contet script). Web or content scripts <em>can</em> use <code>window.postMessage</code> with a <code>targetOrigin</code> of <code>"*"</code> to broadcast to every listener, but this is discouraged, since an extension cannot be certain the origin of such messages, and other listeners (including those you do not control) can listen in.</p> - -<p>Content scripts should use <a href="/en-US/Add-ons/WebExtensions/API/runtime">runtime.sendMessage</a> to communicate with the background script. Web context scripts can use custom events to communicate with content scripts (with randomly generated event names, if needed, to prevent snooping from the guest page).</p> - -<p>Lastly, posting a message to a page at a <code>file:</code> URL currently requires that the <code>targetOrigin</code> argument be <code>"*"</code>. <code>file://</code> cannot be used as a security restriction; this restriction may be modified in the future.</p> - -<h2 id="Especificacações">Especificacações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th><strong>Especificação</strong></th> - <th><strong>Estado</strong></th> - <th><strong>Comentário</strong></th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "web-messaging.html#dom-window-postmessage", "postMessage()")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th><strong>Funcionalidade</strong></th> - <th><strong>Chrome</strong></th> - <th><strong>Edge</strong></th> - <th><strong>Firefox (Gecko)</strong></th> - <th><strong>Internet Explorer</strong></th> - <th><strong>Opera</strong></th> - <th><strong>Safari (WebKit)</strong></th> - </tr> - <tr> - <td>Suporte básico</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(6.0)}}<sup>[1]</sup><br> - {{CompatGeckoDesktop(8.0)}}<sup>[2]</sup></td> - <td>8.0<sup>[3]</sup><br> - 10.0<sup>[4]</sup></td> - <td>9.5</td> - <td>4.0</td> - </tr> - <tr> - <td><code>transfer</code> argument</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(20.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th><strong>Funcionalidade</strong></th> - <th><strong>Android</strong></th> - <th><strong>Edge</strong></th> - <th><strong>Firefox Mobile (Gecko)</strong></th> - <th><strong>IE Phone</strong></th> - <th><strong>Opera Mobile</strong></th> - <th><strong>Safari Mobile</strong></th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(6.0)}}<sup>[1]</sup><br> - {{CompatGeckoDesktop(8.0)}}<sup>[2]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}[5]</td> - </tr> - <tr> - <td><code>transfer</code> argument</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(20.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Prior to Gecko 6.0 {{geckoRelease("6.0")}}, the <code>message</code> parameter must be a string. Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the <code>message</code> parameter is serialized using <a href="/en-US/docs/DOM/The_structured_clone_algorithm">the structured clone algorithm</a>. This means you can pass a broad variety of data objects safely to the destination window without having to serialize them yourself.</p> - -<p>[2] Gecko 8.0 introduced support for sending {{domxref("File")}} and {{domxref("FileList")}} objects between windows. This is only allowed if the recipient's principal is contained within the sender's principal for security reasons.</p> - -<p>[3] IE8 and IE9 only support it for {{HTMLElement("frame")}} and {{HTMLElement("iframe")}}.</p> - -<p>[4] IE10 has important limitations: see this <a href="http://stackoverflow.com/questions/16226924/is-cross-origin-postmessage-broken-in-ie10">article</a> for details.</p> - -<p>[5] Due to security reasons, to work properly on Safari, use construction with document.getElementId('your-frame').contentWindow</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>{{domxref("Document.domain")}}</li> - <li>{{domxref("CustomEvent")}}</li> - <li><a href="/pt-PT/docs/Archive/Add-ons/Interaction_between_privileged_and_non-privileged_pages">Interação entre páginas privilegiadas e não privilegiadas</a></li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody> - <tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> - </tbody> -</table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody> - <tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> - </tbody> -</table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/window/sidebar/index.html b/files/pt-pt/web/api/window/sidebar/index.html deleted file mode 100644 index 281555281d..0000000000 --- a/files/pt-pt/web/api/window/sidebar/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Window.sidebar -slug: Web/API/Window/sidebar -tags: - - DOM - - Janela - - Não Padrão - - Propriedade - - Referencia -translation_of: Web/API/Window/sidebar -original_slug: Web/API/Window/barra_lateral ---- -<div>{{APIRef}} {{Non-standard_header}}</div> - -<p>Devolve um objeto da barra lateral, que contém vários métodos para registar extras com o navegador.</p> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>O objeto da barra lateral devolvido tem os seguintes métodos:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Método</th> - <th>Descrição (SeaMonkey)</th> - <th>Descrição (Firefox)</th> - </tr> - <tr> - <td><code>addPanel(<var>title</var>, <var>contentURL</var>, "")</code></td> - <td>Adiciona um painel de barra lateral.</td> - <td rowspan="2">Obsoleto desde o Firefox 23 (apresentado apenas no SeaMonkey).<br> - Em vez disso, os utilizadores finais podem utilizar a opção "carregar este marcador na barra lateral". Consulte também <a href="/pt-PT/docs/Mozilla/Criacao_barra_lateral_Firefox">Criação de uma barra lateral do Firefox.</a></td> - </tr> - <tr> - <td><code>addPersistentPanel(<var>title</var>, <var>contentURL</var>, "")</code></td> - <td>Adiciona um painel de barra lateral, que consegue funcionar em segundo plano.</td> - </tr> - <tr> - <td><code>AddSearchProvider(<em>descriptionURL)</em></code></td> - <td colspan="2">Installs a search provider (OpenSearch). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_OpenSearch_plugins" title="Adding_search_engines_from_web_pages">Adding OpenSearch search engines </a>contains more details. Added in Firefox 2.</td> - </tr> - <tr> - <td><code>addSearchEngine(<var>engineURL</var>, <var>iconURL</var>, <var>suggestedTitle</var>, <var>suggestedCategory</var>)</code> {{Obsolete_inline(44)}}</td> - <td colspan="2"> - <p>Installs a search engine (Sherlock). <a href="/en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages#Installing_Sherlock_plugins" title="Adding_search_engines_from_web_pages">Adding Sherlock search engines </a>contains more details.</p> - - <div class="note"> - <p><strong>Note</strong>: This was made obsolete in Firefox 44, and has been removed completely in Firefox 59. You should use <code>AddSearchProvider</code> instead.</p> - </div> - </td> - </tr> - <tr> - <td><code>IsSearchProviderInstalled(<em>descriptionURL)</em></code></td> - <td colspan="2">Indicates if a specific search provider (OpenSearch) is installed.</td> - </tr> - </tbody> -</table> - -<h2 id="Specification" name="Specification">Especificação</h2> - -<p>Específico da Mozilla. Não faz parte de qualquer padrão.</p> diff --git a/files/pt-pt/web/api/worker/index.html b/files/pt-pt/web/api/worker/index.html deleted file mode 100644 index ee53553220..0000000000 --- a/files/pt-pt/web/api/worker/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: Worker -slug: Web/API/Worker -translation_of: Web/API/Worker ---- -<p>{{APIRef("Web Workers API")}}</p> - -<p>A interface do <em><strong><code>Worker</code></strong> </em>da <a href="/en-US/docs/Web/API/Web_Workers_API">API de Workers da Web </a>representa uma tarefa em segundo palno que pode ser criada facilmente e pode enviar mensagens de volta para o seu criador. Criar um <em>worker </em>é tão simples como chamar o criador de <code>Worker()</code> e especificar um script para ser executado na sequência do <em>worker</em>.</p> - -<p>Os <em>workers</em> podem, por sua vez, gerar novos <em>workers</em> enquanto esses <em>workers</em> estiverem alojados dentro da mesma <a href="/en-US/docs/Web/Security/Same-origin_policy">origem</a> como a página original (Nota: os <em>workers</em> integrados <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5R3B4RN4GHU">não estão atualmente implementados no Blink</a>). Em adição os <em>workers</em> poderão utilizar <a class="internal" href="/en/DOM/XMLHttpRequest" title="En/XMLHttpRequest"><code>XMLHttpRequest</code></a> para I/O rede, com a estipulação que a <code>responseXML</code> e os atributos <code>channel</code> no <code>XMLHttpRequest</code> retornam sempre <code>null</code>.</p> - -<p><a href="/En/DOM/Worker/Functions_available_to_workers" title="En/DOM/Worker/Functions available to workers">Nem todas as interfaces e funções estão disposníveis</a> para o <em>script</em> associado com um <em><code>Worker</code></em>.</p> - -<p>No Firefox, se quiser utilziar os <em>workers</em> nas extensões e pretender ter acesso a <a href="/en/js-ctypes" title="en/js-ctypes">js-ctypes</a>, então deverá utilizar o objeto {{ domxref("ChromeWorker") }}.</p> - -<h2 id="Criadores">Criadores</h2> - -<dl> - <dt>{{domxref("Worker.Worker", "Worker()")}}</dt> - <dd>Creates a dedicated web worker that executes the script at the specified URL. Workers can also be constructed using <a href="/en-US/docs/Web/API/Blob">Blobs</a>.</dd> -</dl> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em>Inherits properties from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.</em></p> - -<h3 id="Manipuladores_de_evento">Manipuladores de evento</h3> - -<dl> - <dt>{{domxref("AbstractWorker.onerror")}}</dt> - <dd>An {{ domxref("EventListener") }} called whenever an {{domxref("ErrorEvent")}} of type <code>error</code> bubbles through to the worker. This is inherited from {{domxref("AbstractWorker")}}.</dd> - <dt>{{domxref("Worker.onmessage")}}</dt> - <dd>An {{ domxref("EventListener") }} called whenever a {{domxref("MessageEvent")}} of type <code>message</code> 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.</dd> - <dt>{{domxref("Worker.onmessageerror")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("messageerror")}} event is raised.</dd> -</dl> - -<dl> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}, and implements methods from {{domxref("AbstractWorker")}}.</em></p> - -<dl> - <dt>{{domxref("Worker.postMessage()")}}</dt> - <dd>Sends a message — which can consist of <code>any</code> JavaScript object — to the worker's inner scope.</dd> - <dt>{{domxref("Worker.terminate()")}}</dt> - <dd>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.</dd> -</dl> - -<h2 id="Exemplo">Exemplo</h2> - -<p>The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor and usage of the object:</p> - -<pre class="brush: js">var myWorker = new Worker('worker.js'); -var first = document.querySelector('#number1'); -var second = document.querySelector('#number2'); - -first.onchange = function() { - myWorker.postMessage([first.value,second.value]); - console.log('Message posted to worker'); -}</pre> - -<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" href="http://mdn.github.io/simple-web-worker/">run dedicated worker</a>).</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - -<p>Support varies for different types of workers. See each worker type's page for specifics.</p> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>4</td> - <td>{{CompatVersionUnknown}}</td> - <td>3.5</td> - <td>10.0</td> - <td>10.6</td> - <td>4</td> - </tr> - <tr> - <td>Constructor <code>name</code> option</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(55)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>onmessageerror</code></td> - <td>60</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(57)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.4</td> - <td>{{CompatVersionUnknown}}</td> - <td>3.5</td> - <td>10.0</td> - <td>11.5</td> - <td>5.1</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Constructor <code>name</code> option</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(55)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>onmessageerror</code></td> - <td>60</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(57)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Cross-origin_worker_error_behaviour">Cross-origin worker error behaviour</h3> - -<p>In earlier browser versions, trying to load a cross-origin worker script threw a <code>SecurityError</code>; in newer browsers an {{event("error")}} event is thrown instead due to a spec change. Find out more information on how to deal with this in <a href="https://www.fxsitecompat.com/en-CA/docs/2016/loading-cross-origin-worker-now-fires-error-event-instead-of-throwing-worker-in-sandboxed-iframe-no-longer-allowed/">Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed</a>.</p> - -<h2 id="Consultar_também">Consultar também</h2> - -<ul> - <li><a class="internal" href="/pt-PT/docs/Web/API/Web_Workers_API/Utilizacao_de_web_workers" title="en/Using DOM workers">Utilziar <em>workers</em> da Web</a></li> - <li><a href="/pt-PT/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers" title="https://developer.mozilla.org/En/DOM/Worker/Functions_available_to_workers">Funções disponíveis para os <em>workers</em></a></li> - <li>Outros tipos de <em>workers</em>: {{ domxref("SharedWorker") }} e <a href="/pt-PT/docs/Web/API/Service_Worker_API">ServiceWorker</a>.</li> - <li><em>Workers </em>não padrão, específicos Gecko: {{ domxref("ChromeWorker") }}, utilizados pelas extensões.</li> -</ul> - -<div id="SL_balloon_obj" style="display: block;"> -<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> - -<div id="SL_shadow_translation_result2" class="hidden"> </div> - -<div id="SL_shadow_translator" class="hidden"> -<div id="SL_planshet"> -<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_Bproviders"> -<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> - -<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> - -<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> -</div> - -<div id="SL_alert_bbl" class="hidden"> -<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_alert_cont"> </div> -</div> - -<div id="SL_TB"> -<table id="SL_tables"> - <tbody><tr> - <td class="SL_td"><input></td> - <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> - </td> - <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> - <td class="SL_td"> - <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> - </td> - <td class="SL_td"> - <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_font_patch"> </div> - - <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> - </td> - <td class="SL_td"> - <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> - </td> - <td class="SL_td"> - <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> - </td> - </tr> -</tbody></table> -</div> -</div> - -<div id="SL_shadow_translation_result" style=""> </div> - -<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<div id="SL_player2"> </div> - -<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> - -<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> -<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> - -<table id="SL_tbl_opt" style="width: 100%;"> - <tbody><tr> - <td><input></td> - <td> - <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> - </td> - <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> - <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> - </tr> -</tbody></table> -</div> -</div> -</div> diff --git a/files/pt-pt/web/api/xmlhttprequest/index.html b/files/pt-pt/web/api/xmlhttprequest/index.html deleted file mode 100644 index 3e5489f088..0000000000 --- a/files/pt-pt/web/api/xmlhttprequest/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: XMLHttpRequest -slug: Web/API/XMLHttpRequest -tags: - - AJAX - - API - - HTTP - - Interface - - Referencia - - Web - - XHR -translation_of: Web/API/XMLHttpRequest ---- -<div>{{APIRef("XMLHttpRequest")}}</div> - -<p><span class="seoSummary">Utilize os objetos <code>XMLHttpRequest</code> (XHR) para interagir com os servidores. Pode obter os dados de um URL sem ter que recarregar toda a página. Isto permite que uma página da Web atualize apenas parte da mesma, </span> sem interromper o que o utilizador está a fazer<span class="seoSummary">.</span> <code>XMLHttpRequest</code> é totalmente utilizado na programação <a href="/pt-PT/docs/Web/Guide/AJAX">Ajax</a>.</p> - -<p>{{InheritanceDiagram}}</p> - -<h5 id="História">História</h5> - -<p><code>XMLHttpRequest</code> was originally designed by Microsoft around 1999 and later adopted by Mozilla, Apple, and Google. Since October 2014, it has been <a class="external" href="https://xhr.spec.whatwg.org/">standardized at the <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>, <a href="https://fetch.spec.whatwg.org/">together</a> with the new promise-based {{domxref("WindowOrWorkerGlobalScope.fetch()", "fetch()")}} method.</p> - -<p>Despite its name, <code>XMLHttpRequest</code> can be used to retrieve any type of data, not just XML, and it supports protocols other than <a href="/en-US/docs/Web/HTTP">HTTP</a> (including <code>file</code> and <code>ftp</code>).</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt> - <dd>The constructor initializes an XMLHttpRequest. It must be called before any other method calls.</dd> -</dl> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em>This interface also inherits properties of {{domxref("XMLHttpRequestEventTarget")}} and of {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt> - <dd>An {{domxref("EventHandler")}} that is called whenever the <code>readyState</code> attribute changes.</dd> - <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt> - <dd>Returns an <code>unsigned short</code>, the state of the request.</dd> - <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt> - <dd>Returns an {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, JavaScript object, or a {{domxref("DOMString")}}, depending on the value of {{domxref("XMLHttpRequest.responseType")}}. that contains the response entity body.</dd> - <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt> - <dd>Returns a {{domxref("DOMString")}} that contains the response to the request as text, or <code>null</code> if the request was unsuccessful or has not yet been sent.</dd> - <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt> - <dd>Is an enumerated value that defines the response type.</dd> - <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt> - <dd>Returns the serialized URL of the response or the empty string if the URL is null.</dd> - <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt> - <dd>Returns a {{domxref("Document")}} containing the response to the request, or <code>null</code> if the request was unsuccessful, has not yet been sent, or cannot be parsed as XML or HTML. Not available in workers.</dd> - <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt> - <dd>Returns an <code>unsigned short</code> with the status of the response of the request.</dd> - <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt> - <dd>Returns a {{domxref("DOMString")}} containing the response string returned by the HTTP server. Unlike {{domxref("XMLHTTPRequest.status")}}, this includes the entire text of the response message ("<code>200 OK</code>", for example).</dd> -</dl> - -<div class="note"> -<p><strong>Nota:</strong> via HTTP/2 specification (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>), HTTP/2 does not define a way to carry the version or reason phrase that is included in an HTTP/1.1 status line.</p> -</div> - -<dl> - <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt> - <dd>Is an <code>unsigned long</code> representing the number of milliseconds a request can take before automatically being terminated.</dd> - <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt> - <dd>Is an {{domxref("EventHandler")}} that is called whenever the request times out. {{gecko_minversion_inline("12.0")}}</dd> - <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt> - <dd>Is an {{domxref("XMLHttpRequestUpload")}}, representing the upload process.</dd> - <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt> - <dd>Is a {{domxref("Boolean")}} that indicates whether or not cross-site <code>Access-Control</code> requests should be made using credentials such as cookies or authorization headers.</dd> -</dl> - -<h3 id="Proriedades_não_padrão">Proriedades não padrão</h3> - -<dl> - <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt> - <dd>Is a {{Interface("nsIChannel")}}. The channel used by the object when performing the request.</dd> - <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt> - <dd>Is a boolean. If true, the request will be sent without cookie and authentication headers.</dd> - <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt> - <dd>Is a boolean. If true, the same origin policy will not be enforced on the request.</dd> - <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt> - <dd>Is a boolean. It indicates whether or not the object represents a background service request.</dd> - <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt> - <dd>Is an <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>. The response to the request, as a JavaScript typed array.</dd> - <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt> - <dd><strong>This Gecko-only feature, a boolean, was removed in Firefox/Gecko 22.</strong> Please use <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, or <code>responseText</code> from progress events instead.</dd> -</dl> - -<h3 id="Manipuladores_de_evento">Manipuladores de evento</h3> - -<p><code>onreadystatechange</code> as a property of the <code>XMLHttpRequest</code> instance is supported in all browsers.</p> - -<p>Since then, a number of additional event handlers were implemented in various browsers (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). These are supported in Firefox. In particular, see <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequestEventTarget" title="">nsIXMLHttpRequestEventTarget</a></code> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p> - -<p>More recent browsers, including Firefox, also support listening to the <code>XMLHttpRequest</code> events via standard <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> APIs in addition to setting <code>on*</code> properties to a handler function.</p> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{domxref("XMLHttpRequest.abort()")}}</dt> - <dd>Aborts the request if it has already been sent.</dd> - <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt> - <dd>Returns all the response headers, separated by <a href="https://developer.mozilla.org/en-US/docs/Glossary/CRLF">CRLF</a>, as a string, or <code>null</code> if no response has been received.</dd> - <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt> - <dd>Returns the string containing the text of the specified header, or <code>null</code> if either the response has not yet been received or the header doesn't exist in the response.</dd> - <dt>{{domxref("XMLHttpRequest.open()")}}</dt> - <dd>Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> instead.</dd> - <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt> - <dd>Overrides the MIME type returned by the server.</dd> - <dt>{{domxref("XMLHttpRequest.send()")}}</dt> - <dd>Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.</dd> - <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt> - <dd>Sets the value of an HTTP request header. You must call <code>setRequestHeader()</code>after <a href="#open"><code>open()</code></a>, but before <code>send()</code>.</dd> -</dl> - -<h3 id="Métodos_não_padrão">Métodos não padrão</h3> - -<dl> - <dt>{{domxref("XMLHttpRequest.init()")}}</dt> - <dd>Initializes the object for use from C++ code.</dd> -</dl> - -<div class="warning"><strong>Aviso:</strong> este método <strong>não </strong>deve ser chamado do JavaScript.</div> - -<dl> - <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt> - <dd>Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> instead. See the documentation for <code>open()</code>.</dd> - <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt> - <dd>A variant of the <code>send()</code> method that sends binary data.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estado</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('XMLHttpRequest')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td>Live standard, latest version</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> - - - -<div>{{Compat("api.XMLHttpRequest")}}</div> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>Tutoriais da MDN abrangendo XMLHttpRequest: - <ul> - <li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — Getting Started</a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li> - <li><a href="/en-US/docs/Web/API/FormData"><code>FormData</code></a></li> - </ul> - </li> - <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li> - <li><code>Chrome scope availability</code> — how to access XMLHttpRequest from JSM modules etc., which do not have access to DOM - <ul> - <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> - <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">nsIXMLHttpRequest</a></li> - </ul> - </li> -</ul> |