diff --git a/files/pt-br/web/api/speechsynthesisutterance/voice/index.md b/files/pt-br/web/api/speechsynthesisutterance/voice/index.md
index 73453fd0bc24e9..e77cf7eacbe131 100644
--- a/files/pt-br/web/api/speechsynthesisutterance/voice/index.md
+++ b/files/pt-br/web/api/speechsynthesisutterance/voice/index.md
@@ -50,13 +50,11 @@ inputForm.onsubmit = function(event) {
## Especificações
-| Especificação | Status | Comentário |
-| ------------------------------------------------------------------------------------ | ------------------------------------ | ---------- |
-| {{SpecName('Web Speech API', '#dfn-utterancevoice', 'voice')}} | {{Spec2('Web Speech API')}} | |
+{{Specifications}}
-## Compatiblidade dos navegadores
+## Compatibilidade com navegadores
-{{Compat("api.SpeechSynthesisUtterance.voice")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/storage/clear/index.md b/files/pt-br/web/api/storage/clear/index.md
index 86857ab36060e6..ce0e283cf50e72 100644
--- a/files/pt-br/web/api/storage/clear/index.md
+++ b/files/pt-br/web/api/storage/clear/index.md
@@ -27,9 +27,9 @@ A função abaixo cria três itens e armazenam localmente, depois remove todos u
```js
function populateStorage() {
- localStorage.setItem('bgcolor', 'red');
- localStorage.setItem('font', 'Helvetica');
- localStorage.setItem('image', 'myCat.png');
+ localStorage.setItem("bgcolor", "red");
+ localStorage.setItem("font", "Helvetica");
+ localStorage.setItem("image", "myCat.png");
localStorage.clear();
}
@@ -39,13 +39,11 @@ function populateStorage() {
## Especificações
-| Especificação | Status | Comentário |
-| -------------------------------------------------------------------------------- | -------------------------------- | ---------- |
-| {{SpecName('Web Storage', '#dom-storage-clear', 'clear()')}} | {{Spec2('Web Storage')}} | |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.Storage.clear")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/storage/getitem/index.md b/files/pt-br/web/api/storage/getitem/index.md
index 0dd31f8d8048f4..9d7480450d8152 100644
--- a/files/pt-br/web/api/storage/getitem/index.md
+++ b/files/pt-br/web/api/storage/getitem/index.md
@@ -28,17 +28,17 @@ A função seguinte recupera três itens armazenados no local storage e usa-os p
```js
function setStyles() {
- var currentColor = localStorage.getItem('bgcolor');
- var currentFont = localStorage.getItem('font');
- var currentImage = localStorage.getItem('image');
+ var currentColor = localStorage.getItem("bgcolor");
+ var currentFont = localStorage.getItem("font");
+ var currentImage = localStorage.getItem("image");
- document.getElementById('bgcolor').value = currentColor;
- document.getElementById('font').value = currentFont;
- document.getElementById('image').value = currentImage;
+ document.getElementById("bgcolor").value = currentColor;
+ document.getElementById("font").value = currentFont;
+ document.getElementById("image").value = currentImage;
- htmlElem.style.backgroundColor = '#' + currentColor;
+ htmlElem.style.backgroundColor = "#" + currentColor;
pElem.style.fontFamily = currentFont;
- imgElem.setAttribute('src', currentImage);
+ imgElem.setAttribute("src", currentImage);
}
```
@@ -46,17 +46,11 @@ function setStyles() {
## Especificações
-| Especificação | Status | Comment |
-| ------------------------------------------------------------------------------------ | -------------------------------- | ------- |
-| {{SpecName('Web Storage', '#dom-storage-getitem', 'getItem()')}} | {{Spec2('Web Storage')}} | |
+{{Specifications}}
-## Compatibilidade
+## Compatibilidade com navegadores
-{{Compat("api.Storage.getItem")}}
-
-Os níveis de compatibilidade podem variar em todos os navegadores, tanto para o localStorage quanto para o sessionStorage. Aqui temos [estatísticas detalhadas dos níveis de compatibilidade para vários navegadores](http://dev-test.nemikor.com/web-storage/support-test/).
-
-> **Nota:**A partir da versão 5.1 do iOS, o Safari Mobile armazena os dados do localStorage na pasta do cache, sujeito a ser apagado em caso de espaço insificiente.
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/storage/index.md b/files/pt-br/web/api/storage/index.md
index 87bf5a8f9de237..afa41268af0b2d 100644
--- a/files/pt-br/web/api/storage/index.md
+++ b/files/pt-br/web/api/storage/index.md
@@ -32,32 +32,32 @@ Se você quiser manipular o armazenamento de sessão para um domínio, você cha
Aqui acessamos um objeto Storage chamando localStorage. Primeiro testamos se o armazenamento local contém itens de dados usando! localStorage.getItem ('bgcolor'). Se isso acontecer, executaremos uma função chamada setStyles () que agarra os itens de dados usando {{domxref("localStorage.getItem()")}} E usa esses valores para atualizar estilos de página. Se não, executamos outra função, populateStorage (), que usa {{domxref("localStorage.setItem()")}} Para definir os valores do item, em seguida, executa setStyles ().
```js
-if(!localStorage.getItem('bgcolor')) {
+if (!localStorage.getItem("bgcolor")) {
populateStorage();
} else {
setStyles();
}
function populateStorage() {
- localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
- localStorage.setItem('font', document.getElementById('font').value);
- localStorage.setItem('image', document.getElementById('image').value);
+ localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
+ localStorage.setItem("font", document.getElementById("font").value);
+ localStorage.setItem("image", document.getElementById("image").value);
setStyles();
}
function setStyles() {
- var currentColor = localStorage.getItem('bgcolor');
- var currentFont = localStorage.getItem('font');
- var currentImage = localStorage.getItem('image');
+ var currentColor = localStorage.getItem("bgcolor");
+ var currentFont = localStorage.getItem("font");
+ var currentImage = localStorage.getItem("image");
- document.getElementById('bgcolor').value = currentColor;
- document.getElementById('font').value = currentFont;
- document.getElementById('image').value = currentImage;
+ document.getElementById("bgcolor").value = currentColor;
+ document.getElementById("font").value = currentFont;
+ document.getElementById("image").value = currentImage;
- htmlElem.style.backgroundColor = '#' + currentColor;
+ htmlElem.style.backgroundColor = "#" + currentColor;
pElem.style.fontFamily = currentFont;
- imgElem.setAttribute('src', currentImage);
+ imgElem.setAttribute("src", currentImage);
}
```
@@ -65,17 +65,11 @@ function setStyles() {
## Especificações
-| Especificação | Estado | Comentário |
-| ------------------------------------------------------------------------------------ | -------------------------------- | ---------- |
-| {{SpecName('Web Storage', '#the-storage-interface', 'Storage')}} | {{Spec2('Web Storage')}} | |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.Storage")}}
-
-\[1] Desde o iOS 5.1, o Safari Mobile armazena os dados localStorage na pasta de cache, que está sujeita a limpeza ocasional a pedido do sistema operacional, normalmente se o espaço for curto.
-
-Todos os navegadores têm diferentes níveis de capacidade para o localStorage e sessionStorage. [Aqui está um resumo detalhado de todas as capacidades de armazenamento para vários navegadores](http://dev-test.nemikor.com/web-storage/support-test/).
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/storage/key/index.md b/files/pt-br/web/api/storage/key/index.md
index 2e15105aa5b607..f7c629280ae55e 100644
--- a/files/pt-br/web/api/storage/key/index.md
+++ b/files/pt-br/web/api/storage/key/index.md
@@ -37,7 +37,7 @@ function forEachKey(callback) {
A função a seguir itera sobre as chaves do armazenamento local e obtém o valor de cada chave:
```js
-for(var i =0; i < localStorage.length; i++){
+for (var i = 0; i < localStorage.length; i++) {
console.log(localStorage.getItem(localStorage.key(i)));
}
```
@@ -46,13 +46,11 @@ for(var i =0; i < localStorage.length; i++){
## Especificações
-| Especificação | Estado | Comentário |
-| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- |
-| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}} | {{Spec2('HTML WHATWG')}} | |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.Storage.key")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/storage/length/index.md b/files/pt-br/web/api/storage/length/index.md
index d6f8a64b051a3a..9dfd735320554a 100644
--- a/files/pt-br/web/api/storage/length/index.md
+++ b/files/pt-br/web/api/storage/length/index.md
@@ -23,9 +23,9 @@ A função a seguir adiciona três itens ('bgcolor', 'font' e 'image') ao local
```js
function populateStorage() {
- localStorage.setItem('bgcolor', 'yellow');
- localStorage.setItem('font', 'Helvetica');
- localStorage.setItem('image', 'cats.png');
+ localStorage.setItem("bgcolor", "yellow");
+ localStorage.setItem("font", "Helvetica");
+ localStorage.setItem("image", "cats.png");
localStorage.length; // should return 3
}
@@ -35,13 +35,11 @@ function populateStorage() {
## Especificações
-| Especificação | Status | Comentário |
-| -------------------------------------------------------------------------------- | -------------------------------- | ---------- |
-| {{SpecName('Web Storage', '#dom-storage-length', 'length')}} | {{Spec2('Web Storage')}} | |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.Storage.length")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/storage/removeitem/index.md b/files/pt-br/web/api/storage/removeitem/index.md
index 633651efd4fe18..6fab87b6ac72e7 100644
--- a/files/pt-br/web/api/storage/removeitem/index.md
+++ b/files/pt-br/web/api/storage/removeitem/index.md
@@ -28,11 +28,11 @@ A função a seguir cria três itens de dados no armazenamento local, em seguida
```js
function populateStorage() {
- localStorage.setItem('bgcolor', 'red');
- localStorage.setItem('font', 'Helvetica');
- localStorage.setItem('image', 'myCat.png');
+ localStorage.setItem("bgcolor", "red");
+ localStorage.setItem("font", "Helvetica");
+ localStorage.setItem("image", "myCat.png");
- localStorage.removeItem('image');
+ localStorage.removeItem("image");
}
```
@@ -40,13 +40,11 @@ function populateStorage() {
## Especificações
-| Especificação | Status | Comentários |
-| -------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
-| {{SpecName('Web Storage', '#dom-storage-removeitem', 'removeItem()')}} | {{Spec2('Web Storage')}} | |
+{{Specifications}}
-## Compatibilidade
+## Compatibilidade com navegadores
-{{Compat("api.Storage.removeItem")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/storage/setitem/index.md b/files/pt-br/web/api/storage/setitem/index.md
index 6dbcca4b863e8d..eea4c594c1428e 100644
--- a/files/pt-br/web/api/storage/setitem/index.md
+++ b/files/pt-br/web/api/storage/setitem/index.md
@@ -35,9 +35,9 @@ A função abaixo irá criar três dados dentro do local storage.
```js
function populateStorage() {
- localStorage.setItem('bgcolor', 'red');
- localStorage.setItem('font', 'Helvetica');
- localStorage.setItem('image', 'myCat.png');
+ localStorage.setItem("bgcolor", "red");
+ localStorage.setItem("font", "Helvetica");
+ localStorage.setItem("image", "myCat.png");
}
```
@@ -45,13 +45,11 @@ function populateStorage() {
## Especificações
-| Specification | Status | Comment |
-| ------------------------------------------------------------------------------------ | -------------------------------- | ------- |
-| {{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}} | {{Spec2('Web Storage')}} | |
+{{Specifications}}
-## Navegadores compatíveis
+## Compatibilidade com navegadores
-{{Compat("api.Storage.setItem")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/storagemanager/index.md b/files/pt-br/web/api/storagemanager/index.md
index 0d8673512fa4e3..68ec79b6becbcb 100644
--- a/files/pt-br/web/api/storagemanager/index.md
+++ b/files/pt-br/web/api/storagemanager/index.md
@@ -18,10 +18,8 @@ slug: Web/API/StorageManager
## Especificações
-| Especificação | Status | Comentário |
-| ---------------------------------------------------------------------------- | ---------------------------- | ------------------ |
-| {{SpecName('Storage','#storagemanager','StorageManger')}} | {{Spec2('Storage')}} | Definição inicial. |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.StorageManager")}}
+{{Compat}}
diff --git a/files/pt-br/web/api/streams_api/index.md b/files/pt-br/web/api/streams_api/index.md
index 8ee388385576ce..e85c656f8e2455 100644
--- a/files/pt-br/web/api/streams_api/index.md
+++ b/files/pt-br/web/api/streams_api/index.md
@@ -85,16 +85,12 @@ Examples from other developers:
- [Progress Indicators with Streams, Service Workers, & Fetch](https://fetch-progress.anthum.com/).
-## Specifications
+## Especificações
-| Specification | Status | Comment |
-| -------------------------------- | ---------------------------- | ------------------- |
-| {{SpecName('Streams')}} | {{Spec2('Streams')}} | Initial definition. |
+{{Specifications}}
## Compatibilidade com navegadores
-### WritableStream
-
{{Compat}}
## See also
diff --git a/files/pt-br/web/api/subtlecrypto/derivekey/index.md b/files/pt-br/web/api/subtlecrypto/derivekey/index.md
index 2dbd777bdd747f..72aad89d8988da 100644
--- a/files/pt-br/web/api/subtlecrypto/derivekey/index.md
+++ b/files/pt-br/web/api/subtlecrypto/derivekey/index.md
@@ -54,7 +54,7 @@ Aqui está um exemplo de como usar **deriveKey()** para criar uma **Secure Remot
```js
// salt deve ser Uint8Array ou ArrayBuffer
-var saltBuffer = Unibabel.hexToBuffer('e85c53e7f119d41fd7895cdc9d7bb9dd');
+var saltBuffer = Unibabel.hexToBuffer("e85c53e7f119d41fd7895cdc9d7bb9dd");
// não use métodos naïve para conversão de texto, senão caracteres
// internacionais não terão a sequência correta de byte. Use o TextEncoder quando
@@ -62,60 +62,56 @@ var saltBuffer = Unibabel.hexToBuffer('e85c53e7f119d41fd7895cdc9d7bb9dd');
var passphraseKey = Unibabel.utf8ToBuffer("I hëart årt and £$¢!");
// Você deve primeiramente importar sua passphrase Uint8array em uma CryptoKey
-window.crypto.subtle.importKey(
- 'raw',
- passphraseKey,
- {name: 'PBKDF2'},
- false,
- ['deriveBits', 'deriveKey']
-).then(function(key) {
-
- return window.crypto.subtle.deriveKey(
- { "name": 'PBKDF2',
- "salt": saltBuffer,
- // não seja muito ambicioso, ou pelo menos tenha em mente
- // que celulares com baixo poder de processamento vão acessar o seu app
- "iterations": 100,
- "hash": 'SHA-256'
- },
- key,
-
- // Nota: para essa demo nós não vamos precisar de uma cipher suite,
- // mas a API exige que a mesma seja especificada.
-
- // Para AES o comprimento requerido é de 128 ou 256 bits (não bytes)
- { "name": 'AES-CBC', "length": 256 },
-
- // Independente da resposta a key é extraível (menos seguro) ou não extraível (mais seguro),
- // quando falso, a key pode ser entregue apenas como um objeto crypto web, não inspecionado
- true,
-
- // esse objeto crypto web será permitido para apenas essas funções:
- [ "encrypt", "decrypt" ]
- )
-}).then(function (webKey) {
-
- return crypto.subtle.exportKey("raw", webKey);
-
-}).then(function (buffer) {
-
+window.crypto.subtle
+ .importKey("raw", passphraseKey, { name: "PBKDF2" }, false, [
+ "deriveBits",
+ "deriveKey",
+ ])
+ .then(function (key) {
+ return window.crypto.subtle.deriveKey(
+ {
+ name: "PBKDF2",
+ salt: saltBuffer,
+ // não seja muito ambicioso, ou pelo menos tenha em mente
+ // que celulares com baixo poder de processamento vão acessar o seu app
+ iterations: 100,
+ hash: "SHA-256",
+ },
+ key,
+
+ // Nota: para essa demo nós não vamos precisar de uma cipher suite,
+ // mas a API exige que a mesma seja especificada.
+
+ // Para AES o comprimento requerido é de 128 ou 256 bits (não bytes)
+ { name: "AES-CBC", length: 256 },
+
+ // Independente da resposta a key é extraível (menos seguro) ou não extraível (mais seguro),
+ // quando falso, a key pode ser entregue apenas como um objeto crypto web, não inspecionado
+ true,
+
+ // esse objeto crypto web será permitido para apenas essas funções:
+ ["encrypt", "decrypt"],
+ );
+ })
+ .then(function (webKey) {
+ return crypto.subtle.exportKey("raw", webKey);
+ })
+ .then(function (buffer) {
var proofOfSecret = Unibabel.bufferToHex(buffer);
// esta proof-of-secret / password remota-segura
// pode agora ser enviada no lugar da password do usuário
-});
+ });
```
Nota: Por conta de não haver ferramentas nativas que convertam entre Uint8Array, Unicode, hex, e base64, você provavelmente vai querer utilizar algo como o [Unibabel](https://github.com/coolaj86/unibabel-js) ou [Buffer](https://github.com/feross/buffer) para converter entre eles.
## Especificações
-| Especificação | Status | Comentário |
-| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ |
-| {{ SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-deriveKey', 'SubtleCrypto.deriveKey()') }} | {{ Spec2('Web Crypto API') }} | Definição inicial. |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.SubtleCrypto.deriveKey")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/subtlecrypto/generatekey/index.md b/files/pt-br/web/api/subtlecrypto/generatekey/index.md
index 8f846b17b03b76..7b62335f64017f 100644
--- a/files/pt-br/web/api/subtlecrypto/generatekey/index.md
+++ b/files/pt-br/web/api/subtlecrypto/generatekey/index.md
@@ -48,13 +48,11 @@ A {{jsxref("Promise")}} é rejeitada quando a seguinte exceção é encontrada:
## Especificações
-| Especificação | Status | Commentário |
-| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ |
-| {{ SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-generateKey', 'SubtleCrypto.generateKey()') }} | {{ Spec2('Web Crypto API') }} | Definição inicial. |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.SubtleCrypto.generateKey")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/subtlecrypto/importkey/index.md b/files/pt-br/web/api/subtlecrypto/importkey/index.md
index 0381d185959554..a62896d794f120 100644
--- a/files/pt-br/web/api/subtlecrypto/importkey/index.md
+++ b/files/pt-br/web/api/subtlecrypto/importkey/index.md
@@ -49,13 +49,11 @@ A promise é rejeitada quando umas das seguintes exceções é encontrada:
## Especificações
-| Especificação | Status | Comentário |
-| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ |
-| {{ SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-importKey', 'SubtleCrypto.importKey()') }} | {{ Spec2('Web Crypto API') }} | Definição inicial. |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.SubtleCrypto.importKey")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/subtlecrypto/index.md b/files/pt-br/web/api/subtlecrypto/index.md
index 25ea11736ebce3..c9e89593a4d384 100644
--- a/files/pt-br/web/api/subtlecrypto/index.md
+++ b/files/pt-br/web/api/subtlecrypto/index.md
@@ -2,6 +2,7 @@
title: SubtleCrypto
slug: Web/API/SubtleCrypto
---
+
{{APIRef("Web Crypto API")}}
A interface **`SubtleCrypto`** representa um conjunto de criptografias primitivas. E está disponível via propriedades {{domxref("Crypto.subtle")}} disponíveis em uma janela de contexto (via {{domxref("Window.crypto")}}).
@@ -43,13 +44,11 @@ Esta interface não herda nenhum método
## Especificações
-| Especificação | Status | Comentário |
-| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ |
-| {{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }} | {{ Spec2('Web Crypto API') }} | Definição inicial. |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.SubtleCrypto")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/svgaelement/index.md b/files/pt-br/web/api/svgaelement/index.md
index 9dce59d1de68b1..e1e991e99f9cc6 100644
--- a/files/pt-br/web/api/svgaelement/index.md
+++ b/files/pt-br/web/api/svgaelement/index.md
@@ -24,26 +24,23 @@ No exemplo abaixo, o {{SVGAttr("target")}} atributo do elemento {{SVGElement("a"
var linkRef = document.querySelector("a");
linkRef.target = "_self";
-linkRef.onclick = function(){
+linkRef.onclick = function () {
if (linkRef.target === "_blank") {
console.log("BLANK!");
linkRef.target = "_self";
} else {
console.log("SORRY! not _blank");
}
-}
+};
```
## Especificações
-| Especificação | Status | Comentário |
-| -------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| {{SpecName("SVG2", "linking.html#InterfaceSVGAElement")}} | {{Spec2("SVG2")}} | Replaced inheritance from {{domxref("SVGElement")}} by {{domxref("SVGGraphicsElement")}} and removed the interface implementations of {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}}, and {{domxref("SVGTransformable")}} by {{domxref("HTMLHyperlinkElementUtils")}} |
-| {{SpecName("SVG1.1", "linking.html#InterfaceSVGAElement")}} | {{Spec2("SVG1.1")}} | Definição inicial |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.SVGAElement")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/svgaelement/target/index.md b/files/pt-br/web/api/svgaelement/target/index.md
index d03d5ff4892ea7..fca80570d2fea0 100644
--- a/files/pt-br/web/api/svgaelement/target/index.md
+++ b/files/pt-br/web/api/svgaelement/target/index.md
@@ -35,13 +35,11 @@ linkRef.target ='_blank';
## Especificações
-| Specification | Status | Comment |
-| ---------------------------------------------------------------------------------------- | ------------------------ | ------- |
-| {{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}} | {{Spec2('SVG1.1')}} | |
+{{Specifications}}
-## Compatibilidade com o navegador
+## Compatibilidade com navegadores
-{{Compat("api.SVGAElement.target")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/svganimatetransformelement/index.md b/files/pt-br/web/api/svganimatetransformelement/index.md
index 548aaf0483618a..38c1162b27d918 100644
--- a/files/pt-br/web/api/svganimatetransformelement/index.md
+++ b/files/pt-br/web/api/svganimatetransformelement/index.md
@@ -19,11 +19,8 @@ _Essa interface não possui métodos próprios mas os herda do seu pai, {{domxre
## Especificações
-| Especificação | Status | Comentário |
-| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ |
-| {{SpecName("SVG Animations 2", "#InterfaceSVGAnimateTransformElement", "SVGAnimateTransformElement")}} | {{Spec2("SVG Animations 2")}} | No change |
-| {{SpecName("SVG1.1", "animate.html#InterfaceSVGAnimateTransformElement", "SVGAnimateTransformElement")}} | {{Spec2("SVG1.1")}} | Initial definition |
+{{Specifications}}
-## Compatibilidade
+## Compatibilidade com navegadores
-{{Compat("api.SVGAnimateTransformElement")}}
+{{Compat}}
diff --git a/files/pt-br/web/api/touch_events/index.md b/files/pt-br/web/api/touch_events/index.md
index 1b0df3c8719f76..20b788a71b7515 100644
--- a/files/pt-br/web/api/touch_events/index.md
+++ b/files/pt-br/web/api/touch_events/index.md
@@ -36,10 +36,11 @@ Este exemplo acompanha múltiplos pontos de contato de cada vez, permitindo o us
-
+
-
-Log:
+
+Log:
+
```
### Configurado os eventos
@@ -65,7 +66,7 @@ Define simplesmento todos os ouvintes dos eventos do nosso elemento {{ HTMLEleme
Vamos acompanhar os toques em seu progresso.
```js
-var ongoingTouches = new Array;
+var ongoingTouches = new Array();
```
Quando ocorre um evento `touchstart`, indicando que um novo toque na superfície tenha ocorrido, a função abaixo `handleStart()` é chamada.
@@ -78,15 +79,15 @@ function handleStart(evt) {
var ctx = el.getContext("2d");
var touches = evt.changedTouches;
- for (var i=0; i < touches.length; i++) {
- log("touchstart:"+i+"...");
+ for (var i = 0; i < touches.length; i++) {
+ log("touchstart:" + i + "...");
ongoingTouches.push(copyTouch(touches[i]));
var color = colorForTouch(touches[i]);
ctx.beginPath();
- ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false); // a circle at the start
+ ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false); // a circle at the start
ctx.fillStyle = color;
ctx.fill();
- log("touchstart:"+i+".");
+ log("touchstart:" + i + ".");
}
}
```
@@ -106,22 +107,28 @@ function handleMove(evt) {
var ctx = el.getContext("2d");
var touches = evt.changedTouches;
- for (var i=0; i < touches.length; i++) {
+ for (var i = 0; i < touches.length; i++) {
var color = colorForTouch(touches[i]);
var idx = ongoingTouchIndexById(touches[i].identifier);
- if(idx >= 0) {
- log("continuing touch "+idx);
+ if (idx >= 0) {
+ log("continuing touch " + idx);
ctx.beginPath();
- log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");");
+ log(
+ "ctx.moveTo(" +
+ ongoingTouches[idx].pageX +
+ ", " +
+ ongoingTouches[idx].pageY +
+ ");",
+ );
ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
- log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");");
+ log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");");
ctx.lineTo(touches[i].pageX, touches[i].pageY);
ctx.lineWidth = 4;
ctx.strokeStyle = color;
ctx.stroke();
- ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
+ ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
log(".");
} else {
log("can't figure out which touch to continue");
@@ -148,18 +155,18 @@ function handleEnd(evt) {
var ctx = el.getContext("2d");
var touches = evt.changedTouches;
- for (var i=0; i < touches.length; i++) {
+ for (var i = 0; i < touches.length; i++) {
var color = colorForTouch(touches[i]);
var idx = ongoingTouchIndexById(touches[i].identifier);
- if(idx >= 0) {
+ if (idx >= 0) {
ctx.lineWidth = 4;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
ctx.lineTo(touches[i].pageX, touches[i].pageY);
- ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8); // and a square at the end
- ongoingTouches.splice(idx, 1); // remove it; we're done
+ ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // and a square at the end
+ ongoingTouches.splice(idx, 1); // remove it; we're done
} else {
log("can't figure out which touch to end");
}
@@ -179,8 +186,8 @@ function handleCancel(evt) {
log("touchcancel.");
var touches = evt.changedTouches;
- for (var i=0; i < touches.length; i++) {
- ongoingTouches.splice(i, 1); // remove it; we're done
+ for (var i = 0; i < touches.length; i++) {
+ ongoingTouches.splice(i, 1); // remove it; we're done
}
}
```
@@ -217,7 +224,11 @@ Alguns browsers (mobile Safari, por exemplo) re-usa touch objects entre os event
```js
function copyTouch(touch) {
- return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
+ return {
+ identifier: touch.identifier,
+ pageX: touch.pageX,
+ pageY: touch.pageY,
+ };
}
```
@@ -227,14 +238,14 @@ A função `ongoingTouchIndexById()` abaixo verifica através do array `ongoingT
```js
function ongoingTouchIndexById(idToFind) {
- for (var i=0; i < ongoingTouches.length; i++) {
+ for (var i = 0; i < ongoingTouches.length; i++) {
var id = ongoingTouches[i].identifier;
if (id == idToFind) {
return i;
}
}
- return -1; // não econtrado
+ return -1; // não econtrado
}
```
@@ -242,7 +253,7 @@ function ongoingTouchIndexById(idToFind) {
```js
function log(msg) {
- var p = document.getElementById('log');
+ var p = document.getElementById("log");
p.innerHTML = msg + "\n" + p.innerHTML;
}
```
@@ -262,20 +273,46 @@ Since calling `preventDefault()` on a `touchstart` or the first `touchmove` even
```js
function onTouch(evt) {
evt.preventDefault();
- if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+ if (
+ evt.touches.length > 1 ||
+ (evt.type == "touchend" && evt.touches.length > 0)
+ )
return;
var newEvt = document.createEvent("MouseEvents");
var type = null;
var touch = null;
switch (evt.type) {
- case "touchstart": type = "mousedown"; touch = evt.changedTouches[0];break;
- case "touchmove": type = "mousemove"; touch = evt.changedTouches[0];break;
- case "touchend": type = "mouseup"; touch = evt.changedTouches[0];break;
+ case "touchstart":
+ type = "mousedown";
+ touch = evt.changedTouches[0];
+ break;
+ case "touchmove":
+ type = "mousemove";
+ touch = evt.changedTouches[0];
+ break;
+ case "touchend":
+ type = "mouseup";
+ touch = evt.changedTouches[0];
+ break;
}
- newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0,
- touch.screenX, touch.screenY, touch.clientX, touch.clientY,
- evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+ newEvt.initMouseEvent(
+ type,
+ true,
+ true,
+ evt.originalTarget.ownerDocument.defaultView,
+ 0,
+ touch.screenX,
+ touch.screenY,
+ touch.clientX,
+ touch.clientY,
+ evt.ctrlKey,
+ evt.altKey,
+ evt.shirtKey,
+ evt.metaKey,
+ 0,
+ null,
+ );
evt.originalTarget.dispatchEvent(newEvt);
}
```
@@ -284,6 +321,10 @@ function onTouch(evt) {
One technique for preventing things like `pinchZoom` on a page is to call `preventDefault()` on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.
+## Especificações
+
+{{Specifications}}
+
## Compatibilidade com navegadores
-{{Compat("api.Touch")}}
+{{Compat}}
diff --git a/files/pt-br/web/api/url/hash/index.md b/files/pt-br/web/api/url/hash/index.md
index bdee594273c777..e917e7d5619ce7 100644
--- a/files/pt-br/web/api/url/hash/index.md
+++ b/files/pt-br/web/api/url/hash/index.md
@@ -19,7 +19,7 @@ Uma {{domxref("USVString")}}.
```js
const url = new URL(
- "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/href#Examples"
+ "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/href#Examples",
);
console.log(url.hash); // Logs: '#Examples'
```
diff --git a/files/pt-br/web/api/url/hostname/index.md b/files/pt-br/web/api/url/hostname/index.md
index a725537b429d7a..163854c7e4b465 100644
--- a/files/pt-br/web/api/url/hostname/index.md
+++ b/files/pt-br/web/api/url/hostname/index.md
@@ -17,7 +17,7 @@ Uma {{domxref("USVString")}}.
```js
const url = new URL(
- "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/hostname"
+ "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/hostname",
);
console.log(url.hostname); // Logs: 'developer.mozilla.org'
```
diff --git a/files/pt-br/web/api/url/href/index.md b/files/pt-br/web/api/url/href/index.md
index fb77d54bf292bb..de6a8d1c9678e6 100644
--- a/files/pt-br/web/api/url/href/index.md
+++ b/files/pt-br/web/api/url/href/index.md
@@ -17,7 +17,7 @@ Uma {{domxref("USVString")}}.
```js
const url = new URL(
- "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/href"
+ "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/href",
);
console.log(url.href); // Logs: 'https://developer.mozilla.org/pt-BR/docs/Web/API/URL/href'
```
diff --git a/files/pt-br/web/api/url/index.md b/files/pt-br/web/api/url/index.md
index bff2cbfbdf11a1..75c5a15791785b 100644
--- a/files/pt-br/web/api/url/index.md
+++ b/files/pt-br/web/api/url/index.md
@@ -98,7 +98,7 @@ O método {{domxref("URL.toString", "toString()")}} de `URL` apenas retorna o va
```js
const response = await fetch(
- new URL("http://www.example.com/démonstration.html")
+ new URL("http://www.example.com/démonstration.html"),
);
```
diff --git a/files/pt-br/web/api/url/password/index.md b/files/pt-br/web/api/url/password/index.md
index 98b152de1bd867..3278b3396ee606 100644
--- a/files/pt-br/web/api/url/password/index.md
+++ b/files/pt-br/web/api/url/password/index.md
@@ -19,7 +19,7 @@ Uma {{domxref("USVString")}}.
```js
const url = new URL(
- "https://anonymous:flabada@developer.mozilla.org/pt-BR/docs/Web/API/URL/password"
+ "https://anonymous:flabada@developer.mozilla.org/pt-BR/docs/Web/API/URL/password",
);
console.log(url.password); // Logs "flabada"
```
diff --git a/files/pt-br/web/api/url/pathname/index.md b/files/pt-br/web/api/url/pathname/index.md
index 8db10fb7a80598..f9d832e9090b56 100644
--- a/files/pt-br/web/api/url/pathname/index.md
+++ b/files/pt-br/web/api/url/pathname/index.md
@@ -9,7 +9,7 @@ A propriedade **`pathname`** da interface {{domxref("URL")}} é uma {{domxref("U
O caminho da URL é uma sequência de segmentos delimitada por `/`, que pode ser um de `.`, `..` ou uma string com zero ou mais caracteres excluindo `/`, `?` e `#` .
-Alguns sistemas definem o termo *slug* para significar o segmento final de um caminho não vazio se ele identificar uma página em palavras-chave legíveis. Por exemplo, o URL `https://example.org/articles/this-that-other-outre-collection` tem `this-that-other-outre-collection` como seu slug.
+Alguns sistemas definem o termo _slug_ para significar o segmento final de um caminho não vazio se ele identificar uma página em palavras-chave legíveis. Por exemplo, o URL `https://example.org/articles/this-that-other-outre-collection` tem `this-that-other-outre-collection` como seu slug.
Alguns sistemas usam os caracteres `;` e `=` para delimitar parâmetros e valores de parâmetros aplicáveis a um segmento de caminho. Por exemplo, com a URL `https://example.org/users;id=42/tasks;state=open?sort=modified`, um sistema pode extrair e usar os parâmetros de segmento de caminho `id=42` e `state=open` dos segmentos de caminho `users;id=42` e `tasks;state=open`.
@@ -23,7 +23,7 @@ Uma {{domxref("USVString")}}.
```js
const url = new URL(
- "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/pathname?q=value"
+ "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/pathname?q=value",
);
console.log(url.pathname); // Logs "/pt-BR/docs/Web/API/URL/pathname"
```
diff --git a/files/pt-br/web/api/url/protocol/index.md b/files/pt-br/web/api/url/protocol/index.md
index 4c84dbdcfbabbe..6dcd65d549b594 100644
--- a/files/pt-br/web/api/url/protocol/index.md
+++ b/files/pt-br/web/api/url/protocol/index.md
@@ -17,7 +17,7 @@ Uma {{domxref("USVString")}}.
```js
const url = new URL(
- "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/protocol"
+ "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/protocol",
);
console.log(url.protocol); // Logs "https:"
```
diff --git a/files/pt-br/web/api/url/search/index.md b/files/pt-br/web/api/url/search/index.md
index fccaba74e6f123..a2de3b9a49575d 100644
--- a/files/pt-br/web/api/url/search/index.md
+++ b/files/pt-br/web/api/url/search/index.md
@@ -19,7 +19,7 @@ Uma {{domxref("USVString")}}.
```js
const url = new URL(
- "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/search?q=123"
+ "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/search?q=123",
);
console.log(url.search); // Logs "?q=123"
```
diff --git a/files/pt-br/web/api/url/tojson/index.md b/files/pt-br/web/api/url/tojson/index.md
index f41bc58334202b..4d1b1f37d248ba 100644
--- a/files/pt-br/web/api/url/tojson/index.md
+++ b/files/pt-br/web/api/url/tojson/index.md
@@ -23,7 +23,7 @@ Uma {{domxref("USVString")}}.
```js
const url = new URL(
- "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/toString"
+ "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/toString",
);
url.toJSON(); // deve retornar a url como string
```
diff --git a/files/pt-br/web/api/url/tostring/index.md b/files/pt-br/web/api/url/tostring/index.md
index 856edfa7bc3224..29ac5ea2098365 100644
--- a/files/pt-br/web/api/url/tostring/index.md
+++ b/files/pt-br/web/api/url/tostring/index.md
@@ -23,7 +23,7 @@ Uma {{domxref("USVString")}}.
```js
const url = new URL(
- "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/toString"
+ "https://developer.mozilla.org/pt-BR/docs/Web/API/URL/toString",
);
url.toString(); // deve rerornar a URL como string
```
diff --git a/files/pt-br/web/api/url/username/index.md b/files/pt-br/web/api/url/username/index.md
index b2ff27f9711fa4..8935379db810d6 100644
--- a/files/pt-br/web/api/url/username/index.md
+++ b/files/pt-br/web/api/url/username/index.md
@@ -17,7 +17,7 @@ Uma {{domxref("USVString")}}.
```js
const url = new URL(
- "https://anonymous:flabada@developer.mozilla.org/pt-BR/docs/Web/API/URL/username"
+ "https://anonymous:flabada@developer.mozilla.org/pt-BR/docs/Web/API/URL/username",
);
console.log(url.username); // Logs "anonymous"
```
diff --git a/files/pt-br/web/api/urlsearchparams/get/index.md b/files/pt-br/web/api/urlsearchparams/get/index.md
index a26acbf61e94db..427b493266214c 100644
--- a/files/pt-br/web/api/urlsearchparams/get/index.md
+++ b/files/pt-br/web/api/urlsearchparams/get/index.md
@@ -40,10 +40,8 @@ let address = params.get("address"); // null
## Especificações
-| Especificação | Status | Comment |
-| ---------------------------------------------------------------------------- | -------------------- | ------------------ |
-| {{SpecName('URL', '#dom-urlsearchparams-get', "get()")}} | {{Spec2('URL')}} | Definição inicial. |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.URLSearchParams.get")}}
+{{Compat}}
diff --git a/files/pt-br/web/api/urlsearchparams/index.md b/files/pt-br/web/api/urlsearchparams/index.md
index 80060101b102dc..ed099ed3dd51c4 100644
--- a/files/pt-br/web/api/urlsearchparams/index.md
+++ b/files/pt-br/web/api/urlsearchparams/index.md
@@ -10,8 +10,10 @@ A interface **`URLSearchParams`** define métodos utilitários para trabalhar co
Um objeto que implementa `URLSearchParams` pode ser usado diretamente em uma estrutura {{jsxref("Statements/for...of", "for...of")}} para iterar sobre pares chave/valor na mesma ordem em que elas aparecem nos parâmetros, por exemplo as linhas a seguir são equivalentes:
```js
-for (const [key, value] of mySearchParams) {}
-for (const [key, value] of mySearchParams.entries()) {}
+for (const [key, value] of mySearchParams) {
+}
+for (const [key, value] of mySearchParams.entries()) {
+}
```
{{AvailableInWorkers}}
@@ -52,46 +54,46 @@ for (const [key, value] of mySearchParams.entries()) {}
## Exemplos
```js
-const paramsString = 'q=URLUtils.searchParams&topic=api';
+const paramsString = "q=URLUtils.searchParams&topic=api";
const searchParams = new URLSearchParams(paramsString);
// Iterando os parâmetros de pesquisa
for (const p of searchParams) {
-console.log(p);
+ console.log(p);
}
-console.log(searchParams.has('topic')); // true
-console.log(searchParams.get('topic') === "api"); // true
-console.log(searchParams.getAll('topic')); // ["api"]
-console.log(searchParams.get('foo') === null); // true
-console.log(searchParams.append('topic', 'webdev'));
-console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev"
-console.log(searchParams.set('topic', 'More webdev'));
-console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev"
-console.log(searchParams.delete('topic'));
-console.log(searchParams.toString()); // "q=URLUtils.searchParams"
+console.log(searchParams.has("topic")); // true
+console.log(searchParams.get("topic") === "api"); // true
+console.log(searchParams.getAll("topic")); // ["api"]
+console.log(searchParams.get("foo") === null); // true
+console.log(searchParams.append("topic", "webdev"));
+console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev"
+console.log(searchParams.set("topic", "More webdev"));
+console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev"
+console.log(searchParams.delete("topic"));
+console.log(searchParams.toString()); // "q=URLUtils.searchParams"
```
```js
// Os parâmetros de pesquisa também podem ser objetos
-const paramsObj = {foo: 'bar', baz: 'bar'};
+const paramsObj = { foo: "bar", baz: "bar" };
const searchParams = new URLSearchParams(paramsObj);
-console.log(searchParams.toString()); // "foo=bar&baz=bar"
-console.log(searchParams.has('foo')); // true
-console.log(searchParams.get('foo')); // "bar"
+console.log(searchParams.toString()); // "foo=bar&baz=bar"
+console.log(searchParams.has("foo")); // true
+console.log(searchParams.get("foo")); // "bar"
```
### Parâmetros de pesquisa duplicados
```js
-const paramStr = 'foo=bar&foo=baz';
+const paramStr = "foo=bar&foo=baz";
const searchParams = new URLSearchParams(paramStr);
-console.log(searchParams.toString()); // "foo=bar&foo=baz"
-console.log(searchParams.has('foo')); // true
-console.log(searchParams.get('foo')); // bar, somente o primeiro valor
-console.log(searchParams.getAll('foo')); // ["bar", "baz"]
+console.log(searchParams.toString()); // "foo=bar&foo=baz"
+console.log(searchParams.has("foo")); // true
+console.log(searchParams.get("foo")); // bar, somente o primeiro valor
+console.log(searchParams.getAll("foo")); // ["bar", "baz"]
```
### Sem análise de URL
@@ -99,22 +101,22 @@ console.log(searchParams.getAll('foo')); // ["bar", "baz"]
O construtor `URLSearchParams` _não_ analisa URLs completas. No entanto, ele retirará um `?` inicial inicial de uma string, se presente.
```js
-const paramsString1 = 'http://example.com/search?query=%40';
+const paramsString1 = "http://example.com/search?query=%40";
const searchParams1 = new URLSearchParams(paramsString1);
-console.log(searchParams1.has('query')); // false
-console.log(searchParams1.has('http://example.com/search?query')); // true
+console.log(searchParams1.has("query")); // false
+console.log(searchParams1.has("http://example.com/search?query")); // true
-console.log(searchParams1.get('query')); // null
-console.log(searchParams1.get('http://example.com/search?query')); // "@" (equivalente a decodeURIComponent('%40'))
+console.log(searchParams1.get("query")); // null
+console.log(searchParams1.get("http://example.com/search?query")); // "@" (equivalente a decodeURIComponent('%40'))
-const paramsString2 = '?query=value';
+const paramsString2 = "?query=value";
const searchParams2 = new URLSearchParams(paramsString2);
-console.log(searchParams2.has('query')); // true
+console.log(searchParams2.has("query")); // true
-const url = new URL('http://example.com/search?query=%40');
+const url = new URL("http://example.com/search?query=%40");
const searchParams3 = new URLSearchParams(url.search);
-console.log(searchParams3.has('query')); // true
+console.log(searchParams3.has("query")); // true
```
### Preservando os sinais de adição
@@ -122,11 +124,11 @@ console.log(searchParams3.has('query')); // true
O construtor `URLSearchParams` interpreta sinais de adição (`+`) como espaços, o que pode causar problemas.
```js
-const rawData = '\x13à\x17@\x1F\x80';
+const rawData = "\x13à\x17@\x1F\x80";
const base64Data = btoa(rawData); // 'E+AXQB+A'
const searchParams = new URLSearchParams(`bin=${base64Data}`); // 'bin=E+AXQB+A'
-const binQuery = searchParams.get('bin'); // 'E AXQB A', '+' são substituídos por espaços
+const binQuery = searchParams.get("bin"); // 'E AXQB A', '+' são substituídos por espaços
console.log(atob(binQuery) === rawData); // false
```
@@ -134,12 +136,12 @@ console.log(atob(binQuery) === rawData); // false
Você pode evitar isso codificando os dados com o {{jsxref("encodeURIComponent", "encodeURIComponent()")}}.
```js
-const rawData = '\x13à\x17@\x1F\x80';
+const rawData = "\x13à\x17@\x1F\x80";
const base64Data = btoa(rawData); // 'E+AXQB+A'
const encodedBase64Data = encodeURIComponent(base64Data); // 'E%2BAXQB%2BA'
const searchParams = new URLSearchParams(`bin=${encodedBase64Data}`); // 'bin=E%2BAXQB%2BA'
-const binQuery = searchParams.get('bin'); // 'E+AXQB+A'
+const binQuery = searchParams.get("bin"); // 'E+AXQB+A'
console.log(atob(binQuery) === rawData); // true
```
@@ -149,10 +151,10 @@ console.log(atob(binQuery) === rawData); // true
`URLSearchParams` não distingue entre parâmetros com nada após o `=` e um parâmetro que não possui um `=`.
```js
-const emptyVal = new URLSearchParams('foo=&bar=baz');
-console.log(emptyVal.get('foo')); // retorna ''
-const noEquals = new URLSearchParams('foo&bar=baz');
-console.log(noEquals.get('foo')); // também retorna ''
+const emptyVal = new URLSearchParams("foo=&bar=baz");
+console.log(emptyVal.get("foo")); // retorna ''
+const noEquals = new URLSearchParams("foo&bar=baz");
+console.log(noEquals.get("foo")); // também retorna ''
console.log(noEquals.toString()); // 'foo=&bar=baz'
```
@@ -160,7 +162,7 @@ console.log(noEquals.toString()); // 'foo=&bar=baz'
{{Specifications}}
-## Compatibilidade de browser
+## Compatibilidade com navegadores
{{Compat}}
diff --git a/files/pt-br/web/api/urlsearchparams/values/index.md b/files/pt-br/web/api/urlsearchparams/values/index.md
index e48a1be0083d18..1da8747d7e7fc3 100644
--- a/files/pt-br/web/api/urlsearchparams/values/index.md
+++ b/files/pt-br/web/api/urlsearchparams/values/index.md
@@ -26,7 +26,7 @@ Retorna um {{jsxref("Iteration_protocols","iterator")}}.
var searchParams = new URLSearchParams("key1=value1&key2=value2");
// Mostra os pares de chave/valor
-for(var value of searchParams.values()) {
+for (var value of searchParams.values()) {
console.log(value);
}
```
@@ -40,13 +40,11 @@ value2
## Especificações
-| Specification | Status | Comment |
-| ------------------------------------------------------------------------------------------------ | -------------------- | ------------------ |
-| {{SpecName('URL', '#urlsearchparams','values() (as iterator<>)')}} | {{Spec2('URL')}} | Definição inicial. |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.URLSearchParams.values")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/validitystate/index.md b/files/pt-br/web/api/validitystate/index.md
index 995e271c606a8f..cb8dc351f07ebf 100644
--- a/files/pt-br/web/api/validitystate/index.md
+++ b/files/pt-br/web/api/validitystate/index.md
@@ -37,15 +37,11 @@ Para cada uma das propriedades Booleanas abaixo, caso retorne **`true`**, isso i
## Especificações
-| Especificação | Status | Comentário |
-| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------- |
-| {{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'ValidityState') }} | {{Spec2('HTML WHATWG')}} | Live Standard |
-| {{ SpecName('HTML5.1', '#the-constraint-validation-api', 'ValidityState') }} | {{Spec2('HTML5.1')}} | No change from the previous snapshot {{SpecName('HTML5 W3C')}}. |
-| {{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'ValidityState') }} | {{Spec2('HTML5 W3C')}} | First snapshot of {{SpecName('HTML WHATWG')}} containing this interface. |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.ValidityState")}}
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/web_animations_api/index.md b/files/pt-br/web/api/web_animations_api/index.md
index db414fc6bcb1f1..215feb9c9bb3eb 100644
--- a/files/pt-br/web/api/web_animations_api/index.md
+++ b/files/pt-br/web/api/web_animations_api/index.md
@@ -44,11 +44,13 @@ The Web Animations API adds some new features to {{domxref("document")}} and {{d
- {{domxref("Element.getAnimations()")}}
- : Returns an Array of {{domxref("Animation")}} objects currently affecting an element or which are scheduled to do so in future.
-## Specifications
+## Especificações
-| Specification | Status | Comment |
-| ---------------------------------------- | ------------------------------------ | ------------------ |
-| {{SpecName('Web Animations')}} | {{Spec2('Web Animations')}} | Initial definition |
+{{Specifications}}
+
+## Compatibilidade com navegadores
+
+{{Compat}}
## See also
diff --git a/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.md
index 99336c24c5c8a9..cb90432eb1a5ee 100644
--- a/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.md
+++ b/files/pt-br/web/api/web_animations_api/using_the_web_animations_api/index.md
@@ -62,9 +62,9 @@ A primeira coisa que precisamos fazer é criar um [Objeto Keyframe](/pt-BR/docs/
```js
var aliceTumbling = [
- { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
- { color: '#431236', offset: 0.3},
- { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
+ { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
+ { color: "#431236", offset: 0.3 },
+ { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
];
```
@@ -83,8 +83,8 @@ Nós precisamos criar também um objeto de propriedades temporais (um objeto {{d
```js
var aliceTiming = {
duration: 3000,
- iterations: Infinity
-}
+ iterations: Infinity,
+};
```
Você pode notar algumas diferenças aqui comparando com os valores equivalentes representados no CSS:
@@ -99,10 +99,7 @@ Você pode notar algumas diferenças aqui comparando com os valores equivalentes
Agora vamos juntar o que já fizemos com o método {{domxref("Element.animate()")}}:
```js
-document.getElementById("alice").animate(
- aliceTumbling,
- aliceTiming
-)
+document.getElementById("alice").animate(aliceTumbling, aliceTiming);
```
E pronto: a animação começa a tocar (veja a [versão final no Codepen](http://codepen.io/rachelnabors/pen/rxpmJL)).
@@ -112,13 +109,14 @@ O método `animate()` pode ser chamado em qualquer elemento do DOM que pode ser
```js
document.getElementById("alice").animate(
[
- { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
- { color: '#431236', offset: 0.3},
- { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
- ], {
+ { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
+ { color: "#431236", offset: 0.3 },
+ { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
+ ],
+ {
duration: 3000,
- iterations: Infinity
- }
+ iterations: Infinity,
+ },
);
```
@@ -127,10 +125,12 @@ E se nós precisarmos somente especificar a duração da animação e não suas
```js
document.getElementById("alice").animate(
[
- { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
- { color: '#431236', offset: 0.3},
- { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
- ], 3000);
+ { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
+ { color: "#431236", offset: 0.3 },
+ { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
+ ],
+ 3000,
+);
```
## Controlando a reprodução com play(), pause(), reverse() e updatePlaybackRate()
@@ -146,15 +146,16 @@ Nesse jogo, Alice tem uma animação que a encolhe ou aumenta seu tamanho, que c
Vamos falar sobre a animação da Alice depois, mas por enquanto, vamos dissecar esta animação do cupcake.
```js
-var nommingCake = document.getElementById('eat-me_sprite').animate(
-[
- { transform: 'translateY(0)' },
- { transform: 'translateY(-80%)' }
-], {
- fill: 'forwards',
- easing: 'steps(4, end)',
- duration: aliceChange.effect.timing.duration / 2
-});
+var nommingCake = document
+ .getElementById("eat-me_sprite")
+ .animate(
+ [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
+ {
+ fill: "forwards",
+ easing: "steps(4, end)",
+ duration: aliceChange.effect.timing.duration / 2,
+ },
+ );
```
O método {{domxref("Element.animate()")}} vai rodar imediatamente depois de ser chamado. Para evitar que o bolinho se coma sozinho antes da interação do usuário, chamamos o {{domxref("Animation.pause()")}} imediatamente depois de criar a animação:
@@ -172,15 +173,13 @@ nommingCake.play();
Especificamente, nós queremos linka-lo à animação da Alice, para ela crescer assim que o cupcake é mordido. Podemos fazer isso com a seguinte função:
```js
-var growAlice = function() {
-
+var growAlice = function () {
// Play Alice's animation.
aliceChange.play();
// Play the cake's animation.
nommingCake.play();
-
-}
+};
```
Quando o usuário clicar ou pressionar seu dedo no bolinho em uma tela de toque, podemos chamar a função `growAlice` para fazer todas as animações tocarem:
@@ -199,10 +198,10 @@ cake.addEventListener("touchstart", growAlice, false);
Vamos dar uma olhada primeiro no método `playbackRate` — um valor negativo vai fazer a animação tocar ao contrário. Quando Alice bebe da garrafa, ela encolhe. Isso porque a garrafa muda o `playbackRate` da animação de 1 para -1:
```js
-var shrinkAlice = function() {
+var shrinkAlice = function () {
aliceChange.playbackRate = -1;
aliceChange.play();
-}
+};
bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);
@@ -215,22 +214,20 @@ Em [Alice Através do Espelho](https://en.wikipedia.org/wiki/Through_the_Looking
Já que crianças pequenas se cansam facilmente, diferente de peças de xadrez autônomas, Alice está constantemente desacelerando. Nós podemos fazer isso definindo uma queda no `playbackRate` da animação dela. Usamos o `updatePlaybackRate()` no lugar de definir manualmente o playbackRate, já que isso produz uma atualização mais suave:
```js
-setInterval( function() {
-
+setInterval(function () {
// Make sure the playback rate never falls below .4
- if (redQueen_alice.playbackRate > .4) {
- redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * .9);
+ if (redQueen_alice.playbackRate > 0.4) {
+ redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 0.9);
}
-
}, 3000);
```
Mas impulsioná-las clicando ou tocando na tela aumenta a velocidade delas por multiplicar o playbackRate:
```js
-var goFaster = function() {
+var goFaster = function () {
redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 1.1);
-}
+};
document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
@@ -243,11 +240,9 @@ Os elementos do fundo também tem `playbackRate`s que também são afetados pelo
Imagine outras maneiras de utilizar o playbackRate, como melhorar a acessibilidade para usuários com disfunções vestibulares permitindo que eles desacelerem as animações do site todo. Isso é impossível de fazer via CSS sem recalcular todas as regras, mas com a Web Animations API, podemos utilizar o método {{domxref("document.getAnimations()")}} para iterar todas animações de uma página e dividir pela metade seu `playbackRate`, como por exemplo:
```js
-document.getAnimations().forEach(
- function (animation) {
- animation.updatePlaybackRate(animation.playbackRate * .5);
- }
-);
+document.getAnimations().forEach(function (animation) {
+ animation.updatePlaybackRate(animation.playbackRate * 0.5);
+});
```
Com a Web Animations API, você só precisa mudar uma simples propriedade!
@@ -255,21 +250,25 @@ Com a Web Animations API, você só precisa mudar uma simples propriedade!
Outra coisa que é difícil de fazer somente com Animações CSS é criar dependências de valores fornecidos por outras animações. Por exemplo, no logo Aumentando e Encolhendo Alice, você pode ter notado algo estranho sobre a duração do bolinho:
```js
-duration: aliceChange.effect.getComputedTiming().duration / 2
+duration: aliceChange.effect.getComputedTiming().duration / 2;
```
Para entender o que está acontecendo, vamos dar uma olhada na animação da Alice:
```js
-var aliceChange = document.getElementById('alice').animate(
- [
- { transform: 'translate(-50%, -50%) scale(.5)' },
- { transform: 'translate(-50%, -50%) scale(2)' }
- ], {
- duration: 8000,
- easing: 'ease-in-out',
- fill: 'both'
- });
+var aliceChange = document
+ .getElementById("alice")
+ .animate(
+ [
+ { transform: "translate(-50%, -50%) scale(.5)" },
+ { transform: "translate(-50%, -50%) scale(2)" },
+ ],
+ {
+ duration: 8000,
+ easing: "ease-in-out",
+ fill: "both",
+ },
+ );
```
A animação da Alice a fazia ir de metade de seu tamanho para o dobro em 8 segundos. Então nós a pausamos:
@@ -295,14 +294,12 @@ O `effect` nos permite acessar os keyframes e propriedades temporais da animaç
E nós podemos fazer a mesma coisa quando definimos as durações da garrafa e do bolinho:
```js
-var drinking = document.getElementById('liquid').animate(
-[
- { height: '100%' },
- { height: '0' }
-], {
- fill: 'forwards',
- duration: aliceChange.effect.getComputedTiming().duration / 2
-});
+var drinking = document
+ .getElementById("liquid")
+ .animate([{ height: "100%" }, { height: "0" }], {
+ fill: "forwards",
+ duration: aliceChange.effect.getComputedTiming().duration / 2,
+ });
drinking.pause();
```
diff --git a/files/pt-br/web/api/web_audio_api/index.md b/files/pt-br/web/api/web_audio_api/index.md
index 3a169e21703b40..15a8280535db20 100644
--- a/files/pt-br/web/api/web_audio_api/index.md
+++ b/files/pt-br/web/api/web_audio_api/index.md
@@ -222,7 +222,7 @@ Você pode encontrar vários exemplos em nosso [repositório webaudio-example](h
- [howler.js](https://github.com/goldfire/howler.js/): uma biblioteca de áudio JS que tem como padrão [Web Audio API](https://webaudio.github.io/web-audio-api/) e retorna para [HTML Audio](https://html.spec.whatwg.org/multipage/media.html#the-audio-element), além de fornecer outros recursos úteis.
- [Mooog](https://github.com/mattlima/mooog): encadeamento de AudioNodes no estilo jQuery, envios/retornos no estilo do mixer e muito mais.
- [XSound](https://xsound.jp/): Biblioteca Web Audio API para Sintetizador, Efeitos, Visualização, Gravação, etc.
-- [OpenLang](https://github.com/chrisjohndigital/OpenLang): aplicativo da Web do laboratório de linguagem de vídeo HTML usando a API de áudio da Web para gravar e combinar vídeo e áudio de diferentes fontes em um único arquivo ([fonte no GitHub]( https://github.com/chrisjohndigital/OpenLang))
+- [OpenLang](https://github.com/chrisjohndigital/OpenLang): aplicativo da Web do laboratório de linguagem de vídeo HTML usando a API de áudio da Web para gravar e combinar vídeo e áudio de diferentes fontes em um único arquivo ([fonte no GitHub](https://github.com/chrisjohndigital/OpenLang))
- [Pts.js](https://ptsjs.org/): Simplifica a visualização de áudio na web ([guide](https://ptsjs.org/guide/sound-0800))
### Tópicos relacionados
diff --git a/files/pt-br/web/api/web_audio_api/simple_synth/index.md b/files/pt-br/web/api/web_audio_api/simple_synth/index.md
index f98720e68ae7bb..62d4b61a755151 100644
--- a/files/pt-br/web/api/web_audio_api/simple_synth/index.md
+++ b/files/pt-br/web/api/web_audio_api/simple_synth/index.md
@@ -1,5 +1,5 @@
---
-title: 'Tutorial e exemplo: Teclado de Sintetizador Simples'
+title: "Tutorial e exemplo: Teclado de Sintetizador Simples"
slug: Web/API/Web_Audio_API/Simple_synth
original_slug: Web/API/API_Web_Audio/Sintetizador_simples
---
@@ -40,13 +40,20 @@ Primeiro criamos o `
` para conter a barra de opções, para ser personaliza
Volume:
-
+
+
```
Especificamos um valor padrão de 0.5, e provemos um elemento {{HTMLElement("datalist")}} no qual é conectado ao range usando o atributo [`name`](/pt-BR/docs/Web/HTML/Global_attributes#name) para achar uma lista de opções cujo ID encaixa; nesse caso, o conjunto de informações é nomeado de `"volume"`. isso nos permite prover um conjunto de valores comuns e strings especiais que o browser pode de forma opcional escolher mostrar de alguma maneira; e então atribuimos nomes aos valores 0.0 ("Mute") e 1.0 ("100%").
@@ -87,7 +94,11 @@ E no lado da barra de configurações, colocamos um rótulo e um elemento {{HTML
.key {
cursor: pointer;
- font: 16px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+ font:
+ 16px "Open Sans",
+ "Lucida Grande",
+ "Arial",
+ sans-serif;
border: 1px solid black;
border-radius: 5px;
width: 20px;
@@ -132,7 +143,11 @@ E no lado da barra de configurações, colocamos um rótulo e um elemento {{HTML
.settingsBar {
padding-top: 8px;
- font: 14px "Open Sans", "Lucida Grande", "Arial", sans-serif;
+ font:
+ 14px "Open Sans",
+ "Lucida Grande",
+ "Arial",
+ sans-serif;
position: relative;
vertical-align: middle;
width: 100%;
@@ -147,7 +162,8 @@ E no lado da barra de configurações, colocamos um rótulo e um elemento {{HTML
vertical-align: middle;
}
-.left span, .left input {
+.left span,
+.left input {
vertical-align: middle;
}
@@ -239,70 +255,70 @@ function createNoteTable() {
... várias oitavas não mostradas para manter breve ...
```js hidden
- noteFreq[2]["C"] = 65.406391325149658;
- noteFreq[2]["C#"] = 69.295657744218024;
- noteFreq[2]["D"] = 73.416191979351890;
- noteFreq[2]["D#"] = 77.781745930520227;
- noteFreq[2]["E"] = 82.406889228217482;
- noteFreq[2]["F"] = 87.307057858250971;
- noteFreq[2]["F#"] = 92.498605677908599;
- noteFreq[2]["G"] = 97.998858995437323;
- noteFreq[2]["G#"] = 103.826174394986284;
- noteFreq[2]["A"] = 110.000000000000000;
- noteFreq[2]["A#"] = 116.540940379522479;
- noteFreq[2]["B"] = 123.470825314031027;
-
- noteFreq[3]["C"] = 130.812782650299317;
- noteFreq[3]["C#"] = 138.591315488436048;
- noteFreq[3]["D"] = 146.832383958703780;
- noteFreq[3]["D#"] = 155.563491861040455;
- noteFreq[3]["E"] = 164.813778456434964;
- noteFreq[3]["F"] = 174.614115716501942;
- noteFreq[3]["F#"] = 184.997211355817199;
- noteFreq[3]["G"] = 195.997717990874647;
- noteFreq[3]["G#"] = 207.652348789972569;
- noteFreq[3]["A"] = 220.000000000000000;
- noteFreq[3]["A#"] = 233.081880759044958;
- noteFreq[3]["B"] = 246.941650628062055;
-
- noteFreq[4]["C"] = 261.625565300598634;
- noteFreq[4]["C#"] = 277.182630976872096;
- noteFreq[4]["D"] = 293.664767917407560;
- noteFreq[4]["D#"] = 311.126983722080910;
- noteFreq[4]["E"] = 329.627556912869929;
- noteFreq[4]["F"] = 349.228231433003884;
- noteFreq[4]["F#"] = 369.994422711634398;
- noteFreq[4]["G"] = 391.995435981749294;
- noteFreq[4]["G#"] = 415.304697579945138;
- noteFreq[4]["A"] = 440.000000000000000;
- noteFreq[4]["A#"] = 466.163761518089916;
- noteFreq[4]["B"] = 493.883301256124111;
-
- noteFreq[5]["C"] = 523.251130601197269;
- noteFreq[5]["C#"] = 554.365261953744192;
- noteFreq[5]["D"] = 587.329535834815120;
- noteFreq[5]["D#"] = 622.253967444161821;
- noteFreq[5]["E"] = 659.255113825739859;
- noteFreq[5]["F"] = 698.456462866007768;
- noteFreq[5]["F#"] = 739.988845423268797;
- noteFreq[5]["G"] = 783.990871963498588;
- noteFreq[5]["G#"] = 830.609395159890277;
- noteFreq[5]["A"] = 880.000000000000000;
- noteFreq[5]["A#"] = 932.327523036179832;
- noteFreq[5]["B"] = 987.766602512248223;
-
- noteFreq[6]["C"] = 1046.502261202394538;
- noteFreq[6]["C#"] = 1108.730523907488384;
- noteFreq[6]["D"] = 1174.659071669630241;
- noteFreq[6]["D#"] = 1244.507934888323642;
- noteFreq[6]["E"] = 1318.510227651479718;
- noteFreq[6]["F"] = 1396.912925732015537;
- noteFreq[6]["F#"] = 1479.977690846537595;
- noteFreq[6]["G"] = 1567.981743926997176;
- noteFreq[6]["G#"] = 1661.218790319780554;
- noteFreq[6]["A"] = 1760.000000000000000;
- noteFreq[6]["A#"] = 1864.655046072359665;
- noteFreq[6]["B"] = 1975.533205024496447;
+noteFreq[2]["C"] = 65.406391325149658;
+noteFreq[2]["C#"] = 69.295657744218024;
+noteFreq[2]["D"] = 73.41619197935189;
+noteFreq[2]["D#"] = 77.781745930520227;
+noteFreq[2]["E"] = 82.406889228217482;
+noteFreq[2]["F"] = 87.307057858250971;
+noteFreq[2]["F#"] = 92.498605677908599;
+noteFreq[2]["G"] = 97.998858995437323;
+noteFreq[2]["G#"] = 103.826174394986284;
+noteFreq[2]["A"] = 110.0;
+noteFreq[2]["A#"] = 116.540940379522479;
+noteFreq[2]["B"] = 123.470825314031027;
+
+noteFreq[3]["C"] = 130.812782650299317;
+noteFreq[3]["C#"] = 138.591315488436048;
+noteFreq[3]["D"] = 146.83238395870378;
+noteFreq[3]["D#"] = 155.563491861040455;
+noteFreq[3]["E"] = 164.813778456434964;
+noteFreq[3]["F"] = 174.614115716501942;
+noteFreq[3]["F#"] = 184.997211355817199;
+noteFreq[3]["G"] = 195.997717990874647;
+noteFreq[3]["G#"] = 207.652348789972569;
+noteFreq[3]["A"] = 220.0;
+noteFreq[3]["A#"] = 233.081880759044958;
+noteFreq[3]["B"] = 246.941650628062055;
+
+noteFreq[4]["C"] = 261.625565300598634;
+noteFreq[4]["C#"] = 277.182630976872096;
+noteFreq[4]["D"] = 293.66476791740756;
+noteFreq[4]["D#"] = 311.12698372208091;
+noteFreq[4]["E"] = 329.627556912869929;
+noteFreq[4]["F"] = 349.228231433003884;
+noteFreq[4]["F#"] = 369.994422711634398;
+noteFreq[4]["G"] = 391.995435981749294;
+noteFreq[4]["G#"] = 415.304697579945138;
+noteFreq[4]["A"] = 440.0;
+noteFreq[4]["A#"] = 466.163761518089916;
+noteFreq[4]["B"] = 493.883301256124111;
+
+noteFreq[5]["C"] = 523.251130601197269;
+noteFreq[5]["C#"] = 554.365261953744192;
+noteFreq[5]["D"] = 587.32953583481512;
+noteFreq[5]["D#"] = 622.253967444161821;
+noteFreq[5]["E"] = 659.255113825739859;
+noteFreq[5]["F"] = 698.456462866007768;
+noteFreq[5]["F#"] = 739.988845423268797;
+noteFreq[5]["G"] = 783.990871963498588;
+noteFreq[5]["G#"] = 830.609395159890277;
+noteFreq[5]["A"] = 880.0;
+noteFreq[5]["A#"] = 932.327523036179832;
+noteFreq[5]["B"] = 987.766602512248223;
+
+noteFreq[6]["C"] = 1046.502261202394538;
+noteFreq[6]["C#"] = 1108.730523907488384;
+noteFreq[6]["D"] = 1174.659071669630241;
+noteFreq[6]["D#"] = 1244.507934888323642;
+noteFreq[6]["E"] = 1318.510227651479718;
+noteFreq[6]["F"] = 1396.912925732015537;
+noteFreq[6]["F#"] = 1479.977690846537595;
+noteFreq[6]["G"] = 1567.981743926997176;
+noteFreq[6]["G#"] = 1661.218790319780554;
+noteFreq[6]["A"] = 1760.0;
+noteFreq[6]["A#"] = 1864.655046072359665;
+noteFreq[6]["B"] = 1975.533205024496447;
```
```js
@@ -379,9 +395,17 @@ Com esta tabela no lugar, podemos descobrir a frequência para uma dada nota em
```js hidden
if (!Object.entries) {
- Object.entries = function entries(O) {
- return reduce(keys(O), (e, k) => concat(e, typeof k === 'string' && isEnumerable(O, k) ? [[k, O[k]]] : []), []);
- };
+ Object.entries = function entries(O) {
+ return reduce(
+ keys(O),
+ (e, k) =>
+ concat(
+ e,
+ typeof k === "string" && isEnumerable(O, k) ? [[k, O[k]]] : [],
+ ),
+ [],
+ );
+ };
}
```
@@ -403,12 +427,12 @@ function setup() {
// our purposes we don't need them. Each octave is inserted
// into a
of class "octave".
- noteFreq.forEach(function(keys, idx) {
+ noteFreq.forEach(function (keys, idx) {
let keyList = Object.entries(keys);
let octaveElem = document.createElement("div");
octaveElem.className = "octave";
- keyList.forEach(function(key) {
+ keyList.forEach(function (key) {
if (key[0].length == 1) {
octaveElem.appendChild(createKey(key[0], idx, key[1]));
}
@@ -417,14 +441,16 @@ function setup() {
keyboard.appendChild(octaveElem);
});
- document.querySelector("div[data-note='B'][data-octave='5']").scrollIntoView(false);
+ document
+ .querySelector("div[data-note='B'][data-octave='5']")
+ .scrollIntoView(false);
sineTerms = new Float32Array([0, 0, 1, 0, 1]);
cosineTerms = new Float32Array(sineTerms.length);
customWaveform = audioContext.createPeriodicWave(cosineTerms, sineTerms);
- for (i=0; i<9; i++) {
- oscList[i] = {};
+ for (i = 0; i < 9; i++) {
+ oscList[i] = {};
}
}
@@ -548,7 +574,7 @@ A barra de rolagem do volume na barra de opções dá uma simples interface para
```js
function changeVolume(event) {
- masterGainNode.gain.value = volumeControl.value
+ masterGainNode.gain.value = volumeControl.value;
}
```
diff --git a/files/pt-br/web/api/web_components/index.md b/files/pt-br/web/api/web_components/index.md
index a00a4e551524a4..6528f6c4aebd68 100644
--- a/files/pt-br/web/api/web_components/index.md
+++ b/files/pt-br/web/api/web_components/index.md
@@ -134,23 +134,11 @@ Mais exemplos serão adicionados com o passar do tempo.
## Especificações
-| Especificação | Status | Comentário |
-| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------- |
-| {{SpecName("HTML WHATWG","scripting.html#the-template-element","<template> element")}} | {{Spec2("HTML WHATWG")}} | Definição de {{HTMLElement("template")}}. |
-| {{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}} | {{Spec2("HTML WHATWG")}} | Definição de [Elementos HTML Customizados](/pt-BR/docs/Web/Web_Components/Using_custom_elements). |
-| {{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}} | {{Spec2("DOM WHATWG")}} | Definição de [Shadow DOM](/pt-BR/docs/Web/Web_Components/Using_shadow_DOM). |
-| {{SpecName("HTML Imports", "", "")}} | {{Spec2("HTML Imports")}} | Definição inicial de [HTML Imports](/pt-BR/docs/Web/Web_Components/HTML_Imports). |
-| {{SpecName("Shadow DOM", "", "")}} | {{Spec2("Shadow DOM")}} | Definição inicial de [Shadow DOM](/pt-BR/docs/Web/Web_Components/Using_shadow_DOM). |
+{{Specifications}}
## Compatibilidade com navegadores
-Em geral:
-
-- Web components são suportados por padrão pelo Firefox (versão 63), Chrome, e Opera.
-- Safari suporta muitas das funcionalidades de web component, porém menos do que os navegadores citados acima.
-- Edge está trabalhando na implementação.
-
-Para obter informações detalhadas sobre o suporte de funções específicas nos navegadores, você deve consultar as páginas de referência listadas abaixo.
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/web_components/using_custom_elements/index.md b/files/pt-br/web/api/web_components/using_custom_elements/index.md
index 354023932d6405..369cea22a849c2 100644
--- a/files/pt-br/web/api/web_components/using_custom_elements/index.md
+++ b/files/pt-br/web/api/web_components/using_custom_elements/index.md
@@ -23,7 +23,7 @@ Para registar um custom element na página, use o método {{domxref("CustomEleme
Então, por exemplo, podemos definir um custom element [word-count](https://mdn.github.io/web-components-examples/word-count-web-component/) `(contagem-palavras)` assim:
```js
-customElements.define('word-count', WordCount, { extends: 'p' });
+customElements.define("word-count", WordCount, { extends: "p" });
```
O elemento é chamado de `word-count`, seu objeto de classe é `WordCount`, e estende o elemento {{htmlelement("p")}}.
@@ -81,42 +81,47 @@ Dentro do construtor, definimos toda a funcionalidade que o elemento terá quand
```js
// Create a shadow root
-this.attachShadow({mode: 'open'}); // sets and returns 'this.shadowRoot'
+this.attachShadow({ mode: "open" }); // sets and returns 'this.shadowRoot'
// Create (nested) span elements
-const wrapper = document.createElement('span');
-wrapper.setAttribute('class','wrapper');
-const icon = wrapper.appendChild(document.createElement('span'));
-icon.setAttribute('class','icon');
-icon.setAttribute('tabindex', 0);
+const wrapper = document.createElement("span");
+wrapper.setAttribute("class", "wrapper");
+const icon = wrapper.appendChild(document.createElement("span"));
+icon.setAttribute("class", "icon");
+icon.setAttribute("tabindex", 0);
// Insert icon from defined attribute or default icon
-const img = icon.appendChild(document.createElement('img'));
-img.src = this.hasAttribute('img') ? this.getAttribute('img') : 'img/default.png';
+const img = icon.appendChild(document.createElement("img"));
+img.src = this.hasAttribute("img")
+ ? this.getAttribute("img")
+ : "img/default.png";
-const info = wrapper.appendChild(document.createElement('span'));
-info.setAttribute('class','info');
+const info = wrapper.appendChild(document.createElement("span"));
+info.setAttribute("class", "info");
// Take attribute content and put it inside the info span
-info.textContent = this.getAttribute('data-text');
+info.textContent = this.getAttribute("data-text");
// Create some CSS to apply to the shadow dom
-const style = document.createElement('style');
-style.textContent = '.wrapper {' +
-// CSS truncated for brevity
+const style = document.createElement("style");
+style.textContent =
+ ".wrapper {" +
+ // CSS truncated for brevity
-// attach the created elements to the shadow DOM
-this.shadowRoot.append(style,wrapper);
+ // attach the created elements to the shadow DOM
+ this.shadowRoot.append(style, wrapper);
```
Por fim, registramos nosso custom element no `CustomElementRegistry` usando o método`define()` mencionado anteriormente — nos parâmetros especificamos o nome do elemento e, em seguida, o nome da classe que define sua funcionalidade:
```js
-customElements.define('popup-info', PopUpInfo);
+customElements.define("popup-info", PopUpInfo);
```
Agora está disponível para uso em nossa página. Em nosso HTML, nós o usamos assim:
```html
-
```
@@ -131,9 +136,9 @@ Por exemplo, dê uma olhada neste código de nosso exemplo [popup-info-box-exter
```js
// Aplicar estilos externos ao shadow dom
-const linkElem = document.createElement('link');
-linkElem.setAttribute('rel', 'stylesheet');
-linkElem.setAttribute('href', 'style.css');
+const linkElem = document.createElement("link");
+linkElem.setAttribute("rel", "stylesheet");
+linkElem.setAttribute("href", "style.css");
// Anexe o elemento criado ao shadow dom
shadow.appendChild(linkElem);
@@ -167,16 +172,14 @@ Não explicaremos a funcionalidade do elemento em detalhes aqui, mas você pode
Em seguida, registramos o elemento usando o método `define()` como antes, exceto que, desta vez, ele também inclui um objeto de opções que detalha de qual elemento nosso elemento personalizado herda:
```js
-customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+customElements.define("expanding-list", ExpandingList, { extends: "ul" });
```
Usar o elemento integrado em um documento da web também parece um pouco diferente:
```html
-
...
-
```
@@ -205,10 +208,10 @@ Vejamos um exemplo em uso. O código abaixo é retirado do exemplo [life-cycle-c
O construtor da classe é realmente simples - aqui anexamos um shadow DOM ao elemento e, em seguida, anexamos os elementos vazios {{htmlelement("div")}} e {{htmlelement("style")}} ao shadow root:
```js
-const shadow = this.attachShadow({mode: 'open'});
+const shadow = this.attachShadow({ mode: "open" });
-const div = document.createElement('div');
-const style = document.createElement('style');
+const div = document.createElement("div");
+const style = document.createElement("style");
shadow.appendChild(style);
shadow.appendChild(div);
```
@@ -218,11 +221,11 @@ A função chave neste exemplo é `updateStyle()` — isso pega um elemento, peg
```js
function updateStyle(elem) {
const shadow = elem.shadowRoot;
- shadow.querySelector('style').textContent = `
+ shadow.querySelector("style").textContent = `
div {
- width: ${elem.getAttribute('l')}px;
- height: ${elem.getAttribute('l')}px;
- background-color: ${elem.getAttribute('c')};
+ width: ${elem.getAttribute("l")}px;
+ height: ${elem.getAttribute("l")}px;
+ background-color: ${elem.getAttribute("c")};
}
`;
}
diff --git a/files/pt-br/web/api/web_crypto_api/index.md b/files/pt-br/web/api/web_crypto_api/index.md
index c2ec39f50b1f8c..60af38c8b21025 100644
--- a/files/pt-br/web/api/web_crypto_api/index.md
+++ b/files/pt-br/web/api/web_crypto_api/index.md
@@ -42,10 +42,8 @@ A Web Crypto API pode ser utilizada:
## Especificações
-| Especificação | Status | Comentário |
-| ---------------------------------------- | ------------------------------------ | ----------------- |
-| {{SpecName("Web Crypto API")}} | {{Spec2("Web Crypto API")}} | Definição inicial |
+{{Specifications}}
## Compatibilidade com navegadores
-{{Compat("api.Crypto")}}
+{{Compat}}
diff --git a/files/pt-br/web/api/web_storage_api/index.md b/files/pt-br/web/api/web_storage_api/index.md
index 2566a84de96866..d12cff1547e803 100644
--- a/files/pt-br/web/api/web_storage_api/index.md
+++ b/files/pt-br/web/api/web_storage_api/index.md
@@ -38,9 +38,7 @@ Nós também fornecemos um [event output page](http://mdn.github.io/web-storage-
## Especificações
-| Especificação | Status | Comentário |
-| ------------------------------------ | -------------------------------- | ---------- |
-| {{SpecName('Web Storage')}} | {{Spec2('Web Storage')}} | |
+{{Specifications}}
## Compatibilidade com navegadores
diff --git a/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.md
index ccb417d311a2a7..87ed22336db2f6 100644
--- a/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.md
+++ b/files/pt-br/web/api/web_storage_api/using_the_web_storage_api/index.md
@@ -13,9 +13,9 @@ A API Web Storage fornece mecanismos pelos quais os navegadores podem armazenar
Objetos `Storage` são simples conjuntos contendo pares de chave/valor, de forma parecida com objetos, porém eles permanecem intactos mesmo após a página ser recarregada. As chaves e valores são sempre strings (note que chaves cujo nome seja um número inteiro serão automaticamente convertidas par strings, assim como acontece nos objetos). Você pode acessar esses valores como você faria com um objeto ou usando os métodos {{domxref("Storage.getItem()")}} e {{domxref("Storage.setItem()")}}. As três linhas seguintes definem o valor de `corDefinida` de maneiras diferentes, mas com o mesmo resultado:
```js
-localStorage.corDefinida = '#a4509b';
-localStorage['corDefinida'] = '#a4509b';
-localStorage.setItem('corDefinida', '#a4509b');
+localStorage.corDefinida = "#a4509b";
+localStorage["corDefinida"] = "#a4509b";
+localStorage.setItem("corDefinida", "#a4509b");
```
> **Nota:** Recomendamos que você utilize a API Web Storage (`setItem`, `getItem`, `removeItem`, `key`, `length`) para evitar as [armadilhas](http://www.2ality.com/2012/01/objects-as-maps.html) associadas ao uso de objetos literais como mapas de chave-valor.
@@ -41,37 +41,37 @@ Here is a function that detects whether localStorage is both supported and avail
```js
function storageAvailable(type) {
- try {
- var storage = window[type],
- x = '__storage_test__';
- storage.setItem(x, x);
- storage.removeItem(x);
- return true;
- }
- catch(e) {
- return e instanceof DOMException && (
- // everything except Firefox
- e.code === 22 ||
- // Firefox
- e.code === 1014 ||
- // test name field too, because code might not be present
- // everything except Firefox
- e.name === 'QuotaExceededError' ||
- // Firefox
- e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
- // acknowledge QuotaExceededError only if there's something already stored
- storage.length !== 0;
- }
+ try {
+ var storage = window[type],
+ x = "__storage_test__";
+ storage.setItem(x, x);
+ storage.removeItem(x);
+ return true;
+ } catch (e) {
+ return (
+ e instanceof DOMException &&
+ // everything except Firefox
+ (e.code === 22 ||
+ // Firefox
+ e.code === 1014 ||
+ // test name field too, because code might not be present
+ // everything except Firefox
+ e.name === "QuotaExceededError" ||
+ // Firefox
+ e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&
+ // acknowledge QuotaExceededError only if there's something already stored
+ storage.length !== 0
+ );
+ }
}
```
And here is how you would use it:
```js
-if (storageAvailable('localStorage')) {
+if (storageAvailable("localStorage")) {
// Yippee! We can use localStorage awesomeness
-}
-else {
+} else {
// Too bad, no localStorage for us
}
```
@@ -97,7 +97,7 @@ We have also provided an [event output page](https://mdn.github.io/dom-examples/
To start with on [main.js](https://github.com/mdn/dom-examples/blob/master/web-storage/main.js), we will test whether the storage object has already been populated (i.e., the page was previously accessed):
```js
-if(!localStorage.getItem('bgcolor')) {
+if (!localStorage.getItem("bgcolor")) {
populateStorage();
} else {
setStyles();
@@ -114,17 +114,17 @@ As noted above, values can be retrieved from storage using {{domxref("Storage.ge
```js
function setStyles() {
- var currentColor = localStorage.getItem('bgcolor');
- var currentFont = localStorage.getItem('font');
- var currentImage = localStorage.getItem('image');
+ var currentColor = localStorage.getItem("bgcolor");
+ var currentFont = localStorage.getItem("font");
+ var currentImage = localStorage.getItem("image");
- document.getElementById('bgcolor').value = currentColor;
- document.getElementById('font').value = currentFont;
- document.getElementById('image').value = currentImage;
+ document.getElementById("bgcolor").value = currentColor;
+ document.getElementById("font").value = currentFont;
+ document.getElementById("image").value = currentImage;
- htmlElem.style.backgroundColor = '#' + currentColor;
+ htmlElem.style.backgroundColor = "#" + currentColor;
pElem.style.fontFamily = currentFont;
- imgElem.setAttribute('src', currentImage);
+ imgElem.setAttribute("src", currentImage);
}
```
@@ -136,9 +136,9 @@ Here, the first three lines grab the values from local storage. Next, we set the
```js
function populateStorage() {
- localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
- localStorage.setItem('font', document.getElementById('font').value);
- localStorage.setItem('image', document.getElementById('image').value);
+ localStorage.setItem("bgcolor", document.getElementById("bgcolor").value);
+ localStorage.setItem("font", document.getElementById("font").value);
+ localStorage.setItem("image", document.getElementById("image").value);
setStyles();
}
@@ -161,12 +161,12 @@ The {{domxref("StorageEvent")}} is fired whenever a change is made to the {{domx
On the events page (see [events.js](https://github.com/mdn/dom-examples/blob/master/web-storage/event.js)) the only JavaScript is as follows:
```js
-window.addEventListener('storage', function(e) {
- document.querySelector('.my-key').textContent = e.key;
- document.querySelector('.my-old').textContent = e.oldValue;
- document.querySelector('.my-new').textContent = e.newValue;
- document.querySelector('.my-url').textContent = e.url;
- document.querySelector('.my-storage').textContent = e.storageArea;
+window.addEventListener("storage", function (e) {
+ document.querySelector(".my-key").textContent = e.key;
+ document.querySelector(".my-old").textContent = e.oldValue;
+ document.querySelector(".my-new").textContent = e.newValue;
+ document.querySelector(".my-url").textContent = e.url;
+ document.querySelector(".my-storage").textContent = e.storageArea;
});
```
@@ -179,11 +179,9 @@ Web Storage also provides a couple of simple methods to remove data. We don't us
- {{domxref("Storage.removeItem()")}} takes a single argument — the key of the data item you want to remove — and removes it from the storage object for that domain.
- {{domxref("Storage.clear()")}} takes no arguments, and simply empties the entire storage object for that domain.
-## Specifications
+## Especificações
-| Specification | Status | Comment |
-| ---------------------------------------------------------------------------- | -------------------------------- | ------- |
-| {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}} | {{Spec2('HTML WHATWG')}} | |
+{{Specifications}}
## Compatibilidade com navegadores
diff --git a/files/pt-br/web/api/web_workers_api/index.md b/files/pt-br/web/api/web_workers_api/index.md
index 1248bd0f81aa2d..35371a6613a764 100644
--- a/files/pt-br/web/api/web_workers_api/index.md
+++ b/files/pt-br/web/api/web_workers_api/index.md
@@ -52,10 +52,11 @@ Você pode descobrir mais informações sobre como essas demonstrações funcion
## Especificações
-| Especificação | Status | Comentário |
-| -------------------------------------------------------- | -------------------------------- | ---------------------------------------------------- |
-| {{SpecName('HTML WHATWG', '#toc-workers')}} | {{Spec2('HTML WHATWG')}} | No change from {{SpecName("Web Workers")}}. |
-| {{SpecName('Web Workers')}} | {{Spec2('Web Workers')}} | Initial definition. |
+{{Specifications}}
+
+## Compatibilidade com navegadores
+
+{{Compat}}
## Veja também
diff --git a/files/pt-br/web/api/webgl_api/index.md b/files/pt-br/web/api/webgl_api/index.md
index 4a6ffc5952653c..b2e10aa77f094d 100644
--- a/files/pt-br/web/api/webgl_api/index.md
+++ b/files/pt-br/web/api/webgl_api/index.md
@@ -123,12 +123,7 @@ Veja também os posts [WebGL 2 lands in Firefox](https://hacks.mozilla.org/2017/
## Especificações
-| Especificação | Status | Comentário |
-| ---------------------------------------- | ------------------------------------ | ----------------------------------------------------- |
-| {{SpecName('WebGL')}} | {{Spec2('WebGL')}} | Definição inicial. Baseada em OpenGL ES 2.0 |
-| {{SpecName('WebGL2')}} | {{Spec2('WebGL2')}} | Criada com base no WebGL 1. Baseada em OpenGL ES 3.0. |
-| {{SpecName('OpenGL ES 2.0')}} | {{Spec2('OpenGL ES 2.0')}} | |
-| {{SpecName('OpenGL ES 3.0')}} | {{Spec2('OpenGL ES 3.0')}} | |
+{{Specifications}}
## Compatibilidade com navegadores
diff --git a/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
index e3f9eca7218336..7b2e7aae728795 100644
--- a/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
+++ b/files/pt-br/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
@@ -36,7 +36,10 @@ function initShaders() {
gl.useProgram(shaderProgram);
- vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+ vertexPositionAttribute = gl.getAttribLocation(
+ shaderProgram,
+ "aVertexPosition",
+ );
gl.enableVertexAttribArray(vertexPositionAttribute);
}
```
@@ -74,14 +77,14 @@ function getShader(gl, id) {
Uma vez que o elemento com o ID específico é encontrado, seu texto é lido na variável theSource.
```js
- if (shaderScript.type == "x-shader/x-fragment") {
- shader = gl.createShader(gl.FRAGMENT_SHADER);
- } else if (shaderScript.type == "x-shader/x-vertex") {
- shader = gl.createShader(gl.VERTEX_SHADER);
- } else {
- // Tipo de shader desconhecido
- return null;
- }
+if (shaderScript.type == "x-shader/x-fragment") {
+ shader = gl.createShader(gl.FRAGMENT_SHADER);
+} else if (shaderScript.type == "x-shader/x-vertex") {
+ shader = gl.createShader(gl.VERTEX_SHADER);
+} else {
+ // Tipo de shader desconhecido
+ return null;
+}
```
Uma vez que o código para o shader tenha sido lido, nós observamos o tipo MIME do objeto shader para determinar se é um sombreamento de vértice (MIME type "x-shader/x-vertex") ou um fragmento de shader (MIME type "x-shader/x-fragment"), em seguinda crie um tipo de shader apropriado para a partir do código fonte recuperado.
@@ -144,17 +147,14 @@ A vértice (vertex) do shader define a posição e a forma de cada vértice.
Before we can render our square, we need to create the buffer that contains its vertices. We'll do that using a function we call `initBuffers()`; as we explore more advanced WebGL concepts, this routine will be augmented to create more — and more complex — 3D objects.
```js
-var horizAspect = 480.0/640.0;
+var horizAspect = 480.0 / 640.0;
function initBuffers() {
squareVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
var vertices = [
- 1.0, 1.0, 0.0,
- -1.0, 1.0, 0.0,
- 1.0, -1.0, 0.0,
- -1.0, -1.0, 0.0
+ 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
@@ -173,7 +173,7 @@ Once the shaders are established and the object constructed, we can actually ren
function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
- perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+ perspectiveMatrix = makePerspective(45, 640.0 / 480.0, 0.1, 100.0);
loadIdentity();
mvTranslate([-0.0, 0.0, -6.0]);
@@ -216,7 +216,11 @@ function mvTranslate(v) {
function setMatrixUniforms() {
var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
- gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+ gl.uniformMatrix4fv(
+ pUniform,
+ false,
+ new Float32Array(perspectiveMatrix.flatten()),
+ );
var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
diff --git a/files/pt-br/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/pt-br/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
index b5d2f07924fb21..23d120a95dfa01 100644
--- a/files/pt-br/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
+++ b/files/pt-br/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
@@ -38,7 +38,9 @@ function main() {
// Só continua se o WebGL estiver disponível e funcionando
if (!gl) {
- alert("Incapaz de inicializar o WebGL.Seu navegador ou sua máquina não suporta.");
+ alert(
+ "Incapaz de inicializar o WebGL.Seu navegador ou sua máquina não suporta.",
+ );
return;
}
diff --git a/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md
index ae83a941b57233..2d7b77d19a9dbb 100644
--- a/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md
+++ b/files/pt-br/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md
@@ -18,7 +18,11 @@ Primeiro, vamos dar uma olhada rápida no [HTML que é necessário](https://gith
-