O que é JavaScript? - Aprendendo desenvolvimento web

O que é JavaScript?
===================

* Menu: First steps
* Próxima

Sejam bem-vindos ao curso de JavaScript para iniciantes do MDN! Neste primeiro artigo vamos fazer uma análise profunda da linguagem, respondendo questões como "O que é JavaScript?", e "O que ele faz?", para você se sentir confortável com a proposta da linguagem.

|  |  |
| --- | --- |
| Pré requisitos: | Interação básica com o computador, entendimento básico de HTML e CSS. |
| Objetivo: |
 Se familiarizar com a linguagem, com o que ela pode fazer, e como tudo
 isso pode ser utilizado em um website.
  |

Definição de alto nível
-----------------------

JavaScript é uma linguagem de programação que permite a você implementar itens complexos em páginas web — toda vez que uma página da web faz mais do que simplesmente mostrar a você informação estática — mostrando conteúdo que se atualiza em um intervalo de tempo, mapas interativos ou gráficos 2D/3D animados, etc. — você pode apostar que o JavaScript provavelmente está envolvido. É a terceira camada do bolo das tecnologias padrões da web, duas das quais (HTML e CSS) nós falamos com muito mais detalhes em outras partes da Área de Aprendizado.

![](/pt-BR/docs/Learn/JavaScript/First_steps/What_is_JavaScript/cake.png)

* HTML é a linguagem de marcação que nós usamos para estruturar e dar significado para o nosso conteúdo web. Por exemplo, definindo parágrafos, cabeçalhos, tabelas de conteúdo, ou inserindo imagens e vídeos na página.
* CSS é uma linguagem de regras de estilo que nós usamos para aplicar estilo ao nosso conteúdo HTML. Por exemplo, definindo cores de fundo e fontes, e posicionando nosso conteúdo em múltiplas colunas.
* JavaScript é uma linguagem de programação que permite a você criar conteúdo que se atualiza dinamicamente, controlar múltimídias, imagens animadas, e tudo o mais que há de interessante. Ok, não tudo, mas é maravilhoso o que você pode efetuar com algumas linhas de código JavaScript.

As três camadas ficam muito bem uma em cima da outra. Vamos exemplificar com um simples bloco de texto. Nós podemos marcá-lo usando HTML para dar estrutura e propósito:

```html
<p>Jogador 1: Chris</p>
```

![](/pt-BR/docs/Learn/JavaScript/First_steps/What_is_JavaScript/just-html.png)

Nós podemos adicionar um pouco de CSS na mistura, para deixar nosso parágrafo um pouco mais atraente:

```css
p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}
```

![](/pt-BR/docs/Learn/JavaScript/First_steps/What_is_JavaScript/html-and-css.png)

E finalmente, nós podemos adicionar JavaScript para implementar um comportamento dinâmico:

```js
const para = document.querySelector("p");

para.addEventListener("click", atualizarNome);

function atualizarNome() {
  var nome = prompt("Insira um novo nome");
  para.textContent = "Jogador 1: " + nome;
}
```

Experimente clicar no botão acima para ver o que acontece (note também que você pode encontrar essa demonstração no GitHub — veja o código fonte ou veja funcionar)!

JavaScript pode fazer muito mais do que isso — vamos explorar com mais detalhes.

Então o que ele pode realmente fazer?
-------------------------------------

O núcleo da linguagem JavaScript consiste em alguns benefícios comuns da programação que permite a você fazer coisas como:

* Armazenar conteúdo útil em variáveis. No exemplo acima, a propósito, nós pedimos que um novo nome seja inserido e armazenamos o nome em uma variável chamada `nome`.
* Operações com pedaços de texto (conhecidos como "strings" em programação). No exemplo acima, nós pegamos a string "Jogador 1: " e concatenamos (juntamos) com a variável `nome` para criar o texto completo "Jogador 1: Chris".
* Executar o código em resposta a determinados eventos que ocorrem em uma página da Web. Nós usamos o `click (en-US)` no nosso exemplo acima para que quando clicassem no botão, rodasse o código que atualiza o texto.
* E muito mais!

O que é ainda mais empolgante é a funcionalidade construída no topo do núcleo da linguagem JavaScript. As APIs (Application Programming Interfaces - Interface de Programação de Aplicativos) proveem a você superpoderes extras para usar no seu código JavaScript.

APIs são conjuntos prontos de blocos de construção de código que permitem que um desenvolvedor implemente programas que seriam difíceis ou impossíveis de implementar. Eles fazem o mesmo para a programação que os kits de móveis prontos para a construção de casas - é muito mais fácil pegar os painéis prontos e parafusá-los para formar uma estante de livros do que para elaborar o design, sair e encontrar a madeira, cortar todos os painéis no tamanho e formato certos, encontrar os parafusos de tamanho correto e *depois* montá-los para formar uma estante de livros.

Elas geralmente se dividem em duas categorias.

![APIs de terceiros e APIs do navegador](/pt-BR/docs/Learn/JavaScript/First_steps/What_is_JavaScript/browser.png)

**APIs de navegadores** já vem implementadas no navegador, e são capazes de expor dados do ambiente do computador, ou fazer coisas complexas e úteis. Por exemplo:

* A API DOM (Document Object Model) permite a você manipular HTML e CSS, criando, removendo e mudando HTML, aplicando dinamicamente novos estilos para a sua página, etc. Toda vez que você vê uma janela pop-up aparecer em uma página, ou vê algum novo conteúdo sendo exibido (como nós vimos acima na nossa simples demonstração), isso é o DOM em ação.
* A API de Geolocalização recupera informações geográficas. É assim que o Google Maps consegue encontrar sua localização e colocar em um mapa.
* As APIs Canvas e WebGL permite a você criar gráficos 2D e 3D animados. Há pessoas fazendo algumas coisas fantásticas usando essas tecnologias web — veja Chrome Experiments e webglsamples.
* APIs de áudio e vídeo (en-US) como `HTMLMediaElement` (en-US) e WebRTC permitem a você fazer coisas realmente interessantes com multimídia, tanto tocar música e vídeo em uma página da web, como capturar vídeos com a sua câmera e exibir no computador de outra pessoa (veja Snapshot demo para ter uma ideia).

**Nota:** Muitas demonstrações acima não vão funcionar em navegadores antigos — quando você for experimentar, é uma boa ideia usar browsers modernos como Firefox, Edge ou Opera para ver o código funcionar. Você vai precisar estudar testes cross browser (en-US) com mais detalhes quando você estiver chegando perto de produzir código (código real que as pessoas vão usar).

**APIs de terceiros** não estão implementados no navegador automaticamente, e você geralmente tem que pegar seu código e informações em algum lugar da Web. Por exemplo:

* A API do Twitter permite a você fazer coisas como exibir seus últimos tweets no seu website.
* A API do Google Maps permite a você inserir mapas customizados no seu site e outras diversas funcionalidades.

**Nota:** Essas APIs são avançadas e nós não vamos falar sobre nenhuma delas nesse módulo. Você pode achar muito mais sobre elas em nosso módulo APIs web no lado cliente.

Tem muito mais coisas disponíveis! Contudo, não fique animado ainda. Você não estará pronto para desenvolver o próximo Facebook, Google Maps ou Instagram depois de estudar JavaScript por 24 horas — há um monte de coisas básicas para estudar primeiro. E é por isso que você está aqui — vamos começar!

O que JavaScript está fazendo na sua página web?
------------------------------------------------

Aqui nós vamos realmente começar a ver algum código, e enquanto fazemos isso vamos explorar o que realmente acontece quando você roda algum código JavaScript na sua página.

Vamos recaptular brevemente a história do que acontece quando você carrega uma página web em um navegador (falamos sobre isso no nosso artigo Como o CSS funciona). Quando você carrega uma página web no seu navegador, você está executando seu código (o HTML, CSS e JavaScript) dentro de um ambiente de execução (a guia do navegador). Isso é como uma fábrica que pega a matéria prima (o código) e transforma em um produto (a página web).

![](/pt-BR/docs/Learn/JavaScript/First_steps/What_is_JavaScript/execution.png)

Um uso muito comum do JavaScript é modificar dinamicamente HTML e CSS para atualizar uma interface do usuário, por meio da API do Document Object Model (conforme mencionado acima). Observe que o código em seus documentos web geralmente é carregado e executado na ordem em que aparece na página. Se o JavaScript carregar e tentar executar antes do carregamento do HTML e CSS afetado, poderão ocorrer erros. Você aprenderá maneiras de contornar isso mais adiante neste artigo, na seção Estratégias de carregamento de scripts.

### Segurança do navegador

Cada guia do navegador tem seu próprio espaço para executar código (esses espaços são chamados de "ambientes de execução", em termos técnicos) — isso significa que na maioria dos casos o código em cada guia está sendo executado separadamente, e o código em uma guia não pode afetar diretamente o código de outra guia — ou de outro website. Isso é uma boa medida de segurança — se esse não fosse o caso, então hackers poderiam começar a escrever código para roubar informações de outros websites, e fazer outras coisas más.

**Nota:** Há muitas maneiras de trocar código e conteúdo entre diferentes websites/guias de uma forma segura, mas são técnicas avançadas que não serão estudadas nesse curso.

### Ordem de execução do JavaScript

Quando o navegador encontra um bloco de código JavaScript, ele geralmente executa na ordem, de cima para baixo. Isso significa que você precisa ter cuidado com a ordem na qual você coloca as coisas. Por exemplo, vamos voltar ao bloco JavaScript que nós vimos no primeiro exemplo:

```js
const para = document.querySelector("p");

para.addEventListener("click", atualizarNome);

function atualizarNome() {
  let nome = prompt("Informe um novo nome:");
  para.textContent = "Jogador 1: " + nome;
}
```

Aqui nós estamos selecionando um parágrafo (linha 1) e anexando a ele um *event listener* (linha 3). Então, quando o parágrafo recebe um clique, o bloco de código `atualizarNome()` (linhas 5 a 8) é executado. O bloco de código `atualizarNome()`(esses tipos de bloco de código reutilizáveis são chamados "funções") pede ao usuário que informe um novo nome, e então insere esse nome no parágrafo, atualizando-o.

Se você inverte a ordem das duas primeiras linhas de código, ele não fucionaria — em vez disso, você receberia um erro no console do navegador — `TypeError: para is undefined`. Isso significa que o objeto `para` não existe ainda, então nós não podemos adicionar *um event listener* a ele.

**Nota:** Esse é um erro muito comum — você precisa verificar se os objetos aos quais você se refere no seu código existem antes de você tentar anexar coisas a eles.

### Código interpretado x compilado

Você pode ouvir os termos **interpretado** e **compilado** no contexto da programação. JavaScript é uma linguagem interpretada — o código é executado de cima para baixo e o resultado da execução do código é imediatamente retornado. Você não tem que transformar o código em algo diferente antes do navegador executa-lo.

Linguagens compiladas, por outro lado, são transformadas (compiladas) em algo diferente antes que sejam executadas pelo computador. Por exemplo, C/C++ são compiladas em linguagem Assembly, e depois são executadas pelo computador.

JavaScript é uma linguagem de programação leve e interpretada. O navegador recebe o código JavaScript em sua forma de texto original e executa o script a partir dele. Do ponto de vista técnico, a maioria dos intérpretes modernos de JavaScript realmente usa uma técnica chamada **compilação just-in-time** para melhorar o desempenho; o código-fonte JavaScript é compilado em um formato binário mais rápido enquanto o script está sendo usado, para que possa ser executado o mais rápido possível. No entanto, o JavaScript ainda é considerado uma linguagem interpretada, pois a compilação é manipulada em tempo de execução, e não antes.

Há vantagens em ambos os tipos de linguagem, mas nós não iremos discutir no momento.

### Lado do servidor x Lado do cliente

Você pode também ouvir os termos **lado do servidor (*server-side*)** e **lado do cliente (*client-side*)**, especialmente no contexto de desenvolvimento web. Códigos do lado do cliente são executados no computador do usuário — quando uma página web é visualizada, o código do lado do cliente é baixado, executado e exibido pelo navegador. Nesse módulo JavaScript nós estamos explicitamente falando sobre **JavaScript do lado do cliente**.

Códigos do lado do servidor, por outro lado, são executados no servidor e o resultado da execução é baixado e exibido no navegador. Exemplos de linguagens do lado do servidor populares incluem PHP, Python, Ruby, e ASP.NET. E JavaScript! JavaScript também pode ser usada como uma linguagem *server-side*, por exemplo, no popular ambiente Node.js — você pode encontrar mais sobre JavaScript do lado do servidor no nosso tópico Websites dinâmicos - Programação do lado do servidor.

### Código dinâmico x estático

A palavra **dinâmico** é usada para descrever tanto o JavaScript *client-side* como o *server-side* — essa palavra se refere a habilidade de atualizar a exibição de uma página web/app para mostrar coisas diferentes em circunstâncias diferentes, gerando novo conteúdo como solicitado. Código do lado do servidor dinamicamente gera novo conteúdo no servidor, puxando dados de um banco de dados, enquanto que JavaScript do lado do cliente dinamicamente gera novo conteúdo dentro do navegador do cliente, como criar uma nova tabela HTML com dados recebidos do servidor e mostrar a tabela em uma página web exibida para o usuário. Os significados são ligeiramente diferente nos dois contextos, porém relacionados, e ambos (JavaScript *server-side* e *client-side*) geralmente trabalham juntos.

Uma página web sem atualizações dinâmicas é chamada de **estática** — ela só mostra o mesmo conteúdo o tempo todo.

Como você adiciona JavaScript na sua página?
--------------------------------------------

O JavaScript é inserido na sua página de uma maneira similar ao CSS. Enquanto o CSS usa o elemento `<link>` para aplicar folhas de estilo externas e o elemento `<style>` para aplicar folhas de estilo internas, o JavaScript só precisa de um amigo no mundo do HTML — o elemento `<script>`. Vamos aprender como funciona.

### JavaScript interno

1. Antes de tudo, faça uma cópia local do nosso arquivo de exemplo aplicando-javascript.html. Salve-o em alguma pasta, de uma forma sensata.
2. Abra o arquivo no seu navegador web e no seu editor de texto. Você verá que o HTML cria uma simples página web contendo um botão clicável.
3. Agora, vá até o seu editor de texto e adicione o código a seguir antes da tag de fechamento `</body>`:

```html
<script>
 // O JavaScript fica aqui
</script>
```

4. Agora nós vamos adicionar um pouco de JavaScript dentro do nosso elemento `<script>` para que a página faça algo mais interessante — adicione o seguinte código abaixo da linha "// O JavaScript fica aqui":

```js
function criarParagrafo() {
  let para = document.createElement("p");
  para.textContent = "Você clicou no botão!";
  document.body.appendChild(para);
}

const botoes = document.querySelectorAll("button");

for (var i = 0; i < botoes.length; i++) {
  botoes[i].addEventListener("click", criarParagrafo);
}
```

5. Salve seu arquivo e recarregue a página — agora você deveria ver que quando você clique no botão, um novo parágrafo é gerado e colocado logo abaixo.

**Nota:** Se seu exemplo não parece funcionar, leia cada passo novamente e confira que você fez tudo certo. Você salvou sua cópia local do código inicial como um arquivo .html? Você adicionou o elemento `<script>` imediatamente antes da tag `</body>`? Você digitou o código JavaScript exatamente como ele está sendo mostrado? **JavaScript é uma linguagem case sensitive (isso significa que a linguagem vê diferença entre letras maiúsculas e minúsculas) e muito confusa, então você precisa digitar a sintaxe exatamente como foi mostrada, senão não vai funcionar.**

**Nota:** Você pode ver essa versão no GitHub como apicando-javascript-interno.html (veja funcionar também).

### JavaScript externo

Isso funciona muito bem, mas e se nós quiséssemos colocar nosso JavaScript em um arquivo externo? Vamos explorar isso agora.

1. Primeiro, crie um novo arquivo na mesma pasta que está o arquivo HTML de exemplo. Chame-o de `script.js` — tenha certeza de que o nome do arquivo tem a extensão `.js`, pois é assim que ele será reconhecido como JavaScript.
2. Agora substitua o elemento atual `<script>` pelo seguinte código:

```html
<script src="script.js" defer></script>
```

3. Em `script.js`, adicione o seguinte script:

```js
function createParagraph() {
  let para = document.createElement("p");
  para.textContent = "Você clicou no botão!";
  document.body.appendChild(para);
}

const buttons = document.querySelectorAll("button");

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", createParagraph);
}
```

4. Salve e atualize seu navegador, e você deverá ver a mesma coisa! Funciona igualmente, mas agora nós temos o JavaScript em um arquivo externo. Isso é geralmente uma coisa boa em termos de organização de código, e faz com que seja possível reutilizar o código em múltiplos arquivos HTML. Além disso, o HTML fica mais legível sem grandes pedaços de script no meio dele.

**Nota:** Você pode ver essa versão no GitHub como aplicando-javascript-externo.html e script.js (veja funcionar também).

### Manipuladores de JavaScript inline

Note que às vezes você vai encontrar código JavaScript escrito dentro do HTML. Isso deve ser algo como:

```js
function criarParagrafo() {
  let para = document.createElement("p");
  para.textContent = "Você clicou o botao!";
  document.body.appendChild(para);
}
```

```html
<button onclick="criarParagrafo()">Me clique!</button>
```

Você pode tentar essa versão na nossa demonstração abaixo.

Essa demonstração tem exatamente a mesma funcionalidade que vimos nas primeiras duas seções, exceto que o elemento `<button>` inclui um manipulador *inline* `onclick` para fazer a função ser executada quando o botão é clicado.

**Contudo, por favor, não faça isso.** É uma má prática poluir seu HTML com JavaScript, e isso é ineficiente — você teria que incluir o atributo `onclick="criarParagrafo()"` em todo botão que você quisesse aplicar JavaScript.

Usando uma estrutura feita de puro JavaScript permite a você selecionar todos os botões usando uma instrução. O código que nós usamos acima para servir a esse propósito se parece com isso:

```js
const botoes = document.querySelectorAll("button");

for (var i = 0; i < botoes.length; i++) {
  botoes[i].addEventListener("click", criarParagrafo);
}
```

Isso talvez parece ser mais do que o atributo `onclick`, mas isso vai funcionar para todos os botões, não importa quantos tem na página, e quantos forem adicionados ou removidos. O JavaScript não precisará ser mudado.

**Nota:** Tente editar a sua versão do arquivo `aplicar-javascript.html`, adicionando alguns botões a mais. Quando você recarregar, você deverá ver que todos os botões, quando clicados, irão criar parágrafos. Agradável, não?

### Estratégias para o carregamento de scripts

Há um considerável número de problemas envolvendo o carregamento de scripts na ordem correta. Infelizmente, nada é tão simples quanto parece ser! Um problema comum é que todo o HTML de uma página é carregado na ordem em que ele aparece. Se você estiver usando Javascript para manipular alguns elementos da página (sendo mais preciso, manipular o Document Object Model), seu código não irá funcionar caso o JavaScript for carregado e executado antes mesmo dos elementos HTML estarem disponíveis.

Nos exemplos acima, tanto nos scripts internos ou externos, o JavaScript é carregado e acionado dentro do cabeçalho do documento, antes do corpo da página ser completamente carregado. Isso poderá causar algum erro. Assim, temos algumas soluções para isso.

No exemplo interno, você pode ver essa estrutura em volta do código:

```js
document.addEventListener("DOMContentLoaded", function() {
  ...
});
```

Isso é um *event listener* (ouvidor de eventos\*)\*, que ouve e aguarda o disparo do evento "DOMContentLoaded" vindo do *browser*, evento este que significa que o corpo do HTML está completamente carregado e pronto. O código JavaScript que estiver dentro desse bloco não será executado até que o evento seja disparado, portanto, o erro será evitado (você irá aprender sobre eventos mais tarde).

No exemplo externo, nós usamos um recurso moderno do JavaScript para resolver esse problema: Trata-se do atributo `defer`, que informa ao *browser* para continuar renderizando o conteúdo HTML uma vez que a tag `<script>` foi atingida.

```js
<script src="script.js" defer></script>
```

Neste caso, ambos script e HTML irão carregar de forma simultânea e o código irá funcionar.

**Nota:** No caso externo, nós não precisamos utilizar o evento `DOMContentLoaded` porque o atributo `defer` resolve o nosso problema. Nós não utilizamos `defer` como solução para os exemplos internos pois `defer` funciona apenas com scripts externos.

Uma solução à moda antiga para esse problema era colocar o elemento script bem no final do body da página (antes da tag `</body>)`. Com isso, os scripts iriam carregar logo após todo o conteúdo HTML. O problema com esse tipo de solução é que o carregamento/renderização do script seria completamente bloqueado até que todo o conteúdo HTML fosse analisado. Em sites de maior escala, com muitos scripts, essa solução causaria um grande problema de performance e deixaria o site lento.

#### async e defer

Atualmente, há dois recursos bem modernos que podermos usar para evitar o problema com o bloqueio de scripts — `async` e `defer` (que vimos acima). Vamos ver as diferenças entre esses dois?

Os scripts que são carregados usando o atributo `async` (veja abaixo) irão baixar o script sem bloquear a renderização da página e irão executar imediatamente após o script terminar de ser disponibilizado. Nesse modo você não tem garantia nenhuma que os scripts carregados irão rodar em uma ordem específica, mas saberá que dessa forma eles não irão impedir o carregamento do restante da página. O melhor uso para o `async` é quando os scripts de uma página rodam de forma independente entre si e também não dependem de nenhum outro script.

Por exemplo, se você tiver os seguintes elementos script:

```html
<script async src="js/vendor/jquery.js"></script>

<script async src="js/script2.js"></script>

<script async src="js/script3.js"></script>
```

Você não pode garantir que o script. `jquery.js` carregará antes ou depois do `script2.js` e `script3.js` . Nesse caso, se alguma função desses scripts dependerem de algo vindo do `jquery`, ela produzirá um erro pois o `jquery` ainda não foi definido/carregado quando os scripts executaram essa função.

`async` deve ser usado quando houver muitos scripts rodando no *background*, e você precisa que estejam disponíveis o mais rápido possível. Por exemplo, talvez você tenha muitos arquivos de dados de um jogo para carregar que serão necessários assim que o jogo iniciar, mas por enquanto, você só quer entrar e ver a tela de carregamento, a do titulo do jogo e o *lobby*, sem ser bloqueado pelo carregamento desses scripts.

Scripts que são carregados utilizando o atributo `defer` (veja abaixo) irão rodar exatamente na ordem em que aparecem na página e serão executados assim que o script e o conteúdo for baixado.

```html
<script defer src="js/vendor/jquery.js"></script>

<script defer src="js/script2.js"></script>

<script defer src="js/script3.js"></script>
```

Todos os scripts com o atributo `defer` irão carregar na ordem que aparecem na página. No segundo exemplo, podemos ter a certeza que o script `jquery.js` irá carregar antes do `script2.js` e `script3.js` e o `script2.js` irá carregar antes do `script3.js`. Os scripts não irão rodar sem que antes todo o conteúdo da página seja carregado, que no caso, é muito útil se os seus scripts dependem de um DOM completamente disponibilizado em tela (por exemplo, scripts que modificam um elemento).

Resumindo:

* `async` e `defer` istruem o *browser* a baixar os scripts numa *thread* (processo) à parte, enquanto o resto da página (o DOM, etc.) está sendo baixado e disponibilizado de forma não bloqueante.
* Se os seus scripts precisam rodar imediatamente, sem que dependam de outros para serem executados, use `async`.
* Se seus scripts dependem de outros scripts ou do DOM completamente disponível em tela, carregue-os usando `defer` e coloque os elementos `<script>` na ordem exata que deseja que sejam carregados.
Comentários
-----------

Assim como HTML e CSS, é possível escrever comentários dentro do seu código JavaScript que serão ignorados pelo navegador, e existirão simplesmente para prover instruções aos seus colegas desenvolvedores sobre como o código funciona (e pra você, se você tiver que voltar ao seu código depois de 6 meses e não se lembrar do que fez). Comentários são muito úteis, e você deveria usá-los frequentemente, principalmente quando seus códigos forem muito grandes. Há dois tipos:

* Um comentário de uma linha é escrito depois de duas barras. Por exemplo:

```js
// Eu sou um comentário
```

* Um comentário de múltiplas linhas é escrito entre os caracteres /\* e \*/. Por exemplo:

```js
/\*
 Eu também sou
 um comentário
\*/
```

Então, por exemplo, você poderia fazer anotações na nossa última demonstração de código JavaScript, da seguinte forma:

```js
// Função: Cria um novo parágrafo e o insere no fim do arquivo HTML.

function criarParagrafo() {
  var para = document.createElement("p");
  para.textContent = "Você clicou no botão!";
  document.body.appendChild(para);
}

/\*
 1. Captura referências de todos os botões na página e armazena isso em um array.
 2. Vai até todos os botões e adiciona um event listener click a cada um deles.

 Quando cada botão é clicado, a função criarParagrafo() será executada.
\*/

const botoes = document.querySelectorAll("button");

for (var i = 0; i < botoes.length; i++) {
  botoes[i].addEventListener("click", criarParagrafo);
}
```

**Nota:** Em geral mais comentários são melhores que menos, porém você deve tomar cuidado para não adicionar comentários de mais tentando explicar o que uma variável é (o nome da sua variável deve ser mais intuitivo), ou tentando explicar uma operação simples (talvez seu código seja muito complicado denecessariamente).

Sumário
-------

Então, esse foi o seu primeiro passo no mundo do JavaScript. Nós iniciamos apenas com teoria, então te ensinamos porque usar JavaScript e que tipo de coisa você pode fazer com ele. Pelo caminho você viu alguns códigos de exemplo e aprendeu como JavaScript se encaixa com o resto do código do seu site, entre outras coisas.

O JavaScript talvez pareça um pouco assustador agora, mas não se preocupe — nesse curso você será guiado passo a passo, e tudo vai começar a fazer sentido. No próximo artigo vamos mergulhar direto para a prática, levando você a construir seu próprio código JavaScript.

* Menu: First steps
* Próxima


Arrays - Aprendendo desenvolvimento web

Arrays
======

* Anterior
* Menu: First steps
* Próxima

Neste artigo final do módulo, nós vamos dar uma olhada em arrays - um elegante meio de armazenar uma lista de itens em uma mesmo variável. Aqui nós vemos o porquê isto é útil, depois exploraremos como criar uma array, recuperar, adicionar e remover itens armazenados em uma array, e mais.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Leitura básica sobre computadores, um básico entendimento de HTML e CSS,
 e conhecimento sobre o que é JavaScript.
  |
| Objetivo: | Entender o que é array e como manipular ela em JavaScript. |

O que é uma array?
------------------

Arrays são geralmente descritas como "lista de objetos"; elas são basicamente objetos que contem múltiplos valores armazenados em uma lista. Um objeto array pode ser armazenado em variáveis e ser tratado de forma muito similar a qualquer outro tipo de valor, a diferença está em podermos acessar cada valor dentro da lista individualmente, e fazer super úteis e eficientes coisas com a lista, como laço através da lista e fazer a mesma coisa para cada valor. Talvez nós pegamos uma série de produtos e seus preços armazenados em uma array, e nós queremos fazer um laço através de todos eles e mostrar em um recibo, enquanto somamos todos os preços e mostramos o preço total ao final.

Se nós não tivessemos arrays, teríamos que armazenar cada item em uma variável separada, então chamar o código para mostrar e adicionar separadamente cada item. Isto seria muito mais longo de escrever, menos eficiente e mais suscetível a erros. Se nós temos 10 itens para adicionar na fatura, isto é ruim o bastante, mas e se fosse 100 itens ou 1000? Nós vamos retornar a este exemplo mais tarde neste artigo.

Como no artigo anterior, vamos aprender o básico de arrays introduzindo com alguns exemplos dentro de um console JavaScript. Nós fornecemos um abaixo (você também pode abrir este console em uma aba separada ou janela, ou usar o console de desenvolvedor do navegador se preferir).
```

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript console</title>
    <style>
 \* {
 box-sizing: border-box;
 }

 html {
 background-color: #0c323d;
 color: #809089;
 font-family: monospace;
 }

 body {
 max-width: 700px;
 }

 p {
 margin: 0;
 width: 1%;
 padding: 0 1%;
 font-size: 16px;
 line-height: 1.5;
 float: left;
 }

 .input p {
 margin-right: 1%;
 }

 .output p {
 width: 100%;
 }

 .input input {
 width: 96%;
 float: left;
 border: none;
 font-size: 16px;
 line-height: 1.5;
 font-family: monospace;
 padding: 0;
 background: #0c323d;
 color: #809089;
 }

 div {
 clear: both;
 }
 </style>
  </head>
  <body></body>

  <script>
 var geval = eval;
 function createInput() {
 var inputDiv = document.createElement("div");
 var inputPara = document.createElement("p");
 var inputForm = document.createElement("input");

 inputDiv.setAttribute("class", "input");
 inputPara.textContent = ">";
 inputDiv.appendChild(inputPara);
 inputDiv.appendChild(inputForm);
 document.body.appendChild(inputDiv);

 if (document.querySelectorAll("div").length > 1) {
 inputForm.focus();
 }

 inputForm.addEventListener("change", executeCode);
 }

 function executeCode(e) {
 try {
 var result = geval(e.target.value);
 } catch (e) {
 var result = "error — " + e.message;
 }

 var outputDiv = document.createElement("div");
 var outputPara = document.createElement("p");

 outputDiv.setAttribute("class", "output");
 outputPara.textContent = "Result: " + result;
 outputDiv.appendChild(outputPara);
 document.body.appendChild(outputDiv);

 e.target.disabled = true;
 e.target.parentNode.style.opacity = "0.5";

 createInput();
 }

 createInput();
 </script>
</html>
```

### Criando uma array

Arrays são contruídas de colchetes, os quais contém uma lista de itens separada por vírgulas.

1. Vamos supor que queremos armazenar uma lista de compras em uma array — nós temos algo como o seguinte. Digite as linhas abaixo no seu console:

```js
var shopping = ["bread", "milk", "cheese", "hummus", "noodles"];
shopping;
```

2. Neste caso, cada item na array é uma string, mas tenha em mente que você pode armazenar qualquer item em uma array — string, número, objeto, outra variável, até outra array. Você pode também misturar e combinar tipos de itens — eles não têm que ser todos números, strings, etc. Tente isto:

```js
var sequence = [1, 1, 2, 3, 5, 8, 13];
var random = ["tree", 795, [0, 1, 2]];
```

3. Tente criar um par de arrays você mesmo, antes de seguir em frente.
### Acessando e modificando itens de uma array

Você pode acessar itens individuais em uma array usando a notação de colchetes, da mesma forma que você acessa as letras em uma string.

1. Digite o seguinte no seu console:

```js
shopping[0];
// returns "bread"
```

2. Você também pode modificar um item em uma array simplesmente dando um novo valor ao item. Tente isto:

```js
shopping[0] = "tahini";
shopping;
// shopping vai retornar agora [ "tahini", "milk", "cheese", "hummus", "noodles" ]
```

**Nota:** Nós dissemos isto antes, mas como lembrete — computadores começam a contar do 0!
3. Note que uma array dentro de uma array é chamada de array multidimensional. Você pode acessar um item dentro de uma array que está localizada dentro de outra array, colocando dois conjuntos de colchetes juntos. Por exemplo, para acessar um dos itens dentro de uma array, que é o terceiro item dentro da array `random` (veja a seção anterior), nós podemos fazer algo tipo isto:

```js
random[2][2];
```

4. Antes de continuar, faça algumas modificações nos exemplos, crie seus próprios arrays e veja o que funciona e o que não funciona. Divirta-se!
### Encontrando o comprimento de uma array

Você pode encontrar o comprimento de uma array (quantos itens existem nela) exatamente do mesmo jeito que você encontra o comprimento (em caracteres) de uma string — usando a propriedade `length`. Tente o seguinte:

```js
sequence.length;
// deve retornar 7
```

Isto tem outras funcionalidades, mas é mais comum usar em um laço para seguir todos os itens em uma array. Então, por exemplo:

```js
var sequence = [1, 1, 2, 3, 5, 8, 13];
for (var i = 0; i < sequence.length; i++) {
  console.log(sequence[i]);
}
```

Você irá aprender sobre laços propriamente em um artigo futuro, mas, brevemente, este código está dizendo:

1. Comece o laço no item número 0 na array.
2. Pare o laço no item de número igual ao comprimento da array. Isto funcionará para uma array de qualquer tamanho, mas neste caso vai parar o laço no item 7 (isto é bom, como o último item — que nós queremos que o laço cubra — é 6.
3. Para cada item, imprima no console do navegador com `console.log()`.
Alguns métodos úteis em array
-----------------------------

Nesta seção vamos ver alguns métodos relacionados a array úteis que nos permitem dividir strings em itens de array e vice-versa, e adicionar novos itens em arrays.

### Convertendo entre strings e arrays

Frequentemente você vai se deparar com alguns dados contidos em uma grande e longa string, e você pode querer separar os itens em uma forma mais útil e então manipular eles, como mostrar em uma tabela. Para fazer isto, nós podemos usar o método `split()`. Nesta forma mais simples, ela pega um parâmetro solitário, o caracter que você deseja separar da string e retorna o restante antes e depois do item separado na array.

**Nota:** Ok, isto é tecnicamente um método de string, não um método de array, mas nós podemos colocar em arrays já que cai bem.

1. Vamos brincar com isto para ver como funciona. Primeiro, crie uma string no seu console:

```js
var myData = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle";
```

2. Agora vamos dividir isto em cada vírgula:

```js
var myArray = myData.split(",");
myArray;
```

3. Finalmente, tentamos encontrar o comprimento da sua nova array, e recuperar alguns itens dela:

```js
myArray.length;
myArray[0]; // the first item in the array
myArray[1]; // the second item in the array
myArray[myArray.length - 1]; // the last item in the array
```

4. Você também pode ir no sentido oposto usando o método `join()`. Tente o seguinte:

```js
var myNewString = myArray.join(",");
myNewString;
```

5. Outro jeito de converter uma array em uma string é usar o método `toString()`. `toString()` é indiscutivelmente mais simples que o `join()` pois não necessita um parâmetro, mas mais limitado. Com `join()` você pode especificar diferentes separadores (tente o passo 4 com um caracter diferente da vírgula).

```js
var dogNames = ["Rocket", "Flash", "Bella", "Slugger"];
dogNames.toString(); //Rocket,Flash,Bella,Slugger
```

### Adicionando e removendo itens de arrays

Nós ainda não falamos sobre adicionar e remover itens de uma array — vamos dar uma olhada agora. Nós vamos usar a array `myArray` que acabamos de criar na última seção. Se você não viu a última seção, primeiro crie a array no seu console:

```js
var myArray = [
  "Manchester",
  "London",
  "Liverpool",
  "Birmingham",
  "Leeds",
  "Carlisle",
];
```

Antes de tudo, para adicionar ou remover um item no final de uma array, nós podemos usar `push()` e `pop()` respectivamente.

1. note que você precisa para incluir um ou mais itens ao final da sua array. Tente isto:

```js
myArray.push("Cardiff");
myArray;
myArray.push("Bradford", "Brighton");
myArray;
```

2. O novo comprimento da array é retornado quando a chamada do método completa. Se você quer armazenar o novo comprimento da array em uma variável, você poderia fazer algo como isto:

```js
var newLength = myArray.push("Bristol");
myArray;
newLength;
```

3. Removendo o último item da array é tão simples como um `pop()` nele. Tente isto:

```js
myArray.pop();
```

4. O item que foi removido é retornado quando a chamada do método completa. Para salvar o item em uma nova variável, você poderia fazer isto:

```js
var removedItem = myArray.pop();
myArray;
removedItem;
```

`unshift()` e `shift()` funciona exatamente do mesmo modo que `push()` e `pop()`, respectivamente, exceto que eles funcionam no começo da array, não no final.

1. Primeiro `unshift()` — tente os seguintes comandos:

```js
myArray.unshift("Edinburgh");
myArray;
```

2. Agora `shift()`;Tente estes!

```js
var removedItem = myArray.shift();
myArray;
removedItem;
```

Aprendizado ativo: Imprimindo aqueles produtos!
-----------------------------------------------

Vamos retornar ao exemplo que descrevemos antes — imprimindo nomes de produtos e preços em uma fatura, então totalizando os preços e imprindindo eles ao final. No exemplo editável abaixo há comentários contendo números — cada um deles marcam um lugar onde você tem que acidionar algo ao código. Eles são como segue:

1. Abaixo do comentário `// number 1` está um número de strings, cada uma contendo um nome de produto e preço separado por uma vírgula. Nós gostaríamos que você colocasse eles dentro de uma array e armazenasse eles na array chamada `products`.
2. Na mesma linha o comentário `// number 2` está no começo de um laço for. Nesta linha nós temos `i<=0`, o qual é um teste condicional que faz o laço for parar imediatamente, porque está dizendo "pare quando `i` for menor ou igual a 0", e `i` começa em 0. Nós gostaríamos de substituir isto com um teste condicional que termina o laço quando o `i`for menor que o tamanho da array `products`.
3. Logo abaixo do comentário `// number 3` nós queremos que você escreva uma linha de código que divide o item da array (`name:price`) em dois itens separados, um contendo somente o nome e outro só com o preço. Se você não tem certeza de como fazer isto, consulte o artigo Métodos úteis em stringpara alguma ajuda, ou ainda melhor, veja a seção Converting between strings and arrays neste artigo.
4. Como parte da linha de código acima, você também quer converter o preço de string para número. Se você não se lembra como fazer isto, veja o artigo primeiras strings.
5. Há uma variável chamada `total` que é criada e atribuída o valor 0 no começo do código. Dentro do loop (abaixo `// number 4`) nós queremos que você escreva uma linha que adicione o preço atual ao total em cada iteração do laço, então ao final do código o preço total é impresso na fatura. Você pode precisar de um operador aritiméticos para isto.
6. Nós queremos que você mude a linha logo abaixo de `// number 5` para que a variável `itemText` seja igual a "nome do item atual - $preço do item atual", por exemplo "Shoes - $23.99" em cada caso, então a informação correta para cada item é impressa na fatura. Esta é uma simples concatenação de string, a qual deveria ser familiar para você.
```

<h2>Live output</h2>

<div class="output" style="min-height: 150px;">
  <ul></ul>

  <p></p>
</div>

<h2>Editable code</h2>

<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="playable-code" style="height: 410px;width: 95%">
var list = document.querySelector('.output ul');
var totalBox = document.querySelector('.output p');
var total = 0;
list.innerHTML = '';
totalBox.textContent = '';
// number 1
                'Underpants:6.99'
                'Socks:5.99'
                'T-shirt:14.99'
                'Trousers:31.99'
                'Shoes:23.99';

for (var i = 0; i <= 0; i++) { // number 2
  // number 3

  // number 4

  // number 5
  itemText = 0;

  var listItem = document.createElement('li');
  listItem.textContent = itemText;
  list.appendChild(listItem);
}

totalBox.textContent = 'Total: $' + total.toFixed(2);
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

var jsSolution =
  "var list = document.querySelector('.output ul');\nvar totalBox = document.querySelector('.output p');\nvar total = 0;\nlist.innerHTML = '';\ntotalBox.textContent = '';\n\nvar products = ['Underpants:6.99',\n 'Socks:5.99',\n 'T-shirt:14.99',\n 'Trousers:31.99',\n 'Shoes:23.99'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(':');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + ' — $' + price;\n\n var listItem = document.createElement('li');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = 'Total: $' + total.toFixed(2);";
var solutionEntry = jsSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background-color: #f5f9fa;
}
```

Aprendizado ativo: Top 5 buscadores
-----------------------------------

Um bom uso para os métodos de array como `push()` e `pop()` está quando você está mantendo um registro de itens atuais ativos em um aplicativo web. Em uma cena animada, por exemplo, você pode ter uma array de objetos representando o gráfico de fundo mostrado atualmente, e você pode querer somente mostrar 50 por vez, para performace ou alguma razão de ordem. Como novos objetos são criados e adicionados na array, os antigos podem ser deletados da array para manter o número desejado.

Neste exemplo nós vamos mostrar um uso bem mais simples — aqui nós estamos dando a você um falso site de busca, com uma caixa de busca. A idéia é que quando termos são digitados na caixa de busca, os 5 principais termos de busca anterior sejam mostrados na lista. Quando o número de termos passar de 5, o último termo começa sendo deletado. A cada vez um novo termo é adicionado ao topo, então os 5 termos anteriores são sempre mostrados.

**Nota:** Em um aplicativo de busca real, você seria, provavelmente, habilitado a clicar nos termos anteriores para retornar às pesquisas, e isto iria mostrar o reusltado atual! Nós estamos só mantendo simples, por agora.

Para completar o aplicativo, nós precisamos que você:

1. Adicione uma linha abaixo do comentário `// number 1` que adicione o valor digitado atual na busca ao começo da array. Isto pode ser recuperado usando `searchInput.value`.
2. Adicione uma linha abaixo do comentário `// number 2` que remova o último valor no fim da array.
```

<h2>Live output</h2>
<div class="output" style="min-height: 150px;">
  <input type="text" /><button>Search</button>

  <ul></ul>
</div>

<h2>Editable code</h2>

<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="playable-code" style="height: 370px; width: 95%">
var list = document.querySelector('.output ul');
var searchInput = document.querySelector('.output input');
var searchBtn = document.querySelector('.output button');

list.innerHTML = '';

var myHistory = [];

searchBtn.onclick = function() {
  // we will only allow a term to be entered if the search input isn't empty
  if (searchInput.value !== '') {
    // number 1

    // empty the list so that we don't display duplicate entries
    // the display is regenerated every time a search term is entered.
    list.innerHTML = '';

    // loop through the array, and display all the search terms in the list
    for (var i = 0; i < myHistory.length; i++) {
      itemText = myHistory[i];
      var listItem = document.createElement('li');
      listItem.textContent = itemText;
      list.appendChild(listItem);
    }

    // If the array length is 5 or more, remove the oldest search term
    if (myHistory.length >= 5) {
      // number 2

    }

    // empty the search input and focus it, ready for the next term to be entered
    searchInput.value = '';
    searchInput.focus();
  }
}
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var solution = document.getElementById("solution");
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

var jsSolution =
  "var list = document.querySelector('.output ul');\nvar searchInput = document.querySelector('.output input');\nvar searchBtn = document.querySelector('.output button');\n\nlist.innerHTML = '';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== '') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = '';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement('li');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = '';\n searchInput.focus();\n }\n}";
var solutionEntry = jsSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = textarea.value.substring(0, caretPos);
  var back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function () {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

Conclusão
---------

Depois de ler este artigo, nós temos certeza que você concordará que arrays parecem muito úteis; você verá elas surgirem em todo lugar em JavaScript, frequentemente associadas com laços para fazer a mesma coisa para cada item de uma array. Nós estaremos ensinando a você todo o básico que há para saber sobre laços no próximo módulo, mas por agora você deve se dar uma palmada de incentivo e dar uma bem merecida parada; você trabalhou durante todo os artigos neste módulo!

A única coisa que resta a fazer é trabalhar na avaliação deste módulo, a qual vai testar seu entendimento dos artigos anteriores a este.

Veja também
-----------

* Coleções indexadas — um guia avançado guia de arrays e seus primos, *typed arrays*.
* `Array` — a página de referência `Array` — para um guia de referência detalhado para as funcionalidades discutidas nesta página e muito mais.
* Anterior
* Menu: First steps
* Próxima


Teste suas habilidades: variáveis - Aprendendo desenvolvimento web

Teste suas habilidades: variáveis
=================================

O objetivo deste teste de habilidade é avaliar se você entendeu nosso artigo Armazenando as informações que você precisa — Variáveis.

**Nota:** Você pode experimentar soluções nos editores interativos abaixo. No entanto, pode ser útil fazer o download do código e usar uma ferramenta on-line como CodePen, jsFiddle, ou Glitch para realizar as tarefas.

Se você travar, peça ajuda — veja a seção Assessment or further help na parte inferior desta página.

**Nota:** Nos exemplos abaixo, se houver um erro no seu código, ele será exibido no painel de resultados da página, para ajudá-lo a tentar descobrir a resposta (ou no console JavaScript do navegador, no caso da versão para download).

Variáveis 1
-----------

Nesta tarefa, queremos que você:

* Declare uma variável chamada `myName`.
* Inicialize `myName` com um valor adequado, em uma linha separada (você pode usar seu nome real ou qualquer outra coisa).
* Declare uma variável chamada `myAge` e inicialize-a com um valor, na mesma linha.

Tente atualizar o código ativo abaixo para recriar o exemplo final:

**Nota:** Faça o download do ponto de partida para esta tarefa funcionar em seu próprio editor ou em um editor online.

Variáveis 2
-----------

Nesta tarefa, você precisa adicionar uma nova linha para corrigir o valor armazenado na variável `myName` existente para seu próprio nome.

Tente atualizar o código ativo abaixo para recriar o exemplo final:

**Nota:** Faça o download do ponto de partida para esta tarefa funcionar em seu próprio editor ou em um editor online.

Variáveis 3
-----------

A tarefa final por enquanto — neste caso, você recebe um código existente, que possui dois erros. O painel de resultados deve exibir o nome `Chris`, e uma declaração sobre quantos anos Chris terá daqui a 20 anos. Como você pode corrigir o problema e corrigir a saída?

Tente atualizar o código ativo abaixo para recriar o exemplo final:

**Nota:** Faça o download do ponto de partida para esta tarefa funcionar em seu próprio editor ou em um editor online.

Avaliação ou ajuda adicional
----------------------------

Você pode praticar esses exemplos nos editores interativos acima.

Se você gostaria que seu trabalho fosse avaliado, ou está travado e quer pedir ajuda:

1. Coloque seu trabalho em um editor compartilhável on-line, como CodePen, jsFiddle, ou Glitch. Você pode escrever o código você mesmo ou usar os arquivos de ponto de partida vinculados nas seções acima.
2. Escreva um post pedindo avaliação e/ou ajuda na categoria MDN Discourse forum Learning. Seu post deve incluir:
    * Um título descritivo como "Avaliação desejada para o teste de habilidade Variáveis 1".
    * Detalhes do que você já tentou e o que gostaria que fizéssemos. Por exemplo, se você está travado e precisa de ajuda ou deseja uma avaliação.
    * Um link para o exemplo que você deseja que seja avaliado ou precisa de ajuda, em um editor compartilhável online (conforme mencionado na etapa 1 acima). Esta é uma boa prática para entrar - é muito difícil ajudar alguém com um problema de codificação se você não conseguir ver o código.
    * Um link para a página real de tarefas ou avaliações, para que possamos encontrar a pergunta com a qual você deseja ajuda.


HTML: Boas práticas em acessibilidade - Aprendendo desenvolvimento web

HTML: Boas práticas em acessibilidade
=====================================

* Anterior  (en-US)
* Menu: Accessibility
* Próxima  (en-US)

Uma grande parte do conteúdo presente na internet pode se tornar acessível apenas com a utilização correta dos elementos HTML. Esse artigo mostra em detalhes como o HTML pode ser utilizado para garantir o máximo de acessibilidade.

|  |  |
| --- | --- |
| Pré-requsitos: |
 Conceitos básicos de computadores, entendimento básico de HTML (veja
 Introdução ao HTML), e entendimento do
 que é acessibilidade (en-US).
  |
| Objetivos: |
 Ganhar familiaridade com os elementos do HTML que trabalham a favor da
 acessibilidade e utilizá-los de forma apropriada nos seus documentos
 da web.
  |

HTML e acessibilidade
---------------------

Na medida que se aprende mais sobre HTML — lendo sobre recursos, observando exemplos, etc. — é normal se deparar com um assunto: a importância de se utilizar a semântica HTML (as vezes chamada de POSH, ou *Plain Old Semantic HTML*). Esse assunto significa utilizar corretamente os elementos HTML, cada qual com seu propósito, o máximo que for possível.

Você deve estar se perguntando porque isso é tão importante. Afinal, é possível usar uma combinação de CSS e JavaScript que faz com que qualquer elemento HTML se comporte da forma que você quiser. Por exemplo, um botão para dar play em um vídeo no seu site pode ser criado dessa forma:

```html
<div>Play vídeo</div>
```

Mas como você com mais detalhes a seguir, faz muito mais sentido utilizar o elemento correto para essa finalidade:

```html
<button>Play vídeo</button>
```

O elemento `<button>` possui vários estilos já aplicados nele mesmo por padrão (o que você provavelmente vai querer sobrescrever), ele já é embutido com padrões de acessibilidade pelo teclado — botões podem ser navegados através da tecla tab do teclado, e ativados utilizando a tecla Enter / Return.

A semântica do HTML não demora mais para escrever do que a versão não-semântica (ruim) se você escrevê-la consistentemente desde o começo do seu projeto. Existem também outros benefícios de utilizá-la, além da acessibilidade:

1. **Mais fácil de ser desenvolvida** — como mencionado acima, você consegue algumas funcionalidades por padrão, também torna o código mais fácil de ser lido e entendido.
2. **Melhor nos dispositivos móveis** — HTML semântico é mais leve que o código não-semântico (aquele código espaguete) em comparação de tamanho de arquivos, também é mais fácil de ser adaptado ao responsivo.
3. **Bom para o SEO** — mecanismos de busca dão mais importância para palavras-chave que são incluidas em títulos, links, etc. do que para palavras-chave incluídas em `<div>`s não semânticas, etc. Então suas páginas serão mais fáceis de serem encontradas pelos seus clientes.

Então vamos dar uma olhada em como fazer o HTML mais acessível.

**Nota:** É uma boa ideia ter um leitor de tela instalado no seu computador, dessa forma é possível testar os exemplos que serão mostrados abaixo. Veja o nosso Guia de Leitores de Tela (en-US) para mais detalhes.

Boa semântica
-------------

Nós já falamos sobre a importância da boa semântica e porque precisamos utilizar os elementos HTML adequados para cada finalidade. Isso não pode ser ignorado, e é uma das grandes áreas onde a acessibilidade pode ser completamente quebrada se não feito de forma correta.

Em toda a web, é verdade que as pessoas fazem coisas bem estranhas utilizando o HTML. Alguns abusos do HTML são resultado de práticas antigas que ainda não foram completamente esquecidas, e outros são só simples ignorância das boas práticas. Em qualquer um desses casos, é necessário a substituição de códigos ruins por códigos bons, em qualquer local que forem encontrados, se possível.

As vezes você não terá em mãos o poder de jogar fora o código ruim — suas páginas web podem ter sido geradas por algum framework que você não possui controle total, ou você pode ter algum conteúdo de terceiros na sua página (como banners de publicidade) que você não tem controle sobre.

O objetivo aqui não é "tudo ou nada", contudo — qualquer melhoria que você for capaz de fazer irá ajudar a causa da acessibilidade.

### Conteúdo textual

Uma das melhores formas de ajudar um leitor de tela a interpretar sua página é criar uma boa e consistente estrutura de títulos, parágrafos, listas, etc. Um exemplo de boa semântica vai ser parecido com o a seguir:

```html
<h1>Meu título</h1>

<p>Essa é a primeira sessão do meu documento.</p>

<p>Eu vou adicionar outro parágrafo aqui também.</p>

<ol>
  <li>Aqui é</li>
  <li>uma lista para</li>
  <li>você ler</li>
</ol>

<h2>Meu sub-título</h2>

<p>
  Essa é a primeira sub sessão do meu documento. Eu adoro quando as pessoas
  conseguem encontrar meu conteúdo!
</p>

<h2>Meu segundo sub-título</h2>

<p>
  Essa é a primeira sub sessão do meu documento. Eu acho que essa é mais
  interessante que a última.
</p>
```

Nós preparamos uma versão com o texto mais longo para que você tente utilizar um leitor de tela (veja good-semantics.html). Se você tentar navegar dentro do documento, vai perceber que é bem fácil:

1. O leitor de tela lê cada título a medida que você progride pelo conteúdo, notificando ao usuário o que é um título, o que é um parágrafo, etc.
2. Ele para depois de cada elemento, deixando você ir na velocidade em que é mais confortável.
3. Você pode pular para o título mais próximo/anterior em muitos leitores de tela.
4. Você também pode fazer uma lista com todos os títulos em muitos leitores de tela, possibilitando a navegação em um sumário para encontrar conteúdos específicos.

As pessoas ás vezes escrevem títulos, parágrafos, etc. utilizando HTML para vizualização e quebras de linha, ás vezes como o seguinte:

```html
<font size="7">Meu título</font> <br /><br />
Essa é a primeira sessão do meu documento.
<br /><br />
Eu vou adicionar outro parágrafo aqui também.
<br /><br />
1. Aqui é
<br /><br />
2. uma lista para
<br /><br />
3. você ler.
<br /><br />
<font size="5">Meu sub-título</font>
<br /><br />
Essa é a primeira sub sessão do meu documento. Eu adoro quando as pessoas
conseguem encontrar meu conteúdo!
<br /><br />
<font size="5">Meu segundo sub-título</font>
<br /><br />
Essa é a primeira sub sessão do meu documento. Eu acho que essa é mais
interessante que a última.
```

Se você tentar utilizar um leitor de tela na nossa versão mais longa (ver bad-semantics.html), você não terá uma boa experiência — o leitor de tela não encontrará nenhuma sinalização, então você não terá acesso ao conteúdo. A página inteira vai parecer como um único bloco gigante, então será lida de uma vez só, ao mesmo tempo.

Existem também outros problemas além da acessibilidade — é mais difícil estilizar o seu conteúdo com CSS, ou manipulá-lo com JavaScript porque não há elementos para serem utilizados como seletores.

#### Usando linguagem clara

A linguagem que você usa também pode afetar a acessibilidade. No geral, você deve utilizar uma linguagem clara, que não é exageradamente complexa, e que não use jargões ou gírias desnecessárias. Isso não traz somente benefícios para pessoas com deficiência cognitiva, mas também beneficia pessoas que não estão lendo em sua primeira língua, jovens leitores... todo mundo, de fato! Tirando isso, você deve tentar evitar uma linguagem ou caracteres que não podem ser lidos ou entendidos bem por um leitor de tela. Por exemplo:

* Não utilize traços se você pode evitá-los. Ao invés de escrever 5-7, escreva 5 a 7.
* Expanda as abreviações — ao invés de escrever Jan, escreva Janeiro.
* Expanda os acrônimos, pelo menos uma ou duaz vezes. Ao invés de escrever direto HTML, escreva *Hypertext Markup Language*, ou HTML.
### Layouts de páginas

Antigamente, nos dias velhos e ruins, as pessoas costumavam criar layouts para páginas utilizando tabelas HTML — usando as células da tabela para se comportarem como cabeçalho, rodapé, barra lateral, coluna de conteúdo, etc. Essa não é uma boa ideia porque um leitor de tela provavelmente irá retornar umas leituras um pouco confusas, especialmente se o layout é complexo e possui várias tabelas aninhadas dentro das células.

Tente ler o nosso exemplo table-layout.html, que se parece com algo assim:

```html
<table width="1200">
  <!-- linha do título principal -->
  <tr id="titulo">
    <td colspan="6">
      <h1 align="center">Cabeçalho</h1>
    </td>
  </tr>
  <!-- linha do menu de navegação -->
  <tr id="nav" bgcolor="#ffffff">
    <td width="200">
      <a href="#" align="center">Home</a>
    </td>
    <td width="200">
      <a href="#" align="center">Nossa equipe</a>
    </td>
    <td width="200">
      <a href="#" align="center">Projetos</a>
    </td>
    <td width="200">
      <a href="#" align="center">Contato</a>
    </td>
    <td width="300">
      <form width="300">
        <input
 type="pesquisa"
 name="q"
 placeholder="Pesquisar..."
 width="300" />
      </form>
    </td>
    <td width="100">
      <button width="100">Ir!</button>
    </td>
  </tr>
  <!-- linha de espaçamento -->
  <tr id="espacamento" height="10">
    <td></td>
  </tr>
  <!-- linha do conteúdo principal -->
  <tr id="main">
    <td id="content" colspan="4" bgcolor="#ffffff">
      <!-- conteudo vem aqui -->
    </td>
    <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
      <h2>Related</h2>

      <!-- Outro conteúdo vem aqui -->
    </td>
  </tr>
  <!-- linha de espaçamento -->
  <tr id="spacer" height="10">
    <td></td>
  </tr>
  <!-- linha do rodapé -->
  <tr id="footer" bgcolor="#ffffff">
    <td colspan="6">
      <p>©Copyright 2050 por ninguém. Todos os direitos reservados.</p>
    </td>
  </tr>
</table>
```

Se você tentar navegar por esse código utilizando um leitor de texto, provavelmente ele vai te dizer que existe uma tabela que pode ser reconhecida (mesmo que alguns leitores de tela consigam diferenciar entre layouts de tabelas e o conteúdos das tabelas). Você provavelmente (dependendo de qual leitor de tela que está utilizando) terá que entrar na tabela como um objeto e ler as suas características separadamente, para depois precisar sair da tabela novamente e continuar navegando pelo conteúdo.

Layouts feitos com tabela são uma relíquia do passado — fazia sentido utilizá-las lá atrás quando o suporte do CSS não era difundido pelos navegadores, mas esses layouts de tabela criam confusão para os usuários de leitor de tela, além de serem ruins por outros motivos (abuso de tabelas indiscutivelmente precisa de mais marcação e torna o design menos flexível). Não faça dessa forma!

Você pode verificar essas reivindicações ao comparar a última experiência com um exemplo de estrutura de website mais moderna, o que pode se parecer com algo assim:

```html
<header>
  <h1>Cabeçalho</h1>
</header>

<nav>
  <!-- Navegação principal aqui -->
</nav>

<!-- Aqui é o conteúdo principal da página -->
<main>
  <!-- Que contém um artigo -->
  <article>
    <h2>Título do artigo</h2>

    <!-- Conteúdo do artigo aqui -->
  </article>

  <aside>
    <h2>Relacionados</h2>

    <!-- Conteúdo a parte aqui -->
  </aside>
</main>

<!-- E aqui é um rodapé utilizado em todas as páginas do nosso site -->

<footer>
  <!-- Conteúdo do rodapé aqui -->
</footer>
```

Se você experimentar ler esse exemplo de estrutura mais moderna com um leitor de tela, você vai perceber que o layout feito por marcação não atrapalha na hora de retornar o conteúdo do site. Também é muito mais limpo e pequeno em termos de tamanho de código, o que significa um código mais fácil de se dar manutenção e menos uso de banda para o usuário fazer o download (particularmente prevalente para as pessoas com conexão lenta).

Outra consideração que pode ser feita é criar layouts utilizando a semântica HTML5 nos elementos, como visto no exemplo (veja content sectioning) — você pode criar um layout utilizando apenas elementos aninhados `<div>`, mas é melhor e mais apropriado seccionar elementos de uma forma que eles envelopem a navegação principal (`<nav>`), rodapé(`<footer>`), unidades de conteúdo repetidas(`<article>`), etc. Eles trazem semânticas extras para os leitores de tela(e outras ferramentas) para dar aos usuários mais dicas sobre o conteúdo no qual eles estão navegando (veja Screen Reader Support for new HTML5 Section Elements para uma ideia do que é suporte de leitor de tela).

**Nota:** Ao mesmo tempo que seu conteúdo deve ter boa semântica e um layout bonito, deve-se fazer sentido que em sua ordem de fonte — você poderá sempre movimentá-la utilizando CSS depois, mas você deve colocar a ordem de fonte de forma correta desde o começo, para que os usuários que utilizam de leitores de tela possam receber uma leitura que faz sentido.

### Controles de UI

Por controles de UI, o que nós queremos dizer é as partes dos documentos web que os usuários interagem com — mais comumente botões, links, e formulários. Nessa seção nós daremos uma olhada em princípios da acessibilidade que deverão ser analisados com cuidado ao criar esses controles de UI. Os artigos mais recentes do WAI-ARIA e multimedia irão olhar para outros aspectos da acessibilidade de UIs.

Um aspecto chave da acessibilidade de controles Ui é que, por padrão, os navegadores premitem que esses controles sejam acessados pelo teclado. Você pode experimentar isso utilizando o nosso exemplo native-keyboard-accessibility.html (ver o código-fonte) — abra em uma nova aba e experimente apertar a tecla tab; depois de algumas tecladas, você irá ver o foco da aba se mover entre diferentes elementos que podem ser focados; os elementos focados são dados um estilo de destaque em todos os navegadores (muda levemente entre diferentes navegadores) dessa forma você pode dizer qual elemento está em foco.

![](/pt-BR/docs/Learn/Accessibility/HTML/button-focused-unfocused.png)

Você pode apertar Enter/Return para seguir um link que está focado ou apertar um botão (nós incluimos um pouco de JavaScript para fazer os botões chamarem uma mensagem), ou começar a escrever para inserir um texto em um formulário de texto (outros elementos possuem controles diferentes, por exemplo o elemento `<select>` pode ter suas opções visíveis e selecionáveis utilizando as teclas de flecha para cima e para baixo.

**Nota:** Navegadores diferentes podem ter mais opções de controle pelo teclado. Veja Using native keyboard accessibility (en-US) para mais detalhes.

Você essencialmente consegue esse comportamento de graça, só ao utilizar os elementos apropriados, ex.

```html
<h1>Links</h1>

<p>Esse é um link para <a href="https://www.mozilla.org">Mozilla</a>.</p>

<p>
  Outro link, para
  <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.
</p>

<h2>Botões</h2>

<p>
  <button data-message="Esse é do primeiro botão">Clique em mim!</button>
  <button data-message="Esse é do segundo botão">Clique em mim também!</button>
  <button data-message="Esse é do terceiro botão">E em mim!</button>
</p>

<h2>Formulário</h2>

<form>
  <div>
    <label for="name">Preencha com seu nome:</label>
    <input type="text" id="name" name="name" />
  </div>
  <div>
    <label for="age">Preencha com a sua idade:</label>
    <input type="text" id="age" name="age" />
  </div>
  <div>
    <label for="mood">Escolha o seu humor:</label>
    <select id="mood" name="mood">
      <option>Feliz</option>
      <option>Triste</option>
      <option>Bravo</option>
      <option>Preocupado</option>
    </select>
  </div>
</form>
```

Isso significa que utilizar links, botões, elementos de formulário e rótulos adequadamente (incluindo o elemento `<label>` para controles de formulário).

Contudo, novamente é o caso onde as pessoas ás vezes fazem coisas estranhas utilizando o HTML. Por exemplo, você pode se deparar com botões escritos utilizando o elemento `<div>`, como a seguir:

```html
<div data-message="Esse é do primeiro botão">Clique em mim!</div>
<div data-message="Esse é do segundo botão">Clique em mim também!</div>
<div data-message="Esse é do terceiro botão">E em mim!</div>
```

Mas usar esse código não é recomendado - você perde imediatamente a acessibilidade do teclado que você teria se tivesse usado apenas elementos `<button>`, além de não obter nenhum estilo padrão de CSS.

#### Aplicando de volta a acessibilidade do teclado

Adicionar tais vantagens de volta leva um pouco de trabalho (você pode ver um exemplo de código no nosso exemplo fake-div-buttons.html - e também pode ver o source code). Aqui nós acrescentamos aos nossos falsos botões `<div>` a capacidade de serem focados (inclusive via tab) dando a cada um o atributo `tabindex="0"`:

```html
<div data-message="Esse é do primeiro botão" tabindex="0">Clique em mim!</div>
<div data-message="Esse é do segundo botão" tabindex="0">
  Clique em mim também!
</div>
<div data-message="Esse é do terceiro botão" tabindex="0">E em mim!</div>
```

Basicamente, o atributo `tabindex` destina-se principalmente a permitir que elementos tabulares tenham uma ordem de tabulação personalizada (especificada em ordem numérica positiva), em vez de apenas serem tabulados em sua ordem de origem padrão. Isso é quase sempre uma má ideia, pois pode causar grandes confusões. Use-o somente se você realmente precisar, por exemplo, se o layout mostrar coisas em uma ordem visual muito diferente do código-fonte, e você quiser fazer as coisas funcionarem mais logicamente. Existem duas outras opções para `tabindex`:

* `tabindex="0"` — conforme indicado acima, esse valor permite que elementos que normalmente não podem ser tabulados se tornem tabeláveis. Este é o valor mais útil do `tabindex`.
* `tabindex="-1"` — isso permite que elementos normalmente não tabuláveis recebam foco de maneira programática, por exemplo, via JavaScript, ou como alvo de links.

Embora a adição acima nos permita acessar os botões, ela não nos permite ativá-los através da tecla Enter/Return. Para fazer isso, temos que adicionar o seguinte truque de JavaScript:

```js
document.onkeydown = function (e) {
  if (e.keyCode === 13) {
    // The Enter/Return key
    document.activeElement.click();
  }
};
```

Aqui nós adicionamos um "ouvinte" (listener) ao objeto de documento (`document`) para detectar quando um botão foi pressionado no teclado. Verificamos qual botão foi pressionado por meio da propriedade `keyCode` (en-US) do objeto de evento; se for o código que corresponde a Enter/Return, executamos a função armazenada no manipulador `onclick` do botão usando `document.activeElement.click()`. `activeElement` nos dá o elemento que está atualmente focado na página.

Isso acrescenta um monte de problemas extras para construir a funcionalidade de volta. E não deveríamos ter outros problemas com isso. **É sempre melhor apenas usar o elemento certo.**

#### Rótulos de texto significativos

Os rótulos de texto de controle da interface do usuário são muito úteis para todos os usuários, mas deixá-los claros e simples é particularmente importante para usuários com deficiências.

Você deve certificar-se de que seus rótulos de texto de botão e link sejam compreensíveis e distintos. Não use apenas "Clique aqui" para seus rótulos, pois os usuários de leitores de tela podem utilizar atalhos para exibir/ouvir listas de botões e controles de formulários e não identificá-los adequadamente. A captura de tela a seguir mostra nossos controles sendo listados pelo VoiceOver no Mac.

![](/pt-BR/docs/Learn/Accessibility/HTML/voiceover-formcontrols.png)

Certifique-se de que seus rótulos fazem sentido fora de contexto, lidos individualmente e no contexto do parágrafo em que estão. Por exemplo, este seria um bom exemplo para link:

```html
<p>
  As baleias são criaturas realmente incríveis.
  <a href="whales.html">Saiba mais sobre baleias</a>.
</p>
```

Porém este, é um exemplo ruim para link:

```html
<p>
  As baleias são criaturas realmente incríveis. Para saber mais sobre baleias,
  <a href="whales.html">clique aqui</a>.
</p>
```

**Nota:** Você pode encontrar muito mais sobre implementação de link e melhores práticas no artigo Criando hyperlinks. Você também pode ver alguns bons e maus exemplos em good-links.html e bad-links.html.

Os rótulos de formulário (labels) também são importantes para dar a você uma ideia sobre o que precisa ser preenchido em cada entrada de formulário. O seguinte exemplo aparentemente é bem razoável:

```html
Preencha seu nome: <input type="text" id="nome" name="nome" />
```

Entretanto, esse exemplo não é tão útil para usuários com deficiência. Não há nada para associar o rótulo de forma não ambígua à entrada do formulário e deixar claro como preenchê-lo, se você não puder vê-lo. Se você acessar esse item usando um leitor de tela, só irá ouvir uma descrição genérica "editar texto" sem associar corretamente qual o tipo de texto a ser editado.

Já o exemplo a seguir, é bem melhor:

```html
<div>
  <label for="nome">Preencha seu nome:</label>
  <input type="text" id="nome" name="nome" />
</div>
```

Com o código assim, o rótulo será claramente associado à entrada; a descrição será algo como "Preencha seu nome: editar texto".

![](/pt-BR/docs/Learn/Accessibility/HTML/voiceover-good-form-label.png)

Como um bônus adicional, na maioria dos navegadores a associação de um rótulo a uma entrada de formulário significa que você pode clicar no rótulo para selecionar/ativar o elemento de formulário. Isso consequentemente aumenta o tamanho da área clicável dos elementos, facilitando assim a seleção.

**Nota:** Você pode ver alguns bons e maus exemplos de formulários em good-form.html e bad-form.html.

Tabelas de dados acessíveis
---------------------------

Uma tabela básica de dados pode ser escrita com uma marcação muito simples, como neste exemplo:

```html
<table>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>Gender</td>
  </tr>
  <tr>
    <td>Gabriel</td>
    <td>13</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Elva</td>
    <td>8</td>
    <td>Female</td>
  </tr>
  <tr>
    <td>Freida</td>
    <td>5</td>
    <td>Female</td>
  </tr>
</table>
```

Mas essa tabela possui alguns problemas - não há como um usuário de leitor de telas associar linhas ou colunas como agrupamentos de dados. Para fazer isso, você precisa saber quais são as linhas de cabeçalho e se elas estão direcionando linhas, colunas etc. Isso só pode ser feito visualmente para a tabela acima (veja o exemplo bad-table.html e tente navegar pela tabela você mesmo).

Agora dê uma olhada no exemplo da nossa tabela de bandas punk - você pode ver alguns recursos de acessibilidade aqui:

* Os cabeçalhos de tabela são definidos usando elementos `<th>` - você também pode especificar se eles são cabeçalhos de linhas ou colunas usando o atributo `scope`. Isso fornece grupos completos de dados que podem ser consumidos pelos leitores de tela como unidades únicas.
* O elemento `<caption>` e o atributo de resumo (`<table>` `summary`) executam tarefas semelhantes - eles funcionam como texto alternativo para uma tabela, fornecendo ao usuário de leitor de telas um resumo rápido e útil do conteúdo da tabela. `<caption>` é geralmente mais adequado, pois torna o seu conteúdo acessível para os usuários com visão também, que também poderão achar isso útil. Você não precisa ter os dois.

**Nota:** Consulte nossos artigos sobre Recursos avançados de acessibilidade para tabelas em HTML (en-US) para obter mais detalhes sobre tabelas de dados acessíveis.

Alternativas em textos
----------------------

Considerando que o conteúdo textual é inerentemente acessível, o mesmo não pode necessariamente ser dito para conteúdo multimídia - conteúdo de imagem / vídeo não pode ser visto por pessoas com deficiência visual, e conteúdo de áudio não pode ser ouvido por pessoas com deficiência auditiva. Abordaremos o conteúdo de vídeo e áudio em detalhes no artigo sobre multimídia acessível mais adiante, mas para este artigo veremos a acessibilidade para o elemento `<img>`.

Temos um exemplo simples escrito, accessible-image.html, que apresenta quatro cópias da mesma imagem:
```

<img src="dinosaur.png">

<img src="dinosaur.png"
     alt="Um tiranossauro Rex vermelho: Um dinossauro de duas patas em pé como um humano, com braços pequenos e uma cabeça grande com muitos dentes afiados.">

<img src="dinosaur.png"
     alt="Um tiranossauro Rex vermelho: Um dinossauro de duas patas em pé como um humano, com braços pequenos e uma cabeça grande com muitos dentes afiados."
     title="O dinossauro vermelho da Mozilla.">

<img src="dinosaur.png" aria-labelledby="dino-label">

<p id="dino-label">O Tiranossauro Rex: um dinossauro de duas patas de pé como um humano, com braços pequenos e uma cabeça grande com muitos dentes afiados.</p>
```

A primeira imagem, quando visualizada por um leitor de tela, não oferece muita ajuda ao usuário - o VoiceOver, por exemplo, lê "/dinosaur.png, image". Ele lê o nome do arquivo para tentar fornecer alguma ajuda. Neste exemplo, o usuário pelo menos saberá que é um tipo de dinossauro, mas muitas vezes os arquivos podem ser carregados com nomes de arquivos gerados por máquina (por exemplo, de uma câmera digital) e esses nomes provavelmente não fornecem nenhum contexto ao conteúdo da imagem.

**Nota:** É por isso que você nunca deve incluir conteúdo de texto dentro de uma imagem - os leitores de tela simplesmente não podem acessá-lo. Existem outras desvantagens também - você não pode selecioná-lo e copiá-lo/colá-lo. Apenas não faça isso!

Quando um leitor de tela encontra a segunda imagem, ele lê todo o atributo `alt` - "Um tiranossauro Rex vermelho: Um dinossauro de duas patas em pé como um humano, com braços pequenos e uma cabeça grande com muitos dentes afiados".

Isso destaca a importância de não apenas usar nomes de arquivos significativos, caso o **texto alternativo** não esteja disponível, mas também garantir que o texto alternativo seja fornecido em atributos `alt` sempre que possível. Observe que o conteúdo do atributo `alt` sempre deve fornecer uma representação direta da imagem e o que ela transmite visualmente. Qualquer conhecimento pessoal ou descrição extra não deve ser incluído aqui, já que não é útil para pessoas que não se depararam com a imagem antes.

Uma coisa a considerar é se as imagens possuem algum significado dentro de seu conteúdo ou se elas são puramente decorativas. Se eles são decorativas, é melhor apenas incluí-las na página como imagens de fundo através de CSS.

**Nota:** Leia Imagens em HTML e Imagens Responsivas para obter mais informações sobre a implementação de imagens e melhores práticas.

Se você quiser fornecer informações contextuais extras, deverá colocá-las no texto ao redor da imagem ou dentro de um atributo de título (`title`), como mostrado acima. Nesse caso, a maioria dos leitores de tela lerá o texto alternativo, o atributo de título e o nome do arquivo. Além disso, os navegadores exibem o texto do título como dicas de ferramentas quando estão sobre o mouse.

![](/pt-BR/docs/Learn/Accessibility/HTML/title-attribute.png)

Vamos dar uma olhada rápida no quarto método:

```html
<img src="dinosaur.png" aria-labelledby="dino-label" />

<p id="dino-label">O dinossauro vermelho da Mozilla.</p>
```

Nesse caso, não estamos usando o atributo `alt` - em vez disso, apresentamos nossa descrição da imagem como um parágrafo de texto regular, atribuímos um `id` e, em seguida, usamos o atributo `aria-labelledby` para nos referirmos a esse `id`, que faz com que os leitores de tela usem esse parágrafo como o texto/rótulo alternativo para essa imagem. Isso é especialmente útil se você quiser usar o mesmo texto como um rótulo para várias imagens - algo que não é possível com `alt`.

**Nota:** `aria-labelledby` é parte da especificação WAI-ARIA, que permite aos desenvolvedores adicionar uma semântica extra à sua marcação para melhorar a acessibilidade do leitor de tela quando necessário. Para saber mais sobre como funciona, leia nosso artigo básico sobre WAI-ARIA (en-US).

### Outros mecanismos alternativos de textos

Imagens também têm outros mecanismos disponíveis para fornecer texto descritivo. Por exemplo, há um atributo `longdesc` que serve para apontar para um documento da Web separado contendo uma descrição estendida da imagem:

```html
<img src="dinosaur.png" longdesc="dino-info.html" />
```

Isso aparentemente é uma boa ideia, especialmente para infográficos ou gráficos com muitas informações, que talvez possam ser representados como uma tabela de dados acessível (consulte a seção anterior). No entanto, o `longdesc` não é suportado de forma consistente pelos leitores de tela e o conteúdo é completamente inacessível para usuários que não usam leitores de tela. É sem dúvida muito melhor incluir a descrição longa na mesma página que a imagem ou vinculá-la a um link comum.

O HTML5 inclui dois novos elementos - `<figure>` e `<figcaption>` - que devem associar uma figura de algum tipo (pode ser qualquer coisa, não necessariamente uma imagem) com uma legenda de figura:

```html
<figure>
  <img src="dinosaur.png" alt="O dinossauro da Mozilla." />
  <figcaption>
    Um tiranossauro Rex vermelho: Um dinossauro de duas patas em pé como um
    humano, com braços pequenos e uma cabeça grande com muitos dentes afiados.
  </figcaption>
</figure>
```

Infelizmente, a maioria dos leitores de tela parece não associar ainda as legendas utilizando o elemento "figure" às respectivas imagens, mas a estrutura do elemento é útil para o estilo CSS, além de fornecer uma maneira de inserir uma descrição da imagem.

### Atributos "alt" vazios

```html
<h3>
  <img src="article-icon.png" alt="" />
  Tiranossauro Rex: O Rei dos dinossauros.
</h3>
```

Pode haver momentos em que uma imagem é incluída no design de uma página, mas seu objetivo principal é a decoração visual. Você notará no exemplo de código acima que o atributo `alt` da imagem está vazio - isso é para fazer com que os leitores de tela reconheçam a imagem, mas não tentem descrever a imagem (em vez disso, dizem apenas "imagem" ou similar).

A razão para usar um `alt` vazio ao invés de não incluí-lo é porque muitos leitores de tela anunciam o URL da imagem inteira se nenhum `alt` for fornecido. No exemplo acima, a imagem está agindo como uma decoração visual para o título ao qual está associada. Em casos como esse, e nos casos em que uma imagem é apenas decoração e não tem valor de conteúdo, você deve colocar um `alt` vazio em suas imagens. Outra alternativa é usar o atributo ARIA role (role="presentation") - isso também impede que os leitores de telas leiam textos alternativos.

**Nota:** se possível, você deve usar CSS para exibir imagens que são apenas decorativas.

Resumo
------

Agora você deve estar familiarizado com a escrita de HTML acessível para a maioria das ocasiões. Nosso artigo básico do WAI-ARIA também preencherá algumas lacunas nesse conhecimento, mas este artigo cuidou do básico. Em seguida, exploraremos CSS e JavaScript e como a acessibilidade é afetada por seu uso bom ou ruim.

* Anterior  (en-US)
* Menu: Accessibility
* Próxima  (en-US)


Avaliação: solucionando problemas de acessibilidade - Aprendendo desenvolvimento web

Avaliação: solucionando problemas de acessibilidade
===================================================

* Anterior  (en-US)
* Menu: Accessibility

Na avaliação deste módulo, apresentamos a você um site simples com vários problemas de acessibilidade que você precisa diagnosticar e corrigir.

|  |  |
| --- | --- |
| Pré-requisitos: |
 Conhecimento básico de informática, entendimento básico de HTML, CSS e
 Javascript, uma compreesão dos
 artigos anteriores deste curso.
  |
| Objetivo: | Testar conhecimentos básicos e fundamentais para a acessibilidade. |

Ponto de partida
----------------

Para começar esta avaliação, você deve pegar o arquivo ZIP que contém os arquivos que compõem o exemplo. Descompacte o conteúdo em um novo diretório em algum lugar de seu computador.

O site de avaliação final, deve ser parecido com esse:

![](/pt-BR/docs/Learn/Accessibility/Accessibility_troubleshooting/assessment-site-finished.png)

Você verá algumas diferenças e/ou problemas com a exibição do estado inicial do site da avaliação - isso se deve principalmente as diferenças na marcação de código, o que, por sua vez, causa alguns problemas de estilo, pois o CSS não está aplicado corretamente. Não se preocupe - você irá corrigir esses problemas nas próximas seções!

Resumo do projeto
-----------------

Para este projeto, você é apresentado a um site fictício exibindo um artigo sobre ursos. Da forma como ele está, possui vários problemas de acessibilidade - a sua tarefa é explorar o site existente e corrigí-los da melhor forma possível, respondendo as seguintes perguntas.

### Cor

O texto é difícil de ler devido ao esquema de cores atual. Você pode fazer um teste do contraste de cor atual (texto/plano de fundo), relatar os resultados do teste e corrigí-lo alterando as cores atribuídas?

### HTML semântico

1. O conteúdo ainda não é muito acessível - relate o que acontece quando você tenta navegar utilizando um leitor de telas.
2. Você consegue atualizar o texto do artigo para facilitar a navegação de usuários de leitores de telas?
3. A parte do menu de navegação do site (agrupada em `<div class="nav"></div>`) poderia estar mais acessível se estivesse dentro de um elemento semântico de HTML5 mais adequado. Qual elemento deve ser utilizado? Atualize-o.

**Nota:** Você precisará atualizar os seletores de CSS que estilizam as respectivas tags para seus equivalentes aos cabeçalhos semânticos. Depois de adicionar elementos de parágrafo, você perceberá que a estilização parecerá bem melhor.

### As imagens

As imagens estão atualmente inacessíveis para os usuários do leitor de tela. Você pode consertar isso?

### O "player" de áudio

1. Foi utilizada o elemento `<audio>` para exibir o "player", porém ele não é acessível para pessoas com deficiência auditiva (surdos) - você consegue adicionar algum tipo de alternativa acessível para esses usuários?
2. O elemento `<audio>` para utilizar o "player" não é acessível para aqueles que usam navegadores mais antigos que não suportam HTML5. Como você pode fazer com que esses usuários consigam ter acesso ao áudio?
### Os formulários

1. O elemento `<input>` no formulário de pesquisa no topo poderia ter um rótulo, mas não queremos adicionar um rótulo de texto visível que possa prejudicar o design e não seja realmente necessário para os usuários com visão. Como você pode adicionar um rótulo acessível apenas aos leitores de tela?
2. Os dois elementos `<input>` no formulário de comentários possui rótulos de texto visíveis, mas não estão associados corretamente entre eles. Como você poderia fazer isso? Note que você precisará atualizar algumas regras de CSS também.
### Os controles de comentários "exibir/ocultar"

O botão de controle "exibir/ocultar" não está acessível por teclado. Você pode torná-lo acessível, tanto em termos de deixá-lo "focável" através da utilização da tecla tab, como ativá-lo usando a tecla enter?

### A tabela

A tabela de dados não está muito acessível no momento - é difícil para os usuários de leitores de tela associarem linhas e colunas de dados juntas, e a tabela também não possui nenhum tipo de resumo para deixar claro o que mostra. Você pode adicionar alguns recursos ao seu HTML para corrigir esse problema?

### Outras considerações?

Você pode citar mais duas ideias de melhorias que poderiam tornar o site mais acessível?

Avaliação
---------

Se você está fazendo esta avaliação como parte de um curso, você deverá entregar o seu trabalho para um professor para que possa corrigí-lo. Se você é auto-didata, então você pode obter o guia com a marcação correta perguntando no tópico de discussão para este exercício, ou no canal de IRC #mdn no IRC do Mozilla. Experimente tentar fazer o exercício primeiro - você não ganhará nada trapaceando!

* Anterior  (en-US)
* Menu: Accessibility