diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-11 18:59:39 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-11 18:59:39 -0500 |
commit | d192fb918b0e2aa8869de6dcc59de8464b6e879a (patch) | |
tree | 3dc6f395a53be89041c52e9326baf908ffa3f3a6 /files/pt-br | |
parent | e3e12548adeb7e1dcfc4d5b32884a225ee2b499d (diff) | |
download | translated-content-d192fb918b0e2aa8869de6dcc59de8464b6e879a.tar.gz translated-content-d192fb918b0e2aa8869de6dcc59de8464b6e879a.tar.bz2 translated-content-d192fb918b0e2aa8869de6dcc59de8464b6e879a.zip |
dump 2020-12-11
Diffstat (limited to 'files/pt-br')
4 files changed, 42 insertions, 45 deletions
diff --git a/files/pt-br/aprender/javascript/objetos/básico/index.html b/files/pt-br/aprender/javascript/objetos/básico/index.html index 613a694750..ef9cb18c95 100644 --- a/files/pt-br/aprender/javascript/objetos/básico/index.html +++ b/files/pt-br/aprender/javascript/objetos/básico/index.html @@ -30,15 +30,15 @@ translation_of: Learn/JavaScript/Objects/Basics <p>Como acontece com muitas coisas em JavaScript, a criação de um objeto geralmente começa com a definição e a inicialização de uma variável. Tente digitar o código a seguir no arquivo que você baixou, salve e atualize:</p> -<pre class="brush: js">var pessoa = {};</pre> +<pre class="brush: js notranslate">var pessoa = {};</pre> <p>Se você inserir <code>pessoa</code> no seu console JS e pressionar o botão, deverá obter o seguinte resultado:</p> -<pre class="brush: js">[object Object]</pre> +<pre class="brush: js notranslate">[object Object]</pre> <p>Parabéns, você acabou de criar seu primeiro objeto. Tarefa concluída! Mas este é um objeto vazio, então não podemos fazer muita coisa com isso. Vamos atualizar nosso objeto para ficar assim:</p> -<pre class="brush: js">var pessoa = { +<pre class="brush: js notranslate">var pessoa = { nome: ['Bob', 'Smith'], idade: 32, sexo: 'masculino', @@ -54,7 +54,7 @@ translation_of: Learn/JavaScript/Objects/Basics <p>Depois de salvar e atualizar, tente inserir alguns dos itens a seguir no console JavaScript no devtools do seu navegador:</p> -<pre class="brush: js">pessoa.nome +<pre class="brush: js notranslate">pessoa.nome pessoa.nome[0] pessoa.idade pessoa.interesses[1] @@ -69,7 +69,7 @@ pessoa.saudacao()</pre> <p>Então, o que está acontecendo? Bem, um objeto é composto de vários membros, cada um com um nome (ex.: <code>nome</code> e <code>idade</code> vistos acima), e um valor (ex.: <code>['Bob', 'Smith']</code> e <code>32</code>). Cada par nome/valor deve ser separado por uma vírgula e o nome e valor, em cada caso, separados por dois pontos. A sintaxe sempre segue esse padrão:</p> -<pre class="brush: js">var nomeDoObjeto = { +<pre class="brush: js notranslate">var nomeDoObjeto = { nomeMembro1: valorMembro1, nomeMembro2: valorMembro2, nomeMembro3: valorMembro3 @@ -85,7 +85,7 @@ pessoa.saudacao()</pre> <p>Acima, você acessou as propriedades de objetos e métodos usando <strong>notação de ponto</strong>. O objeto nome (pessoa) atua como <strong>namespace </strong>(espaço de nomes) — ele deve ser digitado primeiro para que você acesse qualquer coisa <strong>encapsulada </strong>dentro do objeto. Depois você escreve um ponto, então o item que quer acessar — isso pode ser o nome de uma simples propriedade, um item de um array ou a chamada para um dos métodos do objeto, por exemplo: </p> -<pre class="brush: js">pessoa.idade +<pre class="brush: js notranslate">pessoa.idade pessoa.interesse[1] pessoa.bio()</pre> @@ -93,28 +93,28 @@ pessoa.bio()</pre> <p>É até possível fazer o valor de um membro de um objeto ser outro objeto. Por exemplo, tente alterar o nome do membro de:</p> -<pre class="brush: js">nome: ['Bob', 'Smith'],</pre> +<pre class="brush: js notranslate">nome: ['Bob', 'Smith'],</pre> <p>para</p> -<pre class="brush: js">nome : { +<pre class="brush: js notranslate">nome : { primeiro: 'Bob', ultimo: 'Smith' },</pre> <p>Aqui estamos efetivamente criando um <strong>sub-namespace</strong>. Parece difícil, mas não é — para acessar esses itens você apenas precisa encadear mais um passo ao final de outro ponto. Tente isso aqui no console:</p> -<pre class="brush: js">pessoa.nome.primeiro +<pre class="brush: js notranslate">pessoa.nome.primeiro pessoa.nome.ultimo</pre> <p><strong>Importante</strong>: Nesse ponto você também precisará revisar seus métodos e mudar quaisquer instâncias de</p> -<pre class="brush: js">nome[0] +<pre class="brush: js notranslate">nome[0] nome[1]</pre> <p>para</p> -<pre class="brush: js">nome.primeiro +<pre class="brush: js notranslate">nome.primeiro nome.ultimo</pre> <p>Caso contrário seus métodos não funcionarão.</p> @@ -123,12 +123,12 @@ nome.ultimo</pre> <p>Há outra forma de acessar propriedades do objeto — usando notação de colchetes. Ao invés desses:</p> -<pre class="brush: js">pessoa.idade +<pre class="brush: js notranslate">pessoa.idade pessoa.nome.primeiro</pre> <p>Você pode usar:</p> -<pre class="brush: js">pessoa['idade'] +<pre class="brush: js notranslate">pessoa['idade'] pessoa['nome']['primeiro']</pre> <p>Fica muito parecido com a maneira que acessamos itens de um array, e é basicamente a mesma coisa, só que ao invés de usarmos um número de índice para selecionar um item, usamos o nome associado a cada valor. Não é por menos que objetos às vezes são chamados de <strong>arrays associativos</strong> — eles mapeiam strings a valores do mesmo modo que arrays mapeiam números a valores.</p> @@ -137,42 +137,42 @@ pessoa['nome']['primeiro']</pre> <p>Até agora nós apenas procuramos receber (ou <strong>apanhar</strong>) membros de objetos — podemos também <strong>setar </strong>(atualizar) o valor de membros de objetos simplesmente declarando o membro que queremos setar (usando notação de ponto ou colchete), tipo assim:</p> -<pre class="brush: js">pessoa.idade = 45; +<pre class="brush: js notranslate">pessoa.idade = 45; pessoa['nome']['ultimo'] = 'Cratchit';</pre> <p>Tente escrever as linhas acima e então apanhar seus membros novamente para ver como mudaram. Assim:</p> -<pre class="brush: js">pessoa.idade +<pre class="brush: js notranslate">pessoa.idade pessoa['nome']['ultimo']</pre> <p>Não podemos apenas atualizar valores existentes de propriedades e métodos; podemos também criar membros completamente novos. Tente isso aqui no console:</p> -<pre class="brush: js">pessoa['olhos'] = 'castanho'. +<pre class="brush: js notranslate">pessoa['olhos'] = 'castanho'. pessoa.despedida = function() { alert( "Adeus a todos!" ); }</pre> <p>Podemos testar nossos novos membros:</p> -<pre class="brush: js">pessoa['olhos']; +<pre class="brush: js notranslate">pessoa['olhos']; pessoa.despedida();</pre> <p>Um aspecto útil de notação de colchetes é que ela pode ser usadada não apenas para setar valores dinamicamente, mas também nomes de membros. Vamos dizer que queremos que usuários possam armazenar tipos de valores personalizados em seus dados de 'pessoa', digitando o nome e o valor do membro em dois inputs de texto. Podemos obter esses valores dessa forma:</p> -<pre class="brush: js">var myDataName = nameInput.value; +<pre class="brush: js notranslate">var myDataName = nameInput.value; var myDataValue = nameValue.value;</pre> <p>Podemos, então, adicionar esse novo nome e valor ao objeto <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pessoa</span></font> assim:</p> -<pre class="brush: js">pessoa[myDataName] = myDataValue;</pre> +<pre class="brush: js notranslate">pessoa[myDataName] = myDataValue;</pre> <p>Para testar isso, tente adicionar as seguinte linhas em seu código, abaixo do fechamento da chaves do objeto <code>pessoa</code> :</p> -<pre class="brush: js">var myDataName = 'altura'; +<pre class="brush: js notranslate">var myDataName = 'altura'; var myDataValue = '1.75m'; pessoa[myDataName] = myDataValue;</pre> <p>Agora tente salvar e atualizar, entrando o seguinte no seu input de texto:</p> -<pre class="brush: js">pessoa.altura</pre> +<pre class="brush: js notranslate">pessoa.altura</pre> <p>Adicionar uma propriedade a um objeto usando o método acima não é possível com a notação ponto, que só aceita um nome de membro literal, não aceita valor de variável apontando para um nome.</p> @@ -180,7 +180,7 @@ pessoa[myDataName] = myDataValue;</pre> <p>Você pode ter reparado algo levemente estranho em nossos métodos. Olhe esse aqui, por exemplo:</p> -<pre class="brush: js">saudacao: function(){ +<pre class="brush: js notranslate">saudacao: function(){ alert("Oi! Meu nome é " + this.nome.primeiro + "."); }</pre> @@ -188,7 +188,7 @@ pessoa[myDataName] = myDataValue;</pre> <p>Vamos ilustrar o que queremos dizer com um par de objetos pessoa:</p> -<pre class="brush: js">var pessoa1 = { +<pre class="brush: js notranslate">var pessoa1 = { nome: 'Chris', saudacao: function() { alert('Oi! Meu nome é ' + this.nome + '.'); @@ -210,13 +210,13 @@ var pessoa2 = { <p>Então quando usamos métodos de strings como:</p> -<pre class="brush: js">minhaString.split(',');</pre> +<pre class="brush: js notranslate">minhaString.split(',');</pre> <p>Estamos usando um método disponível na instância da class <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Toda vez que você cria uma string em seu código, essa string é automaticamente criada como uma instância de <code>String</code>, e, portanto, possui vários métodos e propriedades comuns que estão disponíveis para ela.</p> <p>Quando você acessa o document object model usando linhas como estas:</p> -<pre class="brush: js">var minhaDiv = document.createElement('div'); +<pre class="brush: js notranslate">var minhaDiv = document.createElement('div'); var meuVideo = document.querySelector('video');</pre> <p>Você está usando métodos disponíveis na instância da class <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. Cada vez que a página é recarrecada, uma instância de <code>Document</code> é criada, chamando <code>document</code>, que representa a estrutura inteira da página, conteúdo e outros recursos como sua URL. Novamente, isso significa que ela tem vários métodos e propriedades disponíveis nela.</p> @@ -225,7 +225,7 @@ var meuVideo = document.querySelector('video');</pre> <p>Note que Objetos/APIs embutidos nem sempre criam instâncias de objetos automaticamente. Por exemplo, a <a href="/en-US/docs/Web/API/Notifications_API">API de Notificações </a>— que permite que navegadores modernos disparem notificações de sistema — requerem que você inicialize uma nova instância de objeto usando o construtor para cada notificação que queira disparar. Tente entrar o seguinte no seu console Javascript:</p> -<pre class="brush: js">var minhaNotificacao = new Notification('Hello!');</pre> +<pre class="brush: js notranslate">var minhaNotificacao = new Notification('Hello!');</pre> <p>Novamente, olharemos constructores num artigo mais na frente.</p> @@ -233,6 +233,10 @@ var meuVideo = document.querySelector('video');</pre> <p><strong>Nota</strong>: É útil pensar sobre como os objetos se comunicam <strong>passando mensagens</strong> - quando um objeto precisa de outro objeto para realizar algum tipo de ação, ele freqüentemente enviará uma mensagem para outro objeto através de um de seus métodos e aguardará uma resposta, que reconhecemos como um valor de retorno.</p> </div> +<h2 id="Teste_suas_habilidades_!">Teste suas habilidades !</h2> + +<p>Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante — veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p> + <h2 id="Resumo">Resumo</h2> <p>Parabéns, você chegou ao final de nosso primeiro artigo sobre objetos JS - agora você deve ter uma boa ideia de como trabalhar com objetos em Javascript - incluindo criar seus próprio objetos simples. Você também deve perceber que objetos são muito úteis como estruturas para armazenar dados e funcionalidades relacionadas - se tentar rastrear todas as propriedades e métodos do nosso objeto <code>pessoa</code> como variáveis e funções separadas, isso seria ineficiente e frustrante e correríamos o risco de termos outras variáveis e funções com o mesmo nome. Objetos nos permite manter informações guardadas em segurança em seus próprios pacotes, fora de perigo.</p> diff --git a/files/pt-br/mdn/comunidade/roles/index.html b/files/pt-br/mdn/comunidade/roles/index.html deleted file mode 100644 index af709a0228..0000000000 --- a/files/pt-br/mdn/comunidade/roles/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Community roles -slug: MDN/Comunidade/Roles -translation_of: MDN/Community/Roles ---- -<div>{{MDNSidebar}}</div> - -<p>Há muitos cargos dentro da comunidade MDN, cada um com responsabilidades específicas.{{LandingPageListSubPages()}}</p> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html index 57699fa5e3..d68e7b49ae 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -8,7 +8,7 @@ tags: - Referencia translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute --- -<p><span class="seoSummary">O atributo <a class="external" href="https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-label" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label"><code>aria-label</code></a> é usado para definir um string na tag do elemento atual. Use nos casos que a tag do texto não seja visível na tela. Se há texto visível na tag do elemento, usa <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a> em vez.</span></p> +<p><span class="seoSummary">O atributo <a class="external" href="https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-label" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label"><code>aria-label</code></a> é usado para definir uma <em>string</em> na <em>tag</em> do elemento atual. Use nos casos que a <em>tag</em> do texto não seja visível na tela. Se há texto visível na <em>tag</em> do elemento, usa <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a> em vez.</span></p> <p>Esse atributo pode ser usado em qualquer elemento de HTML; não se limita aos elementos que tem um papel ARIA atribuído.</p> @@ -18,7 +18,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attr <h3 class="editable" id="Possíveis_efeitos_sobre_os_user_agents_e_Tecnologia_assistiva"><span>Possíveis efeitos sobre os user agents e </span>Tecnologia assistiva<span> </span></h3> -<div class="editIcon" style=""> +<div class="editIcon"> <h3 class="editable" id="sect1"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&sectionId=3" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> </div> @@ -29,25 +29,26 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attr <div id="section_5"> <h4 id="Exemplo_1_Várias_Etiquetas">Exemplo 1: Várias Etiquetas</h4> -<p>No exemplo abaixo, um botão é denominado para olhar como um botão típico "fechar", com um X no meio. Uma vez que não há nada que indique que a finalidade do botão é para fechar a janela, o atributo <code>aria-label</code> é utilizado para fornecer o rótulo para quaisquer tecnologias assistiva.</p> +<p>No exemplo abaixo, um botão é denominado para olhar como um botão típico "fechar", com um X no meio. Uma vez que não há nada que indique que a finalidade do botão é para fechar a janela, o atributo <code>aria-label</code> é utilizado para fornecer o rótulo para quaisquer tecnologias assistivas.</p> </div> -<pre class="deki-transform"><span class="tag"><button aria-label=<span class="str">"Fechar"</span> onclick=<span class="str">"myDialog.close()"</span>></span>X<span class="tag"></button></span> +<pre class="deki-transform notranslate"><span class="tag"><button aria-label=<span class="str">"Fechar"</span> onclick=<span class="str">"myDialog.close()"</span>></span>X<span class="tag"></button></span> </pre> <h4 id="Working_Examples">Working Examples:</h4> -<p> </p> - <h3 id="Notas">Notas</h3> -<p>The most common <em>accessibility API</em> mapping for a label is the <em>accessible name</em> property.</p> +<ul> + <li>O mapeamento mais comum da <em>API</em> <em>accessibility </em>para uma <em>label</em> é a propriedade <em>accessible name</em>.</li> + <li>Atributos, incluindo declarações <code>aria-label</code>, são ignoradas pela maioria dos serviços de tradução automática.</li> +</ul> -<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3> +<h3 id="Usado_por_regras_ARIA">Usado por regras ARIA</h3> <p>todos os elementos da marcação de base</p> -<h3 id="Related_ARIA_techniques">Related ARIA techniques </h3> +<h3 id="Técnicas_ARIA_relacionadas">Técnicas ARIA relacionadas</h3> <ul> <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> @@ -55,7 +56,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attr <h3 id="Compatibilidade">Compatibilidade</h3> -<p class="comment">TBD: Add support information for common UA and AT product combinations</p> +<p class="comment">Ainda por fazer: Adicionar informação de apoio para os combinações de produtos UA e AT mais comuns</p> <h3 id="Recursos_Adicionais">Recursos Adicionais</h3> diff --git a/files/pt-br/web/javascript/guide/indexed_collections/index.html b/files/pt-br/web/javascript/guide/indexed_collections/index.html index 5e9cea67f9..07719a0535 100644 --- a/files/pt-br/web/javascript/guide/indexed_collections/index.html +++ b/files/pt-br/web/javascript/guide/indexed_collections/index.html @@ -174,7 +174,7 @@ cores.forEach(function(cor) { <p>Alternativamente, você pode encurtar o código para o parâmetro do <code>forEach</code> com Arrow Functions ES6.</p> -<pre class="notranslate"><code>var cores = ['vermelho', 'verde', 'azul']; +<pre class="brush: js notranslate"><code>var cores = ['vermelho', 'verde', 'azul']; cores.forEach(cor => console.log(cor)); // vermelho // verde |